/* 마인크래프트 화면 문법을 빌린 공통 스타일.
   픽셀 글꼴은 설계 크기의 정수배(Galmuri11: 12px, Galmuri14: 15px)에서만 쓴다. */

@font-face { font-family: 'Galmuri11'; src: url('/fonts/Galmuri11.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Galmuri11'; src: url('/fonts/Galmuri11-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Galmuri14'; src: url('/fonts/Galmuri14.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  /* 마크 채팅 색 */
  --white: #ffffff;
  --gray: #aaaaaa;
  --dark-gray: #555555;
  --yellow: #ffff55;
  --gold: #ffaa00;
  --red: #ff5555;
  --dark-red: #aa0000;
  --aqua: #55ffff;
  --green: #55ff55;
  --purple: #ff55ff;

  --u: 4px;                       /* 그림 1칸 크기 */
  --s: 6px;                       /* 스킨 1칸 크기 */
  --fs-s: 15px;                   /* Galmuri14 x1 */
  --fs-m: 24px;                   /* Galmuri11 x2 */
  --fs-l: 48px;                   /* Galmuri11 x4 */
  --fs-xl: 96px;                  /* Galmuri11 x8 */
  --gutter: 32px;
  --max: 1200px;

  --accent: var(--red);
  --bar-fill: #e8463f;
  --bar-track: #4a1210;

  color-scheme: dark;
}

[data-theme='mayor'] {
  --accent: var(--gold);
  --bar-fill: #ffcf3a;
  --bar-track: #4a3a0c;
}

@media (max-width: 700px) {
  :root {
    --u: 3px;
    --s: 4px;
    --fs-m: 18px;                 /* 작은 화면은 해상도가 높아 1.5배도 선명하다 */
    --fs-l: 36px;
    --fs-xl: 60px;
    --gutter: 16px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
img, canvas, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

html { background: #000; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--white);
  font-family: 'Galmuri11', 'Galmuri14', sans-serif;
  font-size: var(--fs-m);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  font-synthesis: none;
  background-color: #000;
  background-size: calc(var(--u) * 16) calc(var(--u) * 16);
  image-rendering: pixelated;
}

/* 질감 위를 덮는 어둠 (마크 메뉴가 세상을 어둡게 깔듯이) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.88);
  pointer-events: none;
}

.px, canvas.px { image-rendering: pixelated; image-rendering: crisp-edges; }
.small { font-family: 'Galmuri14', 'Galmuri11', sans-serif; font-size: var(--fs-s); }

/* 마크 글자 그림자: 1칸 아래 오른쪽, 글자색의 1/4 밝기 */
.sh { text-shadow: calc(var(--fs-m) / 12) calc(var(--fs-m) / 12) 0 #3f3f3f; }
.sh-l { text-shadow: calc(var(--fs-l) / 12) calc(var(--fs-l) / 12) 0 #3f3f3f; }
.sh-xl { text-shadow: calc(var(--fs-xl) / 12) calc(var(--fs-xl) / 12) 0 #3f3f3f; }
.c-gray { color: var(--gray); text-shadow-color: #2a2a2a; }
.c-yellow { color: var(--yellow); }
.c-gold { color: var(--gold); }
.c-red { color: var(--red); }
.c-dark-red { color: var(--dark-red); }
.c-aqua { color: var(--aqua); }
.c-purple { color: var(--purple); }

::selection { background: #3366ff; color: #fff; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 단추와 입력칸 ─────────────────────────────────────── */

.mc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--u) * 50);
  height: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 6);
  border: 0;
  outline: 2px solid #000;
  outline-offset: 0;
  color: #fff;
  font-size: var(--fs-m);
  text-shadow: calc(var(--fs-m) / 12) calc(var(--fs-m) / 12) 0 #3f3f3f;
  background-color: #6d6d6d;
  background-image: var(--stone);
  background-size: calc(var(--u) * 16) calc(var(--u) * 16);
  box-shadow: inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.35), inset 0 calc(var(--u) * -1) 0 rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.mc-btn:hover, .mc-btn:focus-visible { outline-color: #fff; color: #ffffa0; }
.mc-btn:active { transform: translateY(1px); }
.mc-btn[disabled] { color: #a0a0a0; background-color: #2c2c2c; background-image: none !important; box-shadow: none; cursor: default; }
.mc-btn.wide { width: 100%; }

.mc-field { display: grid; gap: calc(var(--u) * 1.5); }
.mc-field > span { color: var(--gray); font-size: var(--fs-m); }
.mc-input {
  width: 100%;
  height: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 2);
  background: #000;
  border: 2px solid #a0a0a0;
  border-radius: 0;
  color: #e0e0e0;
  font-size: var(--fs-m);
  caret-color: #fff;
}
.mc-input:focus { outline: none; border-color: #fff; }
.mc-input::placeholder { color: var(--dark-gray); }

.msg-error { min-height: 1.5em; color: var(--red); }

/* ── 어두운 GUI 판 (보관함, 프로필) ──────────────────────── */

.gui {
  background: #1d1d1d;
  outline: 2px solid #000;
  box-shadow: inset calc(var(--u) * 0.75) calc(var(--u) * 0.75) 0 #3b3b3b, inset calc(var(--u) * -0.75) calc(var(--u) * -0.75) 0 #0c0c0c;
  padding: calc(var(--u) * 4);
}
.gui-title { color: #9a9a9a; margin-bottom: calc(var(--u) * 2); }

/* 아이템 설명창 */
.tooltip {
  background: rgba(16, 0, 16, 0.94);
  outline: 2px solid rgba(16, 0, 16, 0.94);
  box-shadow: inset 0 0 0 2px #2a0a5e;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
}
.tooltip .t-name { margin-bottom: calc(var(--u) * 1.5); }
.tooltip .t-lore { color: var(--gray); }

/* ── 화면 공통 ────────────────────────────────────────── */

.view { position: relative; min-height: 100vh; min-height: 100svh; }
.vignette { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.entry-box { position: relative; z-index: 1; }
#lobby-scene { position: absolute; inset: 0; }

/* ── 입장: '직접 연결' 화면 ─────────────────────────────── */

.entry { display: grid; place-items: center; padding: calc(var(--u) * 12) var(--gutter); }
.entry-box { width: min(100%, calc(var(--u) * 150)); display: grid; gap: calc(var(--u) * 6); }
.entry-title { font-size: var(--fs-l); line-height: 1.2; text-align: center; font-weight: 700; }
.entry-hint { color: var(--gray); text-align: center; }
.entry form { display: grid; gap: calc(var(--u) * 5); }
.entry .mc-btn { margin-top: calc(var(--u) * 2); }

/* ── 대기실: 미니게임 로비 ─────────────────────────────── */

.lobby { overflow: hidden; background: #000; }
.lobby-scene { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.scoreboard {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  min-width: calc(var(--u) * 64);
  background: rgba(0, 0, 0, 0.4);
}
.scoreboard h1 { background: rgba(0, 0, 0, 0.2); padding: calc(var(--u) * 1.5) calc(var(--u) * 3); text-align: center; color: var(--gold); font-weight: 700; font-size: var(--fs-m); }
.scoreboard ol { padding: calc(var(--u) * 1.5) calc(var(--u) * 3) calc(var(--u) * 2.5); }
.scoreboard li { display: flex; justify-content: space-between; gap: calc(var(--u) * 6); min-height: 1.5em; }
.scoreboard li .score { color: var(--red); }
.scoreboard li.empty { color: var(--dark-gray); }

.chat {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--u) * 20);
  width: min(calc(100% - var(--gutter) * 2), calc(var(--u) * 160));
  display: grid;
  gap: 0;
}
.chat p { background: rgba(0, 0, 0, 0.5); padding: 0 calc(var(--u) * 1.5); }
.chat p.is-new { animation: chat-in 160ms steps(2) both; }
@keyframes chat-in { from { opacity: 0; } }

.title-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}
.title-big { font-size: var(--fs-xl); line-height: 1.1; font-weight: 700; }
.title-sub { font-size: var(--fs-m); margin-top: calc(var(--u) * 3); }
.lobby .leave { position: absolute; right: var(--gutter); bottom: calc(var(--u) * 8); }
.fade-black { position: absolute; inset: 0; z-index: 5; background: #000; opacity: 0; pointer-events: none; transition: opacity 900ms steps(6); }
.lobby.is-opening .fade-black { opacity: 1; }

@media (max-width: 700px) {
  .scoreboard { top: calc(var(--u) * 6); transform: none; right: var(--gutter); }
  .chat { bottom: calc(var(--u) * 26); }
}

/* ── 수사 화면 ────────────────────────────────────────── */

.hud {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 2) var(--gutter) calc(var(--u) * 3);
  background: rgba(0, 0, 0, 0.78);
}
.hud-case { color: var(--gray); }
.hud-team { text-align: right; color: var(--gray); }
.bossbar { display: grid; justify-items: center; gap: calc(var(--u) * 1); }
.bossbar canvas { width: calc(var(--u) * 182); height: calc(var(--u) * 5); max-width: 60vw; }
.bossbar.is-final canvas { animation: bar-blink 1s steps(1) infinite; }
@keyframes bar-blink { 50% { opacity: 0.35; } }

@media (max-width: 700px) {
  .hud { grid-template-columns: 1fr; justify-items: center; padding-top: calc(var(--u) * 2); }
  .hud-case, .hud-team { display: none; }
  .bossbar canvas { max-width: 86vw; }
}

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.game section + section { margin-top: calc(var(--u) * 40); }
.case-main > section:first-child { margin-top: calc(var(--u) * 24); }
.hud-case { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sec-title { font-size: var(--fs-l); font-weight: 700; line-height: 1.2; margin-bottom: calc(var(--u) * 10); }

/* 첫 화면: 현장 그림 위 제목 */
.hero { position: relative; height: min(78vh, 760px); min-height: 420px; overflow: hidden; }
.hero canvas, .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-text { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 10); }
.hero h1 { font-size: var(--fs-xl); line-height: 1.05; font-weight: 700; }
.hero .case-line { margin-top: calc(var(--u) * 3); color: var(--gray); }
.hero .scene-cap { position: absolute; right: var(--gutter); bottom: calc(var(--u) * 3); color: var(--gray); }

/* 사건 개요: 글이 쓰인 책 */
.brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: calc(var(--u) * 10); align-items: start; }
.book {
  position: relative;
  background: #e3d6b8;
  color: #1a1308;
  padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 16);
  outline: 2px solid #000;
  box-shadow: inset 0 0 0 calc(var(--u) * 2) #7a5a32, inset 0 0 0 calc(var(--u) * 3) #c9b88f;
  min-height: calc(var(--u) * 170);
}
.book-page-no { position: absolute; top: calc(var(--u) * 4); right: calc(var(--u) * 6); color: #6b5838; }
.book-body { display: grid; gap: 1em; align-content: start; }
.book-body p.lead { color: #000; }
.book-nav { position: absolute; left: calc(var(--u) * 8); right: calc(var(--u) * 8); bottom: calc(var(--u) * 4); display: flex; justify-content: space-between; }
.page-arrow { width: calc(var(--u) * 18); height: calc(var(--u) * 10); padding: 0; border: 0; background: none; cursor: pointer; }
.page-arrow canvas { width: 100%; height: 100%; }
.page-arrow:hover canvas { filter: brightness(1.3); }
.page-arrow[disabled] { visibility: hidden; }

.orders { display: grid; gap: calc(var(--u) * 4); padding: calc(var(--u) * 6); background: rgba(0, 0, 0, 0.5); }
.orders h2 { color: var(--gold); font-size: var(--fs-m); font-weight: 700; }
.orders li { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 3); }

@media (max-width: 900px) {
  .brief { grid-template-columns: 1fr; }
  .book { padding: calc(var(--u) * 7) calc(var(--u) * 6) calc(var(--u) * 16); }
}

/* 관련 인물 */
.victim { display: grid; grid-template-columns: auto minmax(0, 520px); justify-content: center; align-items: center; gap: calc(var(--u) * 12); }
.figure-btn { position: relative; padding: 0; border: 0; background: none; cursor: pointer; display: grid; justify-items: center; }
.figure-btn canvas { width: calc(var(--u) * 16 * 1.5); height: calc(var(--u) * 32 * 1.5); }
.figure-btn:hover canvas, .figure-btn:focus-visible canvas { filter: brightness(1.25); }
.nametag { display: inline-block; margin-bottom: calc(var(--u) * 3); padding: 0 calc(var(--u) * 1.5); background: rgba(0, 0, 0, 0.45); white-space: nowrap; }
.victim .figure-btn canvas.is-dead { filter: grayscale(1) brightness(0.8); }
.victim .figure-btn:hover canvas.is-dead { filter: grayscale(1) brightness(1); }

.lineup { position: relative; margin-top: calc(var(--u) * 24); overflow: hidden; }
.lineup-wall { position: absolute; inset: 0; width: 100%; height: 100%; }
.lineup-marks { position: absolute; inset: 0; pointer-events: none; }
.lineup-marks span { position: absolute; color: rgba(255, 255, 255, 0.45); transform: translateY(-100%); }
.lineup-row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: calc(var(--u) * 28); }
.lineup .figure-btn canvas { width: calc(var(--u) * 16 * 1.5); height: calc(var(--u) * 32 * 1.5); }
.lineup-job { padding: calc(var(--u) * 3) 0 calc(var(--u) * 5); text-align: center; color: var(--gray); background: rgba(0, 0, 0, 0.6); }

@media (max-width: 700px) {
  .victim { grid-template-columns: 1fr; justify-items: center; }
  .lineup .figure-btn canvas { width: calc(var(--u) * 16 * 1.2); height: calc(var(--u) * 32 * 1.2); }
}

/* 진술: 채팅 기록 */
.chatlog { display: grid; gap: calc(var(--u) * 12); max-width: calc(var(--u) * 220); }
.chatlog-block { display: grid; gap: 0; cursor: pointer; }
.chatlog-block p { background: rgba(0, 0, 0, 0.55); padding: calc(var(--u) * 1) calc(var(--u) * 2); }
.chatlog-block .sys { color: var(--gold); }
.chat-line { display: grid; grid-template-columns: calc(var(--u) * 8) minmax(0, 1fr); gap: calc(var(--u) * 2); align-items: start; }
.chat-line canvas { width: calc(var(--u) * 8); height: calc(var(--u) * 8); margin-top: 0.15em; }
.chat-line .who-q { color: var(--aqua); }
.chat-line .who-a { color: var(--yellow); }
.caret { display: inline-block; width: 0.5em; color: #fff; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* 증거물: 보관함과 설명 */
.evidence-lead { max-width: calc(var(--u) * 200); margin-bottom: calc(var(--u) * 3); }
.evidence-meta { color: var(--gray); margin-bottom: calc(var(--u) * 10); }
.inventory { display: inline-grid; grid-template-columns: repeat(9, calc(var(--u) * 18)); gap: 0; }
.slot {
  position: relative;
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  padding: var(--u);
  border: 0;
  background: #2a2a2a;
  box-shadow: inset var(--u) var(--u) 0 #121212, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #4a4a4a;
  cursor: pointer;
}
.slot[disabled] { cursor: default; }
.slot canvas { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.slot:not([disabled]):hover::after, .slot.is-selected::after { content: ''; position: absolute; inset: var(--u); background: rgba(255, 255, 255, 0.4); }
.slot.is-selected { outline: 2px solid #fff; outline-offset: -2px; z-index: 1; }
.slot .lock-badge { position: absolute; right: 0; bottom: 0; width: calc(var(--u) * 8); height: calc(var(--u) * 8); }

.float-tip { position: fixed; z-index: 50; pointer-events: none; max-width: 360px; }

.ev-detail { margin-top: calc(var(--u) * 8); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 10); align-items: start; }
.ev-detail .tooltip { align-self: start; }
.ev-view { min-width: 0; }
.ev-view canvas.px { width: 100%; height: auto; }
.lore-line { color: var(--gray); }
.lore-line b { color: var(--white); font-weight: 400; }
.decisive { color: var(--gold); }

@media (max-width: 900px) {
  .ev-detail { grid-template-columns: 1fr; }
  .inventory { grid-template-columns: repeat(6, calc(var(--u) * 18)); }
}

/* 종이 문서 (주문표, 출입 기록, 찢어진 문서, 장부) */
.paper {
  position: relative;
  background: #e8e0cc;
  color: #1a1308;
  padding: calc(var(--u) * 6);
  outline: 2px solid #000;
  box-shadow: inset 0 0 0 var(--u) #b8a983;
}
.paper table { width: 100%; border-collapse: collapse; }
.paper th, .paper td { text-align: left; padding: calc(var(--u) * 1.5) 0; vertical-align: top; }
.paper th { color: #6b5838; font-weight: 400; width: 40%; }
.paper tr + tr th, .paper tr + tr td { border-top: 2px dotted #b8a983; }
.paper-head { text-align: center; padding-bottom: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 2); border-bottom: var(--u) solid #1a1308; }
.paper-head .brand { color: #7a5a2c; font-weight: 700; letter-spacing: 0.1em; }
.paper .sign { margin-top: calc(var(--u) * 4); text-align: right; color: #22324f; }
.paper.torn { clip-path: polygon(0 0, 100% 0, 100% 12%, 96% 12%, 96% 30%, 100% 30%, 100% 48%, 94% 48%, 94% 66%, 98% 66%, 98% 84%, 92% 84%, 92% 100%, 0 100%); padding-right: calc(var(--u) * 12); }
.paper .stamp { display: inline-block; padding: 0 calc(var(--u) * 2); border: var(--u) solid #a01818; color: #a01818; transform: rotate(-4deg); }
.smudge { display: inline-block; height: 0.9em; background: #1a1308; opacity: 0.55; vertical-align: middle; }

/* 휴대전화 */
.phone { width: min(100%, calc(var(--u) * 80)); padding: calc(var(--u) * 3); background: #0d0d0d; outline: 2px solid #000; box-shadow: inset 0 0 0 var(--u) #2b2b2b; }
.phone-screen { position: relative; background: #d8dcdc; color: #121416; padding: calc(var(--u) * 4) calc(var(--u) * 3); min-height: calc(var(--u) * 110); overflow: hidden; }
.phone-screen canvas.cracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.call { display: flex; justify-content: space-between; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) 0; border-bottom: 2px solid #b4b9b9; }
.call b { color: #a01818; font-weight: 400; }
.call.broken { color: #8a9090; }

/* 잠금 입력 */
.lockbox { display: grid; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 4); }
.lockbox-row { display: flex; gap: calc(var(--u) * 3); flex-wrap: wrap; }
.lockbox .mc-input { width: calc(var(--u) * 40); letter-spacing: 0.4em; text-align: center; }
.lockbox .mc-btn { min-width: calc(var(--u) * 30); }
.lockbox-msg { min-height: 1.5em; color: var(--gray); }
.lockbox-msg.is-error { color: var(--red); }
.shake { animation: shake 320ms steps(4); }
@keyframes shake { 25% { transform: translateX(calc(var(--u) * -2)); } 50% { transform: translateX(calc(var(--u) * 2)); } 75% { transform: translateX(calc(var(--u) * -1)); } }

.files { display: grid; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 4); }
.file { background: #000; outline: 2px solid #a0a0a0; padding: calc(var(--u) * 3); }
.file h4 { color: var(--aqua); font-weight: 400; margin-bottom: calc(var(--u) * 2); }
.file table { width: 100%; border-collapse: collapse; }
.file th { color: var(--gray); font-weight: 400; text-align: left; width: 38%; vertical-align: top; padding: var(--u) 0; }
.file td { padding: var(--u) 0; }

.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: calc(var(--u) * 4); }
.ledger .paper { box-shadow: inset 0 0 0 var(--u) #b8a983; }
.ledger h4 { color: #6b5838; font-weight: 400; margin-bottom: calc(var(--u) * 2); }
.ledger dl { display: grid; gap: calc(var(--u) * 2); }
.ledger dt { color: #6b5838; }

@media (max-width: 600px) { .ledger { grid-template-columns: 1fr; } }

/* 결정적 반전 */
.twist .book { min-height: 0; padding-bottom: calc(var(--u) * 10); }
.twist .book h2 { color: #8a1010; font-size: var(--fs-l); font-weight: 700; margin-bottom: calc(var(--u) * 4); }

.closing { margin-top: calc(var(--u) * 40); padding-bottom: calc(var(--u) * 30); }
.closing p { background: rgba(0, 0, 0, 0.55); padding: calc(var(--u) * 1) calc(var(--u) * 2); display: inline-block; }

/* 화면 가운데 큰 글자 (반전 공개 등) */
.title-flash { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; text-align: center; pointer-events: none; background: rgba(0, 0, 0, 0.35); animation: title-flash 3.2s steps(8) forwards; }
@keyframes title-flash { 0% { opacity: 0; } 10%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* 단서 확보 알림 (발전 과제 창 모양) */
.toast {
  position: fixed;
  top: calc(var(--u) * 24);
  right: var(--gutter);
  z-index: 40;
  display: grid;
  grid-template-columns: calc(var(--u) * 16) minmax(0, 1fr);
  gap: calc(var(--u) * 3);
  align-items: center;
  width: min(calc(100vw - var(--gutter) * 2), calc(var(--u) * 100));
  padding: calc(var(--u) * 3);
  background: #212121;
  outline: 2px solid #000;
  box-shadow: inset 0 0 0 var(--u) #555;
  transition: transform 300ms steps(5), opacity 300ms steps(5);
}
.toast[data-state='hidden'] { transform: translateX(calc(100% + var(--gutter))); opacity: 0; pointer-events: none; }
.toast canvas { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.toast-title { color: var(--yellow); }
.toast-go { grid-column: 1 / -1; justify-self: end; height: calc(var(--u) * 10); min-width: 0; }

/* 인물 프로필 */
.dossier {
  width: min(calc(100vw - 24px), calc(var(--u) * 230));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  overflow: auto;
}
.dossier::backdrop { background: rgba(0, 0, 0, 0.7); }
.dossier .gui { display: grid; grid-template-columns: calc(var(--u) * 70) minmax(0, 1fr); gap: calc(var(--u) * 6); }
.dossier-model { position: relative; background: #000; box-shadow: inset var(--u) var(--u) 0 #0a0a0a, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #3a3a3a; min-height: calc(var(--u) * 100); }
.dossier-model canvas { width: 100%; height: 100%; cursor: grab; }
.dossier-body { display: grid; align-content: start; gap: calc(var(--u) * 3); }
.dossier-name { font-size: var(--fs-l); line-height: 1.15; font-weight: 700; }
.dossier-facts { display: grid; grid-template-columns: max-content 1fr; gap: calc(var(--u) * 1) calc(var(--u) * 4); }
.dossier-facts dt { color: var(--gray); }
.dossier-notes { display: grid; gap: calc(var(--u) * 1); color: #d8d8d8; }
.dossier-actions { margin-top: calc(var(--u) * 3); }

@media (max-width: 760px) {
  .dossier .gui { grid-template-columns: 1fr; }
  .dossier-model { height: calc(var(--u) * 90); }
}

/* 시간 종료: 사망 화면 */
.end { display: grid; place-items: center; text-align: center; background: #3a0000; }
.end::after { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(140, 0, 0, 0.35); }
.end-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: calc(var(--u) * 8); padding: var(--gutter); }
.end h1 { font-size: var(--fs-xl); line-height: 1.1; font-weight: 700; }
.end .mc-btn { min-width: calc(var(--u) * 80); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ── 현장 조사 ───────────────────────────────────────── */

.explore { margin-bottom: calc(var(--u) * 10); }
.route ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-bottom: calc(var(--u) * 4); }
.route li { display: flex; align-items: center; }
.route li + li::before { content: ''; width: calc(var(--u) * 10); height: var(--u); background: #555; margin: 0 calc(var(--u) * 2); }
.route-btn {
  padding: calc(var(--u) * 1.5) calc(var(--u) * 4);
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  outline: 2px solid #3a3a3a;
  color: var(--gray);
  cursor: pointer;
}
.route-btn:hover { outline-color: #fff; color: #fff; }
.route-btn.is-here { color: var(--yellow); outline-color: var(--yellow); }

.viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  outline: 2px solid #000;
  box-shadow: inset 0 0 0 calc(var(--u) * 0.75) #3b3b3b;
}
.stage { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.stage img, .stage canvas { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.spots { position: absolute; inset: 0; pointer-events: none; }
.spots.is-moving .spot { opacity: 0; }
.spot {
  position: absolute;
  display: grid;
  justify-items: center;
  transform: translate(-50%, -100%);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}
.spot .nametag { margin-bottom: calc(var(--u) * 1); font-size: var(--fs-s); font-family: 'Galmuri14', sans-serif; }
.spot .marker { display: block; width: calc(var(--u) * 10); height: calc(var(--u) * 10); animation: bob 2.4s ease-in-out infinite; }
.spot .marker canvas { width: 100%; height: 100%; filter: drop-shadow(0 calc(var(--u) * 1) 0 rgba(0, 0, 0, 0.6)); }
.spot:hover .nametag, .spot:focus-visible .nametag { background: rgba(0, 0, 0, 0.8); color: var(--yellow); }
.spot.is-found .marker { opacity: 0.55; }
.spot.is-found .nametag { color: var(--gray); }
.spot.is-dim { opacity: 0; pointer-events: none; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -2)); } }

.vp-ui { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: end; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3); pointer-events: none; }
.vp-where { background: rgba(0, 0, 0, 0.5); padding: 0 calc(var(--u) * 2); }
.vp-actions { display: flex; gap: calc(var(--u) * 3); pointer-events: auto; }
.vp-actions .mc-btn { min-width: calc(var(--u) * 34); }
.vp-inspect { color: var(--yellow); }
.vp-fade { position: absolute; inset: 0; display: grid; place-items: center; background: #000; opacity: 0; pointer-events: none; transition: opacity 260ms steps(4); }
.vp-fade.is-on { opacity: 1; }

@media (max-width: 700px) {
  .viewport { aspect-ratio: 4 / 3; }
  .spot .marker { width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
  .vp-actions .mc-btn { min-width: 0; padding: 0 calc(var(--u) * 4); }
}

.inv-gui { display: inline-block; max-width: 100%; }

/* 증거 창 */
.ev-dialog { width: min(calc(100vw - 24px), calc(var(--u) * 300)); }
.ev-dialog .gui { display: block; }
.ev-dialog .ev-detail { margin-top: 0; }

/* 기밀 문서 */
.doc-no { color: #6b5838; }
.doc-title { font-weight: 700; margin: calc(var(--u) * 1) 0 calc(var(--u) * 3); }
.doc-sub { color: #6b5838; margin-top: calc(var(--u) * 4); }
.doc-line { margin-top: calc(var(--u) * 1); }
.doc-memo { margin-top: calc(var(--u) * 2); color: #22324f; }
.doc-memo p + p { margin-top: calc(var(--u) * 1); }
.doc-tail { margin-top: calc(var(--u) * 4); color: #8a6a4a; }

/* 수사 지시 소제목 */
.orders h3 { color: var(--gold); font-size: var(--fs-m); font-weight: 700; }
.orders h3 + ol { margin-top: calc(var(--u) * -1); }
.orders ol { display: grid; gap: calc(var(--u) * 2); }

/* 책 아래 서명 */
.book-foot { margin-top: calc(var(--u) * 4); color: #6b5838; }
.book-body { height: calc(var(--fs-m) * 1.5 * 14); overflow: hidden; }
.twist .book-body { height: auto; overflow: visible; }

/* 인물 */
.figure-btn canvas { width: calc(var(--s) * 16); height: calc(var(--s) * 32); }
.victim .figure-btn canvas { width: calc(var(--s) * 16); height: calc(var(--s) * 32); }
.lineup .figure-btn canvas { width: calc(var(--s) * 16); height: calc(var(--s) * 32); }
.suspect { display: grid; justify-items: center; }
.lineup-job { padding: calc(var(--u) * 3) 0 calc(var(--u) * 6); text-align: center; color: var(--gray); background: none; }

.ev-photo { display: block; width: 100%; height: auto; margin-bottom: calc(var(--u) * 4); outline: 2px solid #000; }

.vp-note { position: absolute; left: calc(var(--u) * 3); right: calc(var(--u) * 3); bottom: calc(var(--u) * 17); max-width: calc(var(--u) * 150); color: #e0e0e0; }
.vp-error { position: absolute; inset: 0; display: grid; place-items: center; color: var(--red); }
.stage > canvas:not(.px) { image-rendering: auto; }

/* 대기실 배경 스크린샷: 어둡게 깔고 가끔 불빛이 흔들린다 */
.lobby-scene { filter: brightness(0.62) saturate(0.85); }
.lobby-scene.is-flicker { animation: lobby-flicker 700ms steps(1); }
@keyframes lobby-flicker { 0% { filter: brightness(0.62); } 12% { filter: brightness(0.25); } 24% { filter: brightness(0.58); } 46% { filter: brightness(0.2); } 60%, 100% { filter: brightness(0.62); } }
#lobby-scene::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0, 0, 0, 0.75) 100%); }

.vp-note.has-art { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: calc(var(--u) * 3); align-items: center; max-width: calc(var(--u) * 190); }
.vp-note canvas { width: 100%; height: auto; outline: 2px solid #000; }
@media (max-width: 700px) { .vp-note.has-art { grid-template-columns: 1fr; } .vp-note canvas { max-height: 30vh; width: auto; } }

/* 입장 화면: 마크 타이틀 화면처럼 현장 스크린샷이 어둡게 천천히 흘러간다 */
.panorama { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; }
.panorama img { position: absolute; top: 0; left: -8%; width: 116%; max-width: none; height: 100%; object-fit: cover; filter: brightness(0.32) saturate(0.8); animation: pan 46s ease-in-out infinite alternate; }
.panorama img + img { opacity: 0; animation: pan 46s ease-in-out infinite alternate, swap 36s ease-in-out infinite; }
@keyframes pan { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
@keyframes swap { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .panorama img { animation: none !important; } }
.panorama::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0.15) 30%, rgba(0, 0, 0, 0.85) 100%); }
.lobby-scene { object-position: 62% 50%; }
.hero img { filter: brightness(0.78) saturate(0.9); }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 30%, transparent 55%, rgba(0, 0, 0, 0.8)); pointer-events: none; }
.hero-text, .hero .scene-cap { z-index: 1; }