:root { color-scheme: dark; --ink: #090b17; --panel: rgba(10,14,30,.93); --white: #f5f1e8; --muted: #b9b8c6; --gold: #dfbd7d; --lavender: #c9bbff; --font-size: 21px; --safe-left: max(24px,env(safe-area-inset-left)); --safe-right: max(24px,env(safe-area-inset-right)); font-family: Georgia, "Times New Roman", serif; }
.beta-invite { width: min(100%, 320px); margin-top: 16px; }
.development-badge { font: 600 14px / 1.4 system-ui, sans-serif; letter-spacing: 0.08em; color: rgb(244, 219, 167); text-shadow: rgb(0, 0, 0) 0px 2px 8px; margin: 0px 0px 8px; }
.beta-feedback-button { display: block; width: 100%; text-align: left; padding: 12px 16px; border: 1px solid rgba(223, 189, 125, 0.7); border-radius: 5px; background: linear-gradient(125deg, rgba(17, 25, 45, 0.96), rgba(23, 23, 45, 0.91)); }
.beta-feedback-button strong { display: block; font-size: 18px; font-weight: normal; line-height: 1.25; color: rgb(245, 225, 185); }
.beta-feedback-button > span { display: block; font: 14px / 1.4 system-ui, sans-serif; color: rgb(223, 220, 230); margin-top: 5px; }
.beta-feedback-button b { font-weight: normal; color: var(--gold); }
.beta-feedback-button:hover { background: rgba(32, 35, 59, 0.93); border-color: rgb(255, 225, 168); }
.feedback-form, .feedback-success, .feedback-entries, .inbox-footer, .inbox-pagination { font-family: system-ui, sans-serif; }
.feedback-form label { display: block; font-size: 16px; line-height: 1.5; margin-bottom: 18px; }
.feedback-form label > span { font-size: 14px; color: var(--muted); }
.feedback-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feedback-form input, .feedback-form select, .feedback-form textarea { display: block; width: 100%; margin-top: 8px; padding: 12px; background: rgb(12, 18, 36); color: var(--white); border: 1px solid rgb(139, 121, 96); border-radius: 4px; font: 16px / 1.5 system-ui, sans-serif; min-width: 0px; }
.feedback-form textarea { resize: vertical; min-height: 140px; }
.feedback-form select:focus-visible, .feedback-form textarea:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.feedback-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-submit { display: block; padding: 13px 18px; border: 1px solid var(--gold); border-radius: 4px; background: rgba(223, 189, 125, 0.075); color: var(--gold); font: 16px / 1.5 system-ui, sans-serif; text-align: center; margin-top: 18px; text-decoration: none; }
.feedback-success { padding: 10px 0px 22px; text-align: center; }
.feedback-success > span { font-size: 32px; color: var(--gold); }
.feedback-success h3 { font: 25px Georgia, serif; }
.feedback-success p { font-size: 16px; line-height: 1.6; }
.feedback-success .form-submit { margin: 22px auto 0px; }
.feedback-entry { padding: 18px 0px; border-top: 1px solid rgba(223, 189, 125, 0.267); }
.feedback-entry-top { display: flex; justify-content: space-between; align-items: start; gap: 15px; font-size: 16px; }
.feedback-entry-top strong { font-weight: 500; overflow-wrap: anywhere; }
.feedback-entry-top > span { color: var(--gold); font-size: 14px; }
.feedback-entry.reviewed .feedback-entry-top > span { color: var(--muted); }
.feedback-meta { color: var(--muted); font-size: 14px; line-height: 1.6; }
.feedback-message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.65; }
.feedback-review { padding: 9px 12px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 3px; font-size: 14px; }
.feedback-empty { font-size: 16px; line-height: 1.7; padding: 16px 0px; }
.inbox-pagination { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0px; }
.inbox-pagination button, .inbox-footer button { font-size: 16px; padding: 10px 0px; color: var(--gold); }
.inbox-footer { border-top: 1px solid rgba(255, 255, 255, 0.133); margin-top: 20px; padding-top: 10px; }
@media (max-height: 600px) and (orientation: landscape) {
  .beta-invite { margin-top: 8px; }
  .development-badge { margin-bottom: 5px; }
  .beta-feedback-button { padding: 9px 12px; }
  .beta-feedback-button strong { font-size: 16px; }
  .beta-feedback-button > span { display: none; }
}
@media (max-width: 540px) {
  .feedback-fields { grid-template-columns: 1fr; gap: 0px; }
}
* { box-sizing: border-box; }
body { margin: 0px; background: var(--ink); color: var(--white); overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; background: none; border: 0px; touch-action: manipulation; }
button:disabled { opacity: 0.4; cursor: default; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
button:hover:not(:disabled) { color: var(--gold); }
[hidden] { display: none !important; }
#app { position: relative; width: 100%; height: 100dvh; overflow: hidden; isolation: isolate; }
.screen { position: absolute; inset: 0px; overflow: hidden; }
.title-screen { background: rgb(9, 11, 23); }
.title-art { position: absolute; inset: 0px; background: url("/api/media/b86fb76ddf4632c9d0b5d8f5a86dde0ef6fc78a505221ea38cde76327fc60cb0/poster.webp") right 43% / auto 128% no-repeat; animation: 30s ease-in-out 0s infinite alternate none running title-drift; }
.title-shade { position: absolute; inset: 0px; background: linear-gradient(90deg, rgb(9, 11, 23) 0%, rgba(9, 11, 23, 0.98) 20%, rgba(9, 11, 23, 0.82) 42%, rgba(9, 11, 23, 0.12) 73%), linear-gradient(0deg, rgba(9, 11, 23, 0.8), transparent 35%); }
.title-copy { position: absolute; left: 7.5%; top: 50%; transform: translateY(-50%); width: 63%; z-index: 1; }
.eyebrow, .chapter-label, .title-footer, .location-tag, .dialogue-actions, .speaker-line, .cinema-hud, .music-toggle, .modal-top, .advance-hint { font-family: system-ui, sans-serif; }
.eyebrow { font-size: 12px; letter-spacing: 0.25em; color: var(--gold); font-weight: 600; }
h1 { font-weight: normal; line-height: 1; margin: 25px 0px 26px; letter-spacing: 0.04em; text-shadow: rgb(0, 0, 0) 0px 2px 28px; }
h1 span { display: block; font-size: clamp(22px, 3.3vw, 45px); letter-spacing: 0.2em; margin-bottom: 12px; }
h1 strong { font-size: clamp(34px, 6.4vw, 86px); font-weight: normal; letter-spacing: 0.01em; }
.title-rule { height: 1px; width: 82px; background: var(--gold); margin: 22px 0px; }
.chapter-label { letter-spacing: 0.2em; font-size: 12px; color: rgb(217, 211, 209); margin: 22px 0px 30px; }
.chapter-label span { color: var(--gold); margin: 0px 9px; }
.title-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.title-actions button, .end-copy button { padding: 8px 0px; font-size: 18px; }
.primary { display: flex; align-items: center; justify-content: space-between; gap: 55px; text-align: left; color: var(--gold); font-size: 20px !important; }
.primary span { font-family: system-ui, sans-serif; }
.title-footer { position: absolute; bottom: max(24px,env(safe-area-inset-bottom)); left: 7.5%; right: 4%; display: flex; justify-content: space-between; letter-spacing: 0.18em; font-size: 11px; color: var(--muted); }
.music-toggle { position: absolute; right: 4%; top: 26px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255, 255, 255, 0.208); padding: 10px 15px; background: rgba(9, 11, 23, 0.5); border-radius: 30px; font-size: 14px; }
.scene-bg { position: absolute; inset: 0px; background-repeat: no-repeat; background-size: 200% 200%; background-position: 0px 0px; transform: scale(1.015); transition: filter 400ms; will-change: transform; }
.scene-bg.still { background-size: cover; }
.scene-bg.fade-in { animation: 0.7s ease 0s 1 normal none running scene-fade; }
.scene-shade { position: absolute; inset: 0px; background: linear-gradient(0deg, rgba(5, 7, 17, 0.75), transparent 48%, rgba(4, 6, 16, 0.15)); pointer-events: none; }
.scene-effects { position: absolute; inset: 0px; pointer-events: none; z-index: 2; }
.game-top { position: absolute; top: max(16px,env(safe-area-inset-top)); left: var(--safe-left); right: var(--safe-right); display: flex; justify-content: space-between; align-items: flex-start; z-index: 8; pointer-events: none; }
.game-top > * { pointer-events: auto; }
.location-tag { display: flex; flex-direction: column; gap: 6px; text-shadow: rgb(0, 0, 0) 0px 1px 12px; background: linear-gradient(90deg, rgba(9, 11, 23, 0.467), transparent); padding: 8px 16px; border-left: 2px solid rgba(223, 189, 125, 0.565); font-size: 12px; letter-spacing: 0.15em; }
.location-tag span:first-child { font-size: 10px; color: rgb(231, 214, 181); }
.icon-button { height: 44px; min-width: 44px; background: rgba(9, 11, 23, 0.6); border: 1px solid rgba(255, 255, 255, 0.19); font-family: system-ui, sans-serif; font-size: 24px; border-radius: 4px; }
.cast { position: absolute; inset: 0px; pointer-events: none; overflow: hidden; }
.portrait { position: absolute; width: min(54vw, 83vh); height: min(54vw, 83vh); bottom: 13%; background-size: 300% 200%; background-repeat: no-repeat; filter: drop-shadow(rgba(0, 0, 0, 0.333) 0px 6px 12px); transition: filter 250ms, opacity 250ms; transform-origin: center bottom; }
.portrait.left { left: 4%; }
.portrait.right { right: 4%; }
.portrait.center { left: 50%; margin-left: calc(-0.5 * min(54vw, 83vh)); }
.portrait.dim { filter: brightness(0.68) saturate(0.72) drop-shadow(rgba(0, 0, 0, 0.333) 0px 6px 12px); }
.portrait.dog { width: min(32vw, 53vh); height: min(32vw, 53vh); bottom: 18%; }
.portrait.enter { animation: 0.5s ease 0s 1 normal both running portrait-in; }
.advance-surface { position: absolute; inset: 0px; z-index: 3; cursor: default; }
.dialogue { position: absolute; bottom: max(24px,env(safe-area-inset-bottom)); left: 5%; right: 5%; z-index: 5; min-height: 175px; padding: 23px 31px 9px; background: linear-gradient(110deg, rgba(12, 17, 36, 0.97), rgba(12, 17, 36, 0.89)); border-width: 1px; border-style: solid; border-color: rgba(212, 193, 160, 0.61) rgba(177, 185, 216, 0.353) rgba(177, 185, 216, 0.353); border-image: none; box-shadow: rgba(0, 0, 0, 0.467) 0px 9px 55px, rgba(255, 255, 255, 0.01) 0px 0px 30px inset; backdrop-filter: blur(7px); }
.dialogue.thought { border-top-color: rgb(179, 162, 233); }
.speaker-line { display: flex; align-items: center; gap: 12px; position: absolute; top: -15px; left: 21px; background: rgb(17, 23, 43); border-width: 1px 1px 0px; border-style: solid solid none; border-color: rgba(177, 185, 216, 0.353) rgba(177, 185, 216, 0.353) currentcolor; border-image: none; padding: 5px 16px; font-size: 13px; letter-spacing: 0.13em; color: var(--gold); font-weight: 600; }
.speaker-line #thought-label { border-left: 1px solid rgba(197, 181, 247, 0.333); padding-left: 12px; color: var(--lavender); font-size: 11px; }
#dialogue-text { font-size: var(--font-size); line-height: 1.55; margin: 4px 0px 15px; min-height: 2.9em; max-width: 1050px; white-space: pre-wrap; }
.thought #dialogue-text { font-style: italic; color: rgb(228, 220, 255); }
.dialogue-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.07); min-height: 34px; }
.dialogue-actions { display: flex; gap: 22px; }
.dialogue-actions button { font-size: 12px; letter-spacing: 0.08em; padding: 10px 0px; color: rgb(199, 201, 212); }
.dialogue-actions button[aria-pressed="true"] { color: var(--gold); }
.advance-button { display: flex; gap: 16px; align-items: center; padding: 8px 0px 8px 20px; font-size: 12px; color: rgb(202, 194, 174); font-family: system-ui, sans-serif; }
.next-diamond { color: var(--gold); font-size: 10px; animation: 1.9s ease 0s infinite normal none running blink; }
.cinema-hud { position: absolute; bottom: max(23px,env(safe-area-inset-bottom)); left: var(--safe-left); right: var(--safe-right); z-index: 7; display: flex; justify-content: space-between; align-items: end; font-size: 14px; text-shadow: rgb(0, 0, 0) 0px 1px 8px; }
.cinema-hud > div:first-child { display: flex; gap: 13px; align-items: center; }
.cinema-hud small { display: block; margin-top: 5px; font-size: 9px; letter-spacing: 0.17em; color: rgb(219, 210, 196); }
.music-glyph { font-size: 26px; color: var(--gold); }
.cinema-right { display: flex; gap: 20px; align-items: center; font-family: system-ui, sans-serif; font-size: 12px; }
.cinema-progress { height: 1px; background: rgba(255, 255, 255, 0.208); position: absolute; bottom: -10px; width: 100%; }
#cinema-fill { height: 1px; width: 0px; background: var(--gold); }
.cinematic-title { position: absolute; top: 40%; left: 9%; z-index: 4; text-shadow: rgb(0, 0, 0) 0px 3px 20px; animation: 3s ease 0s 1 normal none running scene-fade; }
.cinematic-title span { display: block; letter-spacing: 0.32em; font: 12px system-ui; color: rgb(241, 210, 154); }
.cinematic-title strong { font-weight: normal; display: block; font-size: clamp(30px, 5vw, 70px); margin-top: 18px; }
.game-screen.cinematic .scene-shade { background: linear-gradient(0deg, rgba(5, 7, 17, 0.733), transparent 28%, transparent 70%, rgba(5, 7, 17, 0.2)); }
.game-screen.cinematic .portrait { bottom: 0px; opacity: 0.72; }
.game-screen.cinematic .advance-surface { display: none; }
.scene-effects.transfer { background: radial-gradient(transparent 35%, rgba(73, 57, 145, 0.467) 80%); box-shadow: rgba(126, 149, 255, 0.4) 0px 0px 120px inset; animation: 4s ease-in-out 0s infinite normal none running energy; }
.scene-effects.impact { animation: 0.6s ease 0s 1 normal none running flash; }
.scene-effects.dark { background: rgb(2, 2, 11); }
.end-screen { display: grid; place-items: center; background: radial-gradient(at 50% 65%, rgb(26, 35, 71), rgb(7, 10, 23) 65%); text-align: center; }
.end-copy h2 { font-size: clamp(35px, 5vw, 64px); font-weight: normal; margin: 20px 0px; }
.end-line { line-height: 1.8; font-size: 20px; color: rgb(217, 214, 230); }
.end-copy .title-rule { margin: 26px auto; }
.end-copy > p:last-of-type { color: var(--muted); font-size: 16px; }
.end-copy button { display: flex; margin: 15px auto; font-size: 15px; }
.rotate-screen { display: none; position: absolute; inset: 0px; z-index: 50; background: radial-gradient(at 50% 40%, rgb(35, 35, 63), rgb(9, 11, 23) 70%); text-align: center; align-items: center; justify-content: center; flex-direction: column; padding: 35px; }
.rotate-icon { font-size: 80px; color: var(--gold); line-height: 1; }
.rotate-screen h2 { font-size: 26px; font-weight: normal; margin-top: 25px; }
.rotate-screen p { font-family: system-ui; font-size: 16px; color: rgb(211, 208, 220); }
.rotate-screen small { font-family: system-ui; color: var(--muted); font-size: 13px; margin-top: 20px; }
dialog { color: var(--white); border: 1px solid rgba(176, 169, 154, 0.4); background: linear-gradient(135deg, rgb(21, 27, 48), rgb(9, 13, 27)); border-radius: 6px; padding: 28px; width: min(590px, 90vw); max-height: 85dvh; box-shadow: rgba(0, 0, 0, 0.667) 0px 20px 100px; }
dialog::backdrop { background: rgba(3, 6, 17, 0.68); backdrop-filter: blur(8px); }
.modal-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.modal-top .eyebrow { font-size: 10px; letter-spacing: 0.15em; }
.modal-top h2 { font: 29px Georgia; margin: 5px 0px; }
.modal-top .icon-button { background: none; border: 0px; }
.menu-list { display: flex; flex-direction: column; gap: 9px; }
.menu-list button, .slot { padding: 13px 17px; border: 1px solid rgba(255, 255, 255, 0.125); text-align: left; background: rgba(255, 255, 255, 0.016); font-family: system-ui; font-size: 15px; }
.menu-list button:hover, .slot:hover { background: rgba(255, 255, 255, 0.035); border-color: rgba(223, 189, 125, 0.5); }
.setting { margin: 17px 0px; font-family: system-ui; }
.setting label { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 10px; }
.setting input[type="range"] { width: 100%; accent-color: var(--gold); height: 26px; }
.setting select { width: 100%; padding: 10px; background: rgb(12, 18, 36); color: white; border: 1px solid rgba(255, 255, 255, 0.208); font-size: 16px; }
.setting .checkbox { display: flex; gap: 10px; align-items: center; justify-content: start; }
.setting input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--gold); }
.modal-note { font: 14px / 1.7 system-ui; color: var(--muted); }
.slot-list { display: grid; gap: 10px; }
.slot { width: 100%; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.slot strong { display: block; margin-bottom: 7px; font-weight: 500; color: var(--gold); }
.slot small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.history-entry { border-bottom: 1px solid rgba(255, 255, 255, 0.09); padding: 15px 0px; }
.history-entry strong { font: 12px system-ui; letter-spacing: 0.06em; color: var(--gold); }
.history-entry p { font-size: 18px; line-height: 1.6; margin: 7px 0px 0px; }
.history-entry.thought p { font-style: italic; color: rgb(217, 206, 252); }
#toast { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); background: rgba(17, 25, 45, 0.96); border: 1px solid rgba(223, 189, 125, 0.4); padding: 12px 20px; font: 14px system-ui; z-index: 90; box-shadow: rgba(0, 0, 0, 0.667) 0px 5px 24px; border-radius: 3px; }
#loading-screen { position: absolute; inset: 0px; background: rgb(9, 11, 23); z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--gold); font: 15px system-ui; }
.load-mark { font-size: 45px; animation: 2s ease 0s infinite normal none running blink; }
#audio-retry { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); padding: 20px 26px; background: rgba(11, 16, 42, 0.933); border: 1px solid var(--gold); font: 16px system-ui; z-index: 20; }
.game-screen.reduced-motion *, .reduced-motion .title-art { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
@keyframes title-drift { 
  0% { transform: scale(1); }
  100% { transform: scale(1.025); }
}
@keyframes scene-fade { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes portrait-in { 
  0% { opacity: 0; translate: 0px 12px; }
  100% { opacity: 1; translate: 0px; }
}
@keyframes blink { 
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@keyframes cinema-drift { 
  0% { transform: scale(1.015); }
  100% { transform: scale(1.045); }
}
@keyframes flash { 
  0% { background: rgba(203, 218, 255, 0.88); }
  100% { background: transparent; }
}
@keyframes energy { 
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}
@media (min-aspect-ratio: 2 / 1) {
  .scene-bg { inset: 0px max(0px, -97.5dvh + 50vw); }
  .scene-shade { background: linear-gradient(0deg, rgba(5, 7, 17, 0.733), transparent 60%); }
  .title-art { background-size: auto 132%; }
  .portrait { bottom: 12%; }
  .dialogue { left: max(5%, -92.5dvh + 50vw); right: max(5%, -92.5dvh + 50vw); }
}
@media (max-height: 600px) and (orientation: landscape) {
  :root { --font-size: 18px; --safe-left: max(18px,env(safe-area-inset-left)); --safe-right: max(18px,env(safe-area-inset-right)); }
  .title-copy { left: 7%; top: 48%; }
  h1 { margin: 15px 0px; }
  h1 span { font-size: 23px; margin-bottom: 7px; }
  h1 strong { font-size: 48px; }
  .eyebrow { font-size: 10px; }
  .title-rule { margin: 13px 0px; width: 60px; }
  .chapter-label { font-size: 10px; margin: 14px 0px 16px; }
  .title-actions { gap: 2px; }
  .title-actions button { font-size: 15px; padding: 5px 0px; }
  .primary { font-size: 18px !important; }
  .title-footer { font-size: 9px; bottom: max(13px,env(safe-area-inset-bottom)); }
  .music-toggle { top: 14px; font-size: 12px; padding: 8px 11px; }
  .game-top { top: max(9px,env(safe-area-inset-top)); }
  .location-tag { font-size: 10px; gap: 3px; padding: 5px 10px; }
  .location-tag span:first-child { font-size: 9px; }
  .dialogue { bottom: max(12px,env(safe-area-inset-bottom)); left: 5%; right: 5%; padding: 17px 21px 3px; min-height: 126px; }
  .speaker-line { top: -13px; font-size: 11px; padding: 4px 12px; left: 14px; }
  .speaker-line #thought-label { font-size: 10px; }
  #dialogue-text { line-height: 1.4; margin: 1px 0px 6px; min-height: 2.5em; }
  .dialogue-bottom { min-height: 30px; }
  .dialogue-actions { gap: 22px; }
  .dialogue-actions button { font-size: 12px; padding: 8px 0px; }
  .advance-button { padding: 8px 0px 8px 20px; font-size: 11px; }
  .portrait { height: 76vh; width: 76vh; bottom: 15%; }
  .portrait.left { left: 10%; }
  .portrait.right { right: 10%; }
  .portrait.center { margin-left: -38vh; }
  .portrait.dog { height: 48vh; width: 48vh; bottom: 20%; }
  .cinema-hud { bottom: max(21px,env(safe-area-inset-bottom)); font-size: 12px; }
  .cinema-hud small { font-size: 9px; }
  .cinematic-title { top: 35%; }
  .cinematic-title strong { font-size: 38px; }
  .end-copy h2 { font-size: 33px; margin: 12px 0px; }
  .end-line { font-size: 16px; line-height: 1.5; }
  .end-copy .title-rule { margin: 15px auto; }
  dialog { padding: 18px 24px; max-height: 90dvh; }
  .modal-top { margin-bottom: 10px; }
  .modal-top h2 { font-size: 23px; }
  .setting { margin: 13px 0px; }
  .menu-list button { padding: 10px 15px; }
}
@media (max-height: 360px) and (orientation: landscape) {
  h1 strong { font-size: 37px; }
  .title-actions button { padding: 3px 0px; }
  .chapter-label { margin: 10px 0px; }
  .title-footer { display: none; }
  .dialogue { bottom: 8px; padding: 15px 18px 2px; }
  .location-tag { display: none; }
}
@media (orientation: portrait) and (max-width: 1000px) {
  .rotate-screen { display: flex; }
}
.portrait svg { display: block; overflow: hidden; }
.portrait.single-image img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.cast.three-characters .portrait { width: min(35vw, 70vh); height: min(35vw, 70vh); bottom: 18%; margin-left: 0px; right: auto; }
.cast.three-characters .portrait.left { left: 0px; }
.cast.three-characters .portrait.center { left: 50%; margin-left: calc(-0.5 * min(35vw, 70vh)); }
.cast.three-characters .portrait.right { left: auto; right: 0px; }
.cast.three-characters .portrait.dog { width: min(26vw, 48vh); height: min(26vw, 48vh); bottom: 21%; }
.cast.three-characters .portrait.dog.center { margin-left: calc(-0.5 * min(26vw, 48vh)); }
.chapter-list { display: grid; gap: 16px; }
.chapter-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid rgba(213, 181, 118, 0.333); background: linear-gradient(120deg, rgba(29, 41, 75, 0.6), rgb(21, 21, 44)); text-align: left; }
.chapter-card strong { font-weight: normal; font-size: 26px; }
.chapter-card > span:last-child { font: 15px system-ui, sans-serif; color: var(--gold); }
.chapter-card:disabled { opacity: 1; background: rgb(17, 22, 37); border-color: rgba(255, 255, 255, 0.14); color: rgb(184, 191, 206); }
.chapter-card:disabled .eyebrow, .chapter-card:disabled > span:last-child { color: rgb(184, 191, 206); }
.chapter-coming-soon { padding: 24px; text-align: center; border-top: 1px solid rgba(213, 181, 118, 0.333); }
.chapter-coming-soon h3 { margin: 0px 0px 12px; font: 1.5rem Georgia, serif; color: var(--gold); }
.chapter-coming-soon p { margin: 0px; font: 1rem / 1.6 system-ui, sans-serif; color: var(--white); }
@media (max-height: 600px) and (orientation: landscape) {
  .cast.three-characters .portrait { width: 32vw; height: 72vh; bottom: 20%; }
  .cast.three-characters .portrait.center { margin-left: -16vw; }
  .cast.three-characters .portrait.dog { width: 25vw; height: 43vh; bottom: 25%; }
  .cast.three-characters .portrait.dog.center { margin-left: -12.5vw; }
  .title-copy { top: 49%; }
  .title-actions { gap: 0px; }
  .title-actions button { padding: 4px 0px; }
  .chapter-card { padding: 18px; }
  .chapter-card strong { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
.game-screen.is-paused * { animation-play-state: paused !important; }
.scene-effects.chapter-blackout { background: rgb(0, 0, 0); opacity: 0; }
.game-screen.chapter-transition .location-tag { visibility: hidden; }
#admin-jump { display: flex; flex-direction: column; }
.admin-opening { order: 1; margin: 16px 0px 0px; align-self: center; width: min(100%, 320px); }
#admin-jump > .modal-note { order: 2; }
#admin-jump > .menu-list { order: 3; }
.artwork-status { position: absolute; z-index: 21; left: 50%; top: 43%; transform: translate(-50%, -50%); width: max-content; max-width: 85%; padding: 18px 24px; text-align: center; background: rgba(11, 16, 42, 0.933); border: 1px solid var(--gold); border-radius: 4px; font: 16px / 1.5 system-ui, sans-serif; box-shadow: rgba(0, 0, 0, 0.533) 0px 5px 30px; }
.artwork-status p { margin: 0px; }
.artwork-status button { display: block; min-height: 44px; margin: 12px auto 0px; padding: 8px 20px; border: 1px solid var(--gold); border-radius: 4px; color: var(--gold); }
.game-screen.artwork-loading .dialogue, .game-screen.artwork-loading .cast { visibility: hidden; }
#admin-opening-art { width: 100%; aspect-ratio: 16 / 9; background-size: 200% 200%; background-repeat: no-repeat; background-color: rgb(8, 12, 22); border: 1px solid rgba(176, 169, 154, 0.4); border-radius: 4px; }
.admin-opening figcaption { margin-top: 8px; font: 14px / 1.5 system-ui; color: var(--muted); }
dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.modal-top { flex-shrink: 0; }
#dialog-content { overflow-y: auto; overscroll-behavior: contain; min-height: 0px; }
.dialogue-actions button { font-size: 14px; }
.speaker-line { font-size: 14px; }
.dialogue-actions { gap: 20px; }
.portrait.enter { animation-name: portrait-in; }
.game-screen.reduced-motion .scene-bg { transform: none !important; }
.game-screen.illustrated .dialogue { background: linear-gradient(0deg, rgba(5, 9, 20, 0.94), rgba(5, 9, 20, 0.66)); border-color: rgba(223, 189, 125, 0.24); backdrop-filter: none; }
.game-screen.illustrated.narrative .speaker-line { display: none; }
.game-screen.illustrated.narrative .dialogue { padding-top: 13px; min-height: 130px; background: linear-gradient(0deg, rgba(5, 9, 20, 0.9), rgba(5, 9, 20, 0.38)); border: 0px; box-shadow: none; }
.game-screen.illustrated.narrative #dialogue-text { text-shadow: rgb(0, 0, 0) 0px 2px 7px; }
@media (max-height: 600px) and (orientation: landscape) {
  .game-screen.illustrated.narrative .dialogue { min-height: 100px; padding-top: 8px; }
  .game-screen.illustrated.narrative #dialogue-text { min-height: 1.4em; }
}
.admin-unlock { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.19); font-family: system-ui, sans-serif; }
.admin-unlock label, #admin-jump label { display: block; font-size: 16px; margin-bottom: 12px; }
.admin-password-row { display: flex; gap: 10px; }
.admin-password-row input, #admin-subchapter { min-width: 0px; background: rgb(19, 26, 42); color: rgb(244, 240, 232); border: 1px solid rgb(139, 121, 96); border-radius: 6px; font-size: 16px; padding: 12px; min-height: 46px; }
.admin-password-row input { flex: 1 1 0%; width: 100%; }
.admin-password-row button { font-size: 16px; padding: 10px 18px; border: 1px solid var(--gold); border-radius: 6px; color: var(--gold); }
#admin-subchapter { width: 100%; margin-bottom: 8px; }
#admin-subchapter option { background: rgb(19, 26, 42); color: rgb(244, 240, 232); }
.form-error { color: rgb(255, 182, 171); font-size: 14px; margin: 9px 0px 0px; }
#admin-jump .menu-list button { font-size: 16px; }
.cinematic-caption { position: absolute; z-index: 5; left: 14%; right: 14%; bottom: calc(max(30px,env(safe-area-inset-bottom)) + 56px); text-align: center; background: linear-gradient(90deg, rgba(5, 9, 20, 0.25), rgba(5, 9, 20, 0.88) 15%, rgba(5, 9, 20, 0.88) 85%, rgba(5, 9, 20, 0.25)); padding: 14px 28px; border-radius: 5px; text-shadow: rgb(0, 0, 0) 0px 2px 6px; pointer-events: none; }
.cinematic-caption p { margin: 0px; font-size: var(--font-size); line-height: 1.45; }
.cinematic-caption .caption-speaker { font-family: system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 5px; }
.cinematic-caption.thought #caption-text { font-style: italic; color: rgb(220, 228, 250); }
@media (max-height: 600px) and (orientation: landscape) {
  .cinematic-caption { left: 9%; right: 9%; bottom: calc(max(21px,env(safe-area-inset-bottom)) + 43px); padding: 9px 20px; }
  .cinematic-caption p { font-size: var(--font-size); line-height: 1.35; }
  .cinematic-caption .caption-speaker { font-size: 14px; margin-bottom: 3px; }
}
.audio-credit-group { margin: 1.5rem 0px; padding-top: 1rem; border-top: 1px solid rgba(166, 170, 188, 0.19); }
.audio-credit-group h3 { font-size: 1.05rem; color: var(--gold); margin: 0px 0px 0.75rem; }
.audio-credit-list { padding-left: 1.15rem; font-size: 1rem; line-height: 1.55; }
.audio-credit-list li { margin: 0.45rem 0px; }
.audio-credit-list a { white-space: nowrap; }
.portrait canvas { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; pointer-events: none; }
.title-copy { max-height: calc(100% - 100px); overflow-y: auto; scrollbar-width: thin; padding: 4px 8px 4px 0px; }
@media (max-height: 600px) and (orientation: landscape) {
  .title-copy { max-height: calc(100% - 64px); }
}
@media (max-height: 360px) and (orientation: landscape) {
  .title-copy { max-height: calc(100% - 28px); }
}
.feedback-queues, .feedback-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0px; }
.feedback-queues button { padding: 9px 12px; border: 1px solid rgba(255, 255, 255, 0.208); border-radius: 4px; font: 14px / 1.4 system-ui; text-align: left; }
.feedback-queues button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: rgba(223, 189, 125, 0.07); }
.owner-report { border-left: 3px solid var(--gold); padding-left: 14px; }
.feedback-resolution { white-space: pre-wrap; padding: 12px; border: 1px solid rgba(223, 189, 125, 0.267); font: 14px / 1.6 system-ui; color: var(--gold); }
.cinematic-caption.has-portrait { padding-left: 125px; min-height: 100px; text-align: left; }
#caption-portrait { position: absolute; left: 6px; bottom: 0px; width: 112px; height: 112px; filter: drop-shadow(rgba(0, 0, 0, 0.533) 0px 3px 5px); }
@media (max-height: 600px) and (orientation: landscape) {
  .cinematic-caption.has-portrait { padding-left: 92px; min-height: 72px; }
  #caption-portrait { width: 84px; height: 84px; }
}
#scene-projection { position: absolute; object-fit: contain; box-shadow: rgba(118, 223, 255, 0.4) 0px 0px 8px; pointer-events: none; }