:root {
    color-scheme: dark;
    font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #f4eee3;
    background: #111116;
    line-height: 1.5;
    font-weight: 400;
    --ink: #f4eee3;
    --muted: #b5a99f;
    --quiet: #827870;
    --panel: #17171de8;
    --panel-solid: #211f27;
    --line: #f4e6d633;
    --accent: #d5a88f;
    --accent-soft: #f0c9ae;
    --accent-ink: #241d20;
}

*, *::before, *::after { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; }
body { overflow: hidden; background: #111116; }
button, input, a { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
a { color: inherit; }
.text-button { border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.text-button:hover { color: var(--accent-soft); }
.eyebrow { margin: 0 0 1.1rem; color: #c4b6a0; font: 500 .67rem/1.2 "DM Mono", ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; }

/* Title screen */
.title-screen { position: relative; display: grid; place-items: center; height: 100%; min-height: 100vh; overflow: hidden; isolation: isolate; background: #17191f url("../assets/title/title-hero.png") center/cover no-repeat; }
.title-screen::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, #0f111bcc 0%, #13151e80 48%, #21171f99 100%); content: ""; }
.title-screen::after { position: absolute; inset: 55% 0 0; z-index: -1; background: linear-gradient(transparent, #111014 70%); content: ""; }
.title-grain { position: absolute; inset: -50%; z-index: 3; pointer-events: none; opacity: .08; transform: rotate(12deg); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.title-sky { display: none; }
.moon { position: absolute; top: 10%; right: 12%; width: 31vw; height: 31vw; min-width: 200px; min-height: 200px; max-width: 360px; max-height: 360px; border-radius: 50%; background: #e1d4bd; box-shadow: 0 0 70px #e9d7bd80; }
.moon::after { position: absolute; inset: -4%; border-radius: 50%; background: #17191f; content: ""; transform: translate(-22%, -10%); }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #f3e6d0; box-shadow: 0 0 8px 2px #f3e6d066; }
.star-one { top: 19%; left: 25%; } .star-two { top: 27%; left: 10%; } .star-three { top: 42%; right: 29%; }
.title-content { z-index: 4; width: min(90%, 720px); text-align: center; animation: rise .9s ease both; }
.title-content h1 { margin: 0; color: #f5eee4; font: 400 clamp(3.6rem, 10vw, 8.5rem)/.86 "Libre Baskerville", Georgia, serif; letter-spacing: -.07em; }
.title-content h1 span, .title-content h1 em { display: block; }
.title-content h1 em { margin-left: .18em; color: #c9a996; font-style: italic; }
.title-subtitle { margin: 2rem 0 3rem; color: #d2c6b8; font: 400 clamp(.85rem, 1.5vw, 1.05rem) "DM Mono", ui-monospace, monospace; letter-spacing: .08em; }
.title-actions { display: flex; justify-content: center; gap: .85rem; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 3.15rem; padding: .9rem 1.5rem; border: 1px solid transparent; border-radius: 3px; text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.button-primary { color: var(--accent-ink); background: var(--accent); box-shadow: 0 10px 30px #0a080b66; }
.button-primary:hover, .button-primary:focus-visible { background: #e4b9a0; transform: translateY(-2px); }
.button-quiet { color: #f1e9de; border-color: #f1e9de55; }
.button-quiet:hover, .button-quiet:focus-visible { border-color: #f1e9de; background: #fff1; }
.button-glyph { font-size: .7rem; } .button-arrow { font-size: 1.1rem; }
.title-hint { margin-top: 2.3rem; color: #c2b5aa; font-size: .72rem; }
.title-footer { position: absolute; right: 2rem; bottom: 1.6rem; left: 2rem; z-index: 4; display: flex; justify-content: space-between; color: #9f9287; font: 500 .59rem "DM Mono", ui-monospace, monospace; letter-spacing: .14em; }

/* Visual-novel stage */
.game-shell { height: 100%; min-height: 100vh; outline: none; background: #111116; }
.stage { position: relative; height: 100%; min-height: 100vh; overflow: hidden; isolation: isolate; background: #29283a; color: var(--ink); --scene-image: none; --scene-tint: #252535; --scene-glow: #63576c; --accent: #d5a88f; }
.stage.atmosphere-chapter-1 { --scene-tint: #3d2930; --scene-glow: #80605c; --accent: #dfb18f; }
.stage.atmosphere-chapter-2 { --scene-tint: #272934; --scene-glow: #5f637c; --accent: #c9b9a4; }
.stage.atmosphere-chapter-3 { --scene-tint: #243b42; --scene-glow: #668a8a; --accent: #b9d0bd; }
.stage.atmosphere-chapter-4 { --scene-tint: #313044; --scene-glow: #9a7890; --accent: #e0b49e; }
.scene-backdrop { position: absolute; inset: 0; z-index: -4; background-image: linear-gradient(180deg, #171d31cc 0%, transparent 39%, #160f17ed 100%), var(--scene-image), radial-gradient(ellipse at 50% 20%, var(--scene-glow), var(--scene-tint) 65%, #16151d); background-position: center; background-repeat: no-repeat; background-size: cover; filter: saturate(.78) contrast(1.02); transform: scale(1.025); will-change: opacity, transform, filter; }
.scene-backdrop::after { position: absolute; inset: 0; background: linear-gradient(90deg, #17141c99, transparent 30%, transparent 70%, #17141c99); content: ""; }
.scene-atmosphere { position: absolute; inset: 0; z-index: -3; pointer-events: none; opacity: .72; background: radial-gradient(ellipse at 50% 28%, #63576c44, transparent 58%), linear-gradient(130deg, #25253555, transparent 48%, #1d142555); background: radial-gradient(ellipse at 50% 28%, color-mix(in srgb, var(--scene-glow) 26%, transparent), transparent 58%), linear-gradient(130deg, color-mix(in srgb, var(--scene-tint) 30%, transparent), transparent 48%, #1d142555); mix-blend-mode: screen; }
.atmosphere-chapter-2 .scene-atmosphere { opacity: .58; background: radial-gradient(ellipse at 70% 24%, #9b9bb133, transparent 45%), linear-gradient(115deg, #1b1f2e55, transparent 65%); }
.atmosphere-chapter-3 .scene-atmosphere { opacity: .64; background: linear-gradient(175deg, #9fc5bc22, transparent 42%), radial-gradient(ellipse at 18% 18%, #c2ddc422, transparent 35%); }
.atmosphere-chapter-4 .scene-atmosphere { opacity: .68; background: radial-gradient(ellipse at 78% 19%, #e8b5a638, transparent 37%), linear-gradient(155deg, #3b2c4055, transparent 58%); }
.scene-vignette { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse at center, transparent 28%, #08090eb8 112%); }
.scene-header { position: absolute; top: 1.5rem; right: 2rem; left: 2rem; z-index: 6; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; font: 500 .64rem "DM Mono", ui-monospace, monospace; letter-spacing: .13em; color: #e5d7c4; }
.scene-heading { display: grid; gap: .42rem; min-width: 0; }
.chapter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-divider { padding: 0 .65rem; opacity: .4; }
.scene-kind { color: #d7c6b8aa; font-size: .57rem; letter-spacing: .11em; text-transform: uppercase; }
.save-status { display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto; color: #bfb3a7; white-space: nowrap; }
.save-status.status-saving { color: var(--accent-soft); } .save-status.status-story-unavailable { color: #efad9f; }
.save-dot { width: 6px; height: 6px; border-radius: 50%; background: #adcea9; box-shadow: 0 0 8px #b7e6ac; }
.status-saving .save-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: breathe 1s ease-in-out infinite; }
.status-story-unavailable .save-dot { background: #e88f83; box-shadow: 0 0 8px #e88f83; }

/* Scene transitions intentionally key the backdrop by node id in GameStage. */
.scene-transition-cut { animation: scene-cut .32s ease both; }
.scene-transition-fade { animation: scene-fade .82s cubic-bezier(.2, .75, .25, 1) both; }
.scene-transition-dissolve { animation: scene-dissolve 1.08s cubic-bezier(.2, .7, .2, 1) both; }
.scene-transition-montage { animation: scene-montage 1.2s cubic-bezier(.2, .7, .2, 1) both; }

/* Characters use the source viewBox instead of cropping transparent 512x768 art. */
.character-layer { position: absolute; inset: 8% 5% 26%; z-index: 2; pointer-events: none; }
.character { position: absolute; bottom: 0; width: 26%; height: 100%; opacity: .42; filter: saturate(.68) drop-shadow(0 15px 20px #09070b99); transform-origin: center bottom; transition: opacity .5s ease, filter .5s ease, transform .5s ease; }
.character-center { left: 37%; width: 26%; opacity: .62; transform: scale(.95); }
.character-left { left: 3%; transform: scale(.78); } .character-right { right: 3%; transform: scale(.78); }
.character.is-speaker { z-index: 3; opacity: 1; filter: saturate(1) drop-shadow(0 18px 24px #09070bcc); transform: scale(1); }
.character-center.is-speaker { transform: scale(1.01); }
.character-left.is-speaker, .character-right.is-speaker { transform: scale(.9); }
.character-layer.no-speaker .character:not(.is-empty) { opacity: .72; filter: saturate(.82) drop-shadow(0 15px 20px #09070b99); }
.character.is-empty { display: none; }
.character::after { position: absolute; top: 5%; left: 15%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #f1c7ac, #8a5960 70%); opacity: .85; content: ""; }
.character-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.character-placeholder { display: none; position: absolute; inset: 0; place-items: center; color: var(--accent-soft); font-size: 2rem; }
.character:not(.has-image) .character-placeholder { display: grid; }
.character.has-image::after, .character.has-image .character-placeholder { display: none; }

.stage-controls { position: absolute; top: 4.7rem; right: 1.6rem; z-index: 7; display: flex; flex-direction: column; gap: .45rem; }
.icon-button { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; padding: 0; border: 1px solid #e9dcc933; border-radius: 50%; color: #f4e9dc; background: #17151cb8; font-size: 1.05rem; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.icon-button:hover, .icon-button:focus-visible { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); transform: translateY(-2px); }
.dialogue-area { position: absolute; right: clamp(1rem, 8vw, 10rem); bottom: clamp(1.5rem, 5.5vh, 5rem); left: clamp(1rem, 8vw, 10rem); z-index: 5; cursor: pointer; animation: dialogue-rise .55s ease both; }
.speaker-name { position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: .48rem 1.15rem .42rem; color: var(--accent-ink); background: var(--accent); font: 700 .7rem "DM Mono", ui-monospace, monospace; letter-spacing: .15em; text-transform: uppercase; }
.speaker-narrator { color: #2b2730; background: #d7cbbd; }
.speaker-mark { width: .34rem; height: .34rem; border: 1px solid currentColor; border-radius: 50%; opacity: .7; }
.dialogue-box { position: relative; min-height: 7.3rem; padding: 1.45rem 1.75rem 1.15rem; overflow: auto; border: 1px solid #f1d9c433; border-left: 3px solid var(--accent); background: linear-gradient(120deg, #17151dcc, #211c23eb); box-shadow: 0 15px 40px #08070b66; backdrop-filter: blur(12px); }
.dialogue-box::after { position: absolute; right: 1rem; bottom: .9rem; width: 2.8rem; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); opacity: .6; content: ""; }
.dialogue-text { max-width: 70ch; margin: 0; color: #f6eee4; font: 400 clamp(1.05rem, 2vw, 1.55rem)/1.55 "Libre Baskerville", Georgia, serif; }
.caret { margin-left: 2px; color: var(--accent); }
.ending-kicker { margin-bottom: .8rem; color: var(--accent-soft); font: 500 .62rem "DM Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.advance-prompt { margin-top: 1rem; color: #b7aa9e; font: 500 .62rem "DM Mono", ui-monospace, monospace; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.advance-prompt span { margin-left: .5rem; color: var(--accent); font-size: 1rem; }
kbd { padding: .12rem .35rem; border: 1px solid #cbbcae55; border-radius: 2px; color: #e5d8cb; }
.ending-actions { display: flex; gap: .7rem; margin-top: 1.35rem; flex-wrap: wrap; }
.ending-actions .button { min-height: 2.7rem; padding: .7rem 1rem; font-size: .68rem; }

/* Choices */
.choice-list { display: grid; gap: .65rem; margin-top: 1.2rem; }
.choice-button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .85rem 1rem; border: 1px solid #e5cdb955; color: #f7ede3; background: #30282dcc; text-align: left; animation: choice-rise .45s both; animation-delay: calc(var(--choice-index, 0) * 65ms); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.choice-button:hover, .choice-button:focus-visible { border-color: var(--accent); background: #4a3540; transform: translateX(4px); }
.choice-marker { min-width: 1.6rem; color: var(--accent); font: 500 .72rem "DM Mono", ui-monospace, monospace; }
.choice-arrow { margin-left: auto; color: var(--accent); opacity: .7; transition: transform .2s ease; }
.choice-button:hover .choice-arrow, .choice-button:focus-visible .choice-arrow { transform: translateX(3px); }

/* Menus and accessible overlays */
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: flex-end; background: #09080c99; backdrop-filter: blur(8px); animation: fade .18s ease both; }
.modal-card { max-width: 100%; overflow: auto; color: #f5ede4; border: 1px solid #f3dfca2b; background: #231f25f7; box-shadow: -10px 0 50px #09080ccc; animation: slide .28s ease both; }
.side-card { width: min(430px, 100%); height: 100%; padding: 2.4rem 2rem; }
.backlog-card, .settings-card, .credits-card { align-self: center; width: min(570px, calc(100% - 2rem)); max-height: min(720px, calc(100% - 2rem)); padding: 2rem; border-radius: 5px; }
.credits-card { width: min(600px, calc(100% - 2rem)); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.modal-heading h2, .credits-card h2 { margin: 0; font: 400 2rem/1.1 "Libre Baskerville", Georgia, serif; }
.credits-card h2 { margin-bottom: 1rem; }
.credits-card > p:not(.eyebrow) { max-width: 52ch; color: #d9cfc6; }
.credits-list { display: grid; gap: .9rem; margin: 1.8rem 0 0; }
.credits-list > div { padding: .85rem 0 .9rem 1rem; border-left: 2px solid #d5a88f66; }
.credits-list dt { color: var(--accent-soft); font: 500 .65rem "DM Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.credits-list dd { margin: .35rem 0 0; color: #d9cfc6; font-size: .82rem; }
.modal-close { padding: .1rem .3rem; border: 0; color: #cfc2b5; background: none; font-size: 1.8rem; line-height: 1; }
.modal-close:hover { color: var(--accent); }
.menu-row { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1.1rem .1rem; border: 0; border-bottom: 1px solid #f3dfca20; color: #eee3d7; background: none; text-align: left; }
.menu-row:hover, .menu-row:focus-visible { color: var(--accent-soft); }
.menu-row > span:first-child { width: 1.5rem; color: var(--accent); font-size: 1.1rem; }
.menu-row strong, .menu-row small { display: block; }
.menu-row strong { font-size: .83rem; } .menu-row small { margin-top: .2rem; color: #a99b91; font-size: .7rem; }
.menu-row b { margin-left: auto; color: #a99b91; font-size: 1.4rem; font-weight: 400; }
.menu-link { cursor: pointer; text-decoration: none; }
.backlog-list { max-height: 60vh; padding-right: .4rem; overflow: auto; }
.backlog-entry { margin-bottom: 1rem; padding: 0 0 1rem 1rem; border-left: 2px solid #d5a88f55; }
.backlog-entry span { color: var(--accent); font: 500 .63rem "DM Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.backlog-entry p { margin: .3rem 0 0; color: #d9cfc6; font: 400 .93rem/1.55 "Libre Baskerville", Georgia, serif; }
.empty-state { color: #a99b91; font-style: italic; }
.setting-row, .range-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #f3dfca20; }
.setting-row strong, .range-row strong { display: block; font-size: .85rem; } .setting-row small, .range-row small { display: block; margin-top: .25rem; color: #a99b91; font-size: .7rem; }
.setting-row input[type="checkbox"] { position: relative; width: 2.6rem; height: 1.45rem; appearance: none; border-radius: 2rem; background: #51464b; transition: background .2s ease; }
.setting-row input[type="checkbox"]::after { position: absolute; top: .2rem; left: .2rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #d9ccc0; content: ""; transition: left .2s ease, background .2s ease; }
.setting-row input[type="checkbox"]:checked { background: #b97f74; } .setting-row input[type="checkbox"]:checked::after { left: 1.35rem; background: #fff4e8; }
.range-row input { width: 40%; accent-color: var(--accent); }
.settings-done { width: 100%; margin-top: 1.5rem; }
.clear-save-button { display: block; margin: 1rem auto 0; padding: .25rem; border: 0; color: #b99a91; background: none; font-size: .7rem; text-decoration: underline; text-underline-offset: 3px; }
.clear-save-button:hover { color: #efad9f; }
.debug-panel { position: fixed; top: 0; left: 0; z-index: 30; display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; border: 1px solid #f09c7e; color: #f6c6ad; background: #16151fee; font: 500 .64rem "DM Mono", ui-monospace, monospace; }
.debug-panel span { color: #d5c5ba; } .debug-panel button { padding: .25rem .5rem; border: 1px solid #f09c7e; color: #f09c7e; background: none; font-size: .6rem; }

/* Blazor defaults and small-screen composition */
.loading-progress { width: 3rem; } .page { height: 100%; } .page main { height: 100%; } .page .sidebar, .page .top-row { display: none; }
.blazor-error-boundary { padding: 1rem; color: white; background: #b32121; } .blazor-error-boundary::after { content: "An error has occurred."; }
#blazor-error-ui {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 1000;
    padding: .85rem 3rem .85rem 1rem;
    color: #271d16;
    background: #fff3cd;
    border: 1px solid #e0c36b;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 28%);
}
#blazor-error-ui .reload { color: inherit; font-weight: 700; }
#blazor-error-ui .dismiss { position: absolute; top: .55rem; right: .8rem; cursor: pointer; }
@media (max-width: 760px) {
    .scene-header { top: 1rem; right: 1rem; left: 1rem; }
    .stage-controls { top: 3.6rem; right: .7rem; flex-direction: row; }
    .icon-button { width: 2.25rem; height: 2.25rem; font-size: .9rem; }
    .character-layer { inset: 13% 0 34%; }
    .character { width: 46%; } .character-center { left: 21%; width: 58%; } .character-left { left: -6%; } .character-right { right: -6%; }
    .dialogue-area { right: .75rem; bottom: .75rem; left: .75rem; }
    .dialogue-box { max-height: min(48vh, 30rem); padding: 1rem 1rem .8rem; }
    .dialogue-text { font-size: clamp(.97rem, 4.2vw, 1.2rem); }
    .advance-prompt { font-size: .56rem; }
    .ending-actions { gap: .5rem; } .ending-actions .button { flex: 1 1 10rem; }
    .title-content h1 { font-size: clamp(3.2rem, 16vw, 6rem); }
    .title-subtitle { margin: 1.5rem 0 2.2rem; }
    .title-footer { right: 1rem; bottom: 1rem; left: 1rem; }
    .side-card { padding: 1.8rem 1.25rem; }
    .backlog-card, .settings-card, .credits-card { width: calc(100% - 1rem); padding: 1.4rem; }
    .debug-panel { right: 0; left: 0; flex-wrap: wrap; gap: .5rem; } .debug-panel span { width: 100%; }
}
@media (max-height: 560px) and (orientation: landscape) {
    .character-layer { inset: 10% 0 31%; }
    .dialogue-area { bottom: .5rem; }
    .dialogue-box { max-height: 44vh; min-height: 4.5rem; padding: .7rem 1rem; }
    .dialogue-text { font-size: .9rem; line-height: 1.42; }
    .speaker-name { padding: .3rem .8rem; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes dialogue-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes choice-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 50% { opacity: .45; transform: scale(.8); } }
@keyframes scene-cut { from { opacity: .45; } to { opacity: 1; } }
@keyframes scene-fade { from { opacity: 0; transform: scale(1.06); filter: saturate(.4) brightness(.7); } 55% { opacity: 1; } to { opacity: 1; transform: scale(1.025); filter: saturate(.78) brightness(1); } }
@keyframes scene-dissolve { from { opacity: 0; filter: blur(12px) saturate(.55); transform: scale(1.04); } 45% { opacity: .85; } to { opacity: 1; filter: blur(0) saturate(.78); transform: scale(1.025); } }
@keyframes scene-montage { from { opacity: 0; filter: blur(4px) saturate(.35); transform: scale(1.08); } 32% { opacity: .9; } to { opacity: 1; filter: blur(0) saturate(.78); transform: scale(1.025); } }