* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-dark: #0d0f14;
  --bg-panel: #151820;
  --bg-card: #1c2028;
  --bg-hover: #242830;
  --border: #2a2e38;
  --text-primary: #e8e0d0;
  --text-secondary: #9a9488;
  --text-dim: #6a6560;
  --accent: #c8a96e;
  --accent-dim: #8a7040;
  --npc-bubble: #1e2530;
  --user-bubble: #2a3545;
  --clue-bg: #1a2418;
  --clue-border: #3a5a30;
  --danger: #a04040;
  --font-serif: 'Noto Serif SC', 'Songti SC', serif;
}

html, body {
  height: 100%;
  font-family: var(--font-serif);
  background: var(--bg-dark);
  color: var(--text-primary);
  overflow: hidden;
}

.hidden { display: none !important; }

/* ===== Intro Overlay ===== */
.intro-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg-dark);
  display: flex; align-items: center; justify-content: center;
}
.intro-content {
  max-width: 600px; padding: 60px 40px; text-align: center;
}
.intro-title {
  font-size: 3rem; font-weight: 700; color: var(--accent);
  letter-spacing: 8px; margin-bottom: 8px;
}
.intro-subtitle {
  font-size: 1rem; color: var(--text-secondary);
  letter-spacing: 4px; margin-bottom: 40px;
}
.intro-btn:hover {
  background: var(--accent); color: var(--bg-dark);
}

/* ===== Header ===== */
.header {
  height: 50px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 24px;
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
}
.header-title {
  font-size: 1.1rem; font-weight: 600; color: var(--accent);
  letter-spacing: 3px;
}
.location-badge {
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 4px 20px; border-radius: 3px; font-size: 0.9rem;
  color: var(--text-primary); letter-spacing: 2px;
}
.clue-count {
  font-size: 0.85rem; color: var(--accent); letter-spacing: 1px;
}

/* ===== Layout ===== */
.game-ui { height: 100vh; display: flex; flex-direction: column; }
.layout {
  flex: 1; display: flex; overflow: hidden;
}

/* ===== Sidebar (Locations) ===== */
.sidebar {
  width: 200px; background: var(--bg-panel);
  border-right: 1px solid var(--border); padding: 16px;
  overflow-y: auto;
}
.sidebar-title {
  font-size: 0.8rem; color: var(--text-dim); letter-spacing: 3px;
  margin-bottom: 12px; text-transform: uppercase;
}
.location-list { display: flex; flex-direction: column; gap: 4px; }
.loc-item {
  padding: 10px 12px; border-radius: 4px; cursor: pointer;
  font-size: 0.88rem; color: var(--text-secondary);
  transition: all 0.2s; border: 1px solid transparent;
}
.loc-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.loc-item.active {
  background: var(--bg-card); color: var(--accent);
  border-color: var(--accent-dim);
}
.loc-item.disabled {
  opacity: 0.35; cursor: default; pointer-events: none;
}
.loc-npc-hint {
  font-size: 0.75rem; color: var(--text-dim); margin-top: 3px;
}

/* ===== Main Panel ===== */
.main-panel {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; position: relative;
}

/* Scene box */
.scene-box {
  flex: 1; padding: 32px; overflow-y: auto;
}
.scene-description {
  font-size: 0.95rem; line-height: 2; color: var(--text-primary);
  margin-bottom: 24px; white-space: pre-line;
}
.scene-clues {
  margin-bottom: 24px;
}
.clue-item {
  background: var(--clue-bg); border: 1px solid var(--clue-border);
  border-radius: 4px; padding: 10px 14px; margin-bottom: 8px;
  font-size: 0.85rem; color: #b0c8a0; line-height: 1.6;
}
.clue-item::before { content: "🔍 "; }
.clue-section-title, .npc-section-title {
  font-size: 0.8rem; color: var(--text-dim); letter-spacing: 2px;
  margin-bottom: 10px; text-transform: uppercase;
}
.scene-npcs { display: flex; flex-direction: column; gap: 12px; }
.npc-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; padding: 16px 20px; cursor: pointer;
  transition: all 0.2s;
}
.npc-card:hover {
  border-color: var(--accent-dim); background: var(--bg-hover);
}
.npc-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 8px;
}
.npc-name {
  font-size: 1rem; font-weight: 600; color: var(--text-primary);
  margin-bottom: 2px;
}
.npc-role { font-size: 0.8rem; color: var(--text-secondary); }
.npc-appearance {
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7;
  margin-bottom: 8px; font-style: italic;
}
.npc-talk-hint {
  font-size: 0.78rem; color: var(--accent-dim); text-align: right;
}
.npc-talked-badge {
  font-size: 0.7rem; background: rgba(200, 169, 110, 0.15);
  color: var(--accent); padding: 2px 8px; border-radius: 3px;
  border: 1px solid var(--accent-dim);
}
.npc-new-badge {
  font-size: 0.7rem; background: rgba(100, 180, 100, 0.1);
  color: #8ab880; padding: 2px 8px; border-radius: 3px;
  border: 1px solid rgba(100, 180, 100, 0.3);
}

/* ===== Chat Area =====
 * Fixed-height flex column: header (auto) + messages (flex:1, scroll) + input (auto).
 * .chat-messages MUST have min-height: 0 so it can shrink below its content
 * height — otherwise long conversations push .chat-input-box past the bottom
 * edge, where it gets clipped by .main-panel's overflow:hidden and disappears.
 * .chat-header / .chat-input-box are flex-shrink: 0 so they always stay visible. */
.chat-area {
  position: absolute; inset: 0; display: flex;
  flex-direction: column; background: var(--bg-dark);
  z-index: 10; overflow: hidden;
}
.chat-header {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.back-btn {
  background: none; border: none; color: var(--accent);
  font-family: var(--font-serif); font-size: 0.9rem;
  cursor: pointer;
}
.chat-npc-name {
  font-size: 1rem; font-weight: 600; color: var(--text-primary);
}
.chat-npc-role {
  font-size: 0.8rem; color: var(--text-secondary);
}
.chat-messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}
.msg {
  max-width: 75%; padding: 12px 16px; border-radius: 8px;
  font-size: 0.9rem; line-height: 1.7; word-break: break-word;
}
.msg.user {
  align-self: flex-end; background: var(--user-bubble);
  color: var(--text-primary); border-bottom-right-radius: 2px;
}
.msg.npc {
  align-self: flex-start; background: var(--npc-bubble);
  color: var(--text-primary); border-bottom-left-radius: 2px;
}
.msg .msg-sender {
  font-size: 0.75rem; color: var(--text-dim); margin-bottom: 4px;
}
.msg.typing {
  color: var(--text-dim); font-style: italic;
}

.chat-input-box {
  flex-shrink: 0;
  display: flex; gap: 8px; padding: 12px 20px;
  background: var(--bg-panel); border-top: 1px solid var(--border);
  /* Don't allow the row to be wider than its parent — keeps .send-btn on-screen. */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.chat-input-box .send-btn { flex-shrink: 0; }
#chatInput {
  flex: 1 1 0;
  /* Crucial: override flex's default min-width:auto, otherwise <input>'s
     intrinsic size (~320px for default size=20 chars at 16px font) prevents
     the input from shrinking and pushes the .send-btn off the right edge of
     the viewport on phones < ~400px wide. */
  min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 4px; padding: 10px 14px; color: var(--text-primary);
  font-family: var(--font-serif); font-size: 0.9rem; outline: none;
}
#chatInput:focus { border-color: var(--accent-dim); }
#chatInput::placeholder { color: var(--text-dim); }
.send-btn {
  background: var(--accent-dim); border: none; color: var(--text-primary);
  padding: 10px 24px; border-radius: 4px; font-family: var(--font-serif);
  font-size: 0.9rem; cursor: pointer; transition: background 0.2s;
}
.send-btn:hover { background: var(--accent); color: var(--bg-dark); }
.send-btn:disabled { opacity: 0.4; cursor: default; }

/* ===== Notebook (Right) ===== */
.notebook {
  width: 260px; background: var(--bg-panel);
  border-left: 1px solid var(--border); padding: 16px;
  overflow-y: auto;
}
.clue-list { display: flex; flex-direction: column; gap: 6px; }
.empty-hint {
  font-size: 0.85rem; color: var(--text-dim);
  font-style: italic; padding: 8px 0;
}
.notebook-clue {
  font-size: 0.82rem; color: var(--text-secondary);
  padding: 8px 10px; background: var(--bg-card);
  border-radius: 3px; line-height: 1.5;
  border-left: 2px solid var(--accent-dim);
}
/* ===== Clue Progress ===== */
.clue-progress { margin-bottom: 14px; }
.progress-bar {
  height: 4px; background: var(--bg-card); border-radius: 2px;
  overflow: hidden; margin-bottom: 6px;
}
.progress-fill {
  height: 100%; background: var(--accent); border-radius: 2px;
  transition: width 0.5s ease; width: 0%;
}
.progress-label {
  font-size: 0.75rem; color: var(--text-dim); line-height: 1.4;
}

/* ===== Solve Button ===== */
.solve-btn {
  display: block; width: 100%; margin-top: 16px; padding: 12px;
  background: rgba(200, 169, 110, 0.15); border: 1px solid var(--accent);
  color: var(--accent); font-family: var(--font-serif);
  font-size: 0.95rem; letter-spacing: 3px; cursor: pointer;
  border-radius: 4px; transition: all 0.3s;
}
.solve-btn:hover {
  background: var(--accent); color: var(--bg-dark);
}

/* ===== Accusation Panel ===== */
.accuse-overlay {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(0, 0, 0, 0.95);
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
}
.accuse-content {
  max-width: 650px; width: 90%; padding: 40px; margin: 20px 0;
}
.accuse-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.accuse-header h2 {
  font-size: 1.4rem; color: var(--accent); letter-spacing: 4px;
}
.accuse-instruction {
  font-size: 0.95rem; color: var(--text-primary); line-height: 1.8;
  margin-bottom: 24px;
}
.accuse-section-title {
  font-size: 0.8rem; color: var(--text-dim); letter-spacing: 2px;
  margin-bottom: 10px; margin-top: 20px;
}
.accuse-clues {
  max-height: 150px; overflow-y: auto; margin-bottom: 10px;
}
.accuse-clue-item {
  font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5;
  padding: 3px 0;
}
.talk-summary {
  margin-bottom: 10px;
}
.talk-done { font-size: 0.82rem; color: #8ab880; }
.talk-pending { font-size: 0.82rem; color: var(--text-dim); font-style: italic; }
.suspect-list {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px;
}
.suspect-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; padding: 14px 20px; cursor: pointer;
  transition: all 0.2s;
}
.suspect-card:hover {
  border-color: var(--danger); background: rgba(160, 64, 64, 0.15);
}
.suspect-name {
  font-size: 0.95rem; color: var(--text-primary); font-weight: 600;
}
.accuse-warning {
  font-size: 0.8rem; color: var(--danger); text-align: center;
  padding: 10px; border: 1px solid rgba(160, 64, 64, 0.3);
  border-radius: 4px; background: rgba(160, 64, 64, 0.05);
}

/* ===== Ending Overlay ===== */
.ending-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0, 0, 0, 0.95);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.8s ease; overflow-y: auto;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.ending-content {
  max-width: 600px; padding: 50px 40px; text-align: center; margin: 20px 0;
}
.ending-badge {
  font-size: 0.8rem; letter-spacing: 6px; margin-bottom: 12px;
}
.badge-correct { color: #8ab880; }
.badge-partial { color: var(--accent); }
.badge-wrong { color: var(--danger); }
.ending-title {
  font-size: 2rem; font-weight: 700; color: var(--accent);
  letter-spacing: 6px; margin-bottom: 20px;
}
.ending-result {
  font-size: 1rem; margin-bottom: 24px; letter-spacing: 2px;
}
.result-correct { color: #8ab880; }
.result-partial { color: var(--accent); }
.result-wrong { color: var(--danger); }
.ending-body {
  font-size: 0.95rem; color: var(--text-primary);
  line-height: 2; margin-bottom: 30px; text-align: left;
  white-space: pre-line;
}
.ending-evidence {
  text-align: left; margin-bottom: 30px;
}
.evidence-title {
  font-size: 0.8rem; color: var(--text-dim); margin-bottom: 8px;
  letter-spacing: 2px;
}
.evidence-item {
  font-size: 0.82rem; line-height: 1.6; padding: 3px 0;
}
.evidence-found { color: #8ab880; }

/* ===== NPC Action vs Dialogue ===== */
.npc-action {
  font-style: italic; color: var(--text-dim); font-size: 0.82rem;
  margin-bottom: 4px; line-height: 1.5;
}
.npc-action::before { content: "— "; }
.npc-action::after { content: " —"; }
.npc-dialogue {
  color: var(--text-primary); font-size: 0.9rem; line-height: 1.7;
}

/* ===== Chat History / Greeting ===== */
.chat-history-divider {
  text-align: center; font-size: 0.75rem; color: var(--text-dim);
  padding: 8px 0; letter-spacing: 2px;
}
.chat-greeting {
  padding: 16px; text-align: center;
}
.greeting-text {
  font-size: 0.9rem; color: var(--text-secondary); line-height: 1.8;
  font-style: italic; margin-bottom: 12px;
}
.greeting-hint {
  font-size: 0.8rem; color: var(--text-dim);
}
.clue-num {
  color: var(--accent-dim); font-weight: 600; margin-right: 4px;
}

/* ===== Intro Typewriter ===== */
.intro-text {
  font-size: 0.95rem; color: var(--text-primary);
  line-height: 2; text-align: left; margin-bottom: 40px;
  max-height: 300px; overflow-y: auto;
}
.intro-btn {
  background: transparent; border: 1px solid var(--accent);
  color: var(--accent); padding: 12px 48px; font-size: 1rem;
  font-family: var(--font-serif); cursor: pointer;
  letter-spacing: 4px; transition: all 0.3s;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ===== Scene Image ===== */
.scene-image-wrapper {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 20px;
  display: none;
}
.scene-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scene-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, var(--bg-dark) 100%);
  pointer-events: none;
}
.scene-image-title {
  position: absolute;
  bottom: 12px;
  left: 16px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 4px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

/* ===== NPC Card with Portrait ===== */
.npc-card-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.npc-portrait {
  width: 80px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.npc-card-info {
  flex: 1;
  min-width: 0;
}

/* ===== Chat NPC Avatar ===== */
.chat-npc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

/* ===== Greeting Portrait ===== */
.greeting-portrait {
  display: block;
  width: 120px;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  margin: 0 auto 16px auto;
}

/* ===== Reveal Notification ===== */
.reveal-notification {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(58, 90, 48, 0.25); border: 1px solid var(--clue-border);
  border-radius: 8px; padding: 12px 16px; margin: 4px 0;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  align-self: stretch; max-width: 100%;
}
.reveal-notification.reveal-show {
  opacity: 1; transform: translateY(0);
}
.reveal-icon {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--clue-border); color: #d0e8c0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.reveal-body { flex: 1; }
.reveal-title {
  font-size: 0.78rem; color: #8ab880; font-weight: 600;
  margin-bottom: 4px; letter-spacing: 1px;
}
.reveal-item {
  font-size: 0.82rem; color: #b0c8a0; line-height: 1.5;
  padding: 2px 0;
}
.reveal-item::before { content: "\25b6  "; font-size: 0.6rem; }

/* ===== Location Map ===== */
.location-map {
  margin-top: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 6px;
}
.location-map svg {
  width: 100%;
  height: auto;
  min-height: 200px;
}

/* ===== Restart Button ===== */
.restart-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 1.1rem;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-right: 10px;
}
.restart-btn:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}

/* ===== iOS / mobile global niceties ===== */
html, body { -webkit-text-size-adjust: 100%; }
button { touch-action: manipulation; }

/* ===== Mobile-only header buttons + drawer backdrop (hidden on desktop) ===== */
.menu-btn, .notebook-btn, .drawer-backdrop { display: none; }

/* ===== AR launch button (visible on all viewports) ===== */
.ar-btn {
  background: rgba(200, 169, 110, 0.12);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 2px;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.2s;
}
.ar-btn:hover {
  background: var(--accent);
  color: var(--bg-dark);
}

/* ===== AR modal (visible on all viewports) ===== */
.ar-modal {
  position: fixed;
  inset: 0;
  z-index: 1800;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  animation: fadeIn 0.3s ease;
}
.ar-modal-content {
  max-width: 480px;
  width: 90%;
  padding: 36px 28px;
  text-align: center;
  position: relative;
  margin: 20px 0;
}
.ar-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
}
.ar-modal-title {
  font-size: 1.4rem;
  color: var(--accent);
  letter-spacing: 6px;
  margin-bottom: 6px;
}
.ar-modal-tag {
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 3px;
  margin-bottom: 22px;
}
.ar-modal-body {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.9;
  margin-bottom: 18px;
}
.ar-modal-hint {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 22px;
  min-height: 2.4em;
}
.ar-modal-launch {
  margin: 4px auto;
}
.ar-modal-foot {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 20px;
  letter-spacing: 1px;
}

/* ===== Mobile (≤768px) — collapse three-column layout into drawers ===== */
@media (max-width: 768px) {
  /* Lock the page to the visible viewport so the chat input never slides under
     Safari's bottom toolbar. 100dvh is the dynamic viewport (iOS Safari sizes
     it to exclude both the URL bar AND the bottom toolbar). --vvh is only set
     by JS when the soft keyboard is up, in which case it's smaller than 100dvh
     and shrinks the layout above the keyboard. */
  html, body {
    overflow: hidden;
    height: 100dvh;
    height: var(--vvh, 100dvh);
  }
  .game-ui {
    height: 100dvh;
    height: var(--vvh, 100dvh);
  }

  /* Header compact mode */
  .header { padding: 0 12px; gap: 8px; }
  .header-left, .header-right { display: flex; align-items: center; gap: 6px; }
  .header-title { display: none; }
  .location-badge {
    font-size: 0.78rem;
    padding: 4px 10px;
    letter-spacing: 1px;
  }
  .clue-count { font-size: 0.72rem; }
  .restart-btn {
    width: 32px;
    height: 32px;
    font-size: 1rem;
    margin-right: 0;
  }
  .ar-btn {
    font-size: 0.7rem;
    padding: 4px 8px;
    letter-spacing: 1px;
  }

  /* Hamburger + notebook buttons appear */
  .menu-btn, .notebook-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    color: var(--accent);
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    touch-action: manipulation;
  }

  /* Sidebar / notebook become off-canvas drawers */
  .layout { position: relative; }
  .sidebar, .notebook {
    position: fixed;
    top: 50px;
    bottom: 0;
    z-index: 50;
    width: 82vw;
    max-width: 320px;
    border: none;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
    transition: transform 0.28s ease;
  }
  .sidebar {
    left: 0;
    transform: translateX(-100%);
  }
  .sidebar.open { transform: translateX(0); }
  .notebook {
    right: 0;
    transform: translateX(100%);
  }
  .notebook.open { transform: translateX(0); }

  .drawer-backdrop {
    display: block;
    position: fixed;
    inset: 50px 0 0 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .drawer-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* Scene panel */
  .scene-box { padding: 16px; }
  .scene-image-wrapper { height: 180px; }
  .scene-description {
    font-size: 0.92rem;
    line-height: 1.85;
    margin-bottom: 18px;
  }
  .scene-image-title {
    font-size: 1.1rem;
    letter-spacing: 3px;
  }

  /* NPC cards */
  .npc-card { padding: 12px 14px; }
  .npc-card-body { gap: 10px; }
  .npc-portrait {
    width: 64px;
    height: 80px;
  }
  .npc-name { font-size: 0.95rem; }
  .npc-role { font-size: 0.75rem; }
  .npc-appearance { font-size: 0.82rem; }

  /* Chat */
  .chat-header { padding: 10px 14px; gap: 10px; }
  .chat-npc-avatar { width: 32px; height: 32px; }
  .chat-npc-name { font-size: 0.95rem; }
  .chat-npc-role { font-size: 0.72rem; }
  .chat-messages { padding: 14px; }
  .msg {
    max-width: 85%;
    font-size: 0.92rem;
    padding: 10px 14px;
  }
  .chat-input-box {
    padding: 10px 14px;
    /* Generous bottom padding clears the home indicator AND any compact Safari
       toolbar that overlays content in iOS 16+. calc() ensures we always have
       at least 14px even on devices with no safe-area-inset. */
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  #chatInput {
    font-size: 16px;
    padding: 12px 14px;
  }
  .send-btn {
    padding: 12px 18px;
    font-size: 0.92rem;
  }

  /* Intro */
  .intro-content { padding: 30px 20px; }
  .intro-title {
    font-size: 2.2rem;
    letter-spacing: 4px;
  }
  .intro-subtitle {
    font-size: 0.85rem;
    letter-spacing: 3px;
    margin-bottom: 28px;
  }
  .intro-text {
    font-size: 0.92rem;
    line-height: 1.85;
    max-height: 42dvh;
    margin-bottom: 28px;
  }
  .intro-btn {
    padding: 12px 36px;
    font-size: 0.95rem;
    letter-spacing: 3px;
  }

  /* Accusation / Ending */
  .accuse-content,
  .ending-content {
    padding: 30px 20px;
    width: 92%;
  }
  .accuse-header h2 {
    font-size: 1.2rem;
    letter-spacing: 3px;
  }
  .accuse-clues { max-height: 100px; }
  .ending-title {
    font-size: 1.6rem;
    letter-spacing: 4px;
  }

  /* AR modal */
  .ar-modal-content { padding: 30px 22px; }
  .ar-modal-title {
    font-size: 1.2rem;
    letter-spacing: 4px;
  }
  .ar-modal-body { font-size: 0.88rem; }
}