:root {
  --ui-bg: #08111f;
  --ui-panel: #101c2d;
  --ui-panel-2: #17263a;
  --ui-paper: #fffaf0;
  --ui-ink: #111827;
  --ui-line: rgba(255,255,255,.14);
  --ui-accent: var(--episode, #c9ff3d);
  --ui-radius: 18px;
}

/* One visual grammar: HUD → character stage → speech → one action */
.cinematic-mode { height: 100dvh; overflow: hidden; background: #030812; }
.cinematic-mode .topbar { display: none; }
.cinematic-mode main { height: 100dvh; }
.cinematic-mode .screen { min-height: 0; height: 100dvh; }
.cinematic-mode .screen-home,
.cinematic-mode .screen-prologue,
.cinematic-mode .screen-stage,
.cinematic-mode .screen-diagnosis,
.cinematic-mode .screen-dossier,
.cinematic-mode .screen-question {
  width: min(100%, 560px);
  margin: 0 auto;
  border-inline: 1px solid var(--ui-line);
  box-shadow: 0 0 90px rgba(0,0,0,.72);
  overflow: hidden;
}

.scene-label, .eyebrow, .case-number, .file-tab, .unlock-label {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.button { border-radius: 12px; font-size: 12px; }
.button-primary { background: var(--ui-accent); }

/* Reusable character and speech bubble */
.scene-avatar {
  width: 72px;
  height: 116px;
  position: relative;
  flex: 0 0 72px;
  filter: drop-shadow(0 8px 7px rgba(0,0,0,.36));
  animation: avatarBreathe 2.6s ease-in-out infinite;
}
.scene-avatar::before {
  content: "";
  width: 52px;
  height: 54px;
  position: absolute;
  left: 10px;
  top: 2px;
  border-radius: 46% 46% 48% 48%;
  background: linear-gradient(#172130 0 28%, #f0c3a2 29% 100%);
  box-shadow: inset 0 -3px rgba(0,0,0,.08);
}
.scene-avatar::after {
  content: "";
  width: 64px;
  height: 61px;
  position: absolute;
  left: 4px;
  bottom: 0;
  border-radius: 18px 18px 7px 7px;
  background: linear-gradient(90deg, rgba(0,0,0,.12), transparent 22% 78%, rgba(0,0,0,.12)), var(--ui-accent);
  border-bottom: 8px solid #26364b;
}
.scene-avatar > span {
  position: absolute;
  left: 50%;
  top: 30px;
  z-index: 2;
  color: #172130;
  font-size: 9px;
  font-weight: 950;
  transform: translateX(-50%);
}
.avatar-guide::before { background: linear-gradient(#d8e4f3 0 18%, #8ed7ff 19% 100%); border-radius: 18px; }
.avatar-guide::after { background: linear-gradient(90deg, #255d7a, #5dd7ff, #255d7a); border-color: #11273b; }
.avatar-guide > span { color: #092035; }
.speech-bubble {
  position: relative;
  color: var(--ui-ink);
  background: white;
  border: 2px solid #172130;
  border-radius: var(--ui-radius);
  box-shadow: 6px 7px 0 rgba(0,0,0,.2);
}
.speech-bubble::before {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  bottom: 22px;
  background: white;
  border-bottom: 2px solid #172130;
  border-left: 2px solid #172130;
  transform: rotate(45deg);
}
.bubble-left::before { left: -9px; }
.bubble-right::before { right: -9px; transform: rotate(225deg); }
.speech-bubble b { font-size: 13px; }
.speech-bubble p { margin: 5px 0 0; font-size: 11px; line-height: 1.45; }
@keyframes avatarBreathe { 50% { transform: translateY(-4px); } }

/* Title screen */
.screen-home { padding: 0; background: var(--ui-bg); }
.screen-home::before { display: none; }
.game-shell { height: 100%; display: grid; grid-template-rows: 44px minmax(270px, 1fr) auto; background: var(--ui-bg); }
.title-shell { isolation: isolate; }
.shell-hud { padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ui-line); background: rgba(4,9,17,.94); }
.shell-hud b { font-size: 12px; }.shell-hud span { color: var(--ui-accent); font: 900 9px ui-monospace, monospace; }
.title-stage { min-height: 0; position: relative; overflow: hidden; background: linear-gradient(#1b3551 0 62%, #27364b 62% 65%, #172438 65%); }
.title-stage::after { content: ""; position: absolute; inset: auto 0 0; height: 35%; background: repeating-linear-gradient(90deg, transparent 0 69px, rgba(255,255,255,.035) 70px 71px); }
.stage-office { position: absolute; left: 7%; right: 7%; top: 8%; height: 43%; border: 7px solid #0f1b2a; background: linear-gradient(#07111e, #326080); box-shadow: inset 0 0 0 2px #64768d; }
.stage-office i { width: 18%; height: 38%; position: absolute; bottom: 0; background: #101a28; }
.stage-office i:nth-child(1) { left: 9%; }.stage-office i:nth-child(2) { left: 40%; height: 62%; }.stage-office i:nth-child(3) { right: 10%; height: 48%; }
.stage-office span { position: absolute; left: 10px; top: 8px; color: rgba(255,255,255,.65); font: 900 8px ui-monospace, monospace; letter-spacing: .1em; }
.title-avatar { position: absolute; left: 14%; bottom: 5%; z-index: 3; animation: titleWalk 2.2s cubic-bezier(.2,.75,.2,1) both, avatarBreathe 2.6s 2.2s infinite; }
.title-bubble { width: 55%; padding: 14px 15px; position: absolute; right: 8%; top: 49%; z-index: 4; }
.incident-stack { position: absolute; right: 7%; top: 8%; z-index: 4; display: grid; gap: 5px; }
.incident-stack i { padding: 6px 8px; color: white; background: #ff3f4f; border: 2px solid #08111f; font: normal 900 8px ui-monospace, monospace; transform: rotate(2deg); }
.incident-stack i:nth-child(2) { background: #ff8b4c; transform: rotate(-2deg); }.incident-stack i:nth-child(3) { background: #5dd7ff; color: #08111f; }
.title-panel { padding: 17px 18px 18px; background: #0d1929; border-top: 1px solid var(--ui-line); }
.title-panel .scene-label { margin: 0 0 7px; color: var(--ui-accent); }.title-panel h1 { margin: 0; font-size: clamp(31px, 5.7vh, 45px); line-height: .94; letter-spacing: -.06em; }.title-panel h1 em { color: var(--ui-accent); font-style: normal; }.title-panel > p:not(.scene-label) { margin: 10px 0 13px; color: #9eacc0; font-size: 11px; line-height: 1.5; }.title-panel .hero-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; }.title-panel .button { min-height: 50px; }.title-panel .feature-strip { margin-top: 10px; gap: 5px; }.title-panel .feature-strip span { padding: 5px 7px; font-size: 8px; }
@keyframes titleWalk { from { left: -22%; } to { left: 14%; } }

/* Prologue uses the same bubble language */
.portrait-game { width: 100%; border: 0; background: var(--ui-bg); }
.game-story { padding: 11px 16px; }.game-story h1 { font-size: clamp(27px, 4.5vh, 35px); }.game-story > p:last-child { font-size: 10px; }
.game-dialogue { padding: 10px 12px; grid-template-columns: 1fr 122px; }.game-dialogue > div { border-radius: var(--ui-radius); border: 2px solid #293b55; box-shadow: 5px 6px 0 rgba(0,0,0,.25); }.game-dialogue > div::after { width: 14px; height: 14px; right: -8px; background: #17243a; }.game-dialogue blockquote { font-size: 11px; line-height: 1.45; }.game-dialogue .button { min-width: 0; width: 122px; }

/* Incident scene: character first, document second */
.cinematic-mode .screen-stage { padding: 9px 11px 11px; background: var(--ui-bg); }
.cinematic-mode .screen-stage .stage-grid { grid-template-rows: minmax(205px, .78fr) minmax(330px, 1.22fr); gap: 8px; }
.cinematic-mode .radio-panel { position: relative; display: block; overflow: hidden; padding: 0; background: linear-gradient(#1b3551 0 64%, #1b293d 64%); border-radius: var(--ui-radius); }
.cinematic-mode .radio-panel::after { content: "HR TEAM · INCIDENT ROOM"; position: absolute; left: 13px; top: 11px; color: rgba(255,255,255,.55); font: 900 8px ui-monospace, monospace; letter-spacing: .1em; }
.cinematic-mode .radio-panel .portrait { width: 82px; position: absolute; left: 9%; bottom: 9px; z-index: 2; }
.cinematic-mode .radio-panel .portrait-face { width: 60px; height: 62px; margin: 0 auto 38px; border-radius: 44% 44% 48% 48%; background: linear-gradient(#151d29 0 28%, #dcb292 29%); border: 0; color: #151d29; font-size: 12px; }
.cinematic-mode .radio-panel .portrait-face::after { content: ""; width: 78px; height: 57px; position: absolute; left: 2px; bottom: 0; border-radius: 17px 17px 5px 5px; background: #303743; border-bottom: 8px solid #111821; }
.cinematic-mode .radio-panel .portrait span { display: block; color: white; font-size: 8px; }
.cinematic-mode .radio-panel blockquote { width: 62%; margin: 0; padding: 14px 15px; position: absolute; right: 7%; top: 27%; color: var(--ui-ink); background: white; border: 2px solid #172130; border-radius: var(--ui-radius); box-shadow: 6px 7px 0 rgba(0,0,0,.24); font-size: 12px; line-height: 1.45; }
.cinematic-mode .radio-panel blockquote::before { content: ""; width: 15px; height: 15px; position: absolute; left: -9px; bottom: 23px; background: white; border-left: 2px solid #172130; border-bottom: 2px solid #172130; transform: rotate(45deg); }
.cinematic-mode .briefing-card { border-radius: var(--ui-radius); box-shadow: none; }.cinematic-mode .briefing-card h1 { font-size: clamp(31px, 5.2vh, 42px); }.cinematic-mode .briefing-copy { font-size: 11px; }.cinematic-mode .evidence-paper { border-radius: 10px; }

/* Choice scene */
.cinematic-mode .screen-diagnosis { padding: 9px 11px 11px; background: var(--ui-bg); }
.diagnosis-scene { display: flex; align-items: end; gap: 9px; margin-bottom: 10px; }
.diagnosis-scene .speech-bubble { flex: 1; padding: 12px 14px; text-align: left; }
.cinematic-mode .diagnosis-wrap { justify-content: flex-start; padding-top: 5px; }
.cinematic-mode .diagnosis-head { margin: 0; }.cinematic-mode .diagnosis-head .eyebrow { color: #ff6b35; }.cinematic-mode .diagnosis-head h1 { font-size: 20px; line-height: 1.1; }.cinematic-mode .diagnosis-head > p:last-child { color: #526074; font-size: 9px; }
.cinematic-mode .diagnosis-choice { border-radius: 13px; background: var(--ui-panel-2); }.cinematic-mode .diagnosis-choice b { font-size: 12px; }.cinematic-mode .diagnosis-choice small { font-size: 9px; }.cinematic-mode .diagnosis-result { border-radius: var(--ui-radius); }

/* Coach explains, player converts it to a rule */
.cinematic-mode .screen-dossier { padding: 9px 11px 11px; background: var(--ui-bg); }
.concept-guide, .rule-cast { display: flex; align-items: end; gap: 9px; margin: 0 0 8px; }
.concept-guide .scene-avatar, .rule-cast .scene-avatar { width: 58px; height: 92px; flex-basis: 58px; transform: scale(.8); transform-origin: bottom; margin-inline: -7px; }
.concept-guide .speech-bubble, .rule-cast .speech-bubble { flex: 1; padding: 10px 12px; }.concept-guide .speech-bubble p, .rule-cast .speech-bubble p { font-size: 9px; }
.cinematic-mode .concept-file { border-radius: var(--ui-radius); padding: 24px 18px 13px; }.cinematic-mode .concept-file h1 { font-size: 30px; }.cinematic-mode .concept-file > p:not(.eyebrow) { font-size: 10px; }.cinematic-mode .lesson-point { border: 1px solid #d9d2c5; border-left: 4px solid var(--ui-accent); border-radius: 10px; background: #f2ecdf; }.cinematic-mode .lesson-point b { font-size: 10px; }.cinematic-mode .lesson-point small { font-size: 9px; }
.cinematic-mode .rule-unlock { border-radius: var(--ui-radius); background: var(--ui-panel); }.cinematic-mode .rule-card { border-radius: 16px; box-shadow: 8px 10px 0 rgba(0,0,0,.27); }.rule-topline { min-height: 26px; }

/* Exam is still a test, but the coach remains present */
.cinematic-mode .screen-question { padding: 9px 11px 11px; background: var(--ui-bg); }
.cinematic-mode .question-layout { grid-template-rows: auto minmax(0,1fr); }
.cinematic-mode .question-memory { display: flex; align-items: end; gap: 8px; padding: 0; background: transparent; border: 0; }
.cinematic-mode .question-memory > .scene-avatar { width: 58px; height: 92px; flex-basis: 58px; transform: scale(.8); transform-origin: bottom; margin-inline: -7px; }
.cinematic-mode .question-memory > .speech-bubble { flex: 1; padding: 9px 12px; display: grid; grid-template-columns: 38px 1fr; gap: 2px 8px; align-items: center; }
.cinematic-mode .question-memory .eyebrow { display: none; }.cinematic-mode .question-memory .memory-topic { grid-row: 1 / 3; }.cinematic-mode .question-memory h2 { font-size: 12px; }.cinematic-mode .question-memory .memory-warning { display: none; }
.cinematic-mode .exam-card { border-radius: var(--ui-radius); box-shadow: none; }.cinematic-mode .exam-option { border-radius: 11px; }.cinematic-mode .question-feedback { border-radius: var(--ui-radius); }.cinematic-mode .question-feedback::before { content: ""; width: 14px; height: 14px; position: absolute; left: 25px; top: -8px; background: var(--ui-ink); transform: rotate(45deg); }

@media (max-height: 700px) {
  .title-stage { min-height: 235px; }
  .title-panel { padding-block: 12px; }
  .title-panel h1 { font-size: 31px; }
  .title-panel > p:not(.scene-label) { margin-block: 7px 9px; font-size: 10px; }
  .cinematic-mode .screen-stage .stage-grid { grid-template-rows: 205px minmax(0,1fr); }
  .scene-avatar { transform: scale(.88); transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-avatar, .title-avatar { animation: none !important; }
}

/* Mobile type scale: Material 3 body 14–16sp, Apple iOS body 17pt / minimum 11pt */
:root {
  --type-display: 2rem;
  --type-title: 1.5rem;
  --type-subtitle: 1.25rem;
  --type-body: 1rem;
  --type-body-small: .875rem;
  --type-label: .75rem;
  --type-button: .875rem;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.cinematic-mode .button { font-size: var(--type-button); line-height: 1.4; }
.scene-label, .eyebrow, .case-number, .file-tab, .unlock-label,
.cinematic-mode .back-button { font-size: var(--type-label); line-height: 1.35; }
.speech-bubble b { font-size: var(--type-body); line-height: 1.4; }
.speech-bubble p { font-size: var(--type-body-small); line-height: 1.5; }
.scene-avatar > span, .character-name { font-size: .6875rem; }

.shell-hud b { font-size: var(--type-body-small); }.shell-hud span { font-size: var(--type-label); line-height: 1.35; }
.stage-office span, .incident-stack i { font-size: var(--type-label); line-height: 1.35; }
.title-panel h1 { font-size: clamp(2rem, 5.7vh, 2.75rem); }
.title-panel > p:not(.scene-label) { font-size: var(--type-body-small); line-height: 1.5; }
.title-panel .feature-strip span { font-size: var(--type-label); line-height: 1.35; }

.game-hud small, .game-hud > span, .hud-alert b { font-size: var(--type-label); line-height: 1.35; }
.office-window span, .office-door span { font-size: var(--type-label); }
.popup-head, .game-popup > small { font-size: var(--type-label); line-height: 1.35; }
.game-popup .evidence-rows div, .game-popup > p { font-size: var(--type-body-small); line-height: 1.45; }
.game-story .eyebrow { font-size: var(--type-label); }.game-story > p:last-child { font-size: var(--type-body-small); line-height: 1.5; }
.game-dialogue span:first-child { font-size: var(--type-label); }.game-dialogue blockquote { font-size: var(--type-body-small); line-height: 1.5; }
.game-footer { font-size: .6875rem; }.game-footer .text-button { font-size: .6875rem; }

.cinematic-mode .radio-panel::after, .cinematic-mode .radio-panel .portrait span { font-size: var(--type-label); }
.cinematic-mode .radio-panel blockquote { font-size: var(--type-body-small); line-height: 1.5; }
.cinematic-mode .briefing-label, .cinematic-mode .briefing-card .eyebrow,
.cinematic-mode .paper-head, .cinematic-mode .paper-row { font-size: var(--type-label); line-height: 1.4; }
.cinematic-mode .briefing-copy { font-size: var(--type-body-small); line-height: 1.5; }

.cinematic-mode .diagnosis-head .eyebrow { font-size: var(--type-label); }
.cinematic-mode .diagnosis-head h1 { font-size: var(--type-subtitle); line-height: 1.25; }
.cinematic-mode .diagnosis-head > p:last-child { font-size: var(--type-body-small); line-height: 1.5; }
.cinematic-mode .diagnosis-choice b { font-size: var(--type-body-small); line-height: 1.4; }
.cinematic-mode .diagnosis-choice small { font-size: var(--type-label); line-height: 1.35; }
.cinematic-mode .diagnosis-result h2 { font-size: var(--type-body); line-height: 1.35; }
.cinematic-mode .diagnosis-result p { font-size: var(--type-label); line-height: 1.4; }
.cinematic-mode .diagnosis-result .button { font-size: var(--type-button); }

.concept-guide .speech-bubble p, .rule-cast .speech-bubble p { font-size: var(--type-body-small); line-height: 1.45; }
.cinematic-mode .concept-file h1 { font-size: 1.75rem; line-height: 1.05; }
.cinematic-mode .concept-file > p:not(.eyebrow) { font-size: var(--type-body-small); line-height: 1.5; }
.cinematic-mode .lesson-point b { font-size: var(--type-body-small); line-height: 1.35; }
.cinematic-mode .lesson-point small { font-size: var(--type-label); line-height: 1.4; }
.card-front small, .card-back small, .card-seal { font-size: var(--type-label); }
.cinematic-mode .card-back p { font-size: var(--type-body-small); line-height: 1.5; }
.memory-line { font-size: var(--type-label); line-height: 1.4; }
.cinematic-mode .demo-finish .eyebrow { font-size: var(--type-label); }
.cinematic-mode .demo-finish h2 { font-size: var(--type-subtitle); line-height: 1.3; }
.cinematic-mode .demo-finish > p:not(.eyebrow) { font-size: var(--type-label); line-height: 1.45; }
.cinematic-mode .finish-actions .button { font-size: var(--type-button); }

.cinematic-mode .question-memory h2 { font-size: var(--type-body-small); line-height: 1.35; }
.cinematic-mode .question-memory > .speech-bubble > p:not(.eyebrow) { font-size: var(--type-label); line-height: 1.4; }
.cinematic-mode .exam-head, .cinematic-mode .exam-card .eyebrow { font-size: var(--type-label); line-height: 1.35; }
.cinematic-mode .exam-card h1 { font-size: var(--type-body); line-height: 1.45; }
.cinematic-mode .exam-option span { font-size: var(--type-label); }
.cinematic-mode .exam-option b { font-size: .8125rem; line-height: 1.4; }
.cinematic-mode .question-feedback h2 { font-size: var(--type-body); line-height: 1.35; }
.cinematic-mode .question-feedback p { font-size: var(--type-label); line-height: 1.45; }
.toast { font-size: var(--type-body-small); line-height: 1.4; }

/* Critical progression controls: keep the next action reachable in the fixed game viewport. */
.cinematic-mode .briefing-card {
  padding-bottom: 72px;
}
.cinematic-mode #diagnoseButton {
  width: auto;
  min-height: 48px;
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  z-index: 6;
  box-shadow: 0 -10px 24px rgba(244, 239, 226, .94);
}
.cinematic-mode .diagnosis-wrap {
  position: relative;
}
.cinematic-mode .diagnosis-result {
  margin: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  box-shadow: 0 -12px 30px rgba(5, 9, 18, .42);
}
.cinematic-mode .concept-file {
  padding-bottom: 72px;
}
.cinematic-mode #showRuleButton {
  width: auto;
  min-height: 48px;
  margin: 0;
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  z-index: 6;
  box-shadow: 0 -10px 24px rgba(244, 239, 226, .94);
}
.cinematic-mode .rule-unlock {
  padding-bottom: 118px;
}
.cinematic-mode .demo-finish {
  width: auto;
  margin: 0;
  padding: 10px 12px 12px;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  background: #17243a;
  border: 1px solid #718198;
  border-radius: var(--ui-radius);
  box-shadow: 0 -12px 30px rgba(5, 9, 18, .46);
}
.cinematic-mode .exam-card {
  padding-bottom: 66px;
}
.cinematic-mode #gradeQuestionButton {
  width: auto;
  min-height: 44px;
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 4;
}

/* At extreme zoom/small heights, preserve content instead of clipping it. */
@media (max-height: 560px) {
  .cinematic-mode, .cinematic-mode main { overflow-y: auto; }
  .cinematic-mode .screen-stage, .cinematic-mode .screen-diagnosis,
  .cinematic-mode .screen-dossier, .cinematic-mode .screen-question { min-height: 700px; overflow: visible; }
}

/* Accessible interactive colors: every control keeps at least 4.5:1 text contrast. */
:root {
  --control-on-accent: #07101d;
  --control-secondary: #24344a;
  --control-on-secondary: #f8fafc;
  --control-disabled: #475569;
  --control-on-disabled: #f8fafc;
  --control-link: #e2e8f0;
  --control-focus: #ffffff;
  --control-focus-outer: #2563eb;
}
.button-primary,
.button-primary span,
.game-dialogue .button-primary,
.game-dialogue .button-primary span {
  color: var(--control-on-accent) !important;
}
.button-ghost {
  color: var(--control-on-secondary);
  background: var(--control-secondary);
  border-color: #718198;
}
.button-ghost:hover { color: #ffffff; background: #31445f; border-color: #a9b7c9; }
.text-button, .back-button { color: var(--control-link); }
.text-button:hover, .back-button:hover { color: #ffffff; }
.game-dialogue > div > span:first-child { color: var(--ui-accent); }
.game-dialogue .button span:first-child { color: var(--control-on-accent) !important; }
.button:disabled,
.exam-card .button:disabled,
.game-dialogue .button:disabled {
  opacity: 1;
  color: var(--control-on-disabled) !important;
  background: var(--control-disabled) !important;
  border-color: #94a3b8;
  box-shadow: none;
}
.button:disabled span { color: var(--control-on-disabled) !important; }
button:focus-visible {
  outline: 3px solid var(--control-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--control-focus-outer);
}
.diagnosis-choice { color: #ffffff; }
.cinematic-mode .diagnosis-choice small { color: #cbd5e1; }
.diagnosis-choice kbd { color: var(--ui-accent); background: #07101d; border-color: #94a3b8; }
.exam-option { color: #111827; background: #fffaf0; border-color: #8b8173; }
.exam-option span { color: #111827; border-color: #5f584e; }
.exam-option.selected { color: #111827; background: #ffffff; }
.exam-option.correct { color: #102a1e; background: #dff5e8; border-color: #236b49; }
.exam-option.wrong { color: #3d1116; background: #ffe4e6; border-color: #a51d2c; }
.rule-card, .rule-card .card-front { color: #07101d; }
.concept-node.available { color: #07101d; }