:root {
  --ink: #f7f3ff;
  --muted: #c9c4da;
  --night: #151227;
  --panel: rgba(15, 13, 32, 0.88);
  --accent: #ffb1c8;
  --accent-2: #91ddff;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  background: #080713;
  color: var(--ink);
  font-family: "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  overflow: hidden;
}

button { font: inherit; }

.game-shell {
  width: 100vw;
  height: 100vh;
  min-height: 480px;
  position: relative;
  overflow: hidden;
  background: var(--night);
}

.is-hidden { display: none !important; }

.title-screen, .game-screen { width: 100%; height: 100%; position: relative; }
.title-screen { transition: opacity 1600ms ease; }
.title-screen.is-leaving { opacity: 0; pointer-events: none; }
.game-screen { opacity: 1; transition: opacity 1100ms ease; }
.game-screen.is-entering { opacity: 0; }

.title-screen {
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 17% 28%, rgba(28, 122, 190, 0.4), transparent 24%),
    radial-gradient(ellipse at 83% 61%, rgba(191, 19, 42, 0.38), transparent 25%),
    linear-gradient(125deg, #050b15 0%, #111828 51%, #170b15 100%);
}

.title-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: none;
}

.title-screen::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(43, 151, 236, 0.09), transparent 22%, transparent 77%, rgba(228, 35, 59, 0.1)), radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.64) 100%); }
.cityline { position: absolute; z-index: 0; right: -4vw; bottom: 0; left: -4vw; height: 35vh; opacity: 0.92; background: linear-gradient(90deg, transparent 0 4%, #0a0d16 4% 10%, transparent 10% 11%, #10131c 11% 18%, transparent 18% 20%, #080c13 20% 29%, transparent 29% 30%, #11151d 30% 39%, transparent 39% 41%, #090d14 41% 49%, transparent 49% 50%, #10131d 50% 63%, transparent 63% 65%, #0a0e16 65% 76%, transparent 76% 78%, #10131b 78% 91%, transparent 91%); clip-path: polygon(0 65%, 4% 65%, 4% 40%, 10% 40%, 10% 55%, 15% 55%, 15% 25%, 22% 25%, 22% 65%, 28% 65%, 28% 48%, 34% 48%, 34% 15%, 38% 15%, 38% 65%, 45% 65%, 45% 36%, 52% 36%, 52% 55%, 58% 55%, 58% 16%, 65% 16%, 65% 65%, 72% 65%, 72% 42%, 80% 42%, 80% 22%, 87% 22%, 87% 65%, 94% 65%, 94% 32%, 100% 32%, 100% 100%, 0 100%); box-shadow: 0 -20px 80px rgba(22, 94, 148, 0.18); }
.rainfall { position: absolute; z-index: 2; inset: -16% -8%; overflow: hidden; opacity: 0.36; pointer-events: none; }
.rainfall::before, .rainfall::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(106deg, transparent 49.55%, rgba(198, 224, 244, 0.56) 49.85%, rgba(198, 224, 244, 0.56) 50.15%, transparent 50.45%); background-size: 92px 148px; animation: rainfall 1.05s linear infinite; }
.rainfall::after { opacity: 0.48; background-size: 163px 243px; background-position: 41px -96px; animation-duration: 1.55s; animation-delay: -620ms; }
.police-tape { position: absolute; z-index: 3; left: -12%; width: 124%; overflow: hidden; padding: 8px 0; color: #17120b; background: repeating-linear-gradient(90deg, #e7b831 0 34px, #e7b831 34px 42px, #191711 42px 50px); background-size: 100px 100%; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.32em; text-align: center; opacity: 0.86; box-shadow: 0 4px 14px rgba(0,0,0,0.45); transform: rotate(-4deg); }
.police-tape span { display: block; width: 100%; min-width: 0; white-space: nowrap; }
.tape-top { top: 8%; }
.case-marker { position: absolute; z-index: 1; color: rgba(230, 237, 240, 0.38); border: 1px solid rgba(211, 227, 237, 0.26); font-family: Consolas, monospace; letter-spacing: 0.12em; }
.marker-one { top: 23%; left: 7%; padding: 10px 14px; font-size: 1.5rem; color: rgba(224, 45, 58, 0.65); border-color: rgba(224, 45, 58, 0.48); }
.marker-two { right: 7%; bottom: 14%; padding: 7px 10px; font-size: 0.62rem; transform: rotate(90deg); }
.title-content { position: relative; z-index: 4; width: min(92vw, 900px); text-align: center; padding: 46px 24px 24px; }
.eyebrow { color: #a9cde5; margin: 0 0 15px; font-family: Consolas, "Microsoft YaHei", monospace; font-size: clamp(0.6rem, 1.2vw, 0.75rem); letter-spacing: 0.22em; }
h1 { display: grid; margin: 0; text-transform: uppercase; line-height: 0.8; }
.title-code { color: #e6eef4; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(4.7rem, 14vw, 9.7rem); font-style: italic; letter-spacing: 0.04em; text-shadow: 5px 0 rgba(197, 25, 45, 0.86), -4px 0 rgba(30, 132, 194, 0.82), 0 0 28px rgba(214, 230, 240, 0.23); }
.title-name { margin-top: 8px; color: #d4dfe6; font-size: clamp(1.9rem, 6vw, 4rem); font-weight: 800; letter-spacing: 0.2em; text-indent: 0.2em; text-shadow: 2px 2px #8c1728, -1px -1px #183f64; }
.case-file-label { display: inline-flex; align-items: center; gap: 14px; margin: 28px 0 32px; padding: 9px 15px; border-block: 1px solid rgba(215, 229, 239, 0.38); background: rgba(5, 10, 19, 0.56); }
.case-file-label > span { color: #f0be3e; font-family: Consolas, monospace; font-size: 0.75rem; letter-spacing: 0.13em; }
.subtitle { margin: 0; color: #e8edf0; font-size: clamp(0.84rem, 2.2vw, 1rem); letter-spacing: 0.13em; }

.start-button, .choice-button {
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: var(--ink);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.start-button {
  min-width: 220px;
  padding: 14px 28px;
  border-color: #ddbd58;
  background: linear-gradient(90deg, rgba(138, 20, 35, 0.88), rgba(29, 63, 91, 0.88));
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
}

.start-button:hover, .start-button:focus-visible, .choice-button:hover, .choice-button:focus-visible {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 9px 28px rgba(145, 221, 255, 0.22);
  outline: none;
}

.title-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 68px; }
.title-action-button { min-width: 94px; padding: 13px 16px; border: 1px solid rgba(220, 194, 95, 0.74); color: #e9e3c8; background: rgba(7, 14, 26, 0.68); cursor: pointer; letter-spacing: 0.12em; }
.title-action-button:hover, .title-action-button:focus-visible { background: rgba(206, 41, 56, 0.3); outline: 1px solid #e2bd4c; }
.title-status { min-height: 1.2em; margin: 12px 0 0; color: #e5c45a; font-size: 0.76rem; }

.controls-hint { margin: 18px 0 0; font-family: Consolas, "Microsoft YaHei", monospace; font-size: 0.7rem; letter-spacing: 0.1em; color: rgba(206, 221, 230, 0.66); }

.background-placeholder {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: background 600ms ease;
  background: linear-gradient(180deg, #090d27 0%, #313866 55%, #14142b 100%);
}
.background-placeholder.has-background-art { background-position: center; background-repeat: no-repeat; background-size: cover; }
.background-placeholder.has-background-art::before, .background-placeholder.has-background-art::after { display: none; }

.background-placeholder::before {
  content: "";
  position: absolute;
  inset: 45% -5% 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 90px), linear-gradient(170deg, transparent 0 45%, rgba(7, 7, 20, 0.7) 46% 100%);
}

.background-placeholder[data-background="rooftop"] { background: linear-gradient(180deg, #251744 0%, #c56882 51%, #51366b 74%, #16152e 100%); }
.background-placeholder[data-background="home"] { background: linear-gradient(135deg, #564137 0%, #b58870 46%, #6b5261 100%); }
.background-placeholder[data-background="void"] { background: radial-gradient(circle at center, #443877 0%, #17142e 44%, #090812 100%); }
.background-placeholder[data-background="crime-scene"] { background: linear-gradient(180deg, #0e1524 0%, #414d61 52%, #21151c 100%); }
.background-placeholder[data-background="crime-scene"]::after { content: ""; position: absolute; width: 42%; height: 58%; left: 29%; bottom: 20%; border: 4px solid rgba(245, 240, 230, 0.42); background: linear-gradient(90deg, transparent 49.4%, rgba(126, 19, 29, 0.78) 49.5% 50.5%, transparent 50.6%); box-shadow: 0 0 50px rgba(0, 0, 0, 0.48); }
.background-placeholder[data-background="police-line"] { background: linear-gradient(180deg, #071329 0%, #193d61 55%, #171424 100%); }
.background-placeholder[data-background="police-line"]::after { content: "封锁线 · POLICE LINE"; position: absolute; left: -10%; right: -10%; top: 42%; padding: 10px; transform: rotate(-7deg); text-align: center; letter-spacing: 0.35em; color: #181116; background: repeating-linear-gradient(90deg, #f3ca3f 0 60px, #111 60px 120px); font-size: clamp(0.75rem, 2vw, 1.15rem); font-weight: 800; }
.background-placeholder[data-background="building-hall"] { background: linear-gradient(180deg, #25232e 0%, #57505b 45%, #1b1723 100%); }

.asset-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 7px 10px;
  color: rgba(255,255,255,0.76);
  border: 1px dashed rgba(255,255,255,0.48);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.character-layer { position: absolute; inset: 4% 2% 0; pointer-events: none; }
.character { position: absolute; bottom: 0; width: min(42vw, 620px); height: min(82vh, 880px); overflow: hidden; }
.character-left { left: 2%; }.character-center { left: 50%; transform: translateX(-50%); }.character-right { right: 2%; }
.character-layer[data-cast="1"] .character:not(.protagonist-full):not(.is-hidden) { left: 50%; right: auto; transform: translateX(-50%); }
.character-layer[data-cast="2"] .character { width: min(37vw, 550px); height: min(80vh, 860px); overflow: hidden; }
.character-layer[data-cast="2"] .character-left { left: 13%; }
.character-layer[data-cast="2"] .character-right { right: 13%; }
.character-layer[data-cast="2"] .portrait-image { top: 0; width: 165%; height: 165%; transform: translateX(-50%); object-fit: contain; object-position: center top; }
.character-layer.has-protagonist-full[data-cast="1"] .character:not(.protagonist-full):not(.is-hidden) { left: 10%; right: auto; width: min(38vw, 580px); transform: none; }
.character-layer.has-protagonist-full[data-cast="1"] .protagonist-full { left: auto; right: 10%; width: min(38vw, 580px); transform: none; }
.character:not(.is-active) { filter: none; }
.character.is-active { filter: none; }
.character.is-intro-reveal { animation: character-fade-in 1.1s ease both; }
.portrait-image { position: absolute; top: 0; left: 50%; width: 185%; height: 185%; transform: translateX(-50%); object-fit: contain; object-position: center top; }
.character.has-artwork .portrait-silhouette { display: none; }
.portrait-silhouette { width: 100%; height: calc(100% - 30px); clip-path: polygon(42% 0, 58% 0, 65% 14%, 62% 27%, 88% 38%, 97% 100%, 3% 100%, 12% 38%, 38% 27%, 35% 14%); background: linear-gradient(140deg, rgba(255, 215, 229, 0.96), rgba(154, 208, 255, 0.75)); border: 1px solid rgba(255,255,255,0.7); box-shadow: inset 0 0 36px rgba(255,255,255,0.25); }
.character-right .portrait-silhouette { background: linear-gradient(140deg, rgba(156, 180, 255, 0.96), rgba(122, 103, 196, 0.76)); }
.character-center .portrait-silhouette { background: linear-gradient(140deg, rgba(255, 207, 151, 0.94), rgba(238, 127, 147, 0.7)); }
.protagonist-full { z-index: 2; overflow: visible; }
.protagonist-full .portrait-silhouette { background: linear-gradient(140deg, rgba(141, 168, 196, 0.98), rgba(54, 68, 100, 0.9)); }
.protagonist-full .portrait-name { color: rgba(225, 237, 255, 0.9); }
.portrait-name { display: none; }

.cg-placeholder { position: absolute; z-index: 3; inset: 0; overflow: hidden; background: #080b16; }
.cg-placeholder:not(.is-hidden) { animation: cg-fade-in 2.7s ease both; }
.cg-placeholder.is-fading-out { animation: cg-fade-out 1s ease both; }
.cg-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.scene-transition { position: absolute; z-index: 30; inset: 0; pointer-events: none; background: #04060d; opacity: 0; }
.scene-transition.is-active { animation: scene-fade 2.1s ease-in-out both; }
.chapter-card { position: absolute; z-index: 31; top: 16%; left: max(6vw, 24px); max-width: min(76vw, 580px); padding: 18px 22px 18px 26px; border: 1px solid rgba(220, 194, 80, 0.72); border-left: 5px solid #dfb63f; background: rgba(6, 12, 23, 0.86); box-shadow: 10px 10px 0 rgba(4, 7, 13, 0.52); }
.chapter-card:not(.is-hidden) { animation: chapter-float 2.5s ease both; }
.chapter-card span { color: #e2bd4c; font-family: Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.2em; }
.chapter-card h2 { margin: 8px 0 0; color: #edf3f6; font-size: clamp(1.35rem, 4vw, 2.45rem); letter-spacing: 0.1em; text-shadow: 2px 0 #9a1a2c, -1px 0 #1d638d; }

.ui-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.game-controls { position: absolute; right: 20px; bottom: 12px; z-index: 2; display: flex; gap: 6px; pointer-events: auto; }
.game-control { border: 1px solid rgba(213, 229, 239, 0.5); color: #e5edf2; background: rgba(9, 16, 28, 0.78); padding: 7px 10px; font-size: 0.75rem; letter-spacing: 0.1em; cursor: pointer; }
.game-control:hover, .game-control:focus-visible, .game-control.is-active { border-color: #e5be4c; color: #f6d261; background: rgba(116, 22, 34, 0.76); outline: none; }
.game-status { position: absolute; top: 53px; right: 18px; z-index: 12; margin: 0; max-width: 260px; color: #e9cb69; font-size: 0.7rem; text-align: right; text-shadow: 0 1px #05070b; }
.dialogue-box { position: absolute; left: max(4vw, 18px); right: max(4vw, 18px); bottom: max(3vh, 16px); min-height: 150px; padding: 42px 42px 50px; border: 1px solid rgba(213, 229, 239, 0.46); border-left: 5px solid #e0b638; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px), linear-gradient(110deg, rgba(13, 31, 50, 0.96), rgba(13, 12, 25, 0.96) 55%, rgba(49, 13, 22, 0.94)); box-shadow: inset 0 1px rgba(255,255,255,0.16), 0 8px 30px rgba(0,0,0,0.35); cursor: pointer; pointer-events: auto; }
.dialogue-box.is-slow-reveal { animation: dialogue-fade-in 1.4s ease 500ms both; }
.dialogue-box:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.dialogue-box::before { content: "DSTR POLICE · OCCULT CASE FILE"; position: absolute; top: 12px; right: 20px; color: rgba(192, 213, 227, 0.56); font-family: Consolas, "Microsoft YaHei", monospace; font-size: 0.59rem; letter-spacing: 0.14em; }
.nameplate { position: absolute; top: -22px; left: 22px; min-width: 132px; padding: 8px 16px; border: 2px solid #e6bf4b; color: #f3cd5c; background: rgba(11, 16, 28, 0.38); font-family: Consolas, "Microsoft YaHei", monospace; font-size: 0.9rem; font-weight: 800; letter-spacing: 0.14em; text-align: center; text-indent: 0.14em; box-shadow: none; }
.dialogue-box.is-narration { padding-top: 30px; }
.dialogue-box.has-protagonist-avatar .nameplate { left: 297px; }
.protagonist-avatar { position: absolute; left: 6px; bottom: 0; z-index: 2; width: 250px; height: 260px; overflow: hidden; }
.avatar-image { position: absolute; top: 0; left: 43%; width: 460%; height: 460%; transform: translateX(-50%); object-fit: contain; object-position: center top; }
.protagonist-avatar.has-artwork .avatar-silhouette { display: none; }
.avatar-silhouette { position: absolute; bottom: -9px; width: 94px; height: 112px; clip-path: polygon(40% 0, 60% 0, 69% 17%, 64% 32%, 88% 49%, 97% 100%, 3% 100%, 12% 49%, 36% 32%, 31% 17%); background: linear-gradient(145deg, #d9e8f3, #647c9f 62%, #242b45); }
.protagonist-avatar span { display: none; }
.dialogue-box.has-protagonist-avatar .dialogue-text { padding-left: 255px; }
.dialogue-box.is-horror { border-color: rgba(220, 45, 58, 0.72); background: rgba(18, 4, 11, 0.92); box-shadow: inset 0 0 42px rgba(173, 12, 30, 0.22), 0 0 32px rgba(125, 8, 25, 0.48); }
.dialogue-box.is-horror .dialogue-text { color: #ffd8d8; font-weight: 700; letter-spacing: 0.13em; text-align: center; text-shadow: 2px 0 #7f1321, -2px 0 #2c93a3, 0 0 12px #b81828; animation: horror-shiver 260ms steps(2, end) 4; }
.dialogue-box.is-horror::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255, 225, 225, 0.12) 5px 6px); }
.dialogue-text { margin: 0; max-width: 1050px; padding-right: 25px; font-size: clamp(1rem, 2vw, 1.22rem); line-height: 1.9; letter-spacing: 0.045em; }
.advance-indicator { position: absolute; right: 22px; bottom: 46px; color: var(--accent-2); animation: pulse 900ms ease-in-out infinite alternate; }
.advance-indicator.is-hidden { display: none; }
.menu-button { position: absolute; top: 18px; right: 18px; z-index: 12; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.5); background: rgba(13,11,29,0.52); color: white; font-size: 1.15rem; cursor: pointer; pointer-events: auto; }

.choice-panel { position: absolute; z-index: 11; left: 50%; top: 44%; width: min(80vw, 570px); transform: translate(-50%, -50%); display: grid; gap: 12px; }
.choice-button { padding: 15px 20px; text-align: left; background: rgba(17, 14, 39, 0.9); font-size: 1rem; }
.history-panel { position: absolute; z-index: 20; top: 10%; right: max(6vw, 24px); bottom: 12%; left: max(6vw, 24px); display: flex; flex-direction: column; border: 1px solid rgba(218, 191, 78, 0.72); border-left: 5px solid #e0b638; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px), rgba(8, 13, 23, 0.97); box-shadow: 0 14px 50px rgba(0,0,0,0.62); pointer-events: auto; }
.history-heading { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid rgba(212, 229, 239, 0.24); }
.history-heading span { color: #e3bf4e; font-family: Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.16em; }
.history-heading h2 { margin: 4px 0 0; font-size: 1.2rem; letter-spacing: 0.14em; }
.history-close { border: 1px solid rgba(215, 229, 239, 0.45); color: #eaf1f5; background: transparent; width: 34px; height: 34px; cursor: pointer; font-size: 1.3rem; }
.history-list { flex: 1; overflow-y: auto; padding: 18px 22px; }
.history-entry { padding: 0 0 15px; margin-bottom: 15px; border-bottom: 1px solid rgba(205, 221, 230, 0.14); }
.history-entry strong { color: #e9c454; font-size: 0.85rem; }
.history-entry p, .history-empty { margin: 5px 0 0; line-height: 1.75; color: #e4eaf0; }
.save-modal { position: absolute; z-index: 40; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(3, 7, 14, 0.72); }
.save-modal-card { width: min(92vw, 720px); border: 1px solid rgba(225, 191, 76, 0.76); border-left: 5px solid #e0b638; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px), rgba(8, 13, 23, 0.98); box-shadow: 0 16px 60px rgba(0,0,0,0.7); }
.save-modal-heading { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(212, 229, 239, 0.24); }
.save-modal-heading span { color: #e3bf4e; font-family: Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.16em; }
.save-modal-heading h2 { margin: 4px 0 0; font-size: 1.25rem; letter-spacing: 0.14em; }
.save-modal-help { margin: 16px 22px 0; color: rgba(225, 235, 241, 0.72); font-size: 0.82rem; }
.save-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 18px 22px 22px; }
.save-slot { display: grid; gap: 7px; min-height: 78px; padding: 13px; border: 1px solid rgba(204, 222, 233, 0.36); color: #edf4f8; background: rgba(19, 27, 41, 0.72); text-align: left; cursor: pointer; }
.save-slot span { color: #e2bd4c; font-family: Consolas, monospace; font-size: 0.7rem; letter-spacing: 0.12em; }
.save-slot strong { overflow: hidden; color: #dce6ec; font-size: 0.84rem; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.save-slot:hover, .save-slot:focus-visible { border-color: #e5be4c; background: rgba(97, 24, 36, 0.72); outline: none; }
.save-slot:disabled { cursor: not-allowed; opacity: 0.42; }

@keyframes pulse { from { transform: translateY(0); opacity: 0.5; } to { transform: translateY(5px); opacity: 1; } }
@keyframes rainfall { from { transform: translate3d(0, -55px, 0); } to { transform: translate3d(-18px, 108px, 0); } }
@keyframes cg-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes character-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialogue-fade-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scene-fade { 0% { opacity: 0; } 40%, 62% { opacity: 1; } 100% { opacity: 0; } }
@keyframes chapter-float { 0% { opacity: 0; transform: translate(-24px, 12px); } 22%, 78% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(10px, -6px); } }
@keyframes horror-shiver { 0%, 100% { transform: translate(0); } 33% { transform: translate(-2px, 1px); } 66% { transform: translate(2px, -1px); } }

@media (max-width: 640px) {
  .game-shell { min-height: 100svh; }
  .title-content { padding-inline: 12px; }
  .title-actions { gap: 8px; margin-top: 46px; }
  .title-action-button { min-width: 82px; padding: 12px 10px; }
  .title-code { font-size: clamp(4.4rem, 20vw, 6rem); }
  .title-name { font-size: clamp(1.75rem, 9.2vw, 2.7rem); }
  .case-file-label { gap: 8px; margin: 24px 0 30px; padding: 8px 10px; }
  .case-file-label > span { font-size: 0.62rem; }
  .subtitle { font-size: 0.78rem; }
  .marker-one { left: 4%; }.marker-two { right: 1%; }
  .character-layer { inset: 11% 0 0; }
  .character { width: 78vw; height: 69vh; }
  .character-left { left: -16%; }.character-right { right: -16%; }.character-center { width: 78vw; }
  .character-layer[data-cast="1"] .character:not(.protagonist-full):not(.is-hidden) { left: 50%; }
  .character-layer[data-cast="2"] .character { width: 54vw; height: 68vh; }
  .character-layer[data-cast="2"] .character-left { left: -2%; }
  .character-layer[data-cast="2"] .character-right { right: -2%; }
  .character-layer[data-cast="2"] .portrait-image { width: 150%; height: 150%; }
  .character-layer.has-protagonist-full[data-cast="1"] .character:not(.protagonist-full):not(.is-hidden) { left: -5%; width: 55vw; }
  .character-layer.has-protagonist-full[data-cast="1"] .protagonist-full { right: -5%; width: 55vw; }
  .dialogue-box { left: 12px; right: 12px; bottom: 12px; min-height: 170px; padding: 38px 20px 50px; }
  .dialogue-box::before { top: 11px; right: 12px; font-size: 0.49rem; }
  .nameplate { top: -20px; min-width: 112px; font-size: 0.75rem; }
  .protagonist-avatar { left: 0; bottom: 0; width: 210px; height: 230px; }
  .avatar-image { width: 460%; height: 460%; }
  .avatar-silhouette { width: 82px; height: 98px; }
  .dialogue-box.has-protagonist-avatar .dialogue-text { padding-left: 195px; }
  .dialogue-box.has-protagonist-avatar .nameplate { left: 215px; }
  .dialogue-text { line-height: 1.75; }
  .asset-tag { top: 12px; left: 12px; font-size: 0.65rem; }
  .game-controls { right: 12px; bottom: 9px; gap: 3px; }
  .game-control { padding: 6px 7px; font-size: 0.64rem; }
  .advance-indicator { right: 12px; bottom: 39px; }
  .game-status { top: 43px; right: 10px; max-width: 210px; font-size: 0.62rem; }
  .history-panel { top: 8%; right: 12px; bottom: 8%; left: 12px; }
  .history-heading { padding: 13px 15px; }
  .history-list { padding: 14px 16px; }
  .save-modal { padding: 12px; }
  .save-modal-heading { padding: 14px 16px; }
  .save-modal-help { margin: 13px 16px 0; }
  .save-slots { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px 16px; }
  .chapter-card { top: 15%; left: 18px; right: 18px; max-width: none; padding: 15px 17px 15px 20px; }
  .chapter-card h2 { font-size: 1.35rem; }
  .cg-image { object-position: 57% center; }
}