/* One quiet interface for reading, exploration and memory. */
:root { --ui-panel: #211d29; --ui-line: #514456; --ui-muted: #b3a4b8; --ui-text: #f0e7ed; --ui-pink: #dea5c5; --ui-blue: #a0c9e5; --dialogue-scale: 1; }
body.cursor-act2 { --ui-panel: #1b242d; --ui-line: #465663; }
body.cursor-act3 { --ui-panel: #20202d; --ui-line: #504c68; }
body.cursor-act4 { --ui-panel: #281e28; --ui-line: #6b455b; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--ui-blue); outline-offset: 4px; }
kbd { display: inline-block; padding: 3px 6px; border: 1px solid #776d823d; border-bottom-width: 2px; border-radius: 4px; color: #c9bbd0; background: #ffffff06; font: 10px 'Share Tech Mono', monospace; white-space: nowrap; }
#btn-settings, .on-novel #btn-settings { top: 20px; right: 24px; left: auto; display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--ui-line); border-radius: 6px; background: #211d29e8; color: #e5d8e3; padding: 9px 12px; font-size: 12px; box-shadow: 0 4px 16px #0002; }
body.on-desktop #btn-settings { display: none; }
#btn-settings>span { color: #bdabc6; font-size: 15px; }
#btn-settings kbd { opacity: .75; }
#btn-settings:hover { border-color: #a795b1; }
#experience-panel { padding: 24px; background: #0b0913c4; backdrop-filter: blur(5px); }
.experience-card { display: flex; flex-direction: column; width: min(740px, 100%); max-height: min(88vh, 820px); padding: 0; overflow: hidden; border: 1px solid #726076; border-radius: 10px; background: #211d29; color: var(--ui-text); box-shadow: 0 20px 90px #0008; }
.experience-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px 20px; border-bottom: 1px solid #514456; flex-shrink: 0; background: #292330; }
#experience-panel-caption { color: #b7a1ba; font-size: 9px; letter-spacing: .17em; }
.experience-heading h2 { font-size: 24px; font-weight: 700; margin: 7px 0 0; color: #eee3ec; }
#experience-dismiss { flex-shrink: 0; width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid #665469; border-radius: 5px; background: transparent; color: #cbb9d0; font: 25px/1 sans-serif; }
#experience-dismiss:hover { background: #483347; color: #f3e8f0; }
#experience-panel-body { padding: 22px 28px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #78607a #292330; scrollbar-width: thin; }
.experience-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 28px; border-top: 1px solid #514456; background: #292330; flex-shrink: 0; }
#experience-panel-note { color: #ae9ab4; font-size: 10px; line-height: 1.6; }
#experience-close { margin: 0; width: auto; padding: 10px 16px; flex-shrink: 0; color: #f4e6ef; background: #694961; border: 1px solid #97718c; border-radius: 5px; font-size: 13px; text-align: center; }
#experience-close:hover { background: #805c78; }
.settings-tabs { display: flex; gap: 6px; padding: 4px; background: #17151e; border: 1px solid #46394e; border-radius: 6px; margin-bottom: 22px; }
.settings-tab { flex: 1; padding: 11px 10px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #b7a9bf; font: inherit; font-size: 12px; line-height: 1.4; }
.settings-tab[aria-selected=true] { color: #f3e7ef; border-color: #7c607d; background: #513c53; box-shadow: 0 2px 7px #0002; }
.settings-tab:hover { color: #f4e8f0; }
.experience-card .settings-intro { font-size: 12px; line-height: 1.7; color: #b8a8bf; margin-bottom: 19px; }
.setting-row { display: block; margin: 0; padding: 19px 0; border-top: 1px solid #493d50; }
.setting-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.setting-heading label { font-size: 14px; color: #eee2ea; line-height: 1.5; }
.setting-heading output { font: 12px 'Share Tech Mono', monospace; color: #d6b1cc; padding: 4px 9px; background: #382b3c; border: 1px solid #63506a; border-radius: 4px; white-space: nowrap; }
.experience-card .setting-help { margin: 7px 0 15px; color: #b4a3ba; font-size: 11px; line-height: 1.6; }
.setting-row input[type=range] { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 6px; margin: 15px 0; border-radius: 4px; background: linear-gradient(to right, #c999bb var(--range-fill), #4b3e54 var(--range-fill)); }
.setting-row input[type=range]::-webkit-slider-thumb { appearance: none; width: 17px; height: 17px; border-radius: 50%; border: 3px solid #ead4e4; background: #9b6f91; box-shadow: 0 0 0 3px #c999bb18; }
.setting-row input[type=range]::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; border: 3px solid #ead4e4; background: #9b6f91; }
.setting-ends { display: flex; justify-content: space-between; gap: 20px; color: #a99bb3; font-size: 9px; line-height: 1.5; }
.settings-reset { padding: 0; margin-top: 14px; background: none; border: none; color: #b49cbc; font: inherit; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.settings-reset:hover { color: #e3c9dd; }
.settings-text-preview { color: #d4c3d4; font-size: calc(16px * var(--dialogue-scale)); line-height: 1.7; padding: 16px; margin: 0 0 17px; background: #16151e; border: 1px solid #514456; border-left: 2px solid #b780a4; border-radius: 5px; }
.settings-keymap { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; border-top: 1px solid #493d50; padding-top: 20px; }
.settings-keymap>div { display: flex; align-items: center; gap: 9px; color: #baa9c1; font-size: 10px; }
.setting-toggle { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; border-top: 1px solid #493d50; color: #eee2ea; font-size: 13px; }
.setting-toggle input { width: 18px; height: 18px; accent-color: #c999bb; }
.setting-switch { position: relative; flex-shrink: 0; width: 36px; height: 21px; }
.setting-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 1; }
.setting-switch i { display: block; width: 36px; height: 21px; border: 1px solid #89718e; border-radius: 20px; background: #43374a; }
.setting-switch i::after { content: ''; position: absolute; left: 4px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: #c4afcc; transition: transform .15s; }
.setting-switch input:checked+i { background: #845e7c; border-color: #cda1bf; }
.setting-switch input:checked+i::after { transform: translateX(15px); background: #f1ddeb; }
.setting-switch:focus-within { outline: 2px solid var(--ui-blue); outline-offset: 4px; border-radius: 20px; }
.experience-card p { font-size: 14px; color: #d8cbd9; line-height: 1.8; }
.memory-status { padding: 15px 17px; border: 1px solid #655c75; border-radius: 5px; background: #2b2739; color: #c4c1e8 !important; font-size: 13px !important; }
.memory-status:empty { display: none; }
.memory-status[data-tone=error] { color: #eab5bd !important; border-color: #906174; background: #392431; }
.memory-result { padding: 18px; border-left: 2px solid #b9a7d2; background: #292536; color: #e1d3ed !important; }
.memory-action { padding: 13px 16px; margin: 9px 0; border: 1px solid #705b7c; border-radius: 5px; background: #332a3d; color: #eadfeb; font-size: 13px; font-weight: 400; box-shadow: none; }
.memory-action:hover { background: #47354e; border-color: #aa85b2; }
.memory-action:disabled { opacity: .65; background: #282c32; color: #93adac; text-decoration: line-through; }
.memory-progress { display: flex; gap: 7px; margin: 0 0 22px; }
.memory-progress span { flex: 1; height: 4px; background: #514456; border-radius: 2px; }
.memory-progress span.complete { background: #b597c5; }
#vn-speaker, #hud-speaker { width: fit-content; max-width: 100%; font-size: 15px; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; letter-spacing: .025em; }
#vn-speaker { color: #8a4566; border-color: #bd91ac; }
#vn-speaker[data-speaker=player] { color: #385e81; border-color: #86a9c3; }
#vn-speaker[data-speaker=jane] { color: #8a4566; border-color: #bd91ac; }
#vn-speaker[data-speaker=warning] { color: #9a3650; border-color: #b46983; }
#vn-speaker[data-speaker=other] { color: #725779; border-color: #a68dab; }
#vn-dialogue-box[data-speaker=player] { border-left: 3px solid #779cb8; }
#vn-dialogue-box[data-speaker=jane] { border-left: 3px solid #b87ba3; }
#vn-text { font-size: calc(clamp(16px, 1.4vw, 19px) * var(--dialogue-scale)); }
#hud-speaker { color: #d0b5df; margin: 0; padding: 2px 10px; border: 1px solid #786783; border-radius: 4px; background: #c0a0d015; }
#hud-speaker[data-speaker=player] { color: #a0c9e5; border-color: #526f88; background: #a0c9e510; }
#hud-speaker[data-speaker=jane] { color: #e3a3c5; border-color: #946180; background: #e3a3c510; }
#hud-speaker[data-speaker=warning] { color: #f0a5b1; border-color: #996277; background: #f0a5b110; }
#hud-dialogue { bottom: 26px; width: min(930px, 92vw); max-height: min(42vh, 380px); overflow-y: auto; padding: 19px 24px 17px; background: #191820f5; border: 1px solid #64556c; border-radius: 7px; box-shadow: 0 10px 35px #05030c80; }
#hud-dialogue[data-speaker=player] { border-left: 3px solid #7da8c7; }
#hud-dialogue[data-speaker=jane] { border-left: 3px solid #bf84a9; }
.hud-dialogue-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
#hud-dialogue-progress { color: #ab9ab6; font: 11px 'Share Tech Mono', monospace; white-space: nowrap; }
#hud-text { font-size: calc(17px * var(--dialogue-scale)); line-height: 1.75; color: #eee4ed; margin-bottom: 15px; overflow-wrap: anywhere; }
.hud-dialogue-btn { font-size: 12px; font-weight: 400; padding: 8px 12px; background: #3b2e43; border: 1px solid #826b90; border-radius: 4px; color: #e5d3ed; box-shadow: none; animation: none; }
.hud-dialogue-btn:hover { transform: none; background: #50385b; box-shadow: none; }
.hud-key-tag { color: #bba6c8; background: #231f2c; border-color: #6b5978; font-size: 10px; padding: 2px 5px; font-weight: 400; }
#room-investigation, #act3-hud-tracker { top: 22px; left: 24px; right: auto; transform: none; width: 285px; max-width: calc(100vw - 190px); text-align: left; padding: 15px 17px; background: #191820e8; border: 1px solid #665970; border-radius: 6px; box-shadow: 0 5px 22px #07051035; color: #e4d8e7; backdrop-filter: none; pointer-events: none; }
.objective-caption, .act3-tracker-title { color: #b4a4c1; font-size: 9px; letter-spacing: .12em; line-height: 1.6; font-weight: 400; margin-bottom: 9px; }
#room-investigation strong { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 400; }
#room-evidence-count, .act3-count-badge { color: #c3bfeb; background: #332b43; border: 1px solid #625274; border-radius: 4px; padding: 3px 7px; font: 11px 'Share Tech Mono', monospace; box-shadow: none; white-space: nowrap; }
#room-evidence-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.evidence-chip { color: #ab9fb4; font-size: 10px; background: #ffffff05; padding: 5px 6px; border: 1px solid #615567; border-radius: 4px; }
.evidence-chip.inspected { color: #aed3d5; border-color: #536f75; background: #6b999e14; }
#room-investigation-hint, .act3-tracker-sub { font-family: 'Comfortaa', sans-serif; font-size: 10px; letter-spacing: 0; line-height: 1.7; margin-top: 11px; color: #bdacc7; }
.act3-tracker-status { justify-content: space-between; font-family: 'Comfortaa', sans-serif; font-size: 13px; font-weight: 400; }
.objective-progress { height: 4px; margin-top: 13px; background: #514456; border-radius: 3px; overflow: hidden; }
.objective-progress i { display: block; height: 100%; background: #b5a5d6; width: 0; transition: width .3s; }
#controls-hint, body.cursor-act2 #controls-hint { top: auto; bottom: 20px; left: 24px; display: flex; flex-wrap: wrap; gap: 13px; max-width: calc(100vw - 48px); padding: 10px 12px; background: #191820cf; border: 1px solid #66597077; border-radius: 5px; color: #b2a4bd; font-family: 'Comfortaa', sans-serif; font-size: 10px; }
#controls-hint>span { display: inline-flex; align-items: center; gap: 6px; }
body.has-world-dialogue #controls-hint, body.game-paused #controls-hint, body.hide-control-hints #controls-hint, .hide-control-hints .vn-controls-note { display: none; }
#mouse-look-hint { position: absolute; right: 24px; top: 76px; z-index: 33; display: flex; gap: 10px; align-items: center; padding: 11px 13px; max-width: 240px; border: 1px solid #665970; border-radius: 5px; color: #cdbdd7; background: #211d29de; text-align: left; font: 11px/1.5 'Comfortaa', sans-serif; }
#mouse-look-hint small { display: block; margin-top: 3px; font-size: 9px; color: #a595b1; }
.mouse-look-symbol { font: 22px sans-serif; color: #bda6cf; }
.hide-control-hints #mouse-look-hint small { display: none; }
#interaction-prompt { bottom: 90px; padding: 11px 16px; max-width: min(650px, 90vw); background: #282332ef; color: #e5d5e9; border: 1px solid #9c83ac; border-radius: 6px; font-family: 'Comfortaa', sans-serif; font-weight: 400; font-size: 12px; box-shadow: 0 5px 20px #0004; animation: none; line-height: 1.5; }
#interaction-prompt::before { content: 'E'; display: inline-grid; place-items: center; padding: 2px 7px; margin-right: 10px; border: 1px solid #8a7397; border-radius: 3px; color: #cbb2dd; font: 12px 'Share Tech Mono', monospace; }
.has-world-dialogue #interaction-prompt { bottom: calc(var(--subtitle-height, 180px) + 40px); }
#interaction-prompt:hover { border-color: #d2abd7; background: #3a2b43; }
#document-modal { position: fixed; background: #0b0914ce; backdrop-filter: blur(4px); }
.document-paper { max-height: 85vh; overflow-y: auto; padding: 30px 34px; border: 1px solid #b3a0a9; border-radius: 6px; background: #eee3e3; color: #413341; font-family: 'Comfortaa', sans-serif; box-shadow: 0 15px 70px #05030c90; }
.document-title { color: #80506c; font-family: 'Neucha', cursive; font-size: 26px; border-bottom: 1px solid #b79da9; font-weight: 400; padding-bottom: 15px; }
.document-content { font-size: 15px; line-height: 1.85; color: #473745; }
.document-close { border: 1px solid #9d768e; border-radius: 4px; background: #80576f; padding: 10px 18px; font: 12px 'Comfortaa', sans-serif; color: #f7edf2; }
#act4-climax-overlay { padding: 30px 24px; overflow-y: auto; background: #110c17d9; justify-content: flex-start; }
#climax-quote { width: min(760px, 100%); margin: auto 0 26px; color: #e7b1c7; font-size: clamp(20px, 2.6vw, 32px); text-shadow: none; font-weight: 400; line-height: 1.8; }
#btn-wake-up { max-width: min(620px, 100%); font-size: clamp(12px, 1.3vw, 17px); padding: 15px 25px; border: 1px solid #b57694; border-radius: 5px; background: #813f60; color: #f5dae8; box-shadow: none; animation: none; overflow-wrap: anywhere; line-height: 1.6; }
#btn-wake-up:hover { background: #a25178; }
#epiphany-text-box { width: min(750px, 100%); margin-top: 28px; padding: 20px 22px; border: 1px solid #674357; border-radius: 6px; background: #201521d9; }
.epiphany-line { color: #ead7e4; font-size: calc(17px * var(--dialogue-scale)); line-height: 1.8; margin: 14px 0; }
#screen-ending { overflow-y: auto; justify-content: flex-start; padding: 40px 24px; }
#ending-canvas { margin-top: auto; max-width: 85vw; max-height: 38vh; border-color: #4b3c49; border-radius: 5px; }
.ending-text { font-size: calc(16px * var(--dialogue-scale)); color: #cbb9cb; line-height: 1.95; }
.ending-author { margin-bottom: auto; color: #998397; font-size: 11px; }
.reduced-effects .epiphany-line { animation: none; }
@media (max-width: 600px) {
    #experience-panel { padding: 12px; }
    .experience-card { max-height: calc(100dvh - 24px); border-radius: 8px; }
    .experience-heading { padding: 19px 18px 16px; }
    .experience-heading h2 { font-size: 21px; }
    #experience-panel-body { padding: 18px; }
    .experience-footer { padding: 14px 18px; gap: 12px; }
    #experience-panel-note { font-size: 9px; }
    #experience-close { font-size: 11px; padding: 9px 11px; }
    .settings-tab { font-size: 10px; padding: 10px 6px; }
    .setting-heading label { font-size: 13px; }
    .settings-keymap { grid-template-columns: 1fr; }
    #btn-settings, .on-novel #btn-settings { right: 16px; top: 18px; font-size: 11px; padding: 8px 10px; }
    #btn-settings kbd { display: none; }
    #room-investigation, #act3-hud-tracker { top: 65px; left: 16px; width: 255px; max-width: calc(100vw - 32px); padding: 12px 14px; }
    #mouse-look-hint { top: 18px; left: 16px; right: auto; padding: 7px 9px; font-size: 9px; max-width: calc(100vw - 155px); }
    #mouse-look-hint small, .mouse-look-symbol { display: none; }
    #hud-dialogue { bottom: 14px; width: calc(100% - 24px); max-height: 48vh; padding: 15px 16px; }
    #hud-text, #vn-text { font-size: calc(16px * var(--dialogue-scale)); }
    #hud-speaker { font-size: 13px; }
    #controls-hint, body.cursor-act2 #controls-hint { left: 16px; bottom: 15px; gap: 8px; max-width: calc(100vw - 32px); font-size: 9px; }
    .document-paper { padding: 22px; }
    .document-content { font-size: 14px; }
    #climax-quote { font-size: 21px; }
}
@media (max-height: 540px) {
    #experience-panel { padding: 10px; }
    .experience-card { max-height: calc(100dvh - 20px); }
    .experience-heading { padding: 13px 22px; }
    .experience-heading h2 { font-size: 20px; }
    .experience-footer { padding: 10px 22px; }
    #hud-dialogue { max-height: 50vh; }
}
@media (prefers-reduced-motion: reduce) { .epiphany-line, .objective-progress i { animation: none; transition: none; } }

/* Scene narration is a page note, separate from a character's spoken line. */
#vn-dialogue-box[data-presentation=narration],
#vn-dialogue-box[data-presentation=thought],
#vn-dialogue-box[data-presentation=document] { border-left: 3px solid #a197a4; }
#vn-speaker[data-presentation=narration],
#vn-speaker[data-presentation=thought],
#vn-speaker[data-presentation=document] {
    color: #655c6b; border-color: #b8aeba; font-size: 11px;
    font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
}
#vn-dialogue-box[data-presentation=narration] #vn-text,
#vn-dialogue-box[data-presentation=thought] #vn-text {
    color: #514653; font-style: italic;
}
#vn-dialogue-box[data-presentation=document] #vn-text { color: #514653; }
#hud-dialogue[data-presentation=narration],
#hud-dialogue[data-presentation=thought],
#hud-dialogue[data-presentation=document] { border-left: 3px solid #a099ae; }
#hud-speaker[data-presentation=narration],
#hud-speaker[data-presentation=thought],
#hud-speaker[data-presentation=document] {
    color: #d0c8d8; background: #aaa0b312; border-color: #a099ae77;
    font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
}
#hud-dialogue[data-presentation=narration] #hud-text,
#hud-dialogue[data-presentation=thought] #hud-text { font-style: italic; color: #ded5e4; }