/* 清除瀏覽器預設邊距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 整個網頁 */
body {
  font-family: "Microsoft JhengHei", Arial, sans-serif;
  overflow: hidden;
}

/* 所有畫面的共用設定 */
.screen {
  width: 100vw;
  height: 100vh;
  display: none;
}

/* 目前顯示中的畫面 */
.screen.active {
  display: flex;
}

/* ========================= */
/* 開始遊戲畫面 */
/* ========================= */

.start-screen {
  background-color: #111111;
  color: white;

  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 50px;
}

/* 遊戲標題 */
.game-title {
  font-size: 72px;
  letter-spacing: 10px;
}

/* 開始遊戲按鈕 */
.start-button {
  font-size: 32px;
  padding: 20px 80px;

  background-color: #b8860b;
  color: white;

  border: none;
  border-radius: 14px;

  cursor: pointer;
  transition: 0.2s;
}

.start-button:hover {
  background-color: #daa520;
  transform: scale(1.05);
}

.start-button:active {
  transform: scale(0.97);
}

/* ========================= */
/* 前導劇情畫面 */
/* ========================= */

.prologue-screen {
  position: relative;

  justify-content: center;
  align-items: center;

  color: white;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition: background-image 0.4s ease-in-out;

  overflow: hidden;
}

/* 天空背景 */
.prologue-screen.sky-bg {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)),
    url("images/sky-bg.jpg"),
    linear-gradient(to bottom, #7ec8ff, #dff5ff);
}

/* 房屋外觀背景 */
.prologue-screen.house-bg {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45)),
    url("images/house-bg.jpg");
}

/* 客廳背景 */
.prologue-screen.livingroom-bg {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.38)),
    url("images/livingroom-bg.png");
}

/* ========================= */
/* 角色立繪 */
/* ========================= */

.character-image {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 0;

  transform: translateX(-50%);

  width: 380px;
  max-width: 40vw;
  max-height: 78vh;
  height: auto;

  object-fit: contain;

  z-index: 1;

  pointer-events: none;

  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

/* 電報圖片頁：移除深色框與邊框 */
.prologue-text-box.image-only {
  background-color: transparent;
  border: none;
  min-height: auto;
  padding: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 電報圖片 */
.telegram-image {
  display: none;

  width: 210px;
  max-width: 45vw;
  max-height: 70vh;
  height: auto;

  cursor: pointer;

  /* 圖片陰影：讓電報更立體、更清楚 */
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));

  transition: transform 0.2s, filter 0.2s;
}

/* 滑鼠移到電報圖片上的效果 */
.telegram-image:hover {
  transform: none;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.55));
}

/* 電報放大鏡 */
.telegram-magnifier {
  position: fixed;
  display: none;

  width: 150px;
  height: 150px;

  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.9);

  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.4);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

  pointer-events: none;
  z-index: 9999;
}

/* 點下去的效果 */
.telegram-image:active {
  transform: scale(0.97);
}

/* ========================= */
/* 前導劇情對話框區域 */
/* ========================= */

/* 整個對話區：貼近螢幕底部 */
.prologue-dialogue-area {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);

  width: 76%;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  z-index: 2;
}

/* 說話者名稱標籤 */
.speaker-name {
  padding: 8px 24px;
  margin-left: 24px;
  margin-bottom: -2px;

  background-color: rgba(0, 0, 0, 0.75);
  color: #facc15;

  border: 2px solid rgba(255, 255, 255, 0.75);
  border-bottom: none;

  border-radius: 12px 12px 0 0;

  font-size: 20px;
  font-weight: bold;
  letter-spacing: 3px;
}

/* 對話文字框：變小、貼底 */
.prologue-text-box {
  position: relative;

  width: 100%;
  min-height: 115px;

  padding: 22px 150px 22px 34px;

  background-color: rgba(0, 0, 0, 0.58);
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;

  display: flex;
  align-items: center;
}

/* 對話文字：字變小 */
#prologueText {
  font-size: 24px;
  line-height: 1.7;
  text-align: left;
  letter-spacing: 1px;
}

/* 對話框內的按鈕區 */
.dialogue-controls {
  position: absolute;
  right: 24px;
  bottom: 18px;

  display: flex;
  gap: 12px;
}

/* 對話框內的上一句 / 下一句按鈕 */
.dialogue-arrow-button {
  width: 44px;
  height: 44px;

  border: none;
  border-radius: 50%;

  background-color: rgba(255, 255, 255, 0.88);
  color: #1f2937;

  font-size: 24px;
  font-weight: bold;

  cursor: pointer;
  transition: 0.2s;

  display: flex;
  justify-content: center;
  align-items: center;
}

.dialogue-arrow-button:hover {
  background-color: white;
  transform: scale(1.08);
}

.dialogue-arrow-button:active {
  transform: scale(0.95);
}

.dialogue-arrow-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* ========================= */
/* 置中旁白文字方塊 */
/* ========================= */

.prologue-dialogue-area.narration-mode {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);

  width: 58%;

  display: flex;
  flex-direction: column;
  align-items: center;

  z-index: 2;
}

/* 旁白模式的文字框 */
.prologue-text-box.narration-box {
  width: 100%;
  min-height: 160px;

  padding: 42px 70px 58px 70px;

  background-color: rgba(0, 0, 0, 0.58);
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 18px;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* 旁白文字 */
.prologue-text-box.narration-box #prologueText {
  font-size: 24px;
  line-height: 1.9;
  text-align: center;
  letter-spacing: 2px;
}

/* 旁白方塊裡的下一頁按鈕 */
.prologue-text-box.narration-box .dialogue-controls {
  position: absolute;
  right: 22px;
  bottom: 16px;
}

/* ========================= */
/* 電報圖片 */
/* ========================= */

.telegram-image {
  display: none;

  width: 210px;
  max-width: 45vw;
  max-height: 70vh;
  height: auto;

  cursor: pointer;

  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));

  transition: transform 0.2s, filter 0.2s;
}

.telegram-image:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.55));
}

.telegram-image:active {
  transform: scale(0.97);
}

/* 電報圖片頁：移除深色框與邊框 */
.prologue-text-box.image-only {
  background-color: transparent;
  border: none;
  min-height: auto;
  padding: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* 電報圖片頁：讓圖片回到畫面中央 */
.prologue-dialogue-area.image-mode {
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);

  width: 100%;

  align-items: center;
}

#prevPrologueButton {
  display: none !important;
}

/* 電報上方提示文字 */
.telegram-hint {
  display: none;

  margin-bottom: 14px;

  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 2px;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* ========================= */
/* 調查開始按鈕畫面 */
/* ========================= */

.investigation-start-panel {
  display: none;

  position: absolute;
  inset: 0;

  justify-content: center;
  align-items: center;

  z-index: 5;
}

.investigation-start-button {
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 6px;

  padding: 24px 90px;

  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.68);

  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;

  cursor: pointer;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);

  transition: 0.2s;
}

.investigation-start-button:hover {
  transform: scale(1.05);
  background-color: rgba(40, 40, 40, 0.82);
}

.investigation-start-button:active {
  transform: scale(0.97);
}

/* ========================= */
/* 搜索階段：地圖畫面 */
/* ========================= */

.search-screen {
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #87bf69;
  color: white;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  overflow: hidden;
}

/* 上方標題 */
.map-header {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);

  padding: 14px 34px;

  background-color: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;

  text-align: center;

  z-index: 3;
}

.map-header h2 {
  font-size: 30px;
  letter-spacing: 4px;
  margin-bottom: 6px;
}

.map-header p {
  font-size: 16px;
  letter-spacing: 2px;
}

/* 地圖舞台：圖片和按鈕都放在這裡 */
.map-stage {
  position: relative;

  width: min(92vw, calc((100vh - 70px) * 1.78));
  margin-top: 0;
  margin-bottom: 0;

  transform: translateY(0);

  z-index: 1;
}

/* 地圖圖片 */
.floor-map-image {
  display: block;
  width: 100%;
  height: auto;

  border-radius: 10px;
}

/* 地圖上的房間按鈕 */
.map-room {
  position: absolute;

  padding: 6px 14px;

  background-color: rgba(255, 255, 255, 0.95);
  color: #000000;

  border: 2px solid #000000;
  border-radius: 8px;

  font-size: clamp(11px, 1.2vw, 18px);
  font-weight: bold;
  letter-spacing: 1px;

  cursor: pointer;

  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.28);

  transform: translate(-50%, -50%);
  transition: 0.2s;

  z-index: 2;
}

.map-room:hover {
  background-color: #fff7cc;
  transform: translate(-50%, -50%) scale(1.08);
}

.map-room:active {
  transform: translate(-50%, -50%) scale(0.96);
}

/* ========================= */
/* 各房間按鈕位置 */
/* 數字之後可以微調 */
/* ========================= */

.room-big-brother {
  left: 23%;
  top: 20.5%;
}

.room-zashiki {
  left: 19%;
  top: 42.5%;
}

.room-father {
  left: 41%;
  top: 42.5%;
}

.room-girls {
  left: 65%;
  top: 42.5%;
}

.room-bath {
  left: 91%;
  top: 33.5%;
}

.room-toilet {
  left: 91%;
  top: 48.5%;
}

.room-reception {
  left: 12%;
  top: 72%;
}

.room-second-brother {
  left: 39%;
  top: 78%;
}

.room-tea {
  left: 57%;
  top: 78%;
}

.room-kitchen {
  left: 75%;
  top: 78%;
}

/* ========================= */
/* 房間資訊提示框 */
/* ========================= */

.room-info-panel {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);

  width: min(560px, 78vw);

  padding: 24px 34px;

  background-color: rgba(0, 0, 0, 0.78);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 18px;

  text-align: center;

  z-index: 50;
}

.room-info-panel h3 {
  font-size: 28px;
  margin-bottom: 12px;
  color: #facc15;
}

.room-info-panel p {
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.close-room-info-button {
  padding: 10px 28px;

  background-color: #ffffff;
  color: #111111;

  border: none;
  border-radius: 10px;

  font-size: 18px;
  font-weight: bold;

  cursor: pointer;
}

.close-room-info-button:hover {
  background-color: #facc15;
}

/* ========================= */
/* 筆記本按鈕 */
/* ========================= */
.notebook-button {
  display: none;

  position: absolute;
  top: 24px;
  right: 70px;

  width: 86px;
  height: 96px;

  padding: 8px 6px;

  background-color: rgba(0, 0, 0, 0.55);

  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 16px;

  cursor: pointer;

  z-index: 30;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);

  transition: 0.2s;

  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4px;
}

.search-screen.active .notebook-button {
  display: flex;
}

.notebook-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.notebook-button-text {
  color: white;

  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;

  line-height: 1.2;
  white-space: nowrap;
}

.notebook-button:hover {
  background-color: rgba(40, 40, 40, 0.85);
  transform: scale(1.08);
}

.notebook-button:active {
  transform: scale(0.96);
}

/* 封面上的字 */
.notebook-cover-title {
  color: #f5ead2;

  font-size: 42px;
  font-weight: bold;
  letter-spacing: 8px;

  writing-mode: vertical-rl;

  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
}

/* 打開筆記本時：封面往左翻開 */
.notebook-overlay.open .notebook-cover {
  animation: notebookCoverFlip 1.6s ease forwards;
}

@keyframes notebookCoverFlip {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }

  45% {
    transform: rotateY(-70deg);
    opacity: 1;
  }

  75% {
    transform: rotateY(-120deg);
    opacity: 0.75;
  }

  100% {
    transform: rotateY(-165deg);
    opacity: 0;
  }
}

/* 筆記本打開時：只有標題、控制按鈕、關閉按鈕淡入 */
/* 注意：不要讓 .clue-page 套用這個動畫，否則翻頁會閃現 */
.notebook-title,
.notebook-controls,
.close-notebook-button {
  opacity: 0;
}

.notebook-overlay.open .notebook-title,
.notebook-overlay.open .notebook-controls,
.notebook-overlay.open .close-notebook-button {
  animation: notebookContentFadeIn 0.35s ease forwards;
  animation-delay: 1s;
}

/* 線索頁本身永遠保持正常顯示，避免翻頁時從下方浮現 */
.clue-page {
  opacity: 1;
}

@keyframes notebookContentFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 筆記本展開後 */
.notebook-overlay.open .notebook-panel {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
}

/* 筆記本展開時的封面翻動效果 */
.close-notebook-button {
  position: absolute;
  top: 18px;
  right: 22px;

  width: 42px;
  height: 42px;

  border: none;
  border-radius: 50%;

  background-color: #5c3b1e;
  color: white;

  font-size: 30px;
  line-height: 1;

  cursor: pointer;
}

.close-notebook-button:hover {
  background-color: #7a4f27;
}

.notebook-title {
  font-size: 34px;
  margin-bottom: 28px;
  letter-spacing: 4px;
}


/* ========================= */
/* 線索頁面 */
/* ========================= */

.clue-page {
  width: 100%;
  flex: 1;

  padding: 26px 34px;

  background-color: rgba(255, 255, 255, 0.55);
  border: 2px solid rgba(92, 59, 30, 0.55);
  border-radius: 16px;

  display: flex;
  flex-direction: column;
  align-items: center;

  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.clue-header {
  text-align: center;
  margin-bottom: 22px;
}

.clue-type-label {
  font-size: 18px;
  font-weight: bold;
  color: #8a5a22;
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.clue-page-title {
  font-size: 30px;
  letter-spacing: 3px;
}

/* 線索內容：沒有蒐集到時會被隱藏 */
.clue-content {
  display: none;

  width: 100%;

  flex-direction: column;
  align-items: center;
}

.clue-image {
  width: min(360px, 70%);
  max-height: 230px;
  object-fit: contain;

  margin-bottom: 22px;

  border-radius: 12px;
  border: 2px solid rgba(92, 59, 30, 0.45);

  background-color: rgba(255, 255, 255, 0.5);
}

.clue-description {
  width: 90%;

  font-size: 20px;
  line-height: 1.8;
  text-align: center;
}


/* ========================= */
/* 筆記本翻頁按鈕 */
/* ========================= */

.notebook-controls {
  width: 100%;

  margin-top: 26px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notebook-page-button {
  padding: 10px 22px;

  background-color: #5c3b1e;
  color: white;

  border: none;
  border-radius: 10px;

  font-size: 18px;
  font-weight: bold;

  cursor: pointer;

  transition: 0.2s;
}

.notebook-page-button:hover {
  background-color: #7a4f27;
  transform: scale(1.04);
}

.notebook-page-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.clue-page-counter {
  font-size: 18px;
  font-weight: bold;
  color: #5c3b1e;
}

/* ========================= */
/* 筆記本內頁翻頁動畫 */
/* ========================= */
.clue-page.flip-next-out {
  transform-origin: left center;
  animation: cluePageNextOut 0.45s ease forwards !important;
}

.clue-page.flip-next-in {
  transform-origin: right center;
  animation: cluePageNextIn 0.45s ease forwards !important;
}

.clue-page.flip-prev-out {
  transform-origin: right center;
  animation: cluePagePrevOut 0.45s ease forwards !important;
}

.clue-page.flip-prev-in {
  transform-origin: left center;
  animation: cluePagePrevIn 0.45s ease forwards !important;
}


/* 下一頁：目前頁往左翻走 */
@keyframes cluePageNextOut {
  from {
    opacity: 1;
    transform: rotateY(0deg);
  }

  to {
    opacity: 0;
    transform: rotateY(-85deg);
  }
}

/* 下一頁：新頁從右邊翻進來 */
@keyframes cluePageNextIn {
  from {
    opacity: 0;
    transform: rotateY(85deg);
  }

  to {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

/* 上一頁：目前頁往右翻走 */
@keyframes cluePagePrevOut {
  from {
    opacity: 1;
    transform: rotateY(0deg);
  }

  to {
    opacity: 0;
    transform: rotateY(85deg);
  }
}

/* 上一頁：新頁從左邊翻進來 */
@keyframes cluePagePrevIn {
  from {
    opacity: 0;
    transform: rotateY(-85deg);
  }

  to {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

/* ========================= */
/* 房間調查畫面 */
/* ========================= */

.room-title-panel {
  display: none;

  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);

  padding: 14px 36px;

  background-color: rgba(0, 0, 0, 0.62);
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 16px;

  z-index: 10;

  text-align: center;
}

.room-title-panel h2 {
  font-size: 30px;
  letter-spacing: 4px;
}

.back-to-map-button {
  display: none;

  position: absolute;
  top: 28px;
  left: 36px;

  padding: 12px 26px;

  background-color: rgba(0, 0, 0, 0.65);
  color: white;

  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 12px;

  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;

  cursor: pointer;

  z-index: 60;

  transition: 0.2s;
}

.back-to-map-button:hover {
  background-color: rgba(40, 40, 40, 0.88);
  transform: scale(1.05);
}

.back-to-map-button:active {
  transform: scale(0.96);
}

/* ========================= */
/* 房間內人物與對話 */
/* ========================= */

.room-character-image {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 0;

  transform: translateX(-50%);

  width: 300px;
  max-width: 30vw;
  max-height: 70vh;
  height: auto;

  object-fit: contain;

  z-index: 4;

  pointer-events: none;

  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

/* 滑鼠移到人物感應範圍時，人物發光 */
.room-character-image.room-character-glow {
  transform: translateX(-50%) scale(1.03);

  filter:
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 14px rgba(255, 230, 80, 0.95))
    drop-shadow(0 0 30px rgba(255, 200, 40, 0.65));
}


/* 房間人物真正可互動的滑鼠感應範圍 */
.room-character-hitbox {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 0;

  transform: translateX(-50%);

  width: 180px;
  height: 420px;
  max-height: 70vh;

  border: none;
  background-color: transparent;

  cursor: pointer;

  z-index: 24;
}


/* 人物被滑鼠碰到時的光暈 */
.room-character-image.room-character-glow {
  transform: translateX(-50%) scale(1.03);

  filter:
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 14px rgba(255, 230, 80, 0.95))
    drop-shadow(0 0 30px rgba(255, 200, 40, 0.65));
}

/* 大哥房內的大哥立繪：縮小版 */
.room-character-image.big-brother-room-character {
  width: 300px;
  max-width: 30vw;
  max-height: 70vh;
}

.room-character-image:active {
  transform: translateX(-50%) scale(0.98);
}

.start-room-dialogue-button {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 130px;
  transform: translateX(-50%);

  padding: 16px 46px;

  background-color: rgba(0, 0, 0, 0.72);
  color: white;

  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 14px;

  font-size: 24px;
  font-weight: bold;
  letter-spacing: 4px;

  cursor: pointer;

  z-index: 12;

  transition: 0.2s;
}

.start-room-dialogue-button:hover {
  background-color: rgba(40, 40, 40, 0.88);
  transform: translateX(-50%) scale(1.05);
}

.start-room-dialogue-button:active {
  transform: translateX(-50%) scale(0.96);
}

/* 房間對話框 */
.room-dialogue-box {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);

  width: 76%;
  min-height: 120px;

  padding: 24px 120px 24px 34px;

  background-color: rgba(0, 0, 0, 0.68);
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 16px;

  color: white;

  z-index: 45;
}

.room-dialogue-speaker {
  position: absolute;
  left: 24px;
  top: -42px;

  padding: 8px 26px;

  background-color: rgba(0, 0, 0, 0.78);
  color: #facc15;

  border: 2px solid rgba(255, 255, 255, 0.78);
  border-bottom: none;
  border-radius: 12px 12px 0 0;

  font-size: 20px;
  font-weight: bold;
  letter-spacing: 3px;
}

.room-dialogue-text {
  font-size: 23px;
  line-height: 1.7;
  letter-spacing: 1px;
}

.next-room-dialogue-button {
  position: absolute;
  right: 26px;
  bottom: 22px;

  width: 46px;
  height: 46px;

  border: none;
  border-radius: 50%;

  background-color: rgba(255, 255, 255, 0.9);
  color: #111827;

  font-size: 24px;
  font-weight: bold;

  cursor: pointer;

  transition: 0.2s;
}

.next-room-dialogue-button:hover {
  background-color: white;
  transform: scale(1.08);
}

.next-room-dialogue-button:active {
  transform: scale(0.95);
}

/* ========================= */
/* 房間內可點擊物件 */
/* ========================= */

.room-hotspot-layer {
  display: none;

  position: absolute;
  inset: 0;

  z-index: 9;

  pointer-events: none;
}

/* 
  看不見的熱區：
  平常不顯示任何顏色或光暈
*/
.room-hotspot {
  position: absolute;

  border: none;
  background-color: transparent;
  box-shadow: none;

  cursor: pointer;
  pointer-events: auto;

  border-radius: 12px;

  transform: translate(-50%, -50%);

  transition: transform 0.2s ease;
}

/* 
  光點本體：
  平常完全透明
*/
.room-hotspot::after {
  content: "";

  position: absolute;
  left: 50%;
  top: 50%;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  background-color: rgba(255, 245, 130, 1);

  box-shadow:
    0 0 16px rgba(255, 245, 130, 1),
    0 0 34px rgba(255, 210, 50, 0.85),
    0 0 58px rgba(255, 180, 20, 0.55);

  transform: translate(-50%, -50%) scale(0.3);

  opacity: 0;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* 滑鼠移到熱區時，才出現光點 */
.room-hotspot:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 點擊時縮一下 */
.room-hotspot:active::after {
  transform: translate(-50%, -50%) scale(0.8);
}

/* 大哥房：桌上的日記本熱區 */
.hotspot-diary {
  left: 22%;
  top: 80%;

  width: 8%;
  height: 6%;
}

/* 大哥房：右方櫃子上的紙張熱區 */
.hotspot-paper {
  left: 82%;
  top: 40%;

  width: 8%;
  height: 7%;
}

/* ========================= */
/* 房間對話選項 */
/* ========================= */

.room-choice-box {
  display: none;

  flex-direction: column;
  gap: 12px;

  width: 100%;

  margin-top: 10px;
}

.room-choice-button {
  width: 100%;

  padding: 12px 18px;

  background-color: rgba(255, 255, 255, 0.92);
  color: #111111;

  border: none;
  border-radius: 10px;

  font-size: 20px;
  font-weight: bold;
  text-align: left;

  cursor: pointer;

  transition: 0.2s;
}

.room-choice-button:hover {
  background-color: #facc15;
  transform: translateX(6px);
}

.room-choice-button:active {
  transform: translateX(2px) scale(0.98);
}

/* 對話開啟時，人物不因 hover 產生光暈 */
.room-dialogue-box[style*="block"] ~ .room-character-image:hover {
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}

/* ========================= */
/* 證據檢視彈窗：書頁閱讀版 */
/* ========================= */

.evidence-panel {
  display: none;

  position: absolute;
  inset: 0;

  justify-content: center;
  align-items: center;

  padding: 28px;

  background: rgba(28, 20, 12, 0.58);
  backdrop-filter: blur(3px);

  z-index: 55;
}

/* 整本證據書 */
.evidence-card {
  position: relative;

  width: min(1040px, 94vw);
  height: min(720px, 90vh);

  padding: 30px 42px 28px;

  background:
    linear-gradient(90deg, rgba(124, 86, 42, 0.16) 0%, transparent 7%, transparent 93%, rgba(124, 86, 42, 0.16) 100%),
    linear-gradient(180deg, #f5ecd8 0%, #efe2c6 100%);

  color: #2b2118;

  border-radius: 28px;
  border: 1px solid rgba(104, 72, 36, 0.25);

  box-shadow:
    0 26px 54px rgba(0, 0, 0, 0.38),
    inset 0 0 34px rgba(255, 255, 255, 0.28);

  display: flex;
  flex-direction: column;
  align-items: center;

  overflow: hidden;
}

/* 上方標題區 */
.evidence-header {
  flex: 0 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: 16px;
}

.evidence-type {
  display: inline-block;

  margin-bottom: 12px;
  padding: 7px 22px;

  background-color: #6b4420;
  color: #ffffff;

  border-radius: 999px;

  font-size: 17px;
  font-weight: bold;
  letter-spacing: 2px;
}

.evidence-title {
  margin-bottom: 8px;

  font-size: clamp(34px, 4vw, 50px);
  font-weight: bold;
  letter-spacing: 4px;
  line-height: 1.15;
  text-align: center;
  color: #2f2218;
}

.evidence-hint {
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #9b6b32;
}

/* 內容區：未展開時是單欄置中 */
.evidence-content {
  flex: 1;

  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 0;
}

/* 展開後變成左右書頁 */
.evidence-card.detail-open .evidence-content {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  column-gap: 34px;
  align-items: center;
}

/* 左頁圖片區 */
.evidence-image-area {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 0;
}

/* 圖片：沒有框中框 */
.evidence-image {
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

/* 未展開前的圖片尺寸 */
.evidence-card:not(.detail-open) .evidence-image {
  max-width: min(230px, 32vw);
  max-height: 270px;
}

/* 展開後的圖片尺寸 */
.evidence-card.detail-open .evidence-image {
  max-width: 100%;
  max-height: 520px;
}

/* 只有未展開時可以 hover */
.evidence-image.can-open {
  cursor: pointer;
}

.evidence-image.can-open:hover {
  transform: translateY(-2px) scale(1.025);
  filter: drop-shadow(0 0 16px rgba(255, 230, 80, 0.72));
}

/* 右頁閱讀區 */
.evidence-reading-panel {
  display: none;

  height: 100%;
  min-height: 0;

  padding: 26px 30px;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 248, 230, 0.42));

  border-left: 3px solid rgba(122, 79, 39, 0.35);
  border-radius: 20px;

  flex-direction: column;
  justify-content: center;

  box-shadow: inset 8px 0 18px rgba(87, 57, 26, 0.08);
}

.evidence-card.detail-open .evidence-reading-panel {
  display: flex;
}

.evidence-description {
  display: none;

  margin-bottom: 16px;

  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.85;
  text-align: left;
  color: #2b2118;
}

/* 日記內容區 */
.evidence-diary-block {
  display: none;

  padding: 18px 20px;

  background-color: rgba(255, 255, 255, 0.52);
  border-left: 6px solid #9b6b32;
  border-radius: 16px;
}

.evidence-diary-block h4 {
  margin-bottom: 10px;

  font-size: clamp(18px, 1.4vw, 23px);
  font-weight: bold;
  color: #7a4f27;
  letter-spacing: 2px;
}

.evidence-diary-block p {
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.75;
  text-align: left;
  color: #2b2118;
}

/* 關閉按鈕固定在卡片下方，不需要滾動才看得到 */
.close-evidence-button {
  flex: 0 0 auto;

  margin-top: 18px;
  padding: 12px 40px;

  background-color: #6b4420;
  color: white;

  border: none;
  border-radius: 14px;

  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;

  cursor: pointer;
  transition: 0.2s;
}

.close-evidence-button:hover {
  background-color: #83552b;
  transform: scale(1.04);
}

/* ========================= */
/* 證據彈窗尺寸修正版 */
/* 放在 style.css 最下面 */
/* ========================= */

/* 整個證據卡片縮小一點，避免塞滿畫面 */
.evidence-card {
  width: min(880px, 88vw);
  height: min(620px, 84vh);

  padding: 24px 38px 26px;

  overflow: hidden;
}

/* 上方標題區不要佔太多高度 */
.evidence-header {
  margin-bottom: 12px;
}

.evidence-type {
  margin-bottom: 10px;
  padding: 6px 20px;

  font-size: 16px;
}

.evidence-title {
  margin-bottom: 6px;

  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.1;
}

.evidence-hint {
  margin-bottom: 12px;

  font-size: 16px;
}

/* 未展開前：單張封面圖縮小 */
.evidence-card:not(.detail-open) .evidence-content {
  flex: 1;

  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 0;
}

.evidence-card:not(.detail-open) .evidence-image {
  max-width: min(330px, 44vw);
  max-height: 360px;
}

/* 展開後：左右頁比例調整 */
.evidence-card.detail-open .evidence-content {
  grid-template-columns: 0.78fr 1.22fr;
  column-gap: 28px;
}

/* 展開後左邊圖片縮小 */
.evidence-card.detail-open .evidence-image {
  max-width: 330px;
  max-height: 390px;
}

/* 圖片區不要把高度撐爆 */
.evidence-image-area {
  min-height: 0;
  height: 100%;
}

/* 右側閱讀區縮小一些 */
.evidence-reading-panel {
  height: auto;
  max-height: 390px;

  padding: 22px 26px;

  justify-content: center;
}

/* 右側說明文字 */
.evidence-description {
  font-size: 18px;
  line-height: 1.75;
}

/* 日記內容區 */
.evidence-diary-block {
  padding: 16px 18px;
}

.evidence-diary-block h4 {
  font-size: 20px;
}

.evidence-diary-block p {
  font-size: 15px;
  line-height: 1.65;
}

/* 關閉按鈕不要浮在圖片上 */
.close-evidence-button {
  position: static;

  margin-top: 14px;
  padding: 10px 34px;

  font-size: 20px;
}

/* ========================= */
/* 未展開證據圖片：強制縮小版 */
/* 一定要放在 style.css 最下面 */
/* ========================= */

.evidence-card:not(.detail-open) #evidenceImage {
  width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
  max-height: 280px !important;

  object-fit: contain !important;

  display: block !important;
  margin: 8px auto 14px auto !important;
}

/* 未展開時，圖片區不要把圖片撐大 */
.evidence-card:not(.detail-open) .evidence-image-area {
  height: 300px !important;
  max-height: 300px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 未展開時，內容區高度控制 */
.evidence-card:not(.detail-open) .evidence-content {
  flex: 0 0 auto !important;
  height: 310px !important;
  max-height: 310px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 未展開時，整個卡片稍微緊湊一點 */
.evidence-card:not(.detail-open) {
  height: min(610px, 84vh) !important;
  padding-top: 28px !important;
  padding-bottom: 24px !important;
}

/* 未展開時，標題區不要被圖片擠到 */
.evidence-card:not(.detail-open) .evidence-header {
  margin-bottom: 8px !important;
}

/* 未展開時，關閉按鈕固定在圖片下方，不壓圖片 */
.evidence-card:not(.detail-open) .close-evidence-button {
  margin-top: 12px !important;
}

/* ========================= */
/* 未展開證據頁：按鈕顯示修正版 */
/* 放在 style.css 最下面 */
/* ========================= */

/* 未展開時，整個卡片高度再控制好 */
.evidence-card:not(.detail-open) {
  height: min(600px, 82vh) !important;
  padding-top: 26px !important;
  padding-bottom: 24px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* 標題區固定，不要被圖片擠壓 */
.evidence-card:not(.detail-open) .evidence-header {
  flex: 0 0 auto !important;
  margin-bottom: 10px !important;
}

/* 圖片區改成可伸縮，不要固定太高 */
.evidence-card:not(.detail-open) .evidence-content {
  flex: 1 1 auto !important;

  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 圖片區也不要固定 300px */
.evidence-card:not(.detail-open) .evidence-image-area {
  height: auto !important;
  max-height: none !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 未展開圖片大小 */
.evidence-card:not(.detail-open) #evidenceImage {
  width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
  max-height: 260px !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

/* 關閉按鈕固定在卡片底部可見位置 */
.evidence-card:not(.detail-open) .close-evidence-button {
  flex: 0 0 auto !important;

  display: block !important;

  margin-top: 16px !important;
  margin-bottom: 0 !important;

  position: static !important;
  transform: none !important;
}

/* ========================= */
/* 房間對話框關閉按鈕 */
/* ========================= */

.close-room-dialogue-button {
  position: absolute;
  top: 14px;
  right: 18px;

  width: 36px;
  height: 36px;

  border: none;
  border-radius: 50%;

  background-color: rgba(255, 255, 255, 0.9);
  color: #111827;

  font-size: 28px;
  font-weight: bold;
  line-height: 1;

  cursor: pointer;

  z-index: 20;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: 0.2s;
}

.close-room-dialogue-button:hover {
  background-color: #facc15;
  transform: scale(1.08);
}

.close-room-dialogue-button:active {
  transform: scale(0.94);
}

/* ========================= */
/* 父親房：5 個熱區位置 */
/* ========================= */

/* 小物件 / 重點證據要在大型區域上面 */
.hotspot-father-paperweight,
.hotspot-father-bedside-corner,
.hotspot-father-letter {
  z-index: 4;
}

/* 大範圍調查區放下面 */
.hotspot-large-area {
  z-index: 1;
}

/* 1. 右邊桌上的石製紙鎮 */
.hotspot-father-paperweight {
  left: 82%;
  top: 78%;

  width: 8%;
  height: 8%;
}

/* 2. 床頭櫃角落的血跡 / 破損處 */
.hotspot-father-bedside-corner {
  left: 17%;
  top: 76%;

  width: 7%;
  height: 8%;
}

/* 4. 押入裡的親密書信 / 紙張 */
.hotspot-father-letter {
  left: 37%;
  top: 35%;

  width: 10%;
  height: 8%;
}

/* 3. 代表整個床頭櫃的小光點 */
.hotspot-father-bedside-cabinet {
  left: 22%;
  top: 65%;

  width: 5%;
  height: 5%;

  z-index: 4;
}

/* 5. 代表整個押入的小光點 */
.hotspot-father-oshiire {
  left: 33%;
  top: 50%;

  width: 5%;
  height: 5%;

  z-index: 4;
}

/* ========================= */
/* 書信證據頁：圖片縮小 + 分頁閱讀 */
/* ========================= */

/* 書信證據展開後，左圖右文比例重新調整 */
.evidence-card.detail-open.letter-evidence .evidence-content {
  grid-template-columns: 0.62fr 1.38fr !important;
  column-gap: 26px !important;
}

/* 書信圖片縮小 */
.evidence-card.detail-open.letter-evidence #evidenceImage {
  width: auto !important;
  max-width: 260px !important;
  max-height: 390px !important;

  object-fit: contain !important;
}

/* 書信右側閱讀框稍微縮小，避免太滿 */
.evidence-card.detail-open.letter-evidence .evidence-reading-panel {
  max-height: 390px !important;
  padding: 22px 26px !important;
}

/* 書信說明文字 */
.evidence-card.detail-open.letter-evidence .evidence-description {
  font-size: 18px !important;
  line-height: 1.75 !important;
  margin-bottom: 14px !important;
}

/* 書信內容區 */
.evidence-card.detail-open.letter-evidence .evidence-diary-block {
  padding: 16px 20px !important;
}

/* 書信內容文字 */
.evidence-card.detail-open.letter-evidence .evidence-diary-block p {
  font-size: 17px !important;
  line-height: 1.85 !important;
}

/* 書信分頁按鈕區 */
.evidence-diary-controls {
  display: none;

  margin-top: 16px;

  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

/* 上一頁 / 下一頁按鈕 */
.evidence-diary-page-button {
  padding: 8px 18px;

  background-color: #6b4420;
  color: white;

  border: none;
  border-radius: 10px;

  font-size: 16px;
  font-weight: bold;

  cursor: pointer;
  transition: 0.2s;
}

.evidence-diary-page-button:hover {
  background-color: #83552b;
  transform: scale(1.04);
}

.evidence-diary-page-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* 頁碼 */
.evidence-diary-counter {
  color: #6b4420;

  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}

/* 不能關閉時的提醒 */
.evidence-close-hint {
  display: none;

  margin-top: 10px;

  color: #8a5a22;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
}

/* 關閉按鈕不能按時 */
.close-evidence-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ========================= */
/* 父親書信證據頁：強制縮小圖片 */
/* 一定要放在 style.css 最下面 */
/* ========================= */

.evidence-card.detail-open.letter-evidence .evidence-image-area {
  justify-content: center !important;
  align-items: center !important;
}

.evidence-card.detail-open.letter-evidence #evidenceImage {
  width: 210px !important;
  max-width: 210px !important;
  height: auto !important;
  max-height: 360px !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

/* 左右版面再調整一下，讓右邊文字區多一點空間 */
.evidence-card.detail-open.letter-evidence .evidence-content {
  grid-template-columns: 0.52fr 1.48fr !important;
  column-gap: 24px !important;
}

/* 標題避免太大壓到內容 */
.evidence-card.detail-open.letter-evidence .evidence-title {
  font-size: clamp(28px, 3vw, 38px) !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
}

/* 右側文字區不要太高 */
.evidence-card.detail-open.letter-evidence .evidence-reading-panel {
  max-height: 370px !important;
  padding: 20px 24px !important;
}

/* 書信內容文字稍微縮小 */
.evidence-card.detail-open.letter-evidence .evidence-diary-block p {
  font-size: 16px !important;
  line-height: 1.75 !important;
}

/* ========================= */
/* 父親書信證據頁：強制縮小圖片 */
/* ========================= */

.evidence-card.detail-open.letter-evidence .evidence-content {
  grid-template-columns: 0.46fr 1.54fr !important;
  column-gap: 22px !important;
}

.evidence-card.detail-open.letter-evidence #evidenceImage {
  width: 180px !important;
  max-width: 180px !important;
  height: auto !important;
  max-height: 330px !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

.evidence-card.detail-open.letter-evidence .evidence-title {
  font-size: clamp(26px, 2.7vw, 34px) !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
}

.evidence-card.detail-open.letter-evidence .evidence-reading-panel {
  max-height: 370px !important;
  padding: 20px 24px !important;
}

.evidence-card.detail-open.letter-evidence .evidence-diary-block p {
  font-size: 16px !important;
  line-height: 1.75 !important;
}

/* ========================= */
/* 隱藏書信第 2 頁的關閉提示文字 */
/* ========================= */

.evidence-close-hint {
  display: none !important;
}

/* ========================= */
/* 筆記已更新提示框 */
/* ========================= */

.notebook-update-toast {
  display: none;

  position: absolute;
  left: 50%;
  top: 45%;

  transform: translate(-50%, -50%);

  padding: 22px 54px;

  background-color: rgba(0, 0, 0, 0.78);
  color: #facc15;

  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;

  font-size: 32px;
  font-weight: bold;
  letter-spacing: 5px;

  z-index: 80;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);

  opacity: 0;
  pointer-events: none;
}

.notebook-update-toast.show {
  display: block;
  animation: notebookUpdateFade 3s ease forwards;
}

@keyframes notebookUpdateFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }

  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
  }
}

/* ========================= */
/* 調查筆記本：分類頁籤 */
/* ========================= */

.notebook-tabs {
  width: 100%;

  display: flex;
  justify-content: center;
  gap: 14px;

  margin-top: -10px;
  margin-bottom: 22px;
}

.notebook-tab {
  position: relative;

  padding: 10px 22px;

  background-color: rgba(92, 59, 30, 0.18);
  color: #5c3b1e;

  border: 2px solid rgba(92, 59, 30, 0.55);
  border-radius: 999px;

  font-size: 17px;
  font-weight: bold;
  letter-spacing: 2px;

  cursor: pointer;

  transition: 0.2s;
}

.notebook-tab:hover {
  background-color: rgba(92, 59, 30, 0.28);
  transform: translateY(-2px);
}

.notebook-tab.active {
  background-color: #5c3b1e;
  color: #fff7df;
  border-color: #5c3b1e;

  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

/* 分類有新內容時的小紅點 */
.notebook-tab-dot {
  display: none;

  position: absolute;
  right: 8px;
  top: 6px;

  width: 10px;
  height: 10px;

  background-color: #dc2626;
  border-radius: 50%;

  box-shadow: 0 0 8px rgba(220, 38, 38, 0.75);
}

.notebook-tab.has-update .notebook-tab-dot {
  display: block;
}

/* 右上調查筆記按鈕也可以顯示更新狀態 */
.notebook-button.has-update {
  box-shadow:
    0 0 0 3px rgba(250, 204, 21, 0.65),
    0 8px 18px rgba(0, 0, 0, 0.35);
}

.notebook-button.has-update::after {
  content: "";

  position: absolute;
  right: 8px;
  top: 8px;

  width: 12px;
  height: 12px;

  background-color: #dc2626;
  border-radius: 50%;

  box-shadow: 0 0 8px rgba(220, 38, 38, 0.8);
}

/* ========================= */
/* 座敷：可調查物件熱區 */
/* ========================= */

/* 左下箱子：對應藥箱裡的安眠藥 */
.hotspot-sleeping-pills {
  left: 12.8%;
  top: 76%;

  width: 18px;
  height: 18px;
}

/* 右側相框：對應細姨與小弟的照片 */
.hotspot-concubine-photo {
  left: 82.2%;
  top: 52%;

  width: 18px;
  height: 18px;
}

/* 左側紙張：對應契約 */
.hotspot-land-contract {
  left: 13.2%;
  top: 65%;

  width: 18px;
  height: 18px;
}

/* ========================= */
/* 女生房：可調查物件熱區 */
/* ========================= */

/* 右側桌上的手帕 */
.hotspot-girls-handkerchief {
  left: 77.6%;
  top: 82.5%;

  width: 22px;
  height: 22px;
}

/* 右牆上的蓮花畫 */
.hotspot-girls-lotus-painting {
  left: 86.4%;
  top: 51.5%;

  width: 22px;
  height: 22px;
}

/* 左側梳妝櫃 */
.hotspot-girls-dresser {
  left: 18.5%;
  top: 58.5%;

  width: 22px;
  height: 22px;
}

/* ========================= */
/* 大哥房：新增普通調查物件熱區 */
/* ========================= */

/* 大哥房：蒲團 / 座墊 */
.hotspot-big-brother-futon {
  left: 30.5%;
  top: 86.5%;

  width: 22px;
  height: 22px;
}

/* 大哥房：窗戶 */
.hotspot-big-brother-window {
  left: 91.5%;
  top: 42%;

  width: 22px;
  height: 22px;
}

/* ========================= */
/* 應接室：可調查物件熱區 */
/* 暫時紅框版，調整完可以改回光點 */
/* ========================= */

/* 應接室：燕子花 */
.hotspot-reception-iris-flower {
  left: 46%;
  top: 52%;

  width: 90px;
  height: 120px;
}

/* 應接室：洋式桌椅 */
.hotspot-reception-western-furniture {
  left: 43%;
  top: 77%;

  width: 220px;
  height: 120px;
}

/* ========================= */
/* 應接室：鄰居人物位置 */
/* ========================= */

.reception-neighbor-character {
  left: 80%;
  bottom: 0;

  width: 300px;
  max-width: 32vw;
  max-height: 78vh;

  transform: translateX(-50%);
}

/* 應接室：鄰居點擊對話範圍 */
.hitbox-reception-neighbor {
  left: 80%;
  bottom: 0;

  width: 180px;
  height: 520px;

  transform: translateX(-50%);
}

/* ========================= */
/* 房間熱區：不規則閃爍光點 */
/* ========================= */

.room-hotspot {
  overflow: visible;
}

/* 平常的閃爍光點 */
.room-hotspot::after {
  content: "";

  position: absolute;
  left: 50%;
  top: 50%;

  width: 14px;
  height: 14px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background-color: rgba(255, 230, 80, 0.85);

  box-shadow:
    0 0 10px rgba(255, 230, 80, 0.95),
    0 0 24px rgba(255, 200, 40, 0.65),
    0 0 42px rgba(255, 180, 20, 0.35);

  opacity: 0;

  pointer-events: none;

  animation-name: hotspotTwinkle;
  animation-duration: var(--twinkle-duration, 5s);
  animation-delay: var(--twinkle-delay, 0s);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* 閃爍節奏：大部分時間不亮，短暫閃一下 */
@keyframes hotspotTwinkle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
  }

  62% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
  }

  68% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1);
  }

  73% {
    opacity: 0.25;
    transform: translate(-50%, -50%) scale(0.8);
  }

  78% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.12);
  }

  86% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
  }
}

/* 滑鼠移上去時：固定顯示強烈黃光 */
.room-hotspot:hover::after {
  opacity: 1;

  width: 20px;
  height: 20px;

  animation: none;

  background-color: rgba(255, 230, 80, 0.95);

  box-shadow:
    0 0 14px rgba(255, 230, 80, 1),
    0 0 30px rgba(255, 200, 40, 0.8),
    0 0 52px rgba(255, 180, 20, 0.5);

  transform: translate(-50%, -50%) scale(1.15);
}

/* 滑鼠移上去時，熱區本身不要再出現方形底色 */
.room-hotspot:hover {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ========================= */
/* 房間標題下方：可調查物件數量 */
/* ========================= */

.room-hotspot-count-text {
  margin-top: 6px;

  color: rgba(255, 255, 255, 0.92);

  font-size: 14px;
  font-weight: normal;
  letter-spacing: 1px;

  text-align: center;
}

/* 房間可調查物件數量：數字紅色 */
.hotspot-count-number {
  color: #ef4444;
  font-weight: bold;
  font-size: 1.15em;
}

/* ========================= */
/* 客廳 / 座敷：父親遺照熱區 */
/* ========================= */

.hotspot-father-memorial-photo {
  left: 88%;
  top: 56%;

  width: 90px;
  height: 110px;
}

/* ========================= */
/* 證據視窗：統一修正長圖壓到文字問題 */
/* ========================= */

/* 證據彈窗本體：限制最大高度，避免內容爆出去 */
.evidence-card {
  max-height: 88vh;
  overflow: hidden;
}

/* 展開後的內容區：固定左右兩欄 */
.evidence-card.detail-open .evidence-content {
  display: grid;
  grid-template-columns: minmax(220px, 36%) minmax(0, 1fr);
  gap: 36px;

  align-items: center;

  width: 100%;
  min-height: 0;
}

/* 左側圖片區：限制圖片活動範圍 */
.evidence-card.detail-open .evidence-image-area {
  width: 100%;
  height: min(58vh, 520px);

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
}

/* 所有證據圖片統一縮在圖片區內 */
.evidence-card.detail-open .evidence-image {
  max-width: 100% !important;
  max-height: 100% !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;

  display: block;
}

/* 右側文字閱讀區：不被圖片擠壓 */
.evidence-card.detail-open .evidence-reading-panel {
  min-width: 0;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 說明文字不要被擠到太窄 */
.evidence-card.detail-open .evidence-description,
.evidence-card.detail-open .evidence-diary-block {
  width: 100%;
  max-width: 100%;
}

/* 關閉按鈕不要被圖片或內容推走 */
.close-evidence-button {
  position: relative;
  z-index: 5;
}

/* ========================= */
/* 新對話選單：鎖定 / 已讀 / 新解鎖 */
/* ========================= */

.room-choice-button.locked {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.room-choice-button.read {
  opacity: 0.78;
}

.room-choice-button.new-unread {
  box-shadow:
    0 0 0 2px rgba(255, 220, 120, 0.75),
    0 0 18px rgba(255, 210, 80, 0.45);
}

/* ================================================= */
/* 調查筆記本：最終穩定覆蓋版 */
/* 解決圖片撐爆、按鈕被擠出畫面、頁面高度不固定 */
/* ================================================= */

/* 整個筆記本黑色遮罩 */
.notebook-overlay {
  position: fixed !important;
  inset: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 18px !important;

  background-color: rgba(0, 0, 0, 0.45) !important;

  z-index: 9999 !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.notebook-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 筆記本主體：固定高度，內容不能把它撐爆 */
.notebook-panel {
  position: relative !important;

  width: min(980px, 88vw) !important;
  height: min(700px, 84vh) !important;
  min-height: 0 !important;

  padding: 22px 36px 20px 36px !important;

  background-color: #f5ead2 !important;
  color: #2b2118 !important;

  border: 4px solid #5c3b1e !important;
  border-radius: 22px !important;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;

  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  row-gap: 12px !important;

  align-items: stretch !important;

  overflow: hidden !important;

  opacity: 1 !important;
  transform: none !important;
}

/* 關閉 X 固定在右上，不被內容推走 */
.close-notebook-button {
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;

  width: 44px !important;
  height: 44px !important;

  border: none !important;
  border-radius: 50% !important;

  background-color: #5c3b1e !important;
  color: white !important;

  font-size: 30px !important;
  line-height: 1 !important;

  cursor: pointer !important;

  z-index: 20 !important;

  opacity: 1 !important;
}

/* 標題不要佔太多高度 */
.notebook-title {
  margin: 0 !important;

  font-size: clamp(28px, 4vw, 42px) !important;
  line-height: 1.15 !important;
  letter-spacing: 4px !important;

  text-align: center !important;

  opacity: 1 !important;
}

/* 頁籤固定在標題下方 */
.notebook-tabs {
  width: 100% !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 12px !important;
  margin: 0 !important;

  flex-wrap: wrap !important;
}

/* 每一頁固定在中間區域，不准撐爆 */
.clue-page {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;

  padding: 18px 28px !important;

  background-color: rgba(255, 255, 255, 0.55) !important;
  border: 2px solid rgba(92, 59, 30, 0.55) !important;
  border-radius: 16px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow: hidden !important;

  opacity: 1 !important;
}

/* 頁面上方小標與標題 */
.clue-header {
  flex: 0 0 auto !important;

  text-align: center !important;
  margin-bottom: 10px !important;
}

.clue-type-label {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #8a5a22 !important;
  margin-bottom: 6px !important;
  letter-spacing: 2px !important;
}

.clue-page-title {
  font-size: clamp(28px, 3.6vw, 42px) !important;
  line-height: 1.18 !important;
  letter-spacing: 3px !important;
}

/* 內容區固定高度，不讓圖片或文字把按鈕推出去 */
.clue-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 12px !important;

  overflow: hidden !important;
}

/* 圖片：強制縮在固定範圍 */
.clue-image {
  flex: 0 1 auto !important;

  width: auto !important;
  height: auto !important;

  max-width: min(320px, 48vw) !important;
  max-height: min(190px, 22vh) !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;

  border-radius: 12px !important;
  border: 2px solid rgba(92, 59, 30, 0.45) !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
}

/* 人物關係圖可以比一般證據大 */
.clue-page.relationship-page .clue-image {
  max-width: min(620px, 68vw) !important;
  max-height: min(330px, 38vh) !important;
}

/* 文字說明：限制高度，避免擠掉按鈕 */
.clue-description {
  flex: 0 1 auto !important;

  width: min(760px, 92%) !important;
  max-height: 120px !important;

  overflow: hidden !important;

  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.65 !important;
  text-align: center !important;

  margin: 0 auto !important;
}

/* 筆記頁通常沒有圖片，文字可放大一點 */
.clue-page.note-page .clue-content {
  justify-content: center !important;
}

.clue-page.note-page .clue-description {
  max-height: 100% !important;

  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.9 !important;
}

/* 底部翻頁按鈕：永遠固定看得到 */
.notebook-controls {
  flex: 0 0 auto !important;

  width: 100% !important;
  height: 54px !important;

  margin: 0 !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  opacity: 1 !important;
}

/* 上一頁 / 下一頁 */
.notebook-page-button {
  min-width: 130px !important;
  height: 46px !important;

  padding: 8px 18px !important;

  background-color: #5c3b1e !important;
  color: white !important;

  border: none !important;
  border-radius: 10px !important;

  font-size: 18px !important;
  font-weight: bold !important;

  cursor: pointer !important;
}

.notebook-page-button:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.clue-page-counter {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #5c3b1e !important;
}

/* 封面動畫不要擋操作 */
.notebook-cover {
  pointer-events: none !important;
}

/* ================================================= */
/* 調查筆記本：防重疊最終修正版 */
/* 貼在 style.css 最下面 */
/* ================================================= */

/* 筆記本主體：用 grid 明確分成 4 層：
   1 標題
   2 頁籤
   3 內容頁
   4 翻頁按鈕
*/
.notebook-panel {
  width: min(980px, 88vw) !important;
  height: min(660px, 80vh) !important;
  min-height: 0 !important;

  padding: 22px 38px 24px 38px !important;

  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) 58px !important;
  row-gap: 14px !important;

  align-items: stretch !important;
  overflow: hidden !important;

  position: relative !important;
}

/* 標題固定第一列 */
.notebook-title {
  grid-row: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.15 !important;
  text-align: center !important;

  opacity: 1 !important;
  transform: none !important;
}

/* 頁籤固定第二列，不要壓到內容頁 */
.notebook-tabs {
  grid-row: 2 !important;

  width: 100% !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;

  gap: 12px !important;

  margin: 0 0 6px 0 !important;
  padding: 0 !important;

  position: relative !important;
  z-index: 5 !important;

  transform: none !important;
}

/* 頁籤本身不要往下浮 */
.notebook-tab {
  position: relative !important;
  transform: none !important;
  margin: 0 !important;
}

/* 內容頁固定第三列，不准往上撞頁籤 */
.clue-page {
  grid-row: 3 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 18px 28px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow: hidden !important;

  position: relative !important;
  z-index: 1 !important;
}

/* 頁面標題區不要太高 */
.clue-header {
  flex: 0 0 auto !important;

  margin: 0 0 10px 0 !important;
  padding: 0 !important;

  text-align: center !important;
}

.clue-type-label {
  margin: 0 0 6px 0 !important;

  font-size: 18px !important;
  line-height: 1.2 !important;
}

.clue-page-title {
  margin: 0 !important;

  font-size: clamp(30px, 4vw, 46px) !important;
  line-height: 1.18 !important;
}

/* 內容區：圖片和文字都只能在這個區域內 */
.clue-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 12px !important;

  overflow: hidden !important;
}

/* 圖片統一縮小，不撐爆頁面 */
.clue-image {
  width: auto !important;
  height: auto !important;

  max-width: min(300px, 46vw) !important;
  max-height: min(170px, 20vh) !important;

  object-fit: contain !important;

  margin: 0 auto !important;
}

/* 沒有圖片時，強制不要顯示破圖小圖示 */
#clueImage[src=""],
#clueImage:not([src]) {
  display: none !important;
}

/* 筆記頁不顯示圖片 */
.clue-page.note-page #clueImage {
  display: none !important;
}

/* 人物關係圖可以大一點 */
.clue-page.relationship-page .clue-image {
  max-width: min(620px, 68vw) !important;
  max-height: min(300px, 36vh) !important;
}

/* 說明文字限制在頁面內 */
.clue-description {
  width: min(760px, 92%) !important;
  max-height: 120px !important;

  overflow: hidden !important;

  margin: 0 auto !important;

  font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.65 !important;
  text-align: center !important;
}

/* 筆記頁文字可以比較大，但不能超出去 */
.clue-page.note-page .clue-description {
  max-height: 100% !important;

  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.9 !important;
}

/* 翻頁按鈕固定第四列 */
.notebook-controls {
  grid-row: 4 !important;

  width: 100% !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  position: relative !important;
  z-index: 10 !important;

  opacity: 1 !important;
  transform: none !important;
}

/* 上一頁 / 下一頁按鈕 */
.notebook-page-button {
  min-width: 130px !important;
  height: 46px !important;

  padding: 8px 18px !important;

  font-size: 18px !important;
  line-height: 1.2 !important;
}

/* 頁碼固定中間 */
.clue-page-counter {
  min-width: 100px !important;

  text-align: center !important;
  font-size: 18px !important;
}

/* 關閉 X 永遠在最上層 */
.close-notebook-button {
  position: absolute !important;
  top: 18px !important;
  right: 22px !important;

  z-index: 30 !important;

  opacity: 1 !important;
  transform: none !important;
}

/* 封面動畫不要擋住內容 */
.notebook-cover {
  pointer-events: none !important;
}

/* ================================================= */
/* 調查筆記本：最終版 V2 */
/* 小標題、左圖右文、隱藏分類行、避免重疊 */
/* ================================================= */

/* 筆記本主體 */
.notebook-panel {
  width: min(980px, 88vw) !important;
  height: min(660px, 82vh) !important;
  min-height: 0 !important;

  padding: 20px 38px 24px 38px !important;

  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) 58px !important;
  row-gap: 12px !important;

  overflow: hidden !important;
  position: relative !important;
}

/* 調查筆記本標題：縮小 */
.notebook-title {
  grid-row: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: clamp(30px, 3.4vw, 42px) !important;
  line-height: 1.1 !important;
  letter-spacing: 4px !important;

  text-align: center !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 頁籤 */
.notebook-tabs {
  grid-row: 2 !important;

  width: 100% !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;

  gap: 12px !important;

  margin: 0 !important;
  padding: 0 !important;

  position: relative !important;
  z-index: 5 !important;
}

.notebook-tab {
  margin: 0 !important;
  transform: none !important;

  font-size: 17px !important;
  padding: 9px 22px !important;
}

/* 內容頁 */
.clue-page {
  grid-row: 3 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 20px 32px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow: hidden !important;

  position: relative !important;
  z-index: 1 !important;
}

/* 不再顯示「關鍵證據-1 / 次要證據-4 / 筆記」那一行 */
.clue-type-label {
  display: none !important;
}

/* 標題區 */
.clue-header {
  flex: 0 0 auto !important;

  margin: 0 0 14px 0 !important;
  padding: 0 !important;

  text-align: center !important;
}

/* 頁面標題：比之前小 */
.clue-page-title {
  margin: 0 !important;

  font-size: clamp(28px, 3.3vw, 40px) !important;
  line-height: 1.2 !important;
  letter-spacing: 3px !important;
}

/* 內容區共用 */
.clue-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  width: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
}

/* ========================= */
/* 證據頁：左圖右文 */
/* ========================= */

.clue-page.evidence-page .clue-content {
  flex-direction: row !important;
  gap: 34px !important;
}

/* 證據圖片固定在左側 */
.clue-page.evidence-page .clue-image {
  flex: 0 0 260px !important;

  width: 260px !important;
  height: 190px !important;

  max-width: 260px !important;
  max-height: 190px !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 !important;

  border-radius: 12px !important;
  border: 2px solid rgba(92, 59, 30, 0.45) !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
}

/* 證據說明固定在右側 */
.clue-page.evidence-page .clue-description {
  flex: 1 1 auto !important;

  width: auto !important;
  max-width: 520px !important;
  max-height: 210px !important;

  margin: 0 !important;

  overflow: hidden !important;

  font-size: clamp(18px, 1.7vw, 22px) !important;
  line-height: 1.75 !important;
  text-align: left !important;
}

/* ========================= */
/* 筆記頁：只有文字，置中但縮小 */
/* ========================= */

.clue-page.note-page .clue-content {
  flex-direction: column !important;
  justify-content: center !important;
}

.clue-page.note-page .clue-image {
  display: none !important;
}

.clue-page.note-page .clue-description {
  width: min(820px, 92%) !important;
  max-width: 820px !important;
  max-height: 100% !important;

  margin: 0 auto !important;

  overflow: hidden !important;

  font-size: clamp(20px, 2vw, 26px) !important;
  line-height: 1.9 !important;
  text-align: center !important;
}

/* ========================= */
/* 人物關係圖頁 */
/* ========================= */

.clue-page.relationship-page .clue-content {
  flex-direction: column !important;
  justify-content: center !important;
}

.clue-page.relationship-page .clue-image {
  width: auto !important;
  height: auto !important;

  max-width: min(680px, 70vw) !important;
  max-height: min(330px, 38vh) !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

.clue-page.relationship-page .clue-description {
  display: none !important;
}

/* ========================= */
/* 未解鎖頁：不顯示破圖 */
/* ========================= */

#clueImage[src=""],
#clueImage:not([src]) {
  display: none !important;
}

/* 如果 JS 有把圖片 display:block，未解鎖頁也強制隱藏 */
.clue-page:not(.evidence-page):not(.relationship-page) #clueImage {
  display: none !important;
}

/* ========================= */
/* 底部按鈕固定 */
/* ========================= */

.notebook-controls {
  grid-row: 4 !important;

  width: 100% !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  position: relative !important;
  z-index: 10 !important;

  opacity: 1 !important;
  transform: none !important;
}

.notebook-page-button {
  min-width: 130px !important;
  height: 46px !important;

  padding: 8px 18px !important;

  font-size: 18px !important;
  line-height: 1.2 !important;
}

.clue-page-counter {
  min-width: 100px !important;

  text-align: center !important;
  font-size: 18px !important;
}

/* 關閉 X */
.close-notebook-button {
  position: absolute !important;
  top: 18px !important;
  right: 22px !important;

  z-index: 30 !important;

  opacity: 1 !important;
  transform: none !important;
}

/* ================================================= */
/* 調查筆記本：內頁標題縮小 */
/* ================================================= */

.clue-page-title {
  font-size: clamp(24px, 2.6vw, 34px) !important;
  line-height: 1.25 !important;
  letter-spacing: 2px !important;

  margin: 0 !important;
}

/* 如果標題很長，避免撐太大或擠到內容 */
.clue-header {
  margin-bottom: 12px !important;
}

/* 筆記頁的標題也一起縮小 */
.clue-page.note-page .clue-page-title {
  font-size: clamp(24px, 2.6vw, 34px) !important;
}

/* 證據頁的標題也一起縮小 */
.clue-page.evidence-page .clue-page-title {
  font-size: clamp(24px, 2.6vw, 34px) !important;
}

/* ================================================= */
/* 證據彈窗：統一所有物件圖片大小 */
/* ================================================= */

/* 展開後：左圖右文版面固定 */
.evidence-card.detail-open .evidence-content {
  display: grid !important;
  grid-template-columns: 360px minmax(0, 1fr) !important;
  column-gap: 42px !important;
  align-items: center !important;
}

/* 左側圖片區固定大小 */
.evidence-card.detail-open .evidence-image-area {
  width: 360px !important;
  height: 360px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 所有證據圖片都放進固定框內 */
.evidence-card.detail-open #evidenceImage {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

/* 右側說明文字區固定，不被圖片影響 */
.evidence-card.detail-open .evidence-reading-panel {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  padding: 24px 30px !important;
}

/* ====================================== */
/* 證據彈窗：整體卡片 */
/* ====================================== */
.evidence-card {
  width: min(1280px, 92vw);
  max-height: 88vh;
  overflow-y: auto;

  background: #efe4cf;
  border-radius: 34px;
  padding: 28px 38px 34px;
  box-sizing: border-box;
}

/* 上方類型 / 標題 */
.evidence-header {
  text-align: center;
  margin-bottom: 26px;
}

.evidence-type {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  background: #7b4b1f;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 18px;
}

.evidence-title {
  margin: 0;
  font-size: 56px;
  font-weight: 800;
  color: #2f2218;
  line-height: 1.2;
}

.evidence-hint {
  margin-top: 12px;
  font-size: 22px;
  color: #9b6a34;
}

/* ====================================== */
/* 中間主內容：左圖右文 */
/* ====================================== */
.evidence-content {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
}

/* 左邊圖片區 */
.evidence-image-area {
  width: 300px;
  height: 420px;

  display: flex;
  justify-content: center;
  align-items: center;

  align-self: center;
}

/* 統一圖片顯示方式 */
.evidence-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 右欄：文字 + 關閉按鈕 */
.evidence-right-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  min-width: 0;
}

/* 右側文字框 */
.evidence-reading-panel {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 28px;
  padding: 28px 34px;
  box-sizing: border-box;
  min-height: 250px;
}

/* 說明文字 */
.evidence-description {
  margin: 0;
  font-size: 26px;
  line-height: 1.9;
  color: #4a3727;
}

/* 日記 / 書信區塊 */
.evidence-diary-block {
  margin-top: 24px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 24px;
  padding: 22px 26px;
  border-left: 8px solid #b2772d;
  box-sizing: border-box;
}

.evidence-diary-block h4 {
  margin: 0 0 16px 0;
  font-size: 28px;
  color: #8a5a24;
}

#evidenceDiaryText {
  margin: 0;
  font-size: 24px;
  line-height: 1.8;
  color: #4a3727;
}

/* 上一頁 / 下一頁 */
.evidence-diary-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  gap: 18px;
}

.evidence-diary-page-button {
  min-width: 126px;
  height: 58px;
  border: none;
  border-radius: 16px;
  background: #7b4b1f;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.evidence-diary-page-button:disabled {
  background: #cbb9a4;
  cursor: default;
}

.evidence-diary-counter {
  font-size: 22px;
  font-weight: 700;
  color: #7b4b1f;
}

/* 關閉提示 */
.evidence-close-hint {
  margin-top: 14px;
  font-size: 18px;
  color: #9b6a34;
  display: none;
}

/* ====================================== */
/* 關閉按鈕：固定在右欄下方 */
/* ====================================== */
.evidence-action-row {
  display: flex;
  justify-content: flex-start;
}

.close-evidence-button {
  min-width: 168px;
  height: 74px;
  border: none;
  border-radius: 22px;
  background: #7b4b1f;
  color: #ffffff;
  font-size: 26px;
  font-weight: 800;
  cursor: pointer;
}

/* ====================================== */
/* 單張圖物件 / 展開後共用 */
/* ====================================== */
.evidence-card.detail-open .evidence-content {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
}

/* 書信可稍微加寬右欄 */
.evidence-card.letter-evidence .evidence-content {
  grid-template-columns: 320px minmax(0, 1fr);
}

/* ================================================= */
/* 證據彈窗：最終穩定版 */
/* 左圖右文，關閉按鈕固定在右欄下方 */
/* ================================================= */

.evidence-card {
  width: min(1080px, 92vw) !important;
  height: min(660px, 86vh) !important;
  max-height: none !important;

  padding: 24px 42px 28px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

.evidence-header {
  flex: 0 0 auto !important;

  margin-bottom: 18px !important;

  text-align: center !important;
}

.evidence-type {
  padding: 8px 24px !important;
  margin-bottom: 12px !important;

  font-size: 18px !important;
}

.evidence-title {
  margin: 0 !important;

  font-size: clamp(30px, 3.4vw, 44px) !important;
  line-height: 1.15 !important;
}

.evidence-hint {
  margin-top: 8px !important;

  font-size: 17px !important;
}

/* 主內容：固定左圖右文 */
.evidence-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  width: 100% !important;

  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  column-gap: 56px !important;

  align-items: center !important;

  overflow: hidden !important;
}

/* 左側圖片區固定 */
.evidence-image-area {
  width: 300px !important;
  height: 350px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 圖片統一放進左側框內 */
.evidence-image,
#evidenceImage {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

/* 右欄：上面文字，下面關閉 */
.evidence-right-column {
  min-width: 0 !important;
  height: 100% !important;

  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  row-gap: 18px !important;

  align-items: stretch !important;
}

/* 右側閱讀框 */
.evidence-reading-panel {
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;

  padding: 24px 30px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 說明文字 */
.evidence-description {
  margin: 0 0 16px 0 !important;

  font-size: clamp(18px, 1.7vw, 23px) !important;
  line-height: 1.85 !important;

  text-align: left !important;
}

/* 書信 / 日記內容區 */
.evidence-diary-block {
  margin-top: 18px !important;
  padding: 18px 22px !important;

  max-height: 260px !important;
  overflow: hidden !important;

  box-sizing: border-box !important;
}

.evidence-diary-block h4 {
  margin: 0 0 12px 0 !important;

  font-size: 24px !important;
}

#evidenceDiaryText {
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.75 !important;
}

/* 書信上一頁 / 下一頁 */
.evidence-diary-controls {
  margin-top: 16px !important;

  display: flex;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}

.evidence-diary-page-button {
  min-width: 116px !important;
  height: 50px !important;

  font-size: 18px !important;
}

/* 關閉按鈕列 */
.evidence-action-row {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

/* 關閉按鈕不要再亂飛 */
.close-evidence-button {
  position: static !important;
  transform: none !important;

  min-width: 150px !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 30px !important;

  border: none !important;
  border-radius: 18px !important;

  background-color: #7b4b1f !important;
  color: #ffffff !important;

  font-size: 24px !important;
  font-weight: 800 !important;

  cursor: pointer !important;
}

/* 書信頁不要另外用舊比例覆蓋 */
.evidence-card.letter-evidence .evidence-content,
.evidence-card.detail-open.letter-evidence .evidence-content {
  grid-template-columns: 300px minmax(0, 1fr) !important;
  column-gap: 56px !important;
}

/* 未展開封面也不要撐爆 */
.evidence-card:not(.detail-open) .evidence-content {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.evidence-card:not(.detail-open) .evidence-image-area {
  width: 260px !important;
  height: 330px !important;
}

.evidence-card:not(.detail-open) #evidenceImage {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ========================= */
/* 調查筆記按鈕：房間內常駐 */
/* ========================= */

.search-screen.active .notebook-button {
  display: flex !important;
}

.notebook-button {
  position: absolute !important;
  top: 24px !important;
  right: 70px !important;

  width: 86px !important;
  height: 96px !important;

  z-index: 70 !important;

  display: none;

  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
}

/* 證據彈窗打開時，不要把調查筆記按鈕變成彈窗內元素 */
.evidence-panel .notebook-button {
  display: none !important;
}

/* ================================================= */
/* 證據彈窗：參考圖排版版 */
/* 上方標籤＋標題／左圖右文／關閉在右側文字下方 */
/* ================================================= */

.evidence-panel {
  z-index: 9000 !important;
}

/* 整張證據卡片 */
.evidence-card {
  width: min(1120px, 92vw) !important;
  height: min(640px, 84vh) !important;

  padding: 28px 52px 34px !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  row-gap: 30px !important;

  overflow: hidden !important;

  background: #f3ead7 !important;
  border-radius: 34px !important;
}

/* 上方：類型＋名稱 */
.evidence-header {
  grid-row: 1 !important;

  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.evidence-type {
  display: inline-block !important;

  padding: 9px 28px !important;
  margin-bottom: 14px !important;

  background-color: #7a461d !important;
  color: #ffffff !important;

  border-radius: 999px !important;

  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
}

.evidence-title {
  margin: 0 !important;

  font-size: clamp(34px, 4vw, 50px) !important;
  line-height: 1.15 !important;
  letter-spacing: 5px !important;

  color: #2f241d !important;
}

.evidence-hint {
  margin-top: 10px !important;
  font-size: 18px !important;
  color: #9b6a34 !important;
}

/* 中間：左圖片、右文字 */
.evidence-content {
  grid-row: 2 !important;

  width: 100% !important;
  min-height: 0 !important;

  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  column-gap: 64px !important;

  align-items: start !important;

  padding: 0 54px !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
}

/* 左側圖片區：固定大小 */
.evidence-image-area {
  width: 280px !important;
  height: 310px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  align-self: center !important;

  overflow: hidden !important;
}

/* 圖片統一放入固定框 */
.evidence-image,
#evidenceImage {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

/* 右側欄：文字框＋關閉按鈕 */
.evidence-right-column {
  width: 100% !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-rows: 260px 64px !important;
  row-gap: 18px !important;

  align-self: center !important;

  overflow: visible !important;
}

/* 右側說明框 */
.evidence-reading-panel {
  width: 100% !important;
  height: 260px !important;
  min-height: 0 !important;
  max-height: 260px !important;

  padding: 30px 38px !important;
  box-sizing: border-box !important;

  background: rgba(255, 255, 255, 0.34) !important;
  border-radius: 28px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  overflow: hidden !important;
}

/* 一般說明文字 */
.evidence-description {
  margin: 0 !important;

  font-size: clamp(20px, 1.8vw, 25px) !important;
  line-height: 1.9 !important;

  color: #4a3727 !important;
  text-align: left !important;
}

/* 書信 / 日記內容區：留在右側說明框內 */
.evidence-diary-block {
  margin-top: 16px !important;
  padding: 16px 22px !important;

  max-height: 172px !important;
  overflow: hidden !important;

  background: rgba(255, 255, 255, 0.62) !important;
  border-left: 8px solid #b2772d !important;
  border-radius: 22px !important;

  box-sizing: border-box !important;
}

.evidence-diary-block h4 {
  margin: 0 0 10px 0 !important;

  font-size: 22px !important;
  color: #8a5a24 !important;
}

#evidenceDiaryText {
  margin: 0 !important;

  font-size: clamp(15px, 1.22vw, 18px) !important;
  line-height: 1.65 !important;

  color: #4a3727 !important;
}

/* 書信 / 日記的上一頁下一頁：只在右側框內 */
.evidence-diary-controls {
  margin-top: 12px !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
}

.evidence-diary-page-button {
  min-width: 104px !important;
  height: 44px !important;

  border: none !important;
  border-radius: 14px !important;

  background: #7a461d !important;
  color: #ffffff !important;

  font-size: 17px !important;
  font-weight: 800 !important;

  cursor: pointer !important;
}

.evidence-diary-page-button:disabled {
  background: #d4c6b7 !important;
  color: #f7f2ea !important;
  cursor: default !important;
}

.evidence-diary-counter {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #7a461d !important;
}

/* 關閉按鈕列：在右側文字下方 */
.evidence-action-row {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;

  height: 64px !important;
}

/* 關閉按鈕不要再被 absolute 影響 */
.close-evidence-button {
  position: static !important;
  transform: none !important;

  min-width: 150px !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 32px !important;

  border: none !important;
  border-radius: 18px !important;

  background-color: #7a461d !important;
  color: #ffffff !important;

  font-size: 24px !important;
  font-weight: 900 !important;

  cursor: pointer !important;
}

/* 書信頁、大哥日記頁也維持同一套外部排版 */
.evidence-card.letter-evidence .evidence-content,
.evidence-card.detail-open.letter-evidence .evidence-content,
.evidence-card.detail-open .evidence-content {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  column-gap: 64px !important;
  align-items: start !important;
}

/* 未展開封面：維持置中，不套右欄排版 */
.evidence-card:not(.detail-open) .evidence-content {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 0 !important;
}

.evidence-card:not(.detail-open) .evidence-image-area {
  width: 270px !important;
  height: 340px !important;
}

.evidence-card:not(.detail-open) .evidence-right-column {
  display: none !important;
}

/* ================================================= */
/* 證據彈窗：參考圖排版修正版 V3 */
/* 修正：關閉按鈕被裁掉、書信下一頁按鈕不見 */
/* ================================================= */

.evidence-card {
  width: min(1120px, 92vw) !important;
  height: min(700px, 92vh) !important;

  padding: 22px 52px 28px !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  row-gap: 14px !important;

  overflow: hidden !important;

  background: #f3ead7 !important;
  border-radius: 34px !important;
}

/* 上方標籤與標題稍微壓低高度 */
.evidence-header {
  grid-row: 1 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.evidence-type {
  display: inline-block !important;

  padding: 8px 26px !important;
  margin-bottom: 10px !important;

  background-color: #7a461d !important;
  color: #ffffff !important;

  border-radius: 999px !important;

  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
}

.evidence-title {
  margin: 0 !important;

  font-size: clamp(32px, 3.6vw, 46px) !important;
  line-height: 1.12 !important;
  letter-spacing: 5px !important;

  color: #2f241d !important;
}

.evidence-hint {
  margin-top: 8px !important;
  font-size: 17px !important;
  color: #9b6a34 !important;
}

/* 中間：左圖右文 */
.evidence-content,
.evidence-card.detail-open .evidence-content,
.evidence-card.letter-evidence .evidence-content,
.evidence-card.detail-open.letter-evidence .evidence-content {
  grid-row: 2 !important;

  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;

  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  column-gap: 64px !important;

  align-items: center !important;

  padding: 0 54px !important;
  box-sizing: border-box !important;

  overflow: visible !important;
}

/* 左側圖片區 */
.evidence-image-area {
  width: 280px !important;
  height: 330px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  align-self: center !important;

  overflow: hidden !important;
}

.evidence-image,
#evidenceImage {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

/* 右側欄：說明框 + 關閉按鈕 */
.evidence-right-column {
  width: 100% !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-rows: minmax(0, auto) auto !important;
  row-gap: 14px !important;

  align-self: center !important;

  overflow: visible !important;
}

/* 右側說明框 */
.evidence-reading-panel {
  width: 100% !important;

  min-height: 230px !important;
  max-height: 365px !important;

  padding: 26px 34px !important;
  box-sizing: border-box !important;

  background: rgba(255, 255, 255, 0.34) !important;
  border-radius: 28px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  overflow: hidden !important;
}

.evidence-description {
  margin: 0 !important;

  font-size: clamp(19px, 1.7vw, 24px) !important;
  line-height: 1.8 !important;

  color: #4a3727 !important;
  text-align: left !important;
}

/* 書信 / 日記內容區：翻頁按鈕保留在框內 */
.evidence-diary-block {
  margin-top: 14px !important;
  padding: 16px 22px !important;

  height: 230px !important;
  max-height: 230px !important;

  background: rgba(255, 255, 255, 0.62) !important;
  border-left: 8px solid #b2772d !important;
  border-radius: 22px !important;

  box-sizing: border-box !important;

  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;

  overflow: hidden !important;
}

.evidence-diary-block h4 {
  margin: 0 0 8px 0 !important;

  font-size: 22px !important;
  color: #8a5a24 !important;
}

#evidenceDiaryText {
  margin: 0 !important;

  font-size: clamp(15px, 1.2vw, 18px) !important;
  line-height: 1.6 !important;

  color: #4a3727 !important;

  overflow: hidden !important;
}

/* 上一頁 / 下一頁：不要再被裁掉 */
.evidence-diary-controls {
  margin-top: 10px !important;

  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;

  flex-shrink: 0 !important;
}

.evidence-diary-page-button {
  min-width: 104px !important;
  height: 42px !important;

  border: none !important;
  border-radius: 14px !important;

  background: #7a461d !important;
  color: #ffffff !important;

  font-size: 17px !important;
  font-weight: 800 !important;

  cursor: pointer !important;
}

.evidence-diary-page-button:disabled {
  background: #d4c6b7 !important;
  color: #f7f2ea !important;
  cursor: default !important;
}

.evidence-diary-counter {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #7a461d !important;
}

/* 關閉按鈕：固定在右側說明框下方 */
.evidence-action-row {
  height: 58px !important;

  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;

  overflow: visible !important;
}

.close-evidence-button {
  position: static !important;
  transform: none !important;

  min-width: 150px !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 32px !important;

  border: none !important;
  border-radius: 18px !important;

  background-color: #7a461d !important;
  color: #ffffff !important;

  font-size: 24px !important;
  font-weight: 900 !important;

  cursor: pointer !important;
}

/* 未展開封面：維持置中 */
.evidence-card:not(.detail-open) .evidence-content {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 0 !important;
}

.evidence-card:not(.detail-open) .evidence-image-area {
  width: 270px !important;
  height: 340px !important;
}

.evidence-card:not(.detail-open) .evidence-right-column {
  display: none !important;
}

/* ================================================= */
/* 證據彈窗：真正固定版 V4 */
/* 圖片只佔說明框高度，不進入關閉按鈕列 */
/* 書信/日記翻頁按鈕固定在右側框內 */
/* ================================================= */

.evidence-card {
  width: min(1120px, 92vw) !important;
  height: min(660px, 88vh) !important;
  padding: 24px 54px 30px !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  row-gap: 26px !important;

  overflow: hidden !important;
  background: #f3ead7 !important;
  border-radius: 34px !important;
}

/* 上方標籤與標題 */
.evidence-header {
  grid-row: 1 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.evidence-type {
  display: inline-block !important;
  padding: 8px 28px !important;
  margin-bottom: 12px !important;

  background: #7a461d !important;
  color: #fff !important;
  border-radius: 999px !important;

  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
}

.evidence-title {
  margin: 0 !important;
  font-size: clamp(34px, 3.8vw, 50px) !important;
  line-height: 1.15 !important;
  letter-spacing: 5px !important;
  color: #2f241d !important;
}

.evidence-hint {
  margin-top: 8px !important;
  font-size: 17px !important;
}

/* 外層內容：兩欄 */
.evidence-content,
.evidence-card.detail-open .evidence-content,
.evidence-card.letter-evidence .evidence-content,
.evidence-card.detail-open.letter-evidence .evidence-content {
  grid-row: 2 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  column-gap: 64px !important;

  align-items: start !important;

  padding: 0 72px !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
}

/* 左邊圖片：只跟右邊說明框同高，不包含關閉按鈕 */
.evidence-image-area {
  width: 280px !important;
  height: 270px !important;

  align-self: start !important;
  margin-top: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

.evidence-image,
#evidenceImage {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 右欄：第一列說明框，第二列關閉按鈕 */
.evidence-right-column {
  width: 100% !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-rows: 270px 64px !important;
  row-gap: 18px !important;

  align-self: start !important;

  overflow: visible !important;
}

/* 右側說明框 */
.evidence-reading-panel {
  width: 100% !important;
  height: 270px !important;
  min-height: 270px !important;
  max-height: 270px !important;

  padding: 26px 34px !important;
  box-sizing: border-box !important;

  background: rgba(255, 255, 255, 0.34) !important;
  border-radius: 28px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  overflow: hidden !important;
}

/* 一般說明文字 */
.evidence-description {
  margin: 0 !important;

  font-size: clamp(19px, 1.7vw, 24px) !important;
  line-height: 1.85 !important;

  color: #4a3727 !important;
  text-align: left !important;
}

/* 有書信/日記時，說明框不要置中，讓內容從上往下排 */
.evidence-reading-panel:has(.evidence-diary-block[style*="block"]) {
  justify-content: flex-start !important;
}

/* 書信/日記區塊：固定三列，翻頁按鈕永遠露出 */
.evidence-diary-block {
  margin-top: 14px !important;
  padding: 16px 22px !important;

  height: 178px !important;
  max-height: 178px !important;

  background: rgba(255, 255, 255, 0.62) !important;
  border-left: 8px solid #b2772d !important;
  border-radius: 22px !important;

  box-sizing: border-box !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;

  overflow: hidden !important;
}

/* 書信標題 */
.evidence-diary-block h4 {
  margin: 0 0 8px 0 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  color: #8a5a24 !important;
}

/* 書信文字：只佔中間區，不吃掉翻頁按鈕 */
#evidenceDiaryText {
  margin: 0 !important;

  font-size: clamp(14px, 1.12vw, 17px) !important;
  line-height: 1.55 !important;

  color: #4a3727 !important;

  overflow: hidden !important;
}

/* 翻頁按鈕：固定在書信框底部 */
.evidence-diary-controls {
  margin-top: 8px !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;

  min-height: 38px !important;
  flex-shrink: 0 !important;
}

.evidence-diary-page-button {
  min-width: 96px !important;
  height: 38px !important;

  border: none !important;
  border-radius: 12px !important;

  background: #7a461d !important;
  color: #fff !important;

  font-size: 16px !important;
  font-weight: 800 !important;

  cursor: pointer !important;
}

.evidence-diary-page-button:disabled {
  background: #d4c6b7 !important;
  color: #f7f2ea !important;
  cursor: default !important;
}

.evidence-diary-counter {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #7a461d !important;
}

/* 關閉按鈕列：只在右欄第二列 */
.evidence-action-row {
  height: 64px !important;

  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;

  overflow: visible !important;
}

/* 關閉按鈕不要 absolute，不准亂跑 */
.close-evidence-button {
  position: static !important;
  transform: none !important;

  min-width: 150px !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 32px !important;

  border: none !important;
  border-radius: 18px !important;

  background: #7a461d !important;
  color: #fff !important;

  font-size: 24px !important;
  font-weight: 900 !important;

  cursor: pointer !important;
}

/* 未展開封面狀態：只顯示封面圖片，不顯示右欄 */
.evidence-card:not(.detail-open) .evidence-content {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 0 !important;
}

.evidence-card:not(.detail-open) .evidence-image-area {
  width: 260px !important;
  height: 330px !important;
}

.evidence-card:not(.detail-open) .evidence-right-column {
  display: none !important;
}

/* ================================================= */
/* 證據彈窗：交作業穩定版 */
/* 圖片不進入關閉按鈕列；只有有 diaryPages / diaryContent 才顯示日記框 */
/* ================================================= */

#evidenceCard.evidence-card {
  width: min(1120px, 92vw) !important;
  height: min(660px, 88vh) !important;

  padding: 24px 54px 30px !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  row-gap: 24px !important;

  overflow: hidden !important;
  background: #f3ead7 !important;
  border-radius: 34px !important;
}

/* 上方標籤與標題 */
#evidenceCard .evidence-header {
  grid-row: 1 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#evidenceCard .evidence-type {
  display: inline-block !important;
  padding: 8px 28px !important;
  margin-bottom: 12px !important;

  background: #7a461d !important;
  color: #fff !important;
  border-radius: 999px !important;

  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
}

#evidenceCard .evidence-title {
  margin: 0 !important;

  font-size: clamp(34px, 3.8vw, 50px) !important;
  line-height: 1.15 !important;
  letter-spacing: 5px !important;

  color: #2f241d !important;
}

#evidenceCard .evidence-hint {
  margin-top: 8px !important;
  font-size: 17px !important;
}

/* ================================================= */
/* 展開後：真正固定成四格 */
/* 第 1 列：圖片 + 說明框 */
/* 第 2 列：空白 + 關閉按鈕 */
/* ================================================= */

#evidenceCard.detail-open .evidence-content,
#evidenceCard.detail-open.letter-evidence .evidence-content {
  grid-row: 2 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  grid-template-rows: 270px 64px !important;
  grid-template-areas:
    "image reading"
    ". action" !important;

  column-gap: 64px !important;
  row-gap: 18px !important;

  align-items: start !important;

  padding: 0 72px !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
}

/* 左圖：只在第一列，不會進入關閉按鈕那一列 */
#evidenceCard.detail-open .evidence-image-area {
  grid-area: image !important;

  width: 280px !important;
  height: 270px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

#evidenceCard.detail-open .evidence-image,
#evidenceCard.detail-open #evidenceImage {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

/* 讓右欄容器不要自己佔格子，讓裡面的閱讀框和按鈕進入主 grid */
#evidenceCard.detail-open .evidence-right-column {
  display: contents !important;
}

/* 右側說明框：固定在第一列 */
#evidenceCard.detail-open .evidence-reading-panel {
  grid-area: reading !important;

  width: 100% !important;
  height: 270px !important;
  min-height: 270px !important;
  max-height: 270px !important;

  padding: 26px 34px !important;
  box-sizing: border-box !important;

  background: rgba(255, 255, 255, 0.34) !important;
  border-radius: 28px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  overflow: hidden !important;
}

#evidenceCard.detail-open .evidence-description {
  margin: 0 !important;

  font-size: clamp(18px, 1.65vw, 23px) !important;
  line-height: 1.8 !important;

  color: #4a3727 !important;
  text-align: left !important;
}

/* ================================================= */
/* 日記 / 書信：預設完全隱藏 */
/* 沒有 diaryPages / diaryContent 的物件不准出現 */
/* ================================================= */

#evidenceCard .evidence-diary-block,
#evidenceCard .evidence-diary-controls {
  display: none !important;
}

/* 有內容時才顯示日記框 */
#evidenceCard.has-evidence-pages .evidence-reading-panel {
  justify-content: flex-start !important;
}

#evidenceCard.has-evidence-pages .evidence-description {
  font-size: clamp(16px, 1.25vw, 19px) !important;
  line-height: 1.6 !important;
  margin-bottom: 10px !important;
}

#evidenceCard.has-evidence-pages .evidence-diary-block {
  display: grid !important;

  grid-template-rows: auto minmax(0, 1fr) auto !important;

  height: 168px !important;
  max-height: 168px !important;

  margin-top: 8px !important;
  padding: 14px 20px !important;

  background: rgba(255, 255, 255, 0.62) !important;
  border-left: 8px solid #b2772d !important;
  border-radius: 20px !important;

  box-sizing: border-box !important;

  overflow: hidden !important;
}

#evidenceCard.has-evidence-pages .evidence-diary-block h4 {
  margin: 0 0 6px 0 !important;

  font-size: 21px !important;
  line-height: 1.2 !important;

  color: #8a5a24 !important;
}

#evidenceCard.has-evidence-pages #evidenceDiaryText {
  margin: 0 !important;

  font-size: clamp(13px, 1.05vw, 16px) !important;
  line-height: 1.5 !important;

  color: #4a3727 !important;

  overflow: hidden !important;
}

/* 只有兩頁以上才顯示上一頁 / 下一頁 */
#evidenceCard.has-multiple-pages .evidence-diary-controls {
  display: flex !important;

  margin-top: 8px !important;

  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;

  min-height: 36px !important;
}

#evidenceCard.has-multiple-pages .evidence-diary-page-button {
  min-width: 94px !important;
  height: 36px !important;

  border: none !important;
  border-radius: 12px !important;

  background: #7a461d !important;
  color: #fff !important;

  font-size: 15px !important;
  font-weight: 800 !important;

  cursor: pointer !important;
}

#evidenceCard.has-multiple-pages .evidence-diary-page-button:disabled {
  background: #d4c6b7 !important;
  color: #f7f2ea !important;
  cursor: default !important;
}

#evidenceCard.has-multiple-pages .evidence-diary-counter {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #7a461d !important;
}

/* ================================================= */
/* 關閉按鈕：固定在右欄第二列 */
/* ================================================= */

#evidenceCard.detail-open .evidence-action-row {
  grid-area: action !important;

  height: 64px !important;

  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;

  overflow: visible !important;
}

#evidenceCard.detail-open .close-evidence-button {
  position: static !important;
  transform: none !important;

  min-width: 150px !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 32px !important;

  border: none !important;
  border-radius: 18px !important;

  background: #7a461d !important;
  color: #fff !important;

  font-size: 24px !important;
  font-weight: 900 !important;

  cursor: pointer !important;
}

/* ================================================= */
/* 未展開封面狀態：只顯示圖片，不顯示右欄 */
/* ================================================= */

#evidenceCard:not(.detail-open) .evidence-content {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 0 !important;
}

#evidenceCard:not(.detail-open) .evidence-image-area {
  width: 260px !important;
  height: 330px !important;
}

#evidenceCard:not(.detail-open) .evidence-right-column {
  display: none !important;
}

/* ================================================= */
/* 證據彈窗：關閉按鈕微縮，避免被切到 */
/* ================================================= */

#evidenceCard.detail-open .evidence-content,
#evidenceCard.detail-open.letter-evidence .evidence-content {
  grid-template-rows: 270px 54px !important;
  row-gap: 12px !important;
}

#evidenceCard.detail-open .evidence-action-row {
  height: 54px !important;
}

#evidenceCard.detail-open .close-evidence-button {
  min-width: 128px !important;
  height: 48px !important;

  padding: 0 24px !important;

  font-size: 21px !important;
  border-radius: 15px !important;
}

/* ================================================= */
/* 調查筆記本：筆記頁內容改成置左排版 */
/* ================================================= */

.clue-page.note-page .clue-content {
  align-items: flex-start !important;
  justify-content: center !important;
}

.clue-page.note-page .clue-description {
  width: min(820px, 88%) !important;
  max-width: 820px !important;

  text-align: left !important;

  font-size: clamp(20px, 2vw, 26px) !important;
  line-height: 1.9 !important;

  margin: 0 auto !important;
}

/* ========================= */
/* 教學內容畫面 */
/* ========================= */

.tutorial-screen {
  background:
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.35)),
    url("images/livingroom-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  justify-content: center;
  align-items: center;
}

.tutorial-card {
  width: min(980px, 86vw);
  max-height: 82vh;

  padding: 52px 70px 46px;

  background: #f3ead7;
  border-radius: 34px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.38);

  display: flex;
  flex-direction: column;
  align-items: center;

  box-sizing: border-box;
}

.tutorial-title {
  margin: 0 0 34px 0;

  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.2;
  letter-spacing: 6px;

  color: #2f241d;
  text-align: center;
}

.tutorial-text {
  width: 100%;
  max-height: 46vh;

  margin: 0 0 38px 0;

  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.9;
  letter-spacing: 1px;

  color: #3d2b1f;
  text-align: left;

  white-space: pre-line;
  overflow-y: auto;
}

.tutorial-done-button {
  min-width: 180px;
  height: 68px;

  border: none;
  border-radius: 20px;

  background: #7a461d;
  color: #ffffff;

  font-size: 28px;
  font-weight: 800;

  cursor: pointer;
}

.tutorial-done-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

/* ========================= */
/* 教學內容：翻頁按鈕 */
/* ========================= */

.tutorial-controls {
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  gap: 28px;
  margin-bottom: 28px;
}

.tutorial-page-button {
  min-width: 130px;
  height: 54px;

  border: none;
  border-radius: 16px;

  background: #7a461d;
  color: #ffffff;

  font-size: 22px;
  font-weight: 800;

  cursor: pointer;
}

.tutorial-page-button:disabled {
  background: #cbb9a4;
  color: #f7f2ea;
  cursor: default;
}

.tutorial-page-counter {
  min-width: 90px;

  text-align: center;

  font-size: 22px;
  font-weight: 800;
  color: #7a461d;
}

/* 閱讀完畢只在最後一頁顯示，由 JS 控制 */
.tutorial-done-button {
  display: none;
}

/* ========================= */
/* 教學內容：無卷軸，但按鈕固定不被擠掉 */
/* ========================= */

.tutorial-card {
  width: min(980px, 86vw) !important;
  height: min(680px, 84vh) !important;
  max-height: 84vh !important;

  padding: 46px 70px 44px !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  row-gap: 24px !important;

  align-items: center !important;
}

.tutorial-title {
  margin: 0 !important;

  font-size: clamp(42px, 5vw, 68px) !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

.tutorial-text {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;

  overflow: visible !important;

  margin: 0 !important;

  font-size: clamp(23px, 2.2vw, 32px) !important;
  line-height: 1.85 !important;

  text-align: left !important;
  white-space: pre-line !important;

  align-self: center !important;
}

.tutorial-controls {
  margin: 0 !important;
}

.tutorial-done-button {
  margin: 0 auto !important;
}

/* ========================= */
/* 教學內容：上一頁 / 下一頁按鈕縮小 */
/* ========================= */

.tutorial-page-button {
  min-width: 105px !important;
  height: 44px !important;

  padding: 6px 18px !important;

  font-size: 18px !important;
  border-radius: 13px !important;
}

.tutorial-page-counter {
  min-width: 70px !important;

  font-size: 18px !important;
}

.tutorial-controls {
  gap: 20px !important;
}

/* ========================= */
/* 右側常駐 ICON 按鈕：共用樣式 */
/* ========================= */

.side-icon-button {
  position: absolute;

  width: 86px;
  height: 96px;

  right: 70px;

  z-index: 70;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 6px;

  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;

  background: rgba(45, 45, 35, 0.78);
  color: #ffffff;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);

  cursor: pointer;
}

.side-icon-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
}

.side-icon-image {
  width: 34px;
  height: 34px;

  object-fit: contain;
}

.side-icon-text {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.1;
}

/* 調查筆記位置 */
.notebook-button {
  top: 24px !important;
  right: 70px !important;
}

/* 教學內容按鈕：放在調查筆記下方 */
.tutorial-open-button {
  top: 136px;
}

/* 搜索階段才顯示 */
.search-screen.active .side-icon-button {
  display: flex;
}

/* 非搜索階段預設不顯示 */
.side-icon-button {
  display: none;
}

/* ================================================= */
/* 右側小型功能按鈕列：教學內容 / 預留按鈕 */
/* ================================================= */

/* 小按鈕列：放在調查筆記下面 */
.side-mini-button-row {
  position: absolute;

  top: 136px;
  right: 70px;

  z-index: 70;

  display: none;

  flex-direction: row;
  gap: 10px;
}

/* 搜索階段才顯示 */
.search-screen.active .side-mini-button-row {
  display: flex;
}

/* 小方形按鈕 */
.side-mini-button {
  width: 34px;
  height: 34px;

  padding: 0;

  border: none;
  border-radius: 4px;

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* 左邊：教學內容 */
.tutorial-mini-button {
  background: #ff3333;
}

/* 右邊：之後預留 */
.future-mini-button {
  background: #39aeea;
}

/* 小 icon 圖片 */
.side-mini-icon {
  width: 22px;
  height: 22px;

  object-fit: contain;
  display: block;
}

/* hover 效果 */
.side-mini-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* ================================================= */
/* 右側小按鈕：人物關係圖 */
/* ================================================= */

.relationship-mini-button {
  background: #39aeea;
}

/* ================================================= */
/* 人物關係圖快速查看彈窗 */
/* ================================================= */

.relationship-map-overlay {
  position: absolute;
  inset: 0;

  z-index: 8500;

  display: none;
  justify-content: center;
  align-items: center;

  background: rgba(0, 0, 0, 0.42);
}

.relationship-map-overlay.open {
  display: flex;
}

.relationship-map-card {
  width: min(980px, 88vw);
  height: min(680px, 86vh);

  padding: 36px 48px 34px;
  box-sizing: border-box;

  background: #f3ead7;
  border-radius: 34px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36);

  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: 24px;

  overflow: hidden;
}

.relationship-map-title {
  margin: 0;

  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.15;
  letter-spacing: 5px;

  color: #2f241d;
  text-align: center;
}

.relationship-map-image-area {
  min-height: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
}

.relationship-map-image {
  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  object-fit: contain;
  display: block;
}

.relationship-map-close-button {
  justify-self: center;

  min-width: 160px;
  height: 62px;

  border: none;
  border-radius: 18px;

  background: #7a461d;
  color: #ffffff;

  font-size: 26px;
  font-weight: 900;

  cursor: pointer;
}

.relationship-map-close-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

/* ================================================= */
/* 人物關係圖快速查看：拿掉標題、放大圖片 */
/* ================================================= */

/* 隱藏「人物關係圖」五個字 */
.relationship-map-title {
  display: none !important;
}

/* 彈窗內容改成：圖片 + 關閉按鈕 */
.relationship-map-card {
  width: min(1080px, 90vw) !important;
  height: min(720px, 88vh) !important;

  padding: 34px 48px 36px !important;

  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  row-gap: 26px !important;

  box-sizing: border-box !important;
}

/* 圖片區放大 */
.relationship-map-image-area {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 人物關係圖本體放大 */
.relationship-map-image {
  max-width: 96% !important;
  max-height: 96% !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;
  display: block !important;
}

/* 關閉按鈕維持在下方 */
.relationship-map-close-button {
  justify-self: center !important;

  min-width: 150px !important;
  height: 58px !important;

  font-size: 24px !important;
}

/* ================================================= */
/* 人物關係圖快速查看：關閉改右上角叉叉，圖片放大 */
/* ================================================= */

/* 彈窗卡片：不再預留下方關閉按鈕空間 */
.relationship-map-card {
  position: relative !important;

  width: min(1120px, 92vw) !important;
  height: min(740px, 90vh) !important;

  padding: 34px 46px 34px !important;
  box-sizing: border-box !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 圖片區吃滿主要空間 */
.relationship-map-image-area {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 人物關係圖放大 */
.relationship-map-image {
  max-width: 108% !important;
  max-height: 108% !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;
  display: block !important;
}

/* 原本的「關閉」按鈕改成右上角叉叉 */
.relationship-map-close-button {
  position: absolute !important;
  top: 24px !important;
  right: 28px !important;

  width: 58px !important;
  height: 58px !important;
  min-width: 0 !important;

  padding: 0 !important;

  border: none !important;
  border-radius: 50% !important;

  background: #7a461d !important;
  color: #ffffff !important;

  font-size: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  cursor: pointer !important;
  z-index: 20 !important;
}

/* 用 CSS 產生叉叉，不用改 HTML 也可以 */
.relationship-map-close-button::before {
  content: "×";

  font-size: 42px;
  font-weight: 900;
  line-height: 1;

  transform: translateY(-2px);
}

.relationship-map-close-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25) !important;
}

/* ========================= */
/* 電報放大鏡：中心跟隨滑鼠 */
/* ========================= */

.telegram-magnifier {
  position: fixed !important;

  width: 150px !important;
  height: 150px !important;

  border-radius: 50% !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;

  background-repeat: no-repeat !important;
  background-color: rgba(255, 255, 255, 0.35) !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;

  pointer-events: none !important;
  z-index: 9999 !important;

  transform: translate(-50%, -50%) !important;
}

/* ========================= */
/* 電報放大鏡：穩定跟隨滑鼠版 */
/* ========================= */

.telegram-magnifier {
  position: fixed !important;

  left: 0 !important;
  top: 0 !important;

  width: 150px !important;
  height: 150px !important;

  border-radius: 50% !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;

  background-repeat: no-repeat !important;
  background-color: rgba(255, 255, 255, 0.35) !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;

  pointer-events: none !important;
  z-index: 9999 !important;

  transform:
    translate(var(--lens-x, -9999px), var(--lens-y, -9999px))
    translate(-50%, -50%) !important;
}

/* ========================= */
/* 電報放大鏡：游標正下方版 */
/* ========================= */

#telegramMagnifier {
  position: fixed !important;

  left: 0 !important;
  top: 0 !important;

  width: 150px !important;
  height: 150px !important;

  border-radius: 50% !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;

  background-repeat: no-repeat !important;
  background-color: rgba(255, 255, 255, 0.35) !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;

  pointer-events: none !important;
  z-index: 99999 !important;

  transform:
    translate3d(var(--lens-x, -9999px), var(--lens-y, -9999px), 0)
    translate(-50%, -50%) !important;
}

/* ========================= */
/* 電報放大鏡：最終穩定版 */
/* ========================= */

#telegramMagnifier {
  position: fixed !important;

  width: 150px !important;
  height: 150px !important;

  border-radius: 50% !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;

  background-repeat: no-repeat !important;
  background-color: rgba(255, 255, 255, 0.35) !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;

  pointer-events: none !important;
  z-index: 99999 !important;

  transform: translate(-50%, -50%) !important;
}

/* ========================= */
/* 電報放大鏡：最終穩定版 */
/* ========================= */

#telegramMagnifier {
  position: fixed !important;

  width: 150px !important;
  height: 150px !important;

  border-radius: 50% !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;

  background-repeat: no-repeat !important;
  background-color: rgba(255, 255, 255, 0.35) !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;

  pointer-events: none !important;
  z-index: 99999 !important;

  transform: translate(-50%, -50%) !important;
}

/* 清除瀏覽器預設邊距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 整個網頁 */
body {
  font-family: "Microsoft JhengHei", Arial, sans-serif;
  overflow: hidden;
}

/* 所有畫面的共用設定 */
.screen {
  width: 100vw;
  height: 100vh;
  display: none;
}

/* 目前顯示中的畫面 */
.screen.active {
  display: flex;
}

/* ========================= */
/* 開始遊戲畫面 */
/* ========================= */

.start-screen {
  background-color: #111111;
  color: white;

  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 50px;
}

/* 遊戲標題 */
.game-title {
  font-size: 72px;
  letter-spacing: 10px;
}

/* 開始遊戲按鈕 */
.start-button {
  font-size: 32px;
  padding: 20px 80px;

  background-color: #b8860b;
  color: white;

  border: none;
  border-radius: 14px;

  cursor: pointer;
  transition: 0.2s;
}

.start-button:hover {
  background-color: #daa520;
  transform: scale(1.05);
}

.start-button:active {
  transform: scale(0.97);
}

/* ========================= */
/* 前導劇情畫面 */
/* ========================= */

.prologue-screen {
  position: relative;

  justify-content: center;
  align-items: center;

  color: white;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition: background-image 0.4s ease-in-out;

  overflow: hidden;
}

/* 天空背景 */
.prologue-screen.sky-bg {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)),
    url("images/sky-bg.jpg"),
    linear-gradient(to bottom, #7ec8ff, #dff5ff);
}

/* 房屋外觀背景 */
.prologue-screen.house-bg {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45)),
    url("images/house-bg.jpg");
}

/* 客廳背景 */
.prologue-screen.livingroom-bg {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.38)),
    url("images/livingroom-bg.png");
}

/* ========================= */
/* 角色立繪 */
/* ========================= */

.character-image {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 0;

  transform: translateX(-50%);

  width: 380px;
  max-width: 40vw;
  max-height: 78vh;
  height: auto;

  object-fit: contain;

  z-index: 1;

  pointer-events: none;

  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

/* 電報圖片頁：移除深色框與邊框 */
.prologue-text-box.image-only {
  background-color: transparent;
  border: none;
  min-height: auto;
  padding: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 電報圖片 */
.telegram-image {
  display: none;

  width: 210px;
  max-width: 45vw;
  max-height: 70vh;
  height: auto;

  cursor: pointer;

  /* 圖片陰影：讓電報更立體、更清楚 */
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));

  transition: transform 0.2s, filter 0.2s;
}

/* 滑鼠移到電報圖片上的效果 */
.telegram-image:hover {
  transform: none;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.55));
}

/* 電報放大鏡 */
.telegram-magnifier {
  position: fixed;
  display: none;

  width: 150px;
  height: 150px;

  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.9);

  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.4);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

  pointer-events: none;
  z-index: 9999;
}

/* 點下去的效果 */
.telegram-image:active {
  transform: scale(0.97);
}

/* ========================= */
/* 前導劇情對話框區域 */
/* ========================= */

/* 整個對話區：貼近螢幕底部 */
.prologue-dialogue-area {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);

  width: 76%;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  z-index: 2;
}

/* 說話者名稱標籤 */
.speaker-name {
  padding: 8px 24px;
  margin-left: 24px;
  margin-bottom: -2px;

  background-color: rgba(0, 0, 0, 0.75);
  color: #facc15;

  border: 2px solid rgba(255, 255, 255, 0.75);
  border-bottom: none;

  border-radius: 12px 12px 0 0;

  font-size: 20px;
  font-weight: bold;
  letter-spacing: 3px;
}

/* 對話文字框：變小、貼底 */
.prologue-text-box {
  position: relative;

  width: 100%;
  min-height: 115px;

  padding: 22px 150px 22px 34px;

  background-color: rgba(0, 0, 0, 0.58);
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;

  display: flex;
  align-items: center;
}

/* 對話文字：字變小 */
#prologueText {
  font-size: 24px;
  line-height: 1.7;
  text-align: left;
  letter-spacing: 1px;
}

/* 對話框內的按鈕區 */
.dialogue-controls {
  position: absolute;
  right: 24px;
  bottom: 18px;

  display: flex;
  gap: 12px;
}

/* 對話框內的上一句 / 下一句按鈕 */
.dialogue-arrow-button {
  width: 44px;
  height: 44px;

  border: none;
  border-radius: 50%;

  background-color: rgba(255, 255, 255, 0.88);
  color: #1f2937;

  font-size: 24px;
  font-weight: bold;

  cursor: pointer;
  transition: 0.2s;

  display: flex;
  justify-content: center;
  align-items: center;
}

.dialogue-arrow-button:hover {
  background-color: white;
  transform: scale(1.08);
}

.dialogue-arrow-button:active {
  transform: scale(0.95);
}

.dialogue-arrow-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* ========================= */
/* 置中旁白文字方塊 */
/* ========================= */

.prologue-dialogue-area.narration-mode {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);

  width: 58%;

  display: flex;
  flex-direction: column;
  align-items: center;

  z-index: 2;
}

/* 旁白模式的文字框 */
.prologue-text-box.narration-box {
  width: 100%;
  min-height: 160px;

  padding: 42px 70px 58px 70px;

  background-color: rgba(0, 0, 0, 0.58);
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 18px;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* 旁白文字 */
.prologue-text-box.narration-box #prologueText {
  font-size: 24px;
  line-height: 1.9;
  text-align: center;
  letter-spacing: 2px;
}

/* 旁白方塊裡的下一頁按鈕 */
.prologue-text-box.narration-box .dialogue-controls {
  position: absolute;
  right: 22px;
  bottom: 16px;
}

/* ========================= */
/* 電報圖片 */
/* ========================= */

.telegram-image {
  display: none;

  width: 210px;
  max-width: 45vw;
  max-height: 70vh;
  height: auto;

  cursor: pointer;

  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));

  transition: transform 0.2s, filter 0.2s;
}

.telegram-image:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.55));
}

.telegram-image:active {
  transform: scale(0.97);
}

/* 電報圖片頁：移除深色框與邊框 */
.prologue-text-box.image-only {
  background-color: transparent;
  border: none;
  min-height: auto;
  padding: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* 電報圖片頁：讓圖片回到畫面中央 */
.prologue-dialogue-area.image-mode {
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);

  width: 100%;

  align-items: center;
}

#prevPrologueButton {
  display: none !important;
}

/* 電報上方提示文字 */
.telegram-hint {
  display: none;

  margin-bottom: 14px;

  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 2px;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* ========================= */
/* 調查開始按鈕畫面 */
/* ========================= */

.investigation-start-panel {
  display: none;

  position: absolute;
  inset: 0;

  justify-content: center;
  align-items: center;

  z-index: 5;
}

.investigation-start-button {
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 6px;

  padding: 24px 90px;

  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.68);

  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;

  cursor: pointer;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);

  transition: 0.2s;
}

.investigation-start-button:hover {
  transform: scale(1.05);
  background-color: rgba(40, 40, 40, 0.82);
}

.investigation-start-button:active {
  transform: scale(0.97);
}

/* ========================= */
/* 搜索階段：地圖畫面 */
/* ========================= */

.search-screen {
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #87bf69;
  color: white;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  overflow: hidden;
}

/* 上方標題 */
.map-header {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);

  padding: 14px 34px;

  background-color: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;

  text-align: center;

  z-index: 3;
}

.map-header h2 {
  font-size: 30px;
  letter-spacing: 4px;
  margin-bottom: 6px;
}

.map-header p {
  font-size: 16px;
  letter-spacing: 2px;
}

/* 地圖舞台：圖片和按鈕都放在這裡 */
.map-stage {
  position: relative;

  width: min(92vw, calc((100vh - 70px) * 1.78));
  margin-top: 0;
  margin-bottom: 0;

  transform: translateY(0);

  z-index: 1;
}

/* 地圖圖片 */
.floor-map-image {
  display: block;
  width: 100%;
  height: auto;

  border-radius: 10px;
}

/* 地圖上的房間按鈕 */
.map-room {
  position: absolute;

  padding: 6px 14px;

  background-color: rgba(255, 255, 255, 0.95);
  color: #000000;

  border: 2px solid #000000;
  border-radius: 8px;

  font-size: clamp(11px, 1.2vw, 18px);
  font-weight: bold;
  letter-spacing: 1px;

  cursor: pointer;

  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.28);

  transform: translate(-50%, -50%);
  transition: 0.2s;

  z-index: 2;
}

.map-room:hover {
  background-color: #fff7cc;
  transform: translate(-50%, -50%) scale(1.08);
}

.map-room:active {
  transform: translate(-50%, -50%) scale(0.96);
}

/* ========================= */
/* 各房間按鈕位置 */
/* 數字之後可以微調 */
/* ========================= */

.room-big-brother {
  left: 23%;
  top: 20.5%;
}

.room-zashiki {
  left: 19%;
  top: 42.5%;
}

.room-father {
  left: 41%;
  top: 42.5%;
}

.room-girls {
  left: 65%;
  top: 42.5%;
}

.room-bath {
  left: 91%;
  top: 33.5%;
}

.room-toilet {
  left: 91%;
  top: 48.5%;
}

.room-reception {
  left: 12%;
  top: 72%;
}

.room-second-brother {
  left: 39%;
  top: 78%;
}

.room-tea {
  left: 57%;
  top: 78%;
}

.room-kitchen {
  left: 75%;
  top: 78%;
}

/* ========================= */
/* 房間資訊提示框 */
/* ========================= */

.room-info-panel {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);

  width: min(560px, 78vw);

  padding: 24px 34px;

  background-color: rgba(0, 0, 0, 0.78);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 18px;

  text-align: center;

  z-index: 50;
}

.room-info-panel h3 {
  font-size: 28px;
  margin-bottom: 12px;
  color: #facc15;
}

.room-info-panel p {
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.close-room-info-button {
  padding: 10px 28px;

  background-color: #ffffff;
  color: #111111;

  border: none;
  border-radius: 10px;

  font-size: 18px;
  font-weight: bold;

  cursor: pointer;
}

.close-room-info-button:hover {
  background-color: #facc15;
}

/* ========================= */
/* 筆記本按鈕 */
/* ========================= */
.notebook-button {
  display: none;

  position: absolute;
  top: 24px;
  right: 70px;

  width: 86px;
  height: 96px;

  padding: 8px 6px;

  background-color: rgba(0, 0, 0, 0.55);

  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 16px;

  cursor: pointer;

  z-index: 30;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);

  transition: 0.2s;

  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4px;
}

.search-screen.active .notebook-button {
  display: flex;
}

.notebook-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.notebook-button-text {
  color: white;

  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;

  line-height: 1.2;
  white-space: nowrap;
}

.notebook-button:hover {
  background-color: rgba(40, 40, 40, 0.85);
  transform: scale(1.08);
}

.notebook-button:active {
  transform: scale(0.96);
}

/* 封面上的字 */
.notebook-cover-title {
  color: #f5ead2;

  font-size: 42px;
  font-weight: bold;
  letter-spacing: 8px;

  writing-mode: vertical-rl;

  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
}

/* 打開筆記本時：封面往左翻開 */
.notebook-overlay.open .notebook-cover {
  animation: notebookCoverFlip 1.6s ease forwards;
}

@keyframes notebookCoverFlip {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }

  45% {
    transform: rotateY(-70deg);
    opacity: 1;
  }

  75% {
    transform: rotateY(-120deg);
    opacity: 0.75;
  }

  100% {
    transform: rotateY(-165deg);
    opacity: 0;
  }
}

/* 筆記本打開時：只有標題、控制按鈕、關閉按鈕淡入 */
/* 注意：不要讓 .clue-page 套用這個動畫，否則翻頁會閃現 */
.notebook-title,
.notebook-controls,
.close-notebook-button {
  opacity: 0;
}

.notebook-overlay.open .notebook-title,
.notebook-overlay.open .notebook-controls,
.notebook-overlay.open .close-notebook-button {
  animation: notebookContentFadeIn 0.35s ease forwards;
  animation-delay: 1s;
}

/* 線索頁本身永遠保持正常顯示，避免翻頁時從下方浮現 */
.clue-page {
  opacity: 1;
}

@keyframes notebookContentFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 筆記本展開後 */
.notebook-overlay.open .notebook-panel {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
}

/* 筆記本展開時的封面翻動效果 */
.close-notebook-button {
  position: absolute;
  top: 18px;
  right: 22px;

  width: 42px;
  height: 42px;

  border: none;
  border-radius: 50%;

  background-color: #5c3b1e;
  color: white;

  font-size: 30px;
  line-height: 1;

  cursor: pointer;
}

.close-notebook-button:hover {
  background-color: #7a4f27;
}

.notebook-title {
  font-size: 34px;
  margin-bottom: 28px;
  letter-spacing: 4px;
}


/* ========================= */
/* 線索頁面 */
/* ========================= */

.clue-page {
  width: 100%;
  flex: 1;

  padding: 26px 34px;

  background-color: rgba(255, 255, 255, 0.55);
  border: 2px solid rgba(92, 59, 30, 0.55);
  border-radius: 16px;

  display: flex;
  flex-direction: column;
  align-items: center;

  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.clue-header {
  text-align: center;
  margin-bottom: 22px;
}

.clue-type-label {
  font-size: 18px;
  font-weight: bold;
  color: #8a5a22;
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.clue-page-title {
  font-size: 30px;
  letter-spacing: 3px;
}

/* 線索內容：沒有蒐集到時會被隱藏 */
.clue-content {
  display: none;

  width: 100%;

  flex-direction: column;
  align-items: center;
}

.clue-image {
  width: min(360px, 70%);
  max-height: 230px;
  object-fit: contain;

  margin-bottom: 22px;

  border-radius: 12px;
  border: 2px solid rgba(92, 59, 30, 0.45);

  background-color: rgba(255, 255, 255, 0.5);
}

.clue-description {
  width: 90%;

  font-size: 20px;
  line-height: 1.8;
  text-align: center;
}


/* ========================= */
/* 筆記本翻頁按鈕 */
/* ========================= */

.notebook-controls {
  width: 100%;

  margin-top: 26px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notebook-page-button {
  padding: 10px 22px;

  background-color: #5c3b1e;
  color: white;

  border: none;
  border-radius: 10px;

  font-size: 18px;
  font-weight: bold;

  cursor: pointer;

  transition: 0.2s;
}

.notebook-page-button:hover {
  background-color: #7a4f27;
  transform: scale(1.04);
}

.notebook-page-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.clue-page-counter {
  font-size: 18px;
  font-weight: bold;
  color: #5c3b1e;
}

/* ========================= */
/* 筆記本內頁翻頁動畫 */
/* ========================= */
.clue-page.flip-next-out {
  transform-origin: left center;
  animation: cluePageNextOut 0.45s ease forwards !important;
}

.clue-page.flip-next-in {
  transform-origin: right center;
  animation: cluePageNextIn 0.45s ease forwards !important;
}

.clue-page.flip-prev-out {
  transform-origin: right center;
  animation: cluePagePrevOut 0.45s ease forwards !important;
}

.clue-page.flip-prev-in {
  transform-origin: left center;
  animation: cluePagePrevIn 0.45s ease forwards !important;
}


/* 下一頁：目前頁往左翻走 */
@keyframes cluePageNextOut {
  from {
    opacity: 1;
    transform: rotateY(0deg);
  }

  to {
    opacity: 0;
    transform: rotateY(-85deg);
  }
}

/* 下一頁：新頁從右邊翻進來 */
@keyframes cluePageNextIn {
  from {
    opacity: 0;
    transform: rotateY(85deg);
  }

  to {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

/* 上一頁：目前頁往右翻走 */
@keyframes cluePagePrevOut {
  from {
    opacity: 1;
    transform: rotateY(0deg);
  }

  to {
    opacity: 0;
    transform: rotateY(85deg);
  }
}

/* 上一頁：新頁從左邊翻進來 */
@keyframes cluePagePrevIn {
  from {
    opacity: 0;
    transform: rotateY(-85deg);
  }

  to {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

/* ========================= */
/* 房間調查畫面 */
/* ========================= */

.room-title-panel {
  display: none;

  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);

  padding: 14px 36px;

  background-color: rgba(0, 0, 0, 0.62);
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 16px;

  z-index: 10;

  text-align: center;
}

.room-title-panel h2 {
  font-size: 30px;
  letter-spacing: 4px;
}

.back-to-map-button {
  display: none;

  position: absolute;
  top: 28px;
  left: 36px;

  padding: 12px 26px;

  background-color: rgba(0, 0, 0, 0.65);
  color: white;

  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 12px;

  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;

  cursor: pointer;

  z-index: 60;

  transition: 0.2s;
}

.back-to-map-button:hover {
  background-color: rgba(40, 40, 40, 0.88);
  transform: scale(1.05);
}

.back-to-map-button:active {
  transform: scale(0.96);
}

/* ========================= */
/* 房間內人物與對話 */
/* ========================= */

.room-character-image {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 0;

  transform: translateX(-50%);

  width: 300px;
  max-width: 30vw;
  max-height: 70vh;
  height: auto;

  object-fit: contain;

  z-index: 4;

  pointer-events: none;

  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

/* 滑鼠移到人物感應範圍時，人物發光 */
.room-character-image.room-character-glow {
  transform: translateX(-50%) scale(1.03);

  filter:
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 14px rgba(255, 230, 80, 0.95))
    drop-shadow(0 0 30px rgba(255, 200, 40, 0.65));
}


/* 房間人物真正可互動的滑鼠感應範圍 */
.room-character-hitbox {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 0;

  transform: translateX(-50%);

  width: 180px;
  height: 420px;
  max-height: 70vh;

  border: none;
  background-color: transparent;

  cursor: pointer;

  z-index: 24;
}


/* 人物被滑鼠碰到時的光暈 */
.room-character-image.room-character-glow {
  transform: translateX(-50%) scale(1.03);

  filter:
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 14px rgba(255, 230, 80, 0.95))
    drop-shadow(0 0 30px rgba(255, 200, 40, 0.65));
}

/* 大哥房內的大哥立繪：縮小版 */
.room-character-image.big-brother-room-character {
  width: 300px;
  max-width: 30vw;
  max-height: 70vh;
}

.room-character-image:active {
  transform: translateX(-50%) scale(0.98);
}

.start-room-dialogue-button {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 130px;
  transform: translateX(-50%);

  padding: 16px 46px;

  background-color: rgba(0, 0, 0, 0.72);
  color: white;

  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 14px;

  font-size: 24px;
  font-weight: bold;
  letter-spacing: 4px;

  cursor: pointer;

  z-index: 12;

  transition: 0.2s;
}

.start-room-dialogue-button:hover {
  background-color: rgba(40, 40, 40, 0.88);
  transform: translateX(-50%) scale(1.05);
}

.start-room-dialogue-button:active {
  transform: translateX(-50%) scale(0.96);
}

/* 房間對話框 */
.room-dialogue-box {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);

  width: 76%;
  min-height: 120px;

  padding: 24px 120px 24px 34px;

  background-color: rgba(0, 0, 0, 0.68);
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 16px;

  color: white;

  z-index: 45;
}

.room-dialogue-speaker {
  position: absolute;
  left: 24px;
  top: -42px;

  padding: 8px 26px;

  background-color: rgba(0, 0, 0, 0.78);
  color: #facc15;

  border: 2px solid rgba(255, 255, 255, 0.78);
  border-bottom: none;
  border-radius: 12px 12px 0 0;

  font-size: 20px;
  font-weight: bold;
  letter-spacing: 3px;
}

.room-dialogue-text {
  font-size: 23px;
  line-height: 1.7;
  letter-spacing: 1px;
}

.next-room-dialogue-button {
  position: absolute;
  right: 26px;
  bottom: 22px;

  width: 46px;
  height: 46px;

  border: none;
  border-radius: 50%;

  background-color: rgba(255, 255, 255, 0.9);
  color: #111827;

  font-size: 24px;
  font-weight: bold;

  cursor: pointer;

  transition: 0.2s;
}

.next-room-dialogue-button:hover {
  background-color: white;
  transform: scale(1.08);
}

.next-room-dialogue-button:active {
  transform: scale(0.95);
}

/* ========================= */
/* 房間內可點擊物件 */
/* ========================= */

.room-hotspot-layer {
  display: none;

  position: absolute;
  inset: 0;

  z-index: 9;

  pointer-events: none;
}

/* 
  看不見的熱區：
  平常不顯示任何顏色或光暈
*/
.room-hotspot {
  position: absolute;

  border: none;
  background-color: transparent;
  box-shadow: none;

  cursor: pointer;
  pointer-events: auto;

  border-radius: 12px;

  transform: translate(-50%, -50%);

  transition: transform 0.2s ease;
}

/* 
  光點本體：
  平常完全透明
*/
.room-hotspot::after {
  content: "";

  position: absolute;
  left: 50%;
  top: 50%;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  background-color: rgba(255, 245, 130, 1);

  box-shadow:
    0 0 16px rgba(255, 245, 130, 1),
    0 0 34px rgba(255, 210, 50, 0.85),
    0 0 58px rgba(255, 180, 20, 0.55);

  transform: translate(-50%, -50%) scale(0.3);

  opacity: 0;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* 滑鼠移到熱區時，才出現光點 */
.room-hotspot:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 點擊時縮一下 */
.room-hotspot:active::after {
  transform: translate(-50%, -50%) scale(0.8);
}

/* 大哥房：桌上的日記本熱區 */
.hotspot-diary {
  left: 22%;
  top: 80%;

  width: 8%;
  height: 6%;
}

/* 大哥房：右方櫃子上的紙張熱區 */
.hotspot-paper {
  left: 82%;
  top: 40%;

  width: 8%;
  height: 7%;
}

/* ========================= */
/* 房間對話選項 */
/* ========================= */

.room-choice-box {
  display: none;

  flex-direction: column;
  gap: 12px;

  width: 100%;

  margin-top: 10px;
}

.room-choice-button {
  width: 100%;

  padding: 12px 18px;

  background-color: rgba(255, 255, 255, 0.92);
  color: #111111;

  border: none;
  border-radius: 10px;

  font-size: 20px;
  font-weight: bold;
  text-align: left;

  cursor: pointer;

  transition: 0.2s;
}

.room-choice-button:hover {
  background-color: #facc15;
  transform: translateX(6px);
}

.room-choice-button:active {
  transform: translateX(2px) scale(0.98);
}

/* 對話開啟時，人物不因 hover 產生光暈 */
.room-dialogue-box[style*="block"] ~ .room-character-image:hover {
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}

/* ========================= */
/* 證據檢視彈窗：書頁閱讀版 */
/* ========================= */

.evidence-panel {
  display: none;

  position: absolute;
  inset: 0;

  justify-content: center;
  align-items: center;

  padding: 28px;

  background: rgba(28, 20, 12, 0.58);
  backdrop-filter: blur(3px);

  z-index: 55;
}

/* 整本證據書 */
.evidence-card {
  position: relative;

  width: min(1040px, 94vw);
  height: min(720px, 90vh);

  padding: 30px 42px 28px;

  background:
    linear-gradient(90deg, rgba(124, 86, 42, 0.16) 0%, transparent 7%, transparent 93%, rgba(124, 86, 42, 0.16) 100%),
    linear-gradient(180deg, #f5ecd8 0%, #efe2c6 100%);

  color: #2b2118;

  border-radius: 28px;
  border: 1px solid rgba(104, 72, 36, 0.25);

  box-shadow:
    0 26px 54px rgba(0, 0, 0, 0.38),
    inset 0 0 34px rgba(255, 255, 255, 0.28);

  display: flex;
  flex-direction: column;
  align-items: center;

  overflow: hidden;
}

/* 上方標題區 */
.evidence-header {
  flex: 0 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: 16px;
}

.evidence-type {
  display: inline-block;

  margin-bottom: 12px;
  padding: 7px 22px;

  background-color: #6b4420;
  color: #ffffff;

  border-radius: 999px;

  font-size: 17px;
  font-weight: bold;
  letter-spacing: 2px;
}

.evidence-title {
  margin-bottom: 8px;

  font-size: clamp(34px, 4vw, 50px);
  font-weight: bold;
  letter-spacing: 4px;
  line-height: 1.15;
  text-align: center;
  color: #2f2218;
}

.evidence-hint {
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #9b6b32;
}

/* 內容區：未展開時是單欄置中 */
.evidence-content {
  flex: 1;

  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 0;
}

/* 展開後變成左右書頁 */
.evidence-card.detail-open .evidence-content {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  column-gap: 34px;
  align-items: center;
}

/* 左頁圖片區 */
.evidence-image-area {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 0;
}

/* 圖片：沒有框中框 */
.evidence-image {
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

/* 未展開前的圖片尺寸 */
.evidence-card:not(.detail-open) .evidence-image {
  max-width: min(230px, 32vw);
  max-height: 270px;
}

/* 展開後的圖片尺寸 */
.evidence-card.detail-open .evidence-image {
  max-width: 100%;
  max-height: 520px;
}

/* 只有未展開時可以 hover */
.evidence-image.can-open {
  cursor: pointer;
}

.evidence-image.can-open:hover {
  transform: translateY(-2px) scale(1.025);
  filter: drop-shadow(0 0 16px rgba(255, 230, 80, 0.72));
}

/* 右頁閱讀區 */
.evidence-reading-panel {
  display: none;

  height: 100%;
  min-height: 0;

  padding: 26px 30px;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 248, 230, 0.42));

  border-left: 3px solid rgba(122, 79, 39, 0.35);
  border-radius: 20px;

  flex-direction: column;
  justify-content: center;

  box-shadow: inset 8px 0 18px rgba(87, 57, 26, 0.08);
}

.evidence-card.detail-open .evidence-reading-panel {
  display: flex;
}

.evidence-description {
  display: none;

  margin-bottom: 16px;

  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.85;
  text-align: left;
  color: #2b2118;
}

/* 日記內容區 */
.evidence-diary-block {
  display: none;

  padding: 18px 20px;

  background-color: rgba(255, 255, 255, 0.52);
  border-left: 6px solid #9b6b32;
  border-radius: 16px;
}

.evidence-diary-block h4 {
  margin-bottom: 10px;

  font-size: clamp(18px, 1.4vw, 23px);
  font-weight: bold;
  color: #7a4f27;
  letter-spacing: 2px;
}

.evidence-diary-block p {
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.75;
  text-align: left;
  color: #2b2118;
}

/* 關閉按鈕固定在卡片下方，不需要滾動才看得到 */
.close-evidence-button {
  flex: 0 0 auto;

  margin-top: 18px;
  padding: 12px 40px;

  background-color: #6b4420;
  color: white;

  border: none;
  border-radius: 14px;

  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;

  cursor: pointer;
  transition: 0.2s;
}

.close-evidence-button:hover {
  background-color: #83552b;
  transform: scale(1.04);
}

/* ========================= */
/* 證據彈窗尺寸修正版 */
/* 放在 style.css 最下面 */
/* ========================= */

/* 整個證據卡片縮小一點，避免塞滿畫面 */
.evidence-card {
  width: min(880px, 88vw);
  height: min(620px, 84vh);

  padding: 24px 38px 26px;

  overflow: hidden;
}

/* 上方標題區不要佔太多高度 */
.evidence-header {
  margin-bottom: 12px;
}

.evidence-type {
  margin-bottom: 10px;
  padding: 6px 20px;

  font-size: 16px;
}

.evidence-title {
  margin-bottom: 6px;

  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.1;
}

.evidence-hint {
  margin-bottom: 12px;

  font-size: 16px;
}

/* 未展開前：單張封面圖縮小 */
.evidence-card:not(.detail-open) .evidence-content {
  flex: 1;

  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 0;
}

.evidence-card:not(.detail-open) .evidence-image {
  max-width: min(330px, 44vw);
  max-height: 360px;
}

/* 展開後：左右頁比例調整 */
.evidence-card.detail-open .evidence-content {
  grid-template-columns: 0.78fr 1.22fr;
  column-gap: 28px;
}

/* 展開後左邊圖片縮小 */
.evidence-card.detail-open .evidence-image {
  max-width: 330px;
  max-height: 390px;
}

/* 圖片區不要把高度撐爆 */
.evidence-image-area {
  min-height: 0;
  height: 100%;
}

/* 右側閱讀區縮小一些 */
.evidence-reading-panel {
  height: auto;
  max-height: 390px;

  padding: 22px 26px;

  justify-content: center;
}

/* 右側說明文字 */
.evidence-description {
  font-size: 18px;
  line-height: 1.75;
}

/* 日記內容區 */
.evidence-diary-block {
  padding: 16px 18px;
}

.evidence-diary-block h4 {
  font-size: 20px;
}

.evidence-diary-block p {
  font-size: 15px;
  line-height: 1.65;
}

/* 關閉按鈕不要浮在圖片上 */
.close-evidence-button {
  position: static;

  margin-top: 14px;
  padding: 10px 34px;

  font-size: 20px;
}

/* ========================= */
/* 未展開證據圖片：強制縮小版 */
/* 一定要放在 style.css 最下面 */
/* ========================= */

.evidence-card:not(.detail-open) #evidenceImage {
  width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
  max-height: 280px !important;

  object-fit: contain !important;

  display: block !important;
  margin: 8px auto 14px auto !important;
}

/* 未展開時，圖片區不要把圖片撐大 */
.evidence-card:not(.detail-open) .evidence-image-area {
  height: 300px !important;
  max-height: 300px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 未展開時，內容區高度控制 */
.evidence-card:not(.detail-open) .evidence-content {
  flex: 0 0 auto !important;
  height: 310px !important;
  max-height: 310px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 未展開時，整個卡片稍微緊湊一點 */
.evidence-card:not(.detail-open) {
  height: min(610px, 84vh) !important;
  padding-top: 28px !important;
  padding-bottom: 24px !important;
}

/* 未展開時，標題區不要被圖片擠到 */
.evidence-card:not(.detail-open) .evidence-header {
  margin-bottom: 8px !important;
}

/* 未展開時，關閉按鈕固定在圖片下方，不壓圖片 */
.evidence-card:not(.detail-open) .close-evidence-button {
  margin-top: 12px !important;
}

/* ========================= */
/* 未展開證據頁：按鈕顯示修正版 */
/* 放在 style.css 最下面 */
/* ========================= */

/* 未展開時，整個卡片高度再控制好 */
.evidence-card:not(.detail-open) {
  height: min(600px, 82vh) !important;
  padding-top: 26px !important;
  padding-bottom: 24px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* 標題區固定，不要被圖片擠壓 */
.evidence-card:not(.detail-open) .evidence-header {
  flex: 0 0 auto !important;
  margin-bottom: 10px !important;
}

/* 圖片區改成可伸縮，不要固定太高 */
.evidence-card:not(.detail-open) .evidence-content {
  flex: 1 1 auto !important;

  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 圖片區也不要固定 300px */
.evidence-card:not(.detail-open) .evidence-image-area {
  height: auto !important;
  max-height: none !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 未展開圖片大小 */
.evidence-card:not(.detail-open) #evidenceImage {
  width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
  max-height: 260px !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

/* 關閉按鈕固定在卡片底部可見位置 */
.evidence-card:not(.detail-open) .close-evidence-button {
  flex: 0 0 auto !important;

  display: block !important;

  margin-top: 16px !important;
  margin-bottom: 0 !important;

  position: static !important;
  transform: none !important;
}

/* ========================= */
/* 房間對話框關閉按鈕 */
/* ========================= */

.close-room-dialogue-button {
  position: absolute;
  top: 14px;
  right: 18px;

  width: 36px;
  height: 36px;

  border: none;
  border-radius: 50%;

  background-color: rgba(255, 255, 255, 0.9);
  color: #111827;

  font-size: 28px;
  font-weight: bold;
  line-height: 1;

  cursor: pointer;

  z-index: 20;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: 0.2s;
}

.close-room-dialogue-button:hover {
  background-color: #facc15;
  transform: scale(1.08);
}

.close-room-dialogue-button:active {
  transform: scale(0.94);
}

/* ========================= */
/* 父親房：5 個熱區位置 */
/* ========================= */

/* 小物件 / 重點證據要在大型區域上面 */
.hotspot-father-paperweight,
.hotspot-father-bedside-corner,
.hotspot-father-letter {
  z-index: 4;
}

/* 大範圍調查區放下面 */
.hotspot-large-area {
  z-index: 1;
}

/* 1. 右邊桌上的石製紙鎮 */
.hotspot-father-paperweight {
  left: 82%;
  top: 78%;

  width: 8%;
  height: 8%;
}

/* 2. 床頭櫃角落的血跡 / 破損處 */
.hotspot-father-bedside-corner {
  left: 17%;
  top: 76%;

  width: 7%;
  height: 8%;
}

/* 4. 押入裡的親密書信 / 紙張 */
.hotspot-father-letter {
  left: 37%;
  top: 35%;

  width: 10%;
  height: 8%;
}

/* 3. 代表整個床頭櫃的小光點 */
.hotspot-father-bedside-cabinet {
  left: 22%;
  top: 65%;

  width: 5%;
  height: 5%;

  z-index: 4;
}

/* 5. 代表整個押入的小光點 */
.hotspot-father-oshiire {
  left: 33%;
  top: 50%;

  width: 5%;
  height: 5%;

  z-index: 4;
}

/* ========================= */
/* 書信證據頁：圖片縮小 + 分頁閱讀 */
/* ========================= */

/* 書信證據展開後，左圖右文比例重新調整 */
.evidence-card.detail-open.letter-evidence .evidence-content {
  grid-template-columns: 0.62fr 1.38fr !important;
  column-gap: 26px !important;
}

/* 書信圖片縮小 */
.evidence-card.detail-open.letter-evidence #evidenceImage {
  width: auto !important;
  max-width: 260px !important;
  max-height: 390px !important;

  object-fit: contain !important;
}

/* 書信右側閱讀框稍微縮小，避免太滿 */
.evidence-card.detail-open.letter-evidence .evidence-reading-panel {
  max-height: 390px !important;
  padding: 22px 26px !important;
}

/* 書信說明文字 */
.evidence-card.detail-open.letter-evidence .evidence-description {
  font-size: 18px !important;
  line-height: 1.75 !important;
  margin-bottom: 14px !important;
}

/* 書信內容區 */
.evidence-card.detail-open.letter-evidence .evidence-diary-block {
  padding: 16px 20px !important;
}

/* 書信內容文字 */
.evidence-card.detail-open.letter-evidence .evidence-diary-block p {
  font-size: 17px !important;
  line-height: 1.85 !important;
}

/* 書信分頁按鈕區 */
.evidence-diary-controls {
  display: none;

  margin-top: 16px;

  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

/* 上一頁 / 下一頁按鈕 */
.evidence-diary-page-button {
  padding: 8px 18px;

  background-color: #6b4420;
  color: white;

  border: none;
  border-radius: 10px;

  font-size: 16px;
  font-weight: bold;

  cursor: pointer;
  transition: 0.2s;
}

.evidence-diary-page-button:hover {
  background-color: #83552b;
  transform: scale(1.04);
}

.evidence-diary-page-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* 頁碼 */
.evidence-diary-counter {
  color: #6b4420;

  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}

/* 不能關閉時的提醒 */
.evidence-close-hint {
  display: none;

  margin-top: 10px;

  color: #8a5a22;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
}

/* 關閉按鈕不能按時 */
.close-evidence-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ========================= */
/* 父親書信證據頁：強制縮小圖片 */
/* 一定要放在 style.css 最下面 */
/* ========================= */

.evidence-card.detail-open.letter-evidence .evidence-image-area {
  justify-content: center !important;
  align-items: center !important;
}

.evidence-card.detail-open.letter-evidence #evidenceImage {
  width: 210px !important;
  max-width: 210px !important;
  height: auto !important;
  max-height: 360px !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

/* 左右版面再調整一下，讓右邊文字區多一點空間 */
.evidence-card.detail-open.letter-evidence .evidence-content {
  grid-template-columns: 0.52fr 1.48fr !important;
  column-gap: 24px !important;
}

/* 標題避免太大壓到內容 */
.evidence-card.detail-open.letter-evidence .evidence-title {
  font-size: clamp(28px, 3vw, 38px) !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
}

/* 右側文字區不要太高 */
.evidence-card.detail-open.letter-evidence .evidence-reading-panel {
  max-height: 370px !important;
  padding: 20px 24px !important;
}

/* 書信內容文字稍微縮小 */
.evidence-card.detail-open.letter-evidence .evidence-diary-block p {
  font-size: 16px !important;
  line-height: 1.75 !important;
}

/* ========================= */
/* 父親書信證據頁：強制縮小圖片 */
/* ========================= */

.evidence-card.detail-open.letter-evidence .evidence-content {
  grid-template-columns: 0.46fr 1.54fr !important;
  column-gap: 22px !important;
}

.evidence-card.detail-open.letter-evidence #evidenceImage {
  width: 180px !important;
  max-width: 180px !important;
  height: auto !important;
  max-height: 330px !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

.evidence-card.detail-open.letter-evidence .evidence-title {
  font-size: clamp(26px, 2.7vw, 34px) !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
}

.evidence-card.detail-open.letter-evidence .evidence-reading-panel {
  max-height: 370px !important;
  padding: 20px 24px !important;
}

.evidence-card.detail-open.letter-evidence .evidence-diary-block p {
  font-size: 16px !important;
  line-height: 1.75 !important;
}

/* ========================= */
/* 隱藏書信第 2 頁的關閉提示文字 */
/* ========================= */

.evidence-close-hint {
  display: none !important;
}

/* ========================= */
/* 筆記已更新提示框 */
/* ========================= */

.notebook-update-toast {
  display: none;

  position: absolute;
  left: 50%;
  top: 45%;

  transform: translate(-50%, -50%);

  padding: 22px 54px;

  background-color: rgba(0, 0, 0, 0.78);
  color: #facc15;

  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;

  font-size: 32px;
  font-weight: bold;
  letter-spacing: 5px;

  z-index: 80;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);

  opacity: 0;
  pointer-events: none;
}

.notebook-update-toast.show {
  display: block;
  animation: notebookUpdateFade 3s ease forwards;
}

@keyframes notebookUpdateFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }

  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
  }
}

/* ========================= */
/* 調查筆記本：分類頁籤 */
/* ========================= */

.notebook-tabs {
  width: 100%;

  display: flex;
  justify-content: center;
  gap: 14px;

  margin-top: -10px;
  margin-bottom: 22px;
}

.notebook-tab {
  position: relative;

  padding: 10px 22px;

  background-color: rgba(92, 59, 30, 0.18);
  color: #5c3b1e;

  border: 2px solid rgba(92, 59, 30, 0.55);
  border-radius: 999px;

  font-size: 17px;
  font-weight: bold;
  letter-spacing: 2px;

  cursor: pointer;

  transition: 0.2s;
}

.notebook-tab:hover {
  background-color: rgba(92, 59, 30, 0.28);
  transform: translateY(-2px);
}

.notebook-tab.active {
  background-color: #5c3b1e;
  color: #fff7df;
  border-color: #5c3b1e;

  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

/* 分類有新內容時的小紅點 */
.notebook-tab-dot {
  display: none;

  position: absolute;
  right: 8px;
  top: 6px;

  width: 10px;
  height: 10px;

  background-color: #dc2626;
  border-radius: 50%;

  box-shadow: 0 0 8px rgba(220, 38, 38, 0.75);
}

.notebook-tab.has-update .notebook-tab-dot {
  display: block;
}

/* 右上調查筆記按鈕也可以顯示更新狀態 */
.notebook-button.has-update {
  box-shadow:
    0 0 0 3px rgba(250, 204, 21, 0.65),
    0 8px 18px rgba(0, 0, 0, 0.35);
}

.notebook-button.has-update::after {
  content: "";

  position: absolute;
  right: 8px;
  top: 8px;

  width: 12px;
  height: 12px;

  background-color: #dc2626;
  border-radius: 50%;

  box-shadow: 0 0 8px rgba(220, 38, 38, 0.8);
}

/* ========================= */
/* 座敷：可調查物件熱區 */
/* ========================= */

/* 左下箱子：對應藥箱裡的安眠藥 */
.hotspot-sleeping-pills {
  left: 12.8%;
  top: 76%;

  width: 18px;
  height: 18px;
}

/* 右側相框：對應細姨與小弟的照片 */
.hotspot-concubine-photo {
  left: 82.2%;
  top: 52%;

  width: 18px;
  height: 18px;
}

/* 左側紙張：對應契約 */
.hotspot-land-contract {
  left: 13.2%;
  top: 65%;

  width: 18px;
  height: 18px;
}

/* ========================= */
/* 女生房：可調查物件熱區 */
/* ========================= */

/* 右側桌上的手帕 */
.hotspot-girls-handkerchief {
  left: 77.6%;
  top: 82.5%;

  width: 22px;
  height: 22px;
}

/* 右牆上的蓮花畫 */
.hotspot-girls-lotus-painting {
  left: 86.4%;
  top: 51.5%;

  width: 22px;
  height: 22px;
}

/* 左側梳妝櫃 */
.hotspot-girls-dresser {
  left: 18.5%;
  top: 58.5%;

  width: 22px;
  height: 22px;
}

/* ========================= */
/* 大哥房：新增普通調查物件熱區 */
/* ========================= */

/* 大哥房：蒲團 / 座墊 */
.hotspot-big-brother-futon {
  left: 30.5%;
  top: 86.5%;

  width: 22px;
  height: 22px;
}

/* 大哥房：窗戶 */
.hotspot-big-brother-window {
  left: 91.5%;
  top: 42%;

  width: 22px;
  height: 22px;
}

/* ========================= */
/* 應接室：可調查物件熱區 */
/* 暫時紅框版，調整完可以改回光點 */
/* ========================= */

/* 應接室：燕子花 */
.hotspot-reception-iris-flower {
  left: 46%;
  top: 52%;

  width: 90px;
  height: 120px;
}

/* 應接室：洋式桌椅 */
.hotspot-reception-western-furniture {
  left: 43%;
  top: 77%;

  width: 220px;
  height: 120px;
}

/* ========================= */
/* 應接室：鄰居人物位置 */
/* ========================= */

.reception-neighbor-character {
  left: 80%;
  bottom: 0;

  width: 300px;
  max-width: 32vw;
  max-height: 78vh;

  transform: translateX(-50%);
}

/* 應接室：鄰居點擊對話範圍 */
.hitbox-reception-neighbor {
  left: 80%;
  bottom: 0;

  width: 180px;
  height: 520px;

  transform: translateX(-50%);
}

/* ========================= */
/* 房間熱區：不規則閃爍光點 */
/* ========================= */

.room-hotspot {
  overflow: visible;
}

/* 平常的閃爍光點 */
.room-hotspot::after {
  content: "";

  position: absolute;
  left: 50%;
  top: 50%;

  width: 14px;
  height: 14px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background-color: rgba(255, 230, 80, 0.85);

  box-shadow:
    0 0 10px rgba(255, 230, 80, 0.95),
    0 0 24px rgba(255, 200, 40, 0.65),
    0 0 42px rgba(255, 180, 20, 0.35);

  opacity: 0;

  pointer-events: none;

  animation-name: hotspotTwinkle;
  animation-duration: var(--twinkle-duration, 5s);
  animation-delay: var(--twinkle-delay, 0s);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* 閃爍節奏：大部分時間不亮，短暫閃一下 */
@keyframes hotspotTwinkle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
  }

  62% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
  }

  68% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1);
  }

  73% {
    opacity: 0.25;
    transform: translate(-50%, -50%) scale(0.8);
  }

  78% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.12);
  }

  86% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
  }
}

/* 滑鼠移上去時：固定顯示強烈黃光 */
.room-hotspot:hover::after {
  opacity: 1;

  width: 20px;
  height: 20px;

  animation: none;

  background-color: rgba(255, 230, 80, 0.95);

  box-shadow:
    0 0 14px rgba(255, 230, 80, 1),
    0 0 30px rgba(255, 200, 40, 0.8),
    0 0 52px rgba(255, 180, 20, 0.5);

  transform: translate(-50%, -50%) scale(1.15);
}

/* 滑鼠移上去時，熱區本身不要再出現方形底色 */
.room-hotspot:hover {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ========================= */
/* 房間標題下方：可調查物件數量 */
/* ========================= */

.room-hotspot-count-text {
  margin-top: 6px;

  color: rgba(255, 255, 255, 0.92);

  font-size: 14px;
  font-weight: normal;
  letter-spacing: 1px;

  text-align: center;
}

/* 房間可調查物件數量：數字紅色 */
.hotspot-count-number {
  color: #ef4444;
  font-weight: bold;
  font-size: 1.15em;
}

/* ========================= */
/* 客廳 / 座敷：父親遺照熱區 */
/* ========================= */

.hotspot-father-memorial-photo {
  left: 88%;
  top: 56%;

  width: 90px;
  height: 110px;
}

/* ========================= */
/* 證據視窗：統一修正長圖壓到文字問題 */
/* ========================= */

/* 證據彈窗本體：限制最大高度，避免內容爆出去 */
.evidence-card {
  max-height: 88vh;
  overflow: hidden;
}

/* 展開後的內容區：固定左右兩欄 */
.evidence-card.detail-open .evidence-content {
  display: grid;
  grid-template-columns: minmax(220px, 36%) minmax(0, 1fr);
  gap: 36px;

  align-items: center;

  width: 100%;
  min-height: 0;
}

/* 左側圖片區：限制圖片活動範圍 */
.evidence-card.detail-open .evidence-image-area {
  width: 100%;
  height: min(58vh, 520px);

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
}

/* 所有證據圖片統一縮在圖片區內 */
.evidence-card.detail-open .evidence-image {
  max-width: 100% !important;
  max-height: 100% !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;

  display: block;
}

/* 右側文字閱讀區：不被圖片擠壓 */
.evidence-card.detail-open .evidence-reading-panel {
  min-width: 0;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 說明文字不要被擠到太窄 */
.evidence-card.detail-open .evidence-description,
.evidence-card.detail-open .evidence-diary-block {
  width: 100%;
  max-width: 100%;
}

/* 關閉按鈕不要被圖片或內容推走 */
.close-evidence-button {
  position: relative;
  z-index: 5;
}

/* ========================= */
/* 新對話選單：鎖定 / 已讀 / 新解鎖 */
/* ========================= */

.room-choice-button.locked {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.room-choice-button.read {
  opacity: 0.78;
}

.room-choice-button.new-unread {
  box-shadow:
    0 0 0 2px rgba(255, 220, 120, 0.75),
    0 0 18px rgba(255, 210, 80, 0.45);
}

/* ================================================= */
/* 調查筆記本：最終穩定覆蓋版 */
/* 解決圖片撐爆、按鈕被擠出畫面、頁面高度不固定 */
/* ================================================= */

/* 整個筆記本黑色遮罩 */
.notebook-overlay {
  position: fixed !important;
  inset: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 18px !important;

  background-color: rgba(0, 0, 0, 0.45) !important;

  z-index: 9999 !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.notebook-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 筆記本主體：固定高度，內容不能把它撐爆 */
.notebook-panel {
  position: relative !important;

  width: min(980px, 88vw) !important;
  height: min(700px, 84vh) !important;
  min-height: 0 !important;

  padding: 22px 36px 20px 36px !important;

  background-color: #f5ead2 !important;
  color: #2b2118 !important;

  border: 4px solid #5c3b1e !important;
  border-radius: 22px !important;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;

  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  row-gap: 12px !important;

  align-items: stretch !important;

  overflow: hidden !important;

  opacity: 1 !important;
  transform: none !important;
}

/* 關閉 X 固定在右上，不被內容推走 */
.close-notebook-button {
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;

  width: 44px !important;
  height: 44px !important;

  border: none !important;
  border-radius: 50% !important;

  background-color: #5c3b1e !important;
  color: white !important;

  font-size: 30px !important;
  line-height: 1 !important;

  cursor: pointer !important;

  z-index: 20 !important;

  opacity: 1 !important;
}

/* 標題不要佔太多高度 */
.notebook-title {
  margin: 0 !important;

  font-size: clamp(28px, 4vw, 42px) !important;
  line-height: 1.15 !important;
  letter-spacing: 4px !important;

  text-align: center !important;

  opacity: 1 !important;
}

/* 頁籤固定在標題下方 */
.notebook-tabs {
  width: 100% !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 12px !important;
  margin: 0 !important;

  flex-wrap: wrap !important;
}

/* 每一頁固定在中間區域，不准撐爆 */
.clue-page {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;

  padding: 18px 28px !important;

  background-color: rgba(255, 255, 255, 0.55) !important;
  border: 2px solid rgba(92, 59, 30, 0.55) !important;
  border-radius: 16px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow: hidden !important;

  opacity: 1 !important;
}

/* 頁面上方小標與標題 */
.clue-header {
  flex: 0 0 auto !important;

  text-align: center !important;
  margin-bottom: 10px !important;
}

.clue-type-label {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #8a5a22 !important;
  margin-bottom: 6px !important;
  letter-spacing: 2px !important;
}

.clue-page-title {
  font-size: clamp(28px, 3.6vw, 42px) !important;
  line-height: 1.18 !important;
  letter-spacing: 3px !important;
}

/* 內容區固定高度，不讓圖片或文字把按鈕推出去 */
.clue-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 12px !important;

  overflow: hidden !important;
}

/* 圖片：強制縮在固定範圍 */
.clue-image {
  flex: 0 1 auto !important;

  width: auto !important;
  height: auto !important;

  max-width: min(320px, 48vw) !important;
  max-height: min(190px, 22vh) !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;

  border-radius: 12px !important;
  border: 2px solid rgba(92, 59, 30, 0.45) !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
}

/* 人物關係圖可以比一般證據大 */
.clue-page.relationship-page .clue-image {
  max-width: min(620px, 68vw) !important;
  max-height: min(330px, 38vh) !important;
}

/* 文字說明：限制高度，避免擠掉按鈕 */
.clue-description {
  flex: 0 1 auto !important;

  width: min(760px, 92%) !important;
  max-height: 120px !important;

  overflow: hidden !important;

  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.65 !important;
  text-align: center !important;

  margin: 0 auto !important;
}

/* 筆記頁通常沒有圖片，文字可放大一點 */
.clue-page.note-page .clue-content {
  justify-content: center !important;
}

.clue-page.note-page .clue-description {
  max-height: 100% !important;

  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.9 !important;
}

/* 底部翻頁按鈕：永遠固定看得到 */
.notebook-controls {
  flex: 0 0 auto !important;

  width: 100% !important;
  height: 54px !important;

  margin: 0 !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  opacity: 1 !important;
}

/* 上一頁 / 下一頁 */
.notebook-page-button {
  min-width: 130px !important;
  height: 46px !important;

  padding: 8px 18px !important;

  background-color: #5c3b1e !important;
  color: white !important;

  border: none !important;
  border-radius: 10px !important;

  font-size: 18px !important;
  font-weight: bold !important;

  cursor: pointer !important;
}

.notebook-page-button:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.clue-page-counter {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #5c3b1e !important;
}

/* 封面動畫不要擋操作 */
.notebook-cover {
  pointer-events: none !important;
}

/* ================================================= */
/* 調查筆記本：防重疊最終修正版 */
/* 貼在 style.css 最下面 */
/* ================================================= */

/* 筆記本主體：用 grid 明確分成 4 層：
   1 標題
   2 頁籤
   3 內容頁
   4 翻頁按鈕
*/
.notebook-panel {
  width: min(980px, 88vw) !important;
  height: min(660px, 80vh) !important;
  min-height: 0 !important;

  padding: 22px 38px 24px 38px !important;

  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) 58px !important;
  row-gap: 14px !important;

  align-items: stretch !important;
  overflow: hidden !important;

  position: relative !important;
}

/* 標題固定第一列 */
.notebook-title {
  grid-row: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.15 !important;
  text-align: center !important;

  opacity: 1 !important;
  transform: none !important;
}

/* 頁籤固定第二列，不要壓到內容頁 */
.notebook-tabs {
  grid-row: 2 !important;

  width: 100% !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;

  gap: 12px !important;

  margin: 0 0 6px 0 !important;
  padding: 0 !important;

  position: relative !important;
  z-index: 5 !important;

  transform: none !important;
}

/* 頁籤本身不要往下浮 */
.notebook-tab {
  position: relative !important;
  transform: none !important;
  margin: 0 !important;
}

/* 內容頁固定第三列，不准往上撞頁籤 */
.clue-page {
  grid-row: 3 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 18px 28px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow: hidden !important;

  position: relative !important;
  z-index: 1 !important;
}

/* 頁面標題區不要太高 */
.clue-header {
  flex: 0 0 auto !important;

  margin: 0 0 10px 0 !important;
  padding: 0 !important;

  text-align: center !important;
}

.clue-type-label {
  margin: 0 0 6px 0 !important;

  font-size: 18px !important;
  line-height: 1.2 !important;
}

.clue-page-title {
  margin: 0 !important;

  font-size: clamp(30px, 4vw, 46px) !important;
  line-height: 1.18 !important;
}

/* 內容區：圖片和文字都只能在這個區域內 */
.clue-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 12px !important;

  overflow: hidden !important;
}

/* 圖片統一縮小，不撐爆頁面 */
.clue-image {
  width: auto !important;
  height: auto !important;

  max-width: min(300px, 46vw) !important;
  max-height: min(170px, 20vh) !important;

  object-fit: contain !important;

  margin: 0 auto !important;
}

/* 沒有圖片時，強制不要顯示破圖小圖示 */
#clueImage[src=""],
#clueImage:not([src]) {
  display: none !important;
}

/* 筆記頁不顯示圖片 */
.clue-page.note-page #clueImage {
  display: none !important;
}

/* 人物關係圖可以大一點 */
.clue-page.relationship-page .clue-image {
  max-width: min(620px, 68vw) !important;
  max-height: min(300px, 36vh) !important;
}

/* 說明文字限制在頁面內 */
.clue-description {
  width: min(760px, 92%) !important;
  max-height: 120px !important;

  overflow: hidden !important;

  margin: 0 auto !important;

  font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.65 !important;
  text-align: center !important;
}

/* 筆記頁文字可以比較大，但不能超出去 */
.clue-page.note-page .clue-description {
  max-height: 100% !important;

  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.9 !important;
}

/* 翻頁按鈕固定第四列 */
.notebook-controls {
  grid-row: 4 !important;

  width: 100% !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  position: relative !important;
  z-index: 10 !important;

  opacity: 1 !important;
  transform: none !important;
}

/* 上一頁 / 下一頁按鈕 */
.notebook-page-button {
  min-width: 130px !important;
  height: 46px !important;

  padding: 8px 18px !important;

  font-size: 18px !important;
  line-height: 1.2 !important;
}

/* 頁碼固定中間 */
.clue-page-counter {
  min-width: 100px !important;

  text-align: center !important;
  font-size: 18px !important;
}

/* 關閉 X 永遠在最上層 */
.close-notebook-button {
  position: absolute !important;
  top: 18px !important;
  right: 22px !important;

  z-index: 30 !important;

  opacity: 1 !important;
  transform: none !important;
}

/* 封面動畫不要擋住內容 */
.notebook-cover {
  pointer-events: none !important;
}

/* ================================================= */
/* 調查筆記本：最終版 V2 */
/* 小標題、左圖右文、隱藏分類行、避免重疊 */
/* ================================================= */

/* 筆記本主體 */
.notebook-panel {
  width: min(980px, 88vw) !important;
  height: min(660px, 82vh) !important;
  min-height: 0 !important;

  padding: 20px 38px 24px 38px !important;

  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) 58px !important;
  row-gap: 12px !important;

  overflow: hidden !important;
  position: relative !important;
}

/* 調查筆記本標題：縮小 */
.notebook-title {
  grid-row: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: clamp(30px, 3.4vw, 42px) !important;
  line-height: 1.1 !important;
  letter-spacing: 4px !important;

  text-align: center !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 頁籤 */
.notebook-tabs {
  grid-row: 2 !important;

  width: 100% !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;

  gap: 12px !important;

  margin: 0 !important;
  padding: 0 !important;

  position: relative !important;
  z-index: 5 !important;
}

.notebook-tab {
  margin: 0 !important;
  transform: none !important;

  font-size: 17px !important;
  padding: 9px 22px !important;
}

/* 內容頁 */
.clue-page {
  grid-row: 3 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 20px 32px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow: hidden !important;

  position: relative !important;
  z-index: 1 !important;
}

/* 不再顯示「關鍵證據-1 / 次要證據-4 / 筆記」那一行 */
.clue-type-label {
  display: none !important;
}

/* 標題區 */
.clue-header {
  flex: 0 0 auto !important;

  margin: 0 0 14px 0 !important;
  padding: 0 !important;

  text-align: center !important;
}

/* 頁面標題：比之前小 */
.clue-page-title {
  margin: 0 !important;

  font-size: clamp(28px, 3.3vw, 40px) !important;
  line-height: 1.2 !important;
  letter-spacing: 3px !important;
}

/* 內容區共用 */
.clue-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  width: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
}

/* ========================= */
/* 證據頁：左圖右文 */
/* ========================= */

.clue-page.evidence-page .clue-content {
  flex-direction: row !important;
  gap: 34px !important;
}

/* 證據圖片固定在左側 */
.clue-page.evidence-page .clue-image {
  flex: 0 0 260px !important;

  width: 260px !important;
  height: 190px !important;

  max-width: 260px !important;
  max-height: 190px !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 !important;

  border-radius: 12px !important;
  border: 2px solid rgba(92, 59, 30, 0.45) !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
}

/* 證據說明固定在右側 */
.clue-page.evidence-page .clue-description {
  flex: 1 1 auto !important;

  width: auto !important;
  max-width: 520px !important;
  max-height: 210px !important;

  margin: 0 !important;

  overflow: hidden !important;

  font-size: clamp(18px, 1.7vw, 22px) !important;
  line-height: 1.75 !important;
  text-align: left !important;
}

/* ========================= */
/* 筆記頁：只有文字，置中但縮小 */
/* ========================= */

.clue-page.note-page .clue-content {
  flex-direction: column !important;
  justify-content: center !important;
}

.clue-page.note-page .clue-image {
  display: none !important;
}

.clue-page.note-page .clue-description {
  width: min(820px, 92%) !important;
  max-width: 820px !important;
  max-height: 100% !important;

  margin: 0 auto !important;

  overflow: hidden !important;

  font-size: clamp(20px, 2vw, 26px) !important;
  line-height: 1.9 !important;
  text-align: center !important;
}

/* ========================= */
/* 人物關係圖頁 */
/* ========================= */

.clue-page.relationship-page .clue-content {
  flex-direction: column !important;
  justify-content: center !important;
}

.clue-page.relationship-page .clue-image {
  width: auto !important;
  height: auto !important;

  max-width: min(680px, 70vw) !important;
  max-height: min(330px, 38vh) !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

.clue-page.relationship-page .clue-description {
  display: none !important;
}

/* ========================= */
/* 未解鎖頁：不顯示破圖 */
/* ========================= */

#clueImage[src=""],
#clueImage:not([src]) {
  display: none !important;
}

/* 如果 JS 有把圖片 display:block，未解鎖頁也強制隱藏 */
.clue-page:not(.evidence-page):not(.relationship-page) #clueImage {
  display: none !important;
}

/* ========================= */
/* 底部按鈕固定 */
/* ========================= */

.notebook-controls {
  grid-row: 4 !important;

  width: 100% !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  position: relative !important;
  z-index: 10 !important;

  opacity: 1 !important;
  transform: none !important;
}

.notebook-page-button {
  min-width: 130px !important;
  height: 46px !important;

  padding: 8px 18px !important;

  font-size: 18px !important;
  line-height: 1.2 !important;
}

.clue-page-counter {
  min-width: 100px !important;

  text-align: center !important;
  font-size: 18px !important;
}

/* 關閉 X */
.close-notebook-button {
  position: absolute !important;
  top: 18px !important;
  right: 22px !important;

  z-index: 30 !important;

  opacity: 1 !important;
  transform: none !important;
}

/* ================================================= */
/* 調查筆記本：內頁標題縮小 */
/* ================================================= */

.clue-page-title {
  font-size: clamp(24px, 2.6vw, 34px) !important;
  line-height: 1.25 !important;
  letter-spacing: 2px !important;

  margin: 0 !important;
}

/* 如果標題很長，避免撐太大或擠到內容 */
.clue-header {
  margin-bottom: 12px !important;
}

/* 筆記頁的標題也一起縮小 */
.clue-page.note-page .clue-page-title {
  font-size: clamp(24px, 2.6vw, 34px) !important;
}

/* 證據頁的標題也一起縮小 */
.clue-page.evidence-page .clue-page-title {
  font-size: clamp(24px, 2.6vw, 34px) !important;
}

/* ================================================= */
/* 證據彈窗：統一所有物件圖片大小 */
/* ================================================= */

/* 展開後：左圖右文版面固定 */
.evidence-card.detail-open .evidence-content {
  display: grid !important;
  grid-template-columns: 360px minmax(0, 1fr) !important;
  column-gap: 42px !important;
  align-items: center !important;
}

/* 左側圖片區固定大小 */
.evidence-card.detail-open .evidence-image-area {
  width: 360px !important;
  height: 360px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 所有證據圖片都放進固定框內 */
.evidence-card.detail-open #evidenceImage {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

/* 右側說明文字區固定，不被圖片影響 */
.evidence-card.detail-open .evidence-reading-panel {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  padding: 24px 30px !important;
}

/* ====================================== */
/* 證據彈窗：整體卡片 */
/* ====================================== */
.evidence-card {
  width: min(1280px, 92vw);
  max-height: 88vh;
  overflow-y: auto;

  background: #efe4cf;
  border-radius: 34px;
  padding: 28px 38px 34px;
  box-sizing: border-box;
}

/* 上方類型 / 標題 */
.evidence-header {
  text-align: center;
  margin-bottom: 26px;
}

.evidence-type {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  background: #7b4b1f;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 18px;
}

.evidence-title {
  margin: 0;
  font-size: 56px;
  font-weight: 800;
  color: #2f2218;
  line-height: 1.2;
}

.evidence-hint {
  margin-top: 12px;
  font-size: 22px;
  color: #9b6a34;
}

/* ====================================== */
/* 中間主內容：左圖右文 */
/* ====================================== */
.evidence-content {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
}

/* 左邊圖片區 */
.evidence-image-area {
  width: 300px;
  height: 420px;

  display: flex;
  justify-content: center;
  align-items: center;

  align-self: center;
}

/* 統一圖片顯示方式 */
.evidence-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 右欄：文字 + 關閉按鈕 */
.evidence-right-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  min-width: 0;
}

/* 右側文字框 */
.evidence-reading-panel {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 28px;
  padding: 28px 34px;
  box-sizing: border-box;
  min-height: 250px;
}

/* 說明文字 */
.evidence-description {
  margin: 0;
  font-size: 26px;
  line-height: 1.9;
  color: #4a3727;
}

/* 日記 / 書信區塊 */
.evidence-diary-block {
  margin-top: 24px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 24px;
  padding: 22px 26px;
  border-left: 8px solid #b2772d;
  box-sizing: border-box;
}

.evidence-diary-block h4 {
  margin: 0 0 16px 0;
  font-size: 28px;
  color: #8a5a24;
}

#evidenceDiaryText {
  margin: 0;
  font-size: 24px;
  line-height: 1.8;
  color: #4a3727;
}

/* 上一頁 / 下一頁 */
.evidence-diary-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  gap: 18px;
}

.evidence-diary-page-button {
  min-width: 126px;
  height: 58px;
  border: none;
  border-radius: 16px;
  background: #7b4b1f;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.evidence-diary-page-button:disabled {
  background: #cbb9a4;
  cursor: default;
}

.evidence-diary-counter {
  font-size: 22px;
  font-weight: 700;
  color: #7b4b1f;
}

/* 關閉提示 */
.evidence-close-hint {
  margin-top: 14px;
  font-size: 18px;
  color: #9b6a34;
  display: none;
}

/* ====================================== */
/* 關閉按鈕：固定在右欄下方 */
/* ====================================== */
.evidence-action-row {
  display: flex;
  justify-content: flex-start;
}

.close-evidence-button {
  min-width: 168px;
  height: 74px;
  border: none;
  border-radius: 22px;
  background: #7b4b1f;
  color: #ffffff;
  font-size: 26px;
  font-weight: 800;
  cursor: pointer;
}

/* ====================================== */
/* 單張圖物件 / 展開後共用 */
/* ====================================== */
.evidence-card.detail-open .evidence-content {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
}

/* 書信可稍微加寬右欄 */
.evidence-card.letter-evidence .evidence-content {
  grid-template-columns: 320px minmax(0, 1fr);
}

/* ================================================= */
/* 證據彈窗：最終穩定版 */
/* 左圖右文，關閉按鈕固定在右欄下方 */
/* ================================================= */

.evidence-card {
  width: min(1080px, 92vw) !important;
  height: min(660px, 86vh) !important;
  max-height: none !important;

  padding: 24px 42px 28px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

.evidence-header {
  flex: 0 0 auto !important;

  margin-bottom: 18px !important;

  text-align: center !important;
}

.evidence-type {
  padding: 8px 24px !important;
  margin-bottom: 12px !important;

  font-size: 18px !important;
}

.evidence-title {
  margin: 0 !important;

  font-size: clamp(30px, 3.4vw, 44px) !important;
  line-height: 1.15 !important;
}

.evidence-hint {
  margin-top: 8px !important;

  font-size: 17px !important;
}

/* 主內容：固定左圖右文 */
.evidence-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  width: 100% !important;

  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  column-gap: 56px !important;

  align-items: center !important;

  overflow: hidden !important;
}

/* 左側圖片區固定 */
.evidence-image-area {
  width: 300px !important;
  height: 350px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 圖片統一放進左側框內 */
.evidence-image,
#evidenceImage {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

/* 右欄：上面文字，下面關閉 */
.evidence-right-column {
  min-width: 0 !important;
  height: 100% !important;

  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  row-gap: 18px !important;

  align-items: stretch !important;
}

/* 右側閱讀框 */
.evidence-reading-panel {
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;

  padding: 24px 30px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 說明文字 */
.evidence-description {
  margin: 0 0 16px 0 !important;

  font-size: clamp(18px, 1.7vw, 23px) !important;
  line-height: 1.85 !important;

  text-align: left !important;
}

/* 書信 / 日記內容區 */
.evidence-diary-block {
  margin-top: 18px !important;
  padding: 18px 22px !important;

  max-height: 260px !important;
  overflow: hidden !important;

  box-sizing: border-box !important;
}

.evidence-diary-block h4 {
  margin: 0 0 12px 0 !important;

  font-size: 24px !important;
}

#evidenceDiaryText {
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.75 !important;
}

/* 書信上一頁 / 下一頁 */
.evidence-diary-controls {
  margin-top: 16px !important;

  display: flex;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}

.evidence-diary-page-button {
  min-width: 116px !important;
  height: 50px !important;

  font-size: 18px !important;
}

/* 關閉按鈕列 */
.evidence-action-row {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

/* 關閉按鈕不要再亂飛 */
.close-evidence-button {
  position: static !important;
  transform: none !important;

  min-width: 150px !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 30px !important;

  border: none !important;
  border-radius: 18px !important;

  background-color: #7b4b1f !important;
  color: #ffffff !important;

  font-size: 24px !important;
  font-weight: 800 !important;

  cursor: pointer !important;
}

/* 書信頁不要另外用舊比例覆蓋 */
.evidence-card.letter-evidence .evidence-content,
.evidence-card.detail-open.letter-evidence .evidence-content {
  grid-template-columns: 300px minmax(0, 1fr) !important;
  column-gap: 56px !important;
}

/* 未展開封面也不要撐爆 */
.evidence-card:not(.detail-open) .evidence-content {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.evidence-card:not(.detail-open) .evidence-image-area {
  width: 260px !important;
  height: 330px !important;
}

.evidence-card:not(.detail-open) #evidenceImage {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ========================= */
/* 調查筆記按鈕：房間內常駐 */
/* ========================= */

.search-screen.active .notebook-button {
  display: flex !important;
}

.notebook-button {
  position: absolute !important;
  top: 24px !important;
  right: 70px !important;

  width: 86px !important;
  height: 96px !important;

  z-index: 70 !important;

  display: none;

  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
}

/* 證據彈窗打開時，不要把調查筆記按鈕變成彈窗內元素 */
.evidence-panel .notebook-button {
  display: none !important;
}

/* ================================================= */
/* 證據彈窗：參考圖排版版 */
/* 上方標籤＋標題／左圖右文／關閉在右側文字下方 */
/* ================================================= */

.evidence-panel {
  z-index: 9000 !important;
}

/* 整張證據卡片 */
.evidence-card {
  width: min(1120px, 92vw) !important;
  height: min(640px, 84vh) !important;

  padding: 28px 52px 34px !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  row-gap: 30px !important;

  overflow: hidden !important;

  background: #f3ead7 !important;
  border-radius: 34px !important;
}

/* 上方：類型＋名稱 */
.evidence-header {
  grid-row: 1 !important;

  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.evidence-type {
  display: inline-block !important;

  padding: 9px 28px !important;
  margin-bottom: 14px !important;

  background-color: #7a461d !important;
  color: #ffffff !important;

  border-radius: 999px !important;

  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
}

.evidence-title {
  margin: 0 !important;

  font-size: clamp(34px, 4vw, 50px) !important;
  line-height: 1.15 !important;
  letter-spacing: 5px !important;

  color: #2f241d !important;
}

.evidence-hint {
  margin-top: 10px !important;
  font-size: 18px !important;
  color: #9b6a34 !important;
}

/* 中間：左圖片、右文字 */
.evidence-content {
  grid-row: 2 !important;

  width: 100% !important;
  min-height: 0 !important;

  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  column-gap: 64px !important;

  align-items: start !important;

  padding: 0 54px !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
}

/* 左側圖片區：固定大小 */
.evidence-image-area {
  width: 280px !important;
  height: 310px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  align-self: center !important;

  overflow: hidden !important;
}

/* 圖片統一放入固定框 */
.evidence-image,
#evidenceImage {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

/* 右側欄：文字框＋關閉按鈕 */
.evidence-right-column {
  width: 100% !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-rows: 260px 64px !important;
  row-gap: 18px !important;

  align-self: center !important;

  overflow: visible !important;
}

/* 右側說明框 */
.evidence-reading-panel {
  width: 100% !important;
  height: 260px !important;
  min-height: 0 !important;
  max-height: 260px !important;

  padding: 30px 38px !important;
  box-sizing: border-box !important;

  background: rgba(255, 255, 255, 0.34) !important;
  border-radius: 28px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  overflow: hidden !important;
}

/* 一般說明文字 */
.evidence-description {
  margin: 0 !important;

  font-size: clamp(20px, 1.8vw, 25px) !important;
  line-height: 1.9 !important;

  color: #4a3727 !important;
  text-align: left !important;
}

/* 書信 / 日記內容區：留在右側說明框內 */
.evidence-diary-block {
  margin-top: 16px !important;
  padding: 16px 22px !important;

  max-height: 172px !important;
  overflow: hidden !important;

  background: rgba(255, 255, 255, 0.62) !important;
  border-left: 8px solid #b2772d !important;
  border-radius: 22px !important;

  box-sizing: border-box !important;
}

.evidence-diary-block h4 {
  margin: 0 0 10px 0 !important;

  font-size: 22px !important;
  color: #8a5a24 !important;
}

#evidenceDiaryText {
  margin: 0 !important;

  font-size: clamp(15px, 1.22vw, 18px) !important;
  line-height: 1.65 !important;

  color: #4a3727 !important;
}

/* 書信 / 日記的上一頁下一頁：只在右側框內 */
.evidence-diary-controls {
  margin-top: 12px !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
}

.evidence-diary-page-button {
  min-width: 104px !important;
  height: 44px !important;

  border: none !important;
  border-radius: 14px !important;

  background: #7a461d !important;
  color: #ffffff !important;

  font-size: 17px !important;
  font-weight: 800 !important;

  cursor: pointer !important;
}

.evidence-diary-page-button:disabled {
  background: #d4c6b7 !important;
  color: #f7f2ea !important;
  cursor: default !important;
}

.evidence-diary-counter {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #7a461d !important;
}

/* 關閉按鈕列：在右側文字下方 */
.evidence-action-row {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;

  height: 64px !important;
}

/* 關閉按鈕不要再被 absolute 影響 */
.close-evidence-button {
  position: static !important;
  transform: none !important;

  min-width: 150px !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 32px !important;

  border: none !important;
  border-radius: 18px !important;

  background-color: #7a461d !important;
  color: #ffffff !important;

  font-size: 24px !important;
  font-weight: 900 !important;

  cursor: pointer !important;
}

/* 書信頁、大哥日記頁也維持同一套外部排版 */
.evidence-card.letter-evidence .evidence-content,
.evidence-card.detail-open.letter-evidence .evidence-content,
.evidence-card.detail-open .evidence-content {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  column-gap: 64px !important;
  align-items: start !important;
}

/* 未展開封面：維持置中，不套右欄排版 */
.evidence-card:not(.detail-open) .evidence-content {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 0 !important;
}

.evidence-card:not(.detail-open) .evidence-image-area {
  width: 270px !important;
  height: 340px !important;
}

.evidence-card:not(.detail-open) .evidence-right-column {
  display: none !important;
}

/* ================================================= */
/* 證據彈窗：參考圖排版修正版 V3 */
/* 修正：關閉按鈕被裁掉、書信下一頁按鈕不見 */
/* ================================================= */

.evidence-card {
  width: min(1120px, 92vw) !important;
  height: min(700px, 92vh) !important;

  padding: 22px 52px 28px !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  row-gap: 14px !important;

  overflow: hidden !important;

  background: #f3ead7 !important;
  border-radius: 34px !important;
}

/* 上方標籤與標題稍微壓低高度 */
.evidence-header {
  grid-row: 1 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.evidence-type {
  display: inline-block !important;

  padding: 8px 26px !important;
  margin-bottom: 10px !important;

  background-color: #7a461d !important;
  color: #ffffff !important;

  border-radius: 999px !important;

  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
}

.evidence-title {
  margin: 0 !important;

  font-size: clamp(32px, 3.6vw, 46px) !important;
  line-height: 1.12 !important;
  letter-spacing: 5px !important;

  color: #2f241d !important;
}

.evidence-hint {
  margin-top: 8px !important;
  font-size: 17px !important;
  color: #9b6a34 !important;
}

/* 中間：左圖右文 */
.evidence-content,
.evidence-card.detail-open .evidence-content,
.evidence-card.letter-evidence .evidence-content,
.evidence-card.detail-open.letter-evidence .evidence-content {
  grid-row: 2 !important;

  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;

  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  column-gap: 64px !important;

  align-items: center !important;

  padding: 0 54px !important;
  box-sizing: border-box !important;

  overflow: visible !important;
}

/* 左側圖片區 */
.evidence-image-area {
  width: 280px !important;
  height: 330px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  align-self: center !important;

  overflow: hidden !important;
}

.evidence-image,
#evidenceImage {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

/* 右側欄：說明框 + 關閉按鈕 */
.evidence-right-column {
  width: 100% !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-rows: minmax(0, auto) auto !important;
  row-gap: 14px !important;

  align-self: center !important;

  overflow: visible !important;
}

/* 右側說明框 */
.evidence-reading-panel {
  width: 100% !important;

  min-height: 230px !important;
  max-height: 365px !important;

  padding: 26px 34px !important;
  box-sizing: border-box !important;

  background: rgba(255, 255, 255, 0.34) !important;
  border-radius: 28px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  overflow: hidden !important;
}

.evidence-description {
  margin: 0 !important;

  font-size: clamp(19px, 1.7vw, 24px) !important;
  line-height: 1.8 !important;

  color: #4a3727 !important;
  text-align: left !important;
}

/* 書信 / 日記內容區：翻頁按鈕保留在框內 */
.evidence-diary-block {
  margin-top: 14px !important;
  padding: 16px 22px !important;

  height: 230px !important;
  max-height: 230px !important;

  background: rgba(255, 255, 255, 0.62) !important;
  border-left: 8px solid #b2772d !important;
  border-radius: 22px !important;

  box-sizing: border-box !important;

  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;

  overflow: hidden !important;
}

.evidence-diary-block h4 {
  margin: 0 0 8px 0 !important;

  font-size: 22px !important;
  color: #8a5a24 !important;
}

#evidenceDiaryText {
  margin: 0 !important;

  font-size: clamp(15px, 1.2vw, 18px) !important;
  line-height: 1.6 !important;

  color: #4a3727 !important;

  overflow: hidden !important;
}

/* 上一頁 / 下一頁：不要再被裁掉 */
.evidence-diary-controls {
  margin-top: 10px !important;

  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;

  flex-shrink: 0 !important;
}

.evidence-diary-page-button {
  min-width: 104px !important;
  height: 42px !important;

  border: none !important;
  border-radius: 14px !important;

  background: #7a461d !important;
  color: #ffffff !important;

  font-size: 17px !important;
  font-weight: 800 !important;

  cursor: pointer !important;
}

.evidence-diary-page-button:disabled {
  background: #d4c6b7 !important;
  color: #f7f2ea !important;
  cursor: default !important;
}

.evidence-diary-counter {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #7a461d !important;
}

/* 關閉按鈕：固定在右側說明框下方 */
.evidence-action-row {
  height: 58px !important;

  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;

  overflow: visible !important;
}

.close-evidence-button {
  position: static !important;
  transform: none !important;

  min-width: 150px !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 32px !important;

  border: none !important;
  border-radius: 18px !important;

  background-color: #7a461d !important;
  color: #ffffff !important;

  font-size: 24px !important;
  font-weight: 900 !important;

  cursor: pointer !important;
}

/* 未展開封面：維持置中 */
.evidence-card:not(.detail-open) .evidence-content {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 0 !important;
}

.evidence-card:not(.detail-open) .evidence-image-area {
  width: 270px !important;
  height: 340px !important;
}

.evidence-card:not(.detail-open) .evidence-right-column {
  display: none !important;
}

/* ================================================= */
/* 證據彈窗：真正固定版 V4 */
/* 圖片只佔說明框高度，不進入關閉按鈕列 */
/* 書信/日記翻頁按鈕固定在右側框內 */
/* ================================================= */

.evidence-card {
  width: min(1120px, 92vw) !important;
  height: min(660px, 88vh) !important;
  padding: 24px 54px 30px !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  row-gap: 26px !important;

  overflow: hidden !important;
  background: #f3ead7 !important;
  border-radius: 34px !important;
}

/* 上方標籤與標題 */
.evidence-header {
  grid-row: 1 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.evidence-type {
  display: inline-block !important;
  padding: 8px 28px !important;
  margin-bottom: 12px !important;

  background: #7a461d !important;
  color: #fff !important;
  border-radius: 999px !important;

  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
}

.evidence-title {
  margin: 0 !important;
  font-size: clamp(34px, 3.8vw, 50px) !important;
  line-height: 1.15 !important;
  letter-spacing: 5px !important;
  color: #2f241d !important;
}

.evidence-hint {
  margin-top: 8px !important;
  font-size: 17px !important;
}

/* 外層內容：兩欄 */
.evidence-content,
.evidence-card.detail-open .evidence-content,
.evidence-card.letter-evidence .evidence-content,
.evidence-card.detail-open.letter-evidence .evidence-content {
  grid-row: 2 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  column-gap: 64px !important;

  align-items: start !important;

  padding: 0 72px !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
}

/* 左邊圖片：只跟右邊說明框同高，不包含關閉按鈕 */
.evidence-image-area {
  width: 280px !important;
  height: 270px !important;

  align-self: start !important;
  margin-top: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

.evidence-image,
#evidenceImage {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 右欄：第一列說明框，第二列關閉按鈕 */
.evidence-right-column {
  width: 100% !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-rows: 270px 64px !important;
  row-gap: 18px !important;

  align-self: start !important;

  overflow: visible !important;
}

/* 右側說明框 */
.evidence-reading-panel {
  width: 100% !important;
  height: 270px !important;
  min-height: 270px !important;
  max-height: 270px !important;

  padding: 26px 34px !important;
  box-sizing: border-box !important;

  background: rgba(255, 255, 255, 0.34) !important;
  border-radius: 28px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  overflow: hidden !important;
}

/* 一般說明文字 */
.evidence-description {
  margin: 0 !important;

  font-size: clamp(19px, 1.7vw, 24px) !important;
  line-height: 1.85 !important;

  color: #4a3727 !important;
  text-align: left !important;
}

/* 有書信/日記時，說明框不要置中，讓內容從上往下排 */
.evidence-reading-panel:has(.evidence-diary-block[style*="block"]) {
  justify-content: flex-start !important;
}

/* 書信/日記區塊：固定三列，翻頁按鈕永遠露出 */
.evidence-diary-block {
  margin-top: 14px !important;
  padding: 16px 22px !important;

  height: 178px !important;
  max-height: 178px !important;

  background: rgba(255, 255, 255, 0.62) !important;
  border-left: 8px solid #b2772d !important;
  border-radius: 22px !important;

  box-sizing: border-box !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;

  overflow: hidden !important;
}

/* 書信標題 */
.evidence-diary-block h4 {
  margin: 0 0 8px 0 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  color: #8a5a24 !important;
}

/* 書信文字：只佔中間區，不吃掉翻頁按鈕 */
#evidenceDiaryText {
  margin: 0 !important;

  font-size: clamp(14px, 1.12vw, 17px) !important;
  line-height: 1.55 !important;

  color: #4a3727 !important;

  overflow: hidden !important;
}

/* 翻頁按鈕：固定在書信框底部 */
.evidence-diary-controls {
  margin-top: 8px !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;

  min-height: 38px !important;
  flex-shrink: 0 !important;
}

.evidence-diary-page-button {
  min-width: 96px !important;
  height: 38px !important;

  border: none !important;
  border-radius: 12px !important;

  background: #7a461d !important;
  color: #fff !important;

  font-size: 16px !important;
  font-weight: 800 !important;

  cursor: pointer !important;
}

.evidence-diary-page-button:disabled {
  background: #d4c6b7 !important;
  color: #f7f2ea !important;
  cursor: default !important;
}

.evidence-diary-counter {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #7a461d !important;
}

/* 關閉按鈕列：只在右欄第二列 */
.evidence-action-row {
  height: 64px !important;

  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;

  overflow: visible !important;
}

/* 關閉按鈕不要 absolute，不准亂跑 */
.close-evidence-button {
  position: static !important;
  transform: none !important;

  min-width: 150px !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 32px !important;

  border: none !important;
  border-radius: 18px !important;

  background: #7a461d !important;
  color: #fff !important;

  font-size: 24px !important;
  font-weight: 900 !important;

  cursor: pointer !important;
}

/* 未展開封面狀態：只顯示封面圖片，不顯示右欄 */
.evidence-card:not(.detail-open) .evidence-content {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 0 !important;
}

.evidence-card:not(.detail-open) .evidence-image-area {
  width: 260px !important;
  height: 330px !important;
}

.evidence-card:not(.detail-open) .evidence-right-column {
  display: none !important;
}

/* ================================================= */
/* 證據彈窗：交作業穩定版 */
/* 圖片不進入關閉按鈕列；只有有 diaryPages / diaryContent 才顯示日記框 */
/* ================================================= */

#evidenceCard.evidence-card {
  width: min(1120px, 92vw) !important;
  height: min(660px, 88vh) !important;

  padding: 24px 54px 30px !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  row-gap: 24px !important;

  overflow: hidden !important;
  background: #f3ead7 !important;
  border-radius: 34px !important;
}

/* 上方標籤與標題 */
#evidenceCard .evidence-header {
  grid-row: 1 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#evidenceCard .evidence-type {
  display: inline-block !important;
  padding: 8px 28px !important;
  margin-bottom: 12px !important;

  background: #7a461d !important;
  color: #fff !important;
  border-radius: 999px !important;

  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
}

#evidenceCard .evidence-title {
  margin: 0 !important;

  font-size: clamp(34px, 3.8vw, 50px) !important;
  line-height: 1.15 !important;
  letter-spacing: 5px !important;

  color: #2f241d !important;
}

#evidenceCard .evidence-hint {
  margin-top: 8px !important;
  font-size: 17px !important;
}

/* ================================================= */
/* 展開後：真正固定成四格 */
/* 第 1 列：圖片 + 說明框 */
/* 第 2 列：空白 + 關閉按鈕 */
/* ================================================= */

#evidenceCard.detail-open .evidence-content,
#evidenceCard.detail-open.letter-evidence .evidence-content {
  grid-row: 2 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  grid-template-rows: 270px 64px !important;
  grid-template-areas:
    "image reading"
    ". action" !important;

  column-gap: 64px !important;
  row-gap: 18px !important;

  align-items: start !important;

  padding: 0 72px !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
}

/* 左圖：只在第一列，不會進入關閉按鈕那一列 */
#evidenceCard.detail-open .evidence-image-area {
  grid-area: image !important;

  width: 280px !important;
  height: 270px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

#evidenceCard.detail-open .evidence-image,
#evidenceCard.detail-open #evidenceImage {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  display: block !important;
  margin: 0 auto !important;
}

/* 讓右欄容器不要自己佔格子，讓裡面的閱讀框和按鈕進入主 grid */
#evidenceCard.detail-open .evidence-right-column {
  display: contents !important;
}

/* 右側說明框：固定在第一列 */
#evidenceCard.detail-open .evidence-reading-panel {
  grid-area: reading !important;

  width: 100% !important;
  height: 270px !important;
  min-height: 270px !important;
  max-height: 270px !important;

  padding: 26px 34px !important;
  box-sizing: border-box !important;

  background: rgba(255, 255, 255, 0.34) !important;
  border-radius: 28px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  overflow: hidden !important;
}

#evidenceCard.detail-open .evidence-description {
  margin: 0 !important;

  font-size: clamp(18px, 1.65vw, 23px) !important;
  line-height: 1.8 !important;

  color: #4a3727 !important;
  text-align: left !important;
}

/* ================================================= */
/* 日記 / 書信：預設完全隱藏 */
/* 沒有 diaryPages / diaryContent 的物件不准出現 */
/* ================================================= */

#evidenceCard .evidence-diary-block,
#evidenceCard .evidence-diary-controls {
  display: none !important;
}

/* 有內容時才顯示日記框 */
#evidenceCard.has-evidence-pages .evidence-reading-panel {
  justify-content: flex-start !important;
}

#evidenceCard.has-evidence-pages .evidence-description {
  font-size: clamp(16px, 1.25vw, 19px) !important;
  line-height: 1.6 !important;
  margin-bottom: 10px !important;
}

#evidenceCard.has-evidence-pages .evidence-diary-block {
  display: grid !important;

  grid-template-rows: auto minmax(0, 1fr) auto !important;

  height: 168px !important;
  max-height: 168px !important;

  margin-top: 8px !important;
  padding: 14px 20px !important;

  background: rgba(255, 255, 255, 0.62) !important;
  border-left: 8px solid #b2772d !important;
  border-radius: 20px !important;

  box-sizing: border-box !important;

  overflow: hidden !important;
}

#evidenceCard.has-evidence-pages .evidence-diary-block h4 {
  margin: 0 0 6px 0 !important;

  font-size: 21px !important;
  line-height: 1.2 !important;

  color: #8a5a24 !important;
}

#evidenceCard.has-evidence-pages #evidenceDiaryText {
  margin: 0 !important;

  font-size: clamp(13px, 1.05vw, 16px) !important;
  line-height: 1.5 !important;

  color: #4a3727 !important;

  overflow: hidden !important;
}

/* 只有兩頁以上才顯示上一頁 / 下一頁 */
#evidenceCard.has-multiple-pages .evidence-diary-controls {
  display: flex !important;

  margin-top: 8px !important;

  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;

  min-height: 36px !important;
}

#evidenceCard.has-multiple-pages .evidence-diary-page-button {
  min-width: 94px !important;
  height: 36px !important;

  border: none !important;
  border-radius: 12px !important;

  background: #7a461d !important;
  color: #fff !important;

  font-size: 15px !important;
  font-weight: 800 !important;

  cursor: pointer !important;
}

#evidenceCard.has-multiple-pages .evidence-diary-page-button:disabled {
  background: #d4c6b7 !important;
  color: #f7f2ea !important;
  cursor: default !important;
}

#evidenceCard.has-multiple-pages .evidence-diary-counter {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #7a461d !important;
}

/* ================================================= */
/* 關閉按鈕：固定在右欄第二列 */
/* ================================================= */

#evidenceCard.detail-open .evidence-action-row {
  grid-area: action !important;

  height: 64px !important;

  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;

  overflow: visible !important;
}

#evidenceCard.detail-open .close-evidence-button {
  position: static !important;
  transform: none !important;

  min-width: 150px !important;
  height: 58px !important;

  margin: 0 !important;
  padding: 0 32px !important;

  border: none !important;
  border-radius: 18px !important;

  background: #7a461d !important;
  color: #fff !important;

  font-size: 24px !important;
  font-weight: 900 !important;

  cursor: pointer !important;
}

/* ================================================= */
/* 未展開封面狀態：只顯示圖片，不顯示右欄 */
/* ================================================= */

#evidenceCard:not(.detail-open) .evidence-content {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 0 !important;
}

#evidenceCard:not(.detail-open) .evidence-image-area {
  width: 260px !important;
  height: 330px !important;
}

#evidenceCard:not(.detail-open) .evidence-right-column {
  display: none !important;
}

/* ================================================= */
/* 證據彈窗：關閉按鈕微縮，避免被切到 */
/* ================================================= */

#evidenceCard.detail-open .evidence-content,
#evidenceCard.detail-open.letter-evidence .evidence-content {
  grid-template-rows: 270px 54px !important;
  row-gap: 12px !important;
}

#evidenceCard.detail-open .evidence-action-row {
  height: 54px !important;
}

#evidenceCard.detail-open .close-evidence-button {
  min-width: 128px !important;
  height: 48px !important;

  padding: 0 24px !important;

  font-size: 21px !important;
  border-radius: 15px !important;
}

/* ================================================= */
/* 調查筆記本：筆記頁內容改成置左排版 */
/* ================================================= */

.clue-page.note-page .clue-content {
  align-items: flex-start !important;
  justify-content: center !important;
}

.clue-page.note-page .clue-description {
  width: min(820px, 88%) !important;
  max-width: 820px !important;

  text-align: left !important;

  font-size: clamp(20px, 2vw, 26px) !important;
  line-height: 1.9 !important;

  margin: 0 auto !important;
}

/* ========================= */
/* 教學內容畫面 */
/* ========================= */

.tutorial-screen {
  background:
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.35)),
    url("images/livingroom-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  justify-content: center;
  align-items: center;
}

.tutorial-card {
  width: min(980px, 86vw);
  max-height: 82vh;

  padding: 52px 70px 46px;

  background: #f3ead7;
  border-radius: 34px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.38);

  display: flex;
  flex-direction: column;
  align-items: center;

  box-sizing: border-box;
}

.tutorial-title {
  margin: 0 0 34px 0;

  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.2;
  letter-spacing: 6px;

  color: #2f241d;
  text-align: center;
}

.tutorial-text {
  width: 100%;
  max-height: 46vh;

  margin: 0 0 38px 0;

  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.9;
  letter-spacing: 1px;

  color: #3d2b1f;
  text-align: left;

  white-space: pre-line;
  overflow-y: auto;
}

.tutorial-done-button {
  min-width: 180px;
  height: 68px;

  border: none;
  border-radius: 20px;

  background: #7a461d;
  color: #ffffff;

  font-size: 28px;
  font-weight: 800;

  cursor: pointer;
}

.tutorial-done-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

/* ========================= */
/* 教學內容：翻頁按鈕 */
/* ========================= */

.tutorial-controls {
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  gap: 28px;
  margin-bottom: 28px;
}

.tutorial-page-button {
  min-width: 130px;
  height: 54px;

  border: none;
  border-radius: 16px;

  background: #7a461d;
  color: #ffffff;

  font-size: 22px;
  font-weight: 800;

  cursor: pointer;
}

.tutorial-page-button:disabled {
  background: #cbb9a4;
  color: #f7f2ea;
  cursor: default;
}

.tutorial-page-counter {
  min-width: 90px;

  text-align: center;

  font-size: 22px;
  font-weight: 800;
  color: #7a461d;
}

/* 閱讀完畢只在最後一頁顯示，由 JS 控制 */
.tutorial-done-button {
  display: none;
}

/* ========================= */
/* 教學內容：無卷軸，但按鈕固定不被擠掉 */
/* ========================= */

.tutorial-card {
  width: min(980px, 86vw) !important;
  height: min(680px, 84vh) !important;
  max-height: 84vh !important;

  padding: 46px 70px 44px !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  row-gap: 24px !important;

  align-items: center !important;
}

.tutorial-title {
  margin: 0 !important;

  font-size: clamp(42px, 5vw, 68px) !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

.tutorial-text {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;

  overflow: visible !important;

  margin: 0 !important;

  font-size: clamp(23px, 2.2vw, 32px) !important;
  line-height: 1.85 !important;

  text-align: left !important;
  white-space: pre-line !important;

  align-self: center !important;
}

.tutorial-controls {
  margin: 0 !important;
}

.tutorial-done-button {
  margin: 0 auto !important;
}

/* ========================= */
/* 教學內容：上一頁 / 下一頁按鈕縮小 */
/* ========================= */

.tutorial-page-button {
  min-width: 105px !important;
  height: 44px !important;

  padding: 6px 18px !important;

  font-size: 18px !important;
  border-radius: 13px !important;
}

.tutorial-page-counter {
  min-width: 70px !important;

  font-size: 18px !important;
}

.tutorial-controls {
  gap: 20px !important;
}

/* ========================= */
/* 右側常駐 ICON 按鈕：共用樣式 */
/* ========================= */

.side-icon-button {
  position: absolute;

  width: 86px;
  height: 96px;

  right: 70px;

  z-index: 70;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 6px;

  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;

  background: rgba(45, 45, 35, 0.78);
  color: #ffffff;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);

  cursor: pointer;
}

.side-icon-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
}

.side-icon-image {
  width: 34px;
  height: 34px;

  object-fit: contain;
}

.side-icon-text {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.1;
}

/* 調查筆記位置 */
.notebook-button {
  top: 24px !important;
  right: 70px !important;
}

/* 教學內容按鈕：放在調查筆記下方 */
.tutorial-open-button {
  top: 136px;
}

/* 搜索階段才顯示 */
.search-screen.active .side-icon-button {
  display: flex;
}

/* 非搜索階段預設不顯示 */
.side-icon-button {
  display: none;
}

/* ================================================= */
/* 右側小型功能按鈕列：教學內容 / 預留按鈕 */
/* ================================================= */

/* 小按鈕列：放在調查筆記下面 */
.side-mini-button-row {
  position: absolute;

  top: 136px;
  right: 70px;

  z-index: 70;

  display: none;

  flex-direction: row;
  gap: 10px;
}

/* 搜索階段才顯示 */
.search-screen.active .side-mini-button-row {
  display: flex;
}

/* 小方形按鈕 */
.side-mini-button {
  width: 34px;
  height: 34px;

  padding: 0;

  border: none;
  border-radius: 4px;

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* 左邊：教學內容 */
.tutorial-mini-button {
  background: #ff3333;
}

/* 右邊：之後預留 */
.future-mini-button {
  background: #39aeea;
}

/* 小 icon 圖片 */
.side-mini-icon {
  width: 22px;
  height: 22px;

  object-fit: contain;
  display: block;
}

/* hover 效果 */
.side-mini-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* ================================================= */
/* 右側小按鈕：人物關係圖 */
/* ================================================= */

.relationship-mini-button {
  background: #39aeea;
}

/* ================================================= */
/* 人物關係圖快速查看彈窗 */
/* ================================================= */

.relationship-map-overlay {
  position: absolute;
  inset: 0;

  z-index: 8500;

  display: none;
  justify-content: center;
  align-items: center;

  background: rgba(0, 0, 0, 0.42);
}

.relationship-map-overlay.open {
  display: flex;
}

.relationship-map-card {
  width: min(980px, 88vw);
  height: min(680px, 86vh);

  padding: 36px 48px 34px;
  box-sizing: border-box;

  background: #f3ead7;
  border-radius: 34px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36);

  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: 24px;

  overflow: hidden;
}

.relationship-map-title {
  margin: 0;

  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.15;
  letter-spacing: 5px;

  color: #2f241d;
  text-align: center;
}

.relationship-map-image-area {
  min-height: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
}

.relationship-map-image {
  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  object-fit: contain;
  display: block;
}

.relationship-map-close-button {
  justify-self: center;

  min-width: 160px;
  height: 62px;

  border: none;
  border-radius: 18px;

  background: #7a461d;
  color: #ffffff;

  font-size: 26px;
  font-weight: 900;

  cursor: pointer;
}

.relationship-map-close-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

/* ================================================= */
/* 人物關係圖快速查看：拿掉標題、放大圖片 */
/* ================================================= */

/* 隱藏「人物關係圖」五個字 */
.relationship-map-title {
  display: none !important;
}

/* 彈窗內容改成：圖片 + 關閉按鈕 */
.relationship-map-card {
  width: min(1080px, 90vw) !important;
  height: min(720px, 88vh) !important;

  padding: 34px 48px 36px !important;

  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  row-gap: 26px !important;

  box-sizing: border-box !important;
}

/* 圖片區放大 */
.relationship-map-image-area {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 人物關係圖本體放大 */
.relationship-map-image {
  max-width: 96% !important;
  max-height: 96% !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;
  display: block !important;
}

/* 關閉按鈕維持在下方 */
.relationship-map-close-button {
  justify-self: center !important;

  min-width: 150px !important;
  height: 58px !important;

  font-size: 24px !important;
}

/* ================================================= */
/* 人物關係圖快速查看：關閉改右上角叉叉，圖片放大 */
/* ================================================= */

/* 彈窗卡片：不再預留下方關閉按鈕空間 */
.relationship-map-card {
  position: relative !important;

  width: min(1120px, 92vw) !important;
  height: min(740px, 90vh) !important;

  padding: 34px 46px 34px !important;
  box-sizing: border-box !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 圖片區吃滿主要空間 */
.relationship-map-image-area {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 人物關係圖放大 */
.relationship-map-image {
  max-width: 108% !important;
  max-height: 108% !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;
  display: block !important;
}

/* 原本的「關閉」按鈕改成右上角叉叉 */
.relationship-map-close-button {
  position: absolute !important;
  top: 24px !important;
  right: 28px !important;

  width: 58px !important;
  height: 58px !important;
  min-width: 0 !important;

  padding: 0 !important;

  border: none !important;
  border-radius: 50% !important;

  background: #7a461d !important;
  color: #ffffff !important;

  font-size: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  cursor: pointer !important;
  z-index: 20 !important;
}

/* 用 CSS 產生叉叉，不用改 HTML 也可以 */
.relationship-map-close-button::before {
  content: "×";

  font-size: 42px;
  font-weight: 900;
  line-height: 1;

  transform: translateY(-2px);
}

.relationship-map-close-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25) !important;
}

/* ========================= */
/* 電報放大鏡：中心跟隨滑鼠 */
/* ========================= */

.telegram-magnifier {
  position: fixed !important;

  width: 150px !important;
  height: 150px !important;

  border-radius: 50% !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;

  background-repeat: no-repeat !important;
  background-color: rgba(255, 255, 255, 0.35) !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;

  pointer-events: none !important;
  z-index: 9999 !important;

  transform: translate(-50%, -50%) !important;
}

/* ========================= */
/* 電報放大鏡：穩定跟隨滑鼠版 */
/* ========================= */

.telegram-magnifier {
  position: fixed !important;

  left: 0 !important;
  top: 0 !important;

  width: 150px !important;
  height: 150px !important;

  border-radius: 50% !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;

  background-repeat: no-repeat !important;
  background-color: rgba(255, 255, 255, 0.35) !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;

  pointer-events: none !important;
  z-index: 9999 !important;

  transform:
    translate(var(--lens-x, -9999px), var(--lens-y, -9999px))
    translate(-50%, -50%) !important;
}

/* ========================= */
/* 電報放大鏡：游標正下方版 */
/* ========================= */

#telegramMagnifier {
  position: fixed !important;

  left: 0 !important;
  top: 0 !important;

  width: 150px !important;
  height: 150px !important;

  border-radius: 50% !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;

  background-repeat: no-repeat !important;
  background-color: rgba(255, 255, 255, 0.35) !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;

  pointer-events: none !important;
  z-index: 99999 !important;

  transform:
    translate3d(var(--lens-x, -9999px), var(--lens-y, -9999px), 0)
    translate(-50%, -50%) !important;
}

/* ========================= */
/* 電報放大鏡：最終穩定版 */
/* ========================= */

#telegramMagnifier {
  position: fixed !important;

  width: 150px !important;
  height: 150px !important;

  border-radius: 50% !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;

  background-repeat: no-repeat !important;
  background-color: rgba(255, 255, 255, 0.35) !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;

  pointer-events: none !important;
  z-index: 99999 !important;

  transform: translate(-50%, -50%) !important;
}

/* ========================= */
/* 電報放大鏡：最終穩定版 */
/* ========================= */

#telegramMagnifier {
  position: fixed !important;

  width: 150px !important;
  height: 150px !important;

  border-radius: 50% !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;

  background-repeat: no-repeat !important;
  background-color: rgba(255, 255, 255, 0.35) !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;

  pointer-events: none !important;
  z-index: 99999 !important;

  transform: translate(-50%, -50%) !important;
}

/* ========================= */
/* 台所：可調查物件熱區 */
/* ========================= */

/* 右邊：高型菜櫥 */
.hotspot-kitchen-cupboard {
  left: 93%;
  top: 74%;

  width: 22px;
  height: 22px;
}

/* 左邊：木製冰箱 */
.hotspot-kitchen-icebox {
  left: 7%;
  top: 68%;

  width: 22px;
  height: 22px;
}

/* ========================= */
/* 風呂：可調查物件熱區 */
/* ========================= */

/* 中間偏下：打水桶 */
.hotspot-bath-bucket {
  left: 45%;
  top: 73%;

  width: 22px;
  height: 22px;
}

/* 左側：浴缸 */
.hotspot-bath-tub {
  left: 20%;
  top: 70%;

  width: 22px;
  height: 22px;
}

/* ========================= */
/* 地圖房間按鈕：滑鼠提示文字 */
/* ========================= */

.map-room[data-tooltip] {
  position: absolute;
}

/* 預設隱藏提示框 */
.map-room[data-tooltip]::after {
  content: attr(data-tooltip);

  position: absolute;
  left: 50%;
  top: calc(100% + 8px);

  transform: translateX(-50%);

  padding: 6px 14px;

  background-color: rgba(0, 0, 0, 0.78);
  color: #ffffff;

  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;

  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;

  white-space: nowrap;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  z-index: 20;

  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* 滑鼠移上去時顯示 */
.map-room[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;

  transform: translateX(-50%) translateY(2px);
}

/* ========================= */
/* 地圖房間按鈕：hover 提示框縮小版 */
/* ========================= */

.map-room[data-tooltip]::after {
  padding: 4px 9px !important;

  font-size: 12px !important;
  font-weight: bold !important;
  letter-spacing: 0.5px !important;

  border-radius: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;

  top: calc(100% + 5px) !important;
}

/* ================================================= */
/* 人物關係圖：避免圖片上方被裁切 */
/* 直接貼在 style.css 最下面 */
/* ================================================= */

.relationship-map-card {
  padding: 42px 56px 42px !important;
  overflow: hidden !important;
}

.relationship-map-image-area {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

.relationship-map-image {
  max-width: 94% !important;
  max-height: 94% !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;
  display: block !important;
}

/* ========================= */
/* 語言 / 時代背景說明畫面 */
/* ========================= */

.language-notice-screen {
  background: #000000;
  color: #ffffff;

  justify-content: center;
  align-items: center;
}

.language-notice-content {
  width: min(82vw, 900px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.language-notice-content p {
  font-size: 28px;
  line-height: 2;
  letter-spacing: 2px;
  font-weight: 500;

  margin: 0 0 56px;
}

.language-notice-button {
  padding: 16px 42px;

  border: 2px solid #ffffff;
  border-radius: 12px;

  background: transparent;
  color: #ffffff;

  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;

  cursor: pointer;

  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.language-notice-button:hover {
  background: #ffffff;
  color: #000000;
  transform: translateY(-2px);
}

.language-notice-button:active {
  transform: translateY(0);
}

/* ========================= */
/* 開始封面頁 */
/* ========================= */

.start-cover-screen {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;
  overflow: hidden;
}

.start-cover-image {
  width: 100%;
  height: 100%;

  object-fit: contain;
  display: block;

  user-select: none;
  pointer-events: none;
}

/* ========================= */
/* 開始封面頁：只在 active 時顯示 */
/* ========================= */

.start-cover-screen {
  background: #000;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
}

/* 沒有 active 時，封面一定要消失 */
.start-cover-screen:not(.active) {
  display: none !important;
}

/* 有 active 時，封面才顯示 */
.start-cover-screen.active {
  display: flex !important;
}

.start-cover-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* ========================= */
/* 結局前提示黑屏 */
/* ========================= */

.ending-notice-screen {
  background: #000000;
  color: #ffffff;

  justify-content: center;
  align-items: center;

  text-align: center;
}

.ending-notice-screen.active {
  display: flex;
}

.ending-notice-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;

  padding: 40px;
}

.ending-notice-text {
  font-size: 24px;
  line-height: 2;
  letter-spacing: 1.5px;
  font-weight: 500;
}

.ending-notice-button {
  padding: 12px 34px;

  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;

  font-size: 18px;
  letter-spacing: 1px;

  cursor: pointer;
}

.ending-notice-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ========================= */
/* 指認兇手畫面 */
/* ========================= */

.accusation-screen {
  background:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45)),
    url("images/livingroom-bg.png");
  background-size: cover;
  background-position: center;

  justify-content: center;
  align-items: center;
}

.accusation-screen.active {
  display: flex;
}

.accusation-panel {
  width: min(92vw, 1200px);
  min-height: 78vh;

  padding: 34px 48px 38px;

  background: #efe4cb;
  border: 5px solid #5b351a;
  border-radius: 28px;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;

  color: #2b2118;
}

.accusation-title {
  margin: 0 0 22px;

  font-size: 48px;
  letter-spacing: 8px;
  font-weight: 900;
}

.accusation-instruction {
  margin: 0 0 26px;

  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 1px;
  text-align: center;
}

.suspect-select-area {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.suspect-button-grid {
  width: min(760px, 100%);

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.suspect-button {
  min-height: 88px;

  border: 3px solid #7a4a24;
  border-radius: 20px;

  background: #fff8eb;
  color: #4b2b14;

  font-size: 32px;
  font-weight: 900;
  letter-spacing: 4px;

  cursor: pointer;
  box-shadow: 0 8px 0 rgba(91, 53, 26, 0.22);
}

.suspect-button:hover {
  background: #7a4a24;
  color: #ffffff;
  transform: translateY(-2px);
}

.evidence-select-area {
  width: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
}

.selected-suspect-text {
  margin: 0 0 12px;

  font-size: 26px;
  font-weight: 800;
  color: #7a4a24;
}

.accusation-evidence-grid {
  width: 100%;
  max-width: 980px;

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;

  margin-bottom: 22px;
}

.accusation-evidence-card {
  min-height: 158px;

  padding: 10px 8px;

  border: 3px solid #a78d75;
  border-radius: 14px;

  background: #fffaf0;
  color: #3a2a1f;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  cursor: pointer;
}

.accusation-evidence-card:hover {
  border-color: #7a4a24;
  transform: translateY(-2px);
}

.accusation-evidence-card.selected {
  background: #7a4a24;
  color: #ffffff;
  border-color: #5b351a;
}

.accusation-evidence-image {
  width: 70px;
  height: 58px;

  object-fit: contain;

  margin-bottom: 8px;
}

.accusation-evidence-code {
  font-size: 14px;
  font-weight: 800;
  color: #9a632b;
  margin-bottom: 4px;
}

.accusation-evidence-card.selected .accusation-evidence-code {
  color: #f8dfb9;
}

.accusation-evidence-name {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
  text-align: center;
}

.accusation-bottom-row {
  width: 100%;
  max-width: 980px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.accusation-sub-button,
.accusation-main-button {
  padding: 12px 24px;

  border: none;
  border-radius: 14px;

  font-size: 20px;
  font-weight: 900;

  cursor: pointer;
}

.accusation-sub-button {
  justify-self: start;

  background: #d7c7ad;
  color: #4b2b14;
}

.accusation-main-button {
  justify-self: end;

  background: #7a4a24;
  color: #ffffff;
}

.accusation-main-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.selected-evidence-counter {
  font-size: 22px;
  font-weight: 900;
  color: #5b351a;
}

.accusation-error-text {
  min-height: 28px;
  margin: 16px 0 0;

  font-size: 20px;
  font-weight: 800;
  color: #9d1f1f;
  text-align: center;
}

/* ========================= */
/* 指認後對話 / 結局畫面 */
/* ========================= */

.ending-dialogue-area {
  width: 100%;
  flex: 1;

  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ending-location-label {
  margin-bottom: 18px;

  padding: 8px 24px;
  border-radius: 999px;

  background: #7a4a24;
  color: #ffffff;

  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
}

.ending-dialogue-box {
  width: min(88%, 900px);
  min-height: 230px;

  padding: 34px 42px;

  background: rgba(255, 250, 240, 0.92);
  border: 3px solid #a78d75;
  border-radius: 24px;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ending-dialogue-speaker {
  margin-bottom: 18px;

  font-size: 26px;
  font-weight: 900;
  color: #8a4f1f;
}

.ending-dialogue-text {
  font-size: 26px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: #2b2118;
}

.ending-dialogue-next-button {
  margin-top: 28px;

  padding: 12px 42px;

  border: none;
  border-radius: 16px;

  background: #7a4a24;
  color: #ffffff;

  font-size: 24px;
  font-weight: 900;

  cursor: pointer;
}

.ending-dialogue-next-button:hover {
  transform: translateY(-2px);
}

.ending-result-area {
  width: 100%;
  flex: 1;

  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.ending-result-label {
  margin: 0 0 18px;

  font-size: 28px;
  color: #8a4f1f;
  font-weight: 900;
  letter-spacing: 4px;
}

.ending-result-title {
  margin: 0;

  font-size: 56px;
  color: #2b2118;
  font-weight: 900;
  letter-spacing: 8px;
}

/* ================================================= */
/* 指認結局：視覺小說式劇情演出 */
/* ================================================= */

.accusation-screen {
  position: relative;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  overflow: hidden;
}

/* 進入劇情演出時，隱藏選人物 / 選證據面板 */
.accusation-screen.story-mode .accusation-panel {
  display: none !important;
}

/* 劇情演出主畫面 */
.ending-dialogue-area {
  display: none;

  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 20;
}

/* 地點標籤 */
.ending-location-label {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);

  padding: 10px 26px;

  background-color: rgba(0, 0, 0, 0.62);
  color: #ffffff;

  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;

  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;

  z-index: 25;
}

/* 客廳人物立繪層 */
.ending-character-layer {
  position: absolute;
  inset: 0;

  z-index: 21;

  pointer-events: none;
}

/* 所有結局人物立繪共用 */
.ending-character {
  position: absolute;
  bottom: 0;

  width: 280px;
  max-height: 74vh;
  object-fit: contain;

  transform: translateX(-50%);

  filter:
    brightness(0.72)
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.48));

  opacity: 0.72;

  transition:
    opacity 0.22s ease,
    filter 0.22s ease,
    transform 0.22s ease;
}

/* 角色位置：可之後微調 */
.ending-big-brother {
  left: 25%;
}

.ending-second-brother {
  left: 43%;
}

.ending-big-sister {
  left: 61%;
}

.ending-concubine {
  left: 79%;
}

/* 正在說話的人亮起 */
.ending-character.active {
  opacity: 1;

  filter:
    brightness(1.08)
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 18px rgba(255, 225, 120, 0.75));

  transform: translateX(-50%) scale(1.035);
}

/* 非說話者稍微退後 */
.ending-character.dimmed {
  opacity: 0.45;
  filter:
    brightness(0.5)
    grayscale(0.25)
    drop-shadow(0 8px 20px rgba(0, 0, 0, 0.42));
}

/* 天空獨白時隱藏人物 */
.accusation-screen.sky-ending-scene .ending-character-layer {
  display: none;
}

/* 下方對話框 */
.ending-vn-dialogue-box {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);

  width: 76%;
  min-height: 132px;

  padding: 26px 130px 26px 36px;

  background-color: rgba(0, 0, 0, 0.68);
  color: #ffffff;

  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;

  z-index: 30;
}

/* 說話者名稱 */
.ending-vn-speaker {
  position: absolute;
  left: 26px;
  top: -44px;

  padding: 8px 28px;

  background-color: rgba(0, 0, 0, 0.78);
  color: #facc15;

  border: 2px solid rgba(255, 255, 255, 0.78);
  border-bottom: none;
  border-radius: 12px 12px 0 0;

  font-size: 21px;
  font-weight: bold;
  letter-spacing: 3px;
}

/* 對話文字 */
.ending-vn-text {
  margin: 0;

  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 1px;

  text-align: left;
}

/* 下一句按鈕 */
.ending-vn-next-button {
  position: absolute;
  right: 28px;
  bottom: 24px;

  width: 48px;
  height: 48px;

  border: none;
  border-radius: 50%;

  background-color: rgba(255, 255, 255, 0.92);
  color: #111827;

  font-size: 25px;
  font-weight: bold;

  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: 0.2s;
}

.ending-vn-next-button:hover {
  background-color: #ffffff;
  transform: scale(1.08);
}

.ending-vn-next-button:active {
  transform: scale(0.95);
}

/* 結局名稱畫面也全畫面顯示 */
.ending-result-area {
  display: none;

  position: absolute;
  inset: 0;

  z-index: 40;

  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;

  background:
    linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.38));
}

.ending-result-label {
  margin: 0 0 18px;

  font-size: 30px;
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 6px;

  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
}

.ending-result-title {
  margin: 0;

  font-size: 64px;
  color: #facc15;
  font-weight: 900;
  letter-spacing: 10px;

  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.78);
}

/* ================================================= */
/* 前導劇情：客廳多人立繪 */
/* ================================================= */

.prologue-family-layer {
  display: none;

  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;
}

.prologue-family-layer.show {
  display: block;
}

.prologue-family-character {
  position: absolute;
  bottom: 0;

  width: 280px;
  max-height: 74vh;
  object-fit: contain;

  transform: translateX(-50%);

  opacity: 0.72;

  filter:
    brightness(0.72)
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.48));

  transition:
    opacity 0.22s ease,
    filter 0.22s ease,
    transform 0.22s ease;
}

/* 四個人的站位，可以之後再微調 */
.prologue-big-brother {
  left: 25%;
}

.prologue-second-brother {
  left: 43%;
}

.prologue-big-sister {
  left: 61%;
}

.prologue-concubine {
  left: 79%;
}

/* 正在說話的人亮起 */
.prologue-family-character.active {
  opacity: 1;

  filter:
    brightness(1.08)
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 18px rgba(255, 225, 120, 0.75));

  transform: translateX(-50%) scale(1.035);
}

/* 其他人變暗 */
.prologue-family-character.dimmed {
  opacity: 0.45;

  filter:
    brightness(0.5)
    grayscale(0.25)
    drop-shadow(0 8px 20px rgba(0, 0, 0, 0.42));
}

/* ================================================= */
/* 全遊戲：取消圖片 / 文字被拖曳選取時的反白效果 */
/* 一定要放在 style.css 最下面 */
/* ================================================= */

/* 避免文字、圖片、按鈕被滑鼠拖曳選取反白 */
body,
.screen,
.start-cover-screen,
.prologue-screen,
.search-screen,
.tutorial-screen,
.language-notice-screen,
.ending-notice-screen,
.accusation-screen,
.notebook-overlay,
.evidence-panel,
.relationship-map-overlay {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;

  -webkit-tap-highlight-color: transparent !important;
}

/* 避免圖片被拖曳時出現反白 / 半透明拖曳影像 */
img {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;

  -webkit-user-drag: none !important;
}

/* 避免按鈕點擊後出現藍色外框或反白感 */
button,
.map-room,
.room-hotspot,
.notebook-button,
.side-mini-button,
.suspect-button,
.accusation-evidence-card {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 滑鼠點擊時不要出現瀏覽器預設 focus 外框 */
button:focus,
button:focus-visible,
.map-room:focus,
.room-hotspot:focus,
.notebook-button:focus,
.side-mini-button:focus,
.accusation-evidence-card:focus {
  outline: none !important;
}

/* ========================= */
/* 地圖上不可進入房間：純文字標籤 */
/* ========================= */

.map-label {
  position: absolute;

  padding: 6px 14px;

  background-color: rgba(255, 255, 255, 0.72);
  color: rgba(0, 0, 0, 0.55);

  border: 2px solid rgba(0, 0, 0, 0.35);
  border-radius: 8px;

  font-size: clamp(11px, 1.2vw, 18px);
  font-weight: bold;
  letter-spacing: 1px;

  transform: translate(-50%, -50%);

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);

  z-index: 2;

  cursor: default;
  pointer-events: none;
}

/* 便所位置 */
.map-label.room-toilet {
  left: 91%;
  top: 48.5%;
}

/* 二哥房位置 */
.map-label.room-second-brother {
  left: 39%;
  top: 78%;
}

.map-label {
  position: absolute;

  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;

  color: #555555;
  opacity: 1;

  font-size: clamp(14px, 1.4vw, 22px);
  font-weight: bold;
  letter-spacing: 1px;

  transform: translate(-50%, -50%);

  z-index: 2;

  cursor: default;
  pointer-events: none;
}

/* ========================= */
/* 茶間：可調查物件熱區 */
/* ========================= */

/* 桌上的壽喜燒 */
.hotspot-tea-sukiyaki {
  left: 50%;
  top: 65%;

  width: 26px;
  height: 26px;
}

/* 天花板的牛奶燈 */
.hotspot-tea-milk-lamp {
  left: 50%;
  top: 25%;

  width: 26px;
  height: 26px;
}

/* ========================= */
/* 已調查過的物件光點 */
/* ========================= */

.room-hotspot.investigated::after {
  animation: none !important;

  opacity: 0.42 !important;

  background-color: rgba(255, 255, 255, 0.75) !important;

  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.75),
    0 0 18px rgba(255, 255, 255, 0.38) !important;
}

.room-hotspot.investigated:hover::after {
  opacity: 1 !important;

  background-color: rgba(255, 230, 80, 0.95) !important;

  box-shadow:
    0 0 14px rgba(255, 230, 80, 1),
    0 0 30px rgba(255, 200, 40, 0.8),
    0 0 52px rgba(255, 180, 20, 0.5) !important;
}

/* ================================================= */
/* 證據圖片：點擊放大預覽 */
/* ================================================= */

.image-preview-overlay {
  display: none;

  position: fixed;
  inset: 0;

  z-index: 20000;

  background: rgba(0, 0, 0, 0.82);

  justify-content: center;
  align-items: center;

  padding: 42px;
  box-sizing: border-box;
}

.image-preview-overlay.open {
  display: flex;
}

.image-preview-image {
  max-width: 92vw;
  max-height: 86vh;

  width: auto;
  height: auto;

  object-fit: contain;

  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
}

.close-image-preview-button {
  position: fixed;
  top: 28px;
  right: 34px;

  width: 58px;
  height: 58px;

  border: none;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.92);
  color: #111111;

  font-size: 42px;
  font-weight: 900;
  line-height: 1;

  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
}

.close-image-preview-button:hover {
  background: #facc15;
  transform: scale(1.05);
}

.image-preview-hint {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);

  color: rgba(255, 255, 255, 0.86);

  font-size: 18px;
  letter-spacing: 2px;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* 證據展開後，圖片可以點擊放大 */
#evidenceCard.detail-open #evidenceImage {
  cursor: zoom-in !important;
}

/* 證據圖片區提示 */
#evidenceCard.detail-open .evidence-image-area {
  position: relative !important;
}

#evidenceCard.detail-open .evidence-image-area::after {
  content: "點擊圖片可放大";

  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);

  padding: 5px 12px;

  background: rgba(0, 0, 0, 0.62);
  color: #ffffff;

  border-radius: 999px;

  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;

  pointer-events: none;
}

.play-notice-text {
  margin: 0 0 56px 0;

  color: #ffffff;

  font-size: 28px;
  line-height: 2;
  letter-spacing: 2px;
  font-weight: 500;

  text-align: center;
}

/* ========================= */
/* 暫存進度提示畫面 */
/* ========================= */

.resume-notice-screen {
  background: #000000;
  color: #ffffff;

  justify-content: center;
  align-items: center;

  text-align: center;
}

.resume-notice-screen.active {
  display: flex;
}

.resume-notice-content {
  width: min(82vw, 900px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.resume-notice-text {
  margin: 0 0 56px 0;

  font-size: 28px;
  line-height: 2;
  letter-spacing: 2px;
  font-weight: 500;
}

/* ================================================= */
/* 房間人物：調查階段整體放大 1.25 倍 */
/* 一定放在 style.css 最下面 */
/* ================================================= */

.room-character-image,
.room-character-image.big-brother-room-character,
.room-character-image.reception-neighbor-character {
  transform: translateX(-50%) scale(1.25) !important;
  transform-origin: bottom center !important;
}

/* 滑鼠移到人物時：維持發光，並在 1.25 倍基礎上微微放大 */
.room-character-image.room-character-glow,
.room-character-image.big-brother-room-character.room-character-glow,
.room-character-image.reception-neighbor-character.room-character-glow {
  transform: translateX(-50%) scale(1.29) !important;
  transform-origin: bottom center !important;
}

/* 點擊時不要縮回原本大小 */
.room-character-image:active {
  transform: translateX(-50%) scale(1.22) !important;
  transform-origin: bottom center !important;
}

/* ================================================= */
/* 前導、結局人物：整體放大 */
/* 一定放在 style.css 最下面 */
/* ================================================= */

/* 前導單人立繪 */
.character-image {
  transform: translateX(-50%) scale(1.25) !important;
  transform-origin: bottom center !important;
}

/* 前導客廳多人立繪 */
.prologue-family-character {
  transform: translateX(-50%) scale(1.25) !important;
  transform-origin: bottom center !important;
}

/* 前導客廳多人：正在說話的人再稍微亮起、放大一點 */
.prologue-family-character.active {
  transform: translateX(-50%) scale(1.29) !important;
  transform-origin: bottom center !important;
}

/* 結局人物立繪 */
.ending-character {
  transform: translateX(-50%) scale(1.25) !important;
  transform-origin: bottom center !important;
}

/* 結局人物：正在說話的人再稍微亮起、放大一點 */
.ending-character.active {
  transform: translateX(-50%) scale(1.29) !important;
  transform-origin: bottom center !important;
}

/* ================================================= */
/* 片尾跑馬燈畫面 */
/* ================================================= */

.credits-screen {
  position: relative;

  background: #000000;
  color: #ffffff;

  justify-content: center;
  align-items: center;

  overflow: hidden;
}

.credits-screen.active {
  display: flex;
}

.credits-roll-wrap {
  position: absolute;
  inset: 0;

  overflow: hidden;

  display: flex;
  justify-content: center;
}

.credits-roll {
  position: absolute;

  top: 100%;

  width: min(900px, 82vw);

  text-align: center;

  animation: creditsRollMove 85s linear forwards;
}

.credits-roll h1 {
  margin: 80px 0 28px;

  font-size: 34px;
  letter-spacing: 6px;
  font-weight: 900;
}

.credits-roll p {
  margin: 14px 0;

  font-size: 20px;
  line-height: 1.9;
  letter-spacing: 1px;
}

@keyframes creditsRollMove {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-145%);
  }
}

/* 片尾結束後的按鈕 */
.credits-button-area {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);

  gap: 22px;

  z-index: 5;
}

.credits-button-area.show {
  display: flex;
}

.credits-button {
  padding: 14px 28px;

  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;

  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;

  cursor: pointer;
}

.credits-button:hover {
  background: #ffffff;
  color: #000000;
  transform: translateY(-2px);
}

/* ================================================= */
/* 參考說明頁面 */
/* ================================================= */

.reference-screen {
  background: #000000;
  color: #ffffff;

  justify-content: center;
  align-items: center;

  overflow: hidden;
}

.reference-screen.active {
  display: flex;
}

.reference-card {
  width: min(980px, 86vw);
  height: min(720px, 86vh);

  padding: 44px 56px;

  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 24px;

  background: rgba(255, 255, 255, 0.06);

  box-sizing: border-box;

  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: 28px;
}

.reference-card h1 {
  margin: 0;

  text-align: center;

  font-size: 42px;
  letter-spacing: 4px;
}

.reference-content {
  overflow-y: auto;

  padding-right: 16px;

  font-size: 20px;
  line-height: 1.9;
  letter-spacing: 1px;
}

.reference-content h2 {
  margin: 28px 0 12px;

  font-size: 28px;
  color: #facc15;
}

.reference-back-button {
  justify-self: center;

  padding: 12px 36px;

  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;

  font-size: 20px;
  font-weight: 800;

  cursor: pointer;
}

.reference-back-button:hover {
  background: #ffffff;
  color: #000000;
}

.credits-button-area {
  z-index: 50 !important;
  pointer-events: auto !important;
}

.credits-button {
  pointer-events: auto !important;
}

.credits-roll-wrap,
.credits-roll {
  pointer-events: none !important;
}

/* ================================================= */
/* 片尾跑馬燈：可手動捲動版 */
/* ================================================= */

.credits-roll-wrap {
  position: absolute !important;
  inset: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  display: block !important;

  padding: 0 !important;

  pointer-events: auto !important;

  scrollbar-width: thin;
}

/* Chrome / Edge 的卷軸樣式 */
.credits-roll-wrap::-webkit-scrollbar {
  width: 8px;
}

.credits-roll-wrap::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
}

.credits-roll-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.38);
  border-radius: 999px;
}

/* 跑馬燈內容本體：取消 CSS 動畫，改由 JS 控制捲動 */
.credits-roll {
  position: relative !important;

  top: auto !important;

  width: min(900px, 82vw) !important;

  margin: 0 auto !important;

  padding-top: 70vh !important;
  padding-bottom: 52vh !important;

  text-align: center !important;

  animation: none !important;

  pointer-events: none !important;
}

/* 按鈕區維持可以點擊 */
.credits-button-area {
  z-index: 50 !important;
  pointer-events: auto !important;
}

.credits-button {
  pointer-events: auto !important;
}

/* ================================================= */
/* 調查完成提示畫面 */
/* ================================================= */

.ending-notice-screen {
  background: #000000;
  color: #ffffff;

  justify-content: center;
  align-items: center;
}

.ending-notice-screen.active {
  display: flex;
}

.ending-complete-panel {
  width: min(820px, 82vw);
  min-height: 420px;

  padding: 54px 70px;

  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 26px;

  background: rgba(0, 0, 0, 0.88);

  text-align: center;

  box-shadow: 0 0 28px rgba(255, 255, 255, 0.12);
}

.ending-complete-title {
  margin: 0 0 36px;

  font-size: 46px;
  font-weight: 900;
  letter-spacing: 6px;
}

.ending-complete-main-text {
  margin: 0 0 20px;

  font-size: 26px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 2px;
}

.ending-complete-sub-text {
  width: min(680px, 100%);
  margin: 0 auto 48px;

  font-size: 22px;
  line-height: 1.9;
  letter-spacing: 1.5px;
}

.ending-complete-button-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
}

.ending-complete-main-button,
.ending-complete-sub-button {
  min-width: 230px;
  height: 64px;

  padding: 0 26px;

  border-radius: 18px;

  font-size: 24px;
  font-weight: 900;
  letter-spacing: 2px;

  cursor: pointer;

  transition: 0.2s;
}

.ending-complete-main-button {
  border: 2px solid #ffffff;
  background: #8a4b1f;
  color: #ffffff;
}

.ending-complete-sub-button {
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  color: #ffffff;
}

.ending-complete-main-button:hover,
.ending-complete-sub-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(255, 255, 255, 0.16);
}

.ending-complete-main-button:active,
.ending-complete-sub-button:active {
  transform: scale(0.96);
}

/* ================================================= */
/* 收齊證據後：右側常駐進入指認按鈕 */
/* ================================================= */

.enter-accusation-button {
  display: none;

  position: absolute;
  top: 190px;
  right: 58px;

  width: 96px;
  height: 46px;

  z-index: 80;

  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 14px;

  background: rgba(122, 70, 29, 0.94);
  color: #ffffff;

  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.2;

  cursor: pointer;

  justify-content: center;
  align-items: center;
  text-align: center;

  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
  transition: 0.2s;
}

.search-screen.active .enter-accusation-button.show {
  display: flex;
}

.enter-accusation-button:hover {
  transform: translateY(-2px);
  background: rgba(145, 82, 35, 0.98);
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.34);
}

.enter-accusation-button:active {
  transform: scale(0.96);
}

/* =========================
   參考說明頁面
========================= */

.reference-screen {
  background: #050505;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  font-family: "Noto Sans TC", sans-serif;
}

.reference-screen.active {
  display: flex;
}

.reference-container {
  position: relative;
  width: min(1200px, 88vw);
  height: min(760px, 82vh);
  padding: 56px 72px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 28px;
  background: rgba(0, 0, 0, 0.92);
  box-shadow: 0 0 36px rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.reference-back-button,
.reference-small-back-button {
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-radius: 14px;
  padding: 10px 22px;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.reference-back-button {
  position: absolute;
  left: 32px;
  top: 28px;
}

.reference-small-back-button {
  margin-bottom: 24px;
}

.reference-back-button:hover,
.reference-small-back-button:hover {
  background: rgba(255, 255, 255, 0.22);
}

.reference-panel {
  display: none;
  width: 100%;
  height: 100%;
}

.reference-panel.active {
  display: block;
}

.reference-title {
  margin: 12px 0 24px;
  text-align: center;
  font-size: 52px;
  letter-spacing: 0.12em;
}

.reference-intro {
  text-align: center;
  font-size: 24px;
  line-height: 1.9;
  margin-bottom: 42px;
}

.reference-category-grid {
  width: min(760px, 80%);
  margin: 0 auto 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.reference-category-button,
.official-reference-button,
.reference-question-button {
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-radius: 18px;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.reference-category-button {
  min-height: 86px;
}

.reference-category-button:hover,
.official-reference-button:hover,
.reference-question-button:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.22);
}

.official-reference-button {
  display: block;
  width: 320px;
  height: 64px;
  margin: 0 auto;
}

.reference-section-title {
  text-align: center;
  font-size: 44px;
  letter-spacing: 0.12em;
  margin: 0 0 12px;
}

.reference-section-hint {
  text-align: center;
  font-size: 20px;
  opacity: 0.82;
  margin-bottom: 24px;
}

.reference-question-list {
  width: min(900px, 92%);
  height: 470px;
  margin: 0 auto;
  padding: 8px 18px 16px;
  overflow-y: auto;
}

.reference-question-button {
  display: block;
  width: 100%;
  min-height: 64px;
  margin-bottom: 16px;
  padding: 14px 22px;
  text-align: left;
  font-size: 22px;
  line-height: 1.5;
}

.reference-answer-question {
  width: min(900px, 92%);
  margin: 30px auto 28px;
  text-align: center;
  font-size: 36px;
  line-height: 1.45;
}

.reference-answer-text {
  width: min(900px, 92%);
  max-height: 460px;
  margin: 0 auto;
  padding: 32px 42px;
  overflow-y: auto;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 24px;
  line-height: 2;
  letter-spacing: 0.04em;
}

.official-reference-scroll {
  width: min(900px, 92%);
  height: 520px;
  margin: 28px auto 0;
  padding: 32px 42px;
  overflow-y: auto;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 20px;
  line-height: 1.8;
}

/* 卷軸樣式 */
.reference-question-list::-webkit-scrollbar,
.reference-answer-text::-webkit-scrollbar,
.official-reference-scroll::-webkit-scrollbar {
  width: 10px;
}

.reference-question-list::-webkit-scrollbar-thumb,
.reference-answer-text::-webkit-scrollbar-thumb,
.official-reference-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 999px;
}

.reference-question-list::-webkit-scrollbar-track,
.reference-answer-text::-webkit-scrollbar-track,
.official-reference-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
}

/* =========================
   參考資料頁面版面微調
   ========================= */

/* 整個黑色外框內容稍微往上、縮小內距，避免下面按鈕被擠掉 */
.reference-panel,
.reference-content,
.reference-container {
  padding-top: 4vh;
  padding-bottom: 4vh;
}

/* 參考頁主標題：想知道更多嗎？ / 生活 */
.reference-title,
#referenceTitle {
  font-size: clamp(36px, 4vw, 58px);
  margin-bottom: 24px;
  line-height: 1.15;
}

/* 參考頁說明文字稍微縮小 */
.reference-intro,
#referenceIntroText {
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.7;
  margin-bottom: 42px;
}

/* 六個分類按鈕區塊：縮小間距，讓正式參考資料按鈕露出來 */
.reference-category-grid,
#referenceCategoryGrid {
  gap: 24px 32px;
  margin-bottom: 28px;
}

/* 分類按鈕稍微矮一點 */
.reference-category-button {
  min-height: 92px;
  font-size: clamp(24px, 2vw, 34px);
  padding: 18px 24px;
}

/* 正式參考資料按鈕不要被擠到太下面 */
.reference-official-button,
#officialReferenceButton {
  margin-top: 8px;
  min-height: 72px;
  font-size: clamp(22px, 1.8vw, 30px);
}

/* =========================
   分類內頁：例如「生活」
   ========================= */

/* 左上兩個按鈕改成上下排列，不要重疊 */
.reference-top-buttons {
  position: absolute;
  top: 32px;
  left: 42px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 20;
}

/* 如果你的兩顆按鈕是分開 ID，也一起指定 */
#referenceBackButton,
#referenceCategoryBackButton {
  position: static;
  width: 150px;
  height: 58px;
  font-size: 22px;
}

/* 分類頁大標上移、縮小 */
.reference-category-title,
#referenceCategoryTitle {
  font-size: clamp(38px, 4vw, 60px);
  margin-top: 10px;
  margin-bottom: 18px;
  line-height: 1.15;
}

/* 分類頁副標縮小，節省空間 */
.reference-category-subtitle,
#referenceCategorySubtitle {
  font-size: clamp(18px, 1.5vw, 24px);
  margin-bottom: 28px;
}

/* 問題清單往上拉高一點，增加可滾動區域 */
.reference-question-list,
#referenceQuestionList {
  max-height: 48vh;
  padding-right: 18px;
}

/* 問句按鈕稍微矮一點，讓畫面能看到更多題目 */
.reference-question-button {
  min-height: 72px;
  padding: 18px 26px;
  font-size: clamp(20px, 1.7vw, 28px);
  margin-bottom: 18px;
}

/* =========================
   參考資料頁：左上返回按鈕避免重疊
   ========================= */

/* 外層容器作為定位基準 */
.reference-container {
  position: relative;
}

/* 返回片尾：固定在第一排 */
#referenceBackButton {
  position: absolute;
  top: 32px;
  left: 42px;
  z-index: 30;
}


/* ================================================= */
/* 參考說明頁面：首頁壓縮版，確保 7 顆按鈕都看得到 */
/* ================================================= */

.reference-screen {
  background: #000000 !important;
  color: #ffffff !important;

  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

.reference-container {
  position: relative !important;

  width: min(1180px, 88vw) !important;
  height: min(650px, 82vh) !important;

  padding: 34px 58px 30px !important;
  box-sizing: border-box !important;

  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 24px !important;

  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.08) !important;

  overflow: hidden !important;
}

/* 首頁內容排版 */
.reference-home-panel {
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 22px !important;
}

/* 大標縮小 */
.reference-title {
  margin: 0 !important;

  font-size: clamp(42px, 4.5vw, 62px) !important;
  line-height: 1.1 !important;
  letter-spacing: 4px !important;
  text-align: center !important;
}

/* 說明文字縮小 */
.reference-intro {
  margin: 0 !important;

  font-size: clamp(18px, 1.7vw, 24px) !important;
  line-height: 1.65 !important;
  letter-spacing: 1px !important;
  text-align: center !important;
}

/* 六個分類按鈕 */
.reference-category-grid {
  width: min(820px, 78vw) !important;

  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px 24px !important;

  margin: 14px auto 4px !important;
}

.reference-category-button {
  height: 74px !important;

  padding: 0 22px !important;

  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 18px !important;

  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;

  font-size: clamp(20px, 2vw, 28px) !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;

  cursor: pointer !important;

  white-space: nowrap !important;
  word-break: keep-all !important;
  line-height: 1 !important;
}

.reference-category-button:hover {
  background: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
}

/* 正式參考資料按鈕：一定顯示在六顆按鈕下方 */
.official-reference-button {
  display: block !important;

  width: min(360px, 52vw) !important;
  height: 58px !important;

  margin: 0 auto !important;
  padding: 0 26px !important;

  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 999px !important;

  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;

  font-size: clamp(18px, 1.7vw, 24px) !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;

  cursor: pointer !important;

  white-space: nowrap !important;
  word-break: keep-all !important;
}

.official-reference-button:hover {
  background: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
}

/* 左上返回片尾：只作為首頁按鈕 */
.reference-back-button {
  position: absolute !important;
  top: 30px !important;
  left: 36px !important;
  z-index: 30 !important;

  min-width: 126px !important;
  height: 52px !important;

  padding: 0 22px !important;

  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 14px !important;

  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;

  font-size: 20px !important;
  font-weight: 900 !important;

  cursor: pointer !important;

  white-space: nowrap !important;
}

.reference-back-button:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

/* 分類頁、答案頁、正式參考資料頁的返回按鈕 */
.reference-small-back-button {
  position: absolute !important;
  top: 30px !important;
  left: 36px !important;
  z-index: 30 !important;

  min-width: 126px !important;
  height: 52px !important;

  padding: 0 22px !important;

  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 14px !important;

  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;

  font-size: 20px !important;
  font-weight: 900 !important;

  cursor: pointer !important;

  white-space: nowrap !important;
}

.reference-small-back-button:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

/* 分類頁標題縮小、上移 */
.reference-section-title {
  margin: 34px 0 12px !important;

  font-size: clamp(36px, 4vw, 54px) !important;
  line-height: 1.15 !important;
  text-align: center !important;
  letter-spacing: 4px !important;
}

.reference-section-hint {
  margin: 0 0 28px !important;

  font-size: clamp(17px, 1.6vw, 22px) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  text-align: center !important;
}

/* 問題列表可滾動區域加高 */
.reference-question-list {
  width: min(820px, 78vw) !important;
  max-height: 390px !important;

  margin: 0 auto !important;
  padding-right: 14px !important;

  overflow-y: auto !important;
}

/* 問題按鈕不要太高 */
.reference-question-button {
  min-height: 58px !important;

  padding: 14px 22px !important;

  font-size: clamp(18px, 1.65vw, 24px) !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

/* 答案頁文字區 */
.reference-answer-text,
.official-reference-scroll {
  max-height: 410px !important;
  overflow-y: auto !important;
}

#referenceBackButton,
#referenceCategoryBackButton,
#referenceAnswerBackButton,
#officialReferenceBackButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 56px;
  min-width: 160px;
  padding: 0 28px;

  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* ================================================= */
/* 參考說明頁：面板切換修正版 */
/* ================================================= */

.reference-panel {
  display: none !important;
  width: 100% !important;
  height: 100% !important;
}

/* 首頁需要用 flex，讓七顆按鈕維持置中 */
.reference-home-panel.active {
  display: flex !important;
}

/* 分類頁、答案頁、正式參考資料頁用 block */
.reference-question-panel.active,
.reference-answer-panel.active,
.official-reference-panel.active {
  display: block !important;
}

/* 沒有 active 的面板一定隱藏 */
.reference-home-panel:not(.active),
.reference-question-panel:not(.active),
.reference-answer-panel:not(.active),
.official-reference-panel:not(.active) {
  display: none !important;
}

/* 分類頁只顯示返回分類 */
.reference-question-panel.active #referenceCategoryBackButton,
.reference-answer-panel.active #referenceAnswerBackButton,
.official-reference-panel.active #officialReferenceBackButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ================================================= */
/* 參考資料分類頁：100% 縮放防裁切修正 */
/* ================================================= */

/* 分類頁本身：改成上下排版，不讓內容超出外框 */
#referenceQuestionPanel.reference-panel.active {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  width: 100% !important;
  height: 100% !important;

  box-sizing: border-box !important;
  padding: 5.2vh 6vw 3.8vh !important;

  overflow: hidden !important;
}

/* 左上角返回分類按鈕固定位置，不參與內容排版 */
#referenceCategoryBackButton {
  position: absolute !important;
  top: 5.2vh !important;
  left: 5.2vw !important;

  width: 150px !important;
  height: 58px !important;

  font-size: 24px !important;
  line-height: 1 !important;
  z-index: 20 !important;
}

/* 分類大標縮小一點、上移一點 */
#referenceCategoryTitle {
  margin: 0 !important;
  margin-top: 1.2vh !important;
  margin-bottom: 0.8vh !important;

  font-size: clamp(42px, 4.2vw, 64px) !important;
  line-height: 1.05 !important;
}

/* 大標下面的小字 */
.reference-category-subtitle,
.reference-question-panel-subtitle {
  margin: 0 0 1.6vh !important;

  font-size: clamp(18px, 1.6vw, 26px) !important;
  line-height: 1.3 !important;
}

/* 問題列表：重點是限制高度，讓它自己捲動 */
#referenceQuestionList {
  width: min(880px, 72vw) !important;

  max-height: 48vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  box-sizing: border-box !important;

  margin: 0 auto !important;
  padding: 0 20px 34px 0 !important;

  scrollbar-gutter: stable !important;
}

/* 問題按鈕縮小一點，避免 100% 時被裁切 */
.reference-question-button {
  width: 100% !important;

  min-height: 58px !important;
  padding: 12px 24px !important;
  margin-bottom: 12px !important;

  font-size: clamp(19px, 1.8vw, 28px) !important;
  line-height: 1.25 !important;

  box-sizing: border-box !important;
}

/* 最後一顆按鈕多留一點底部空間，避免貼到外框 */
.reference-question-button:last-child {
  margin-bottom: 36px !important;
}

.official-reference-scroll {
  white-space: pre-line;
  text-align: left;
}

/* ================================================= */
/* 指認兇手畫面：100% 縮放完整顯示修正版 */
/* 貼在 style.css 最下面 */
/* ================================================= */

.accusation-screen {
  padding: 18px !important;
  box-sizing: border-box !important;

  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 整個米色面板縮小，避免超出畫面 */
.accusation-panel {
  width: min(82vw, 1360px) !important;
  height: min(820px, 86vh) !important;
  min-height: 0 !important;

  padding: 24px 42px 26px !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  row-gap: 10px !important;

  align-items: stretch !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 大標題縮小一點 */
.accusation-title {
  margin: 0 !important;

  font-size: clamp(34px, 3.4vw, 48px) !important;
  line-height: 1.1 !important;
  letter-spacing: 7px !important;

  text-align: center !important;
}

/* 第一階段：選人物 */
.suspect-select-area {
  min-height: 0 !important;

  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 第二階段：選證據 */
/* JS 會把它設成 display:flex，所以這裡用屬性選擇器強制改成 grid */
#evidenceSelectArea[style*="flex"] {
  display: grid !important;
}

/* 選證據區改成固定五段：人物文字 / 說明 / 證據卡 / 底部按鈕 / 錯誤訊息 */
.evidence-select-area {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  row-gap: 10px !important;

  align-items: center !important;
  justify-items: center !important;

  overflow: hidden !important;
}

/* 「你選擇指認：大哥」 */
.selected-suspect-text {
  margin: 0 !important;

  font-size: clamp(19px, 1.8vw, 26px) !important;
  line-height: 1.25 !important;
}

/* 說明文字 */
.accusation-instruction {
  margin: 0 !important;

  font-size: clamp(18px, 1.7vw, 24px) !important;
  line-height: 1.35 !important;
  letter-spacing: 1px !important;

  text-align: center !important;
}

/* 證據卡片區：維持 5 欄 2 列，但整體壓縮 */
.accusation-evidence-grid {
  width: min(100%, 1040px) !important;
  max-width: 1040px !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;

  margin: 0 !important;

  align-self: center !important;
  overflow: visible !important;
}

/* 每張證據卡縮小 */
.accusation-evidence-card {
  min-height: 0 !important;
  height: clamp(118px, 15vh, 148px) !important;

  padding: 8px 6px !important;

  border-width: 3px !important;
  border-radius: 13px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 證據圖片縮小 */
.accusation-evidence-image {
  width: clamp(48px, 4.2vw, 66px) !important;
  height: clamp(40px, 3.7vw, 56px) !important;

  margin-bottom: 6px !important;

  object-fit: contain !important;
}

/* 關鍵01 / 次要01 */
.accusation-evidence-code {
  margin-bottom: 3px !important;

  font-size: clamp(12px, 1vw, 14px) !important;
  line-height: 1.15 !important;
}

/* 證據名稱 */
.accusation-evidence-name {
  font-size: clamp(13px, 1.1vw, 15px) !important;
  line-height: 1.25 !important;

  text-align: center !important;
  word-break: keep-all !important;
}

/* 底部返回 / 計數 / 確認 */
.accusation-bottom-row {
  width: min(100%, 1040px) !important;

  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;

  column-gap: 20px !important;

  margin: 4px 0 0 !important;
}

/* 左右按鈕縮小 */
.accusation-sub-button,
.accusation-main-button {
  min-width: 150px !important;
  height: 52px !important;

  padding: 0 24px !important;

  border-radius: 16px !important;

  font-size: clamp(18px, 1.5vw, 24px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

/* 左邊按鈕靠左，右邊按鈕靠右 */
.accusation-sub-button {
  justify-self: start !important;
}

.accusation-main-button {
  justify-self: end !important;
}

/* 已選擇：0 / 2 */
.selected-evidence-counter {
  justify-self: center !important;

  font-size: clamp(18px, 1.6vw, 26px) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;

  white-space: nowrap !important;
}

/* 錯誤訊息保留一點高度，避免跳動 */
.accusation-error-text {
  min-height: 24px !important;
  margin: 0 !important;

  font-size: clamp(16px, 1.3vw, 20px) !important;
  line-height: 1.2 !important;

  text-align: center !important;
}

/* ================================================= */
/* 螢幕高度比較小時，再壓縮一點 */
/* ================================================= */

@media (max-height: 820px) {
  .accusation-panel {
    width: min(84vw, 1300px) !important;
    height: 88vh !important;

    padding: 18px 38px 20px !important;
    row-gap: 8px !important;
  }

  .accusation-title {
    font-size: clamp(30px, 3vw, 42px) !important;
  }

  .accusation-evidence-grid {
    gap: 10px !important;
  }

  .accusation-evidence-card {
    height: clamp(104px, 14vh, 132px) !important;
    padding: 6px 5px !important;
  }

  .accusation-evidence-image {
    width: 50px !important;
    height: 42px !important;
    margin-bottom: 5px !important;
  }

  .accusation-evidence-name {
    font-size: 13px !important;
  }

  .accusation-sub-button,
  .accusation-main-button {
    height: 46px !important;
    font-size: 19px !important;
  }
}

/* ================================================= */
/* 指認兇手畫面：修正人物選擇與證據選擇重疊 */
/* 一定貼在 style.css 最下面 */
/* ================================================= */

/* 讓 JS 控制人物選擇區，不要被 CSS 強制顯示 */
#suspectSelectArea[style*="none"] {
  display: none !important;
}

#suspectSelectArea[style*="flex"] {
  display: flex !important;
}

/* 讓 JS 控制證據選擇區 */
#evidenceSelectArea[style*="none"] {
  display: none !important;
}

#evidenceSelectArea[style*="flex"] {
  display: grid !important;
}

/* ================================================= */
/* 指認兇手畫面：排版微調版 */
/* 目標：上方文字集中、整體下移、證據卡片變大 */
/* ================================================= */

/* 整個指認面板 */
.accusation-panel {
  width: min(84vw, 1360px) !important;
  height: min(800px, 86vh) !important;

  padding: 36px 48px 34px !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  row-gap: 14px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 大標題：不要貼太上面 */
.accusation-title {
  margin: 0 !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;

  font-size: clamp(38px, 3.4vw, 52px) !important;
  line-height: 1.1 !important;
  letter-spacing: 7px !important;

  text-align: center !important;
}

/* =============================== */
/* 第一階段：人物選擇畫面 */
/* =============================== */

.suspect-select-area {
  min-height: 0 !important;

  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;

  padding-top: 110px !important;
  box-sizing: border-box !important;
}

/* 人物選擇說明文字：拉近標題，不要掉到中間 */
.suspect-select-area .accusation-instruction {
  margin: 0 0 18px !important;

  font-size: clamp(20px, 1.8vw, 28px) !important;
  line-height: 1.35 !important;
}

/* 人物按鈕區 */
.suspect-button-grid,
.suspect-grid {
  margin-top: 0 !important;
  gap: 28px 34px !important;
}

/* 如果你的人物按鈕不是用上面兩個 class，也一併壓縮 */
.suspect-button {
  height: 76px !important;
  font-size: clamp(28px, 2.4vw, 40px) !important;
}

/* =============================== */
/* 第二階段：證據選擇畫面 */
/* =============================== */

.evidence-select-area {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  row-gap: 12px !important;

  align-items: center !important;
  justify-items: center !important;

  padding-top: 6px !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
}

/* 「你選擇指認：二哥」 */
.selected-suspect-text {
  margin: 0 !important;
  margin-top: 0 !important;

  font-size: clamp(22px, 1.9vw, 30px) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

/* 「請選擇 2 項...」 */
.evidence-select-area .accusation-instruction {
  margin: 0 !important;

  font-size: clamp(21px, 1.8vw, 28px) !important;
  line-height: 1.35 !important;
  letter-spacing: 1px !important;

  text-align: center !important;
}

/* 證據卡片區：維持 5 * 2，但卡片變大 */
.accusation-evidence-grid {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;

  margin: 8px 0 0 !important;

  align-self: center !important;
}

/* 每張證據卡：拉長一點 */
.accusation-evidence-card {
  height: clamp(132px, 16.5vh, 164px) !important;

  padding: 10px 8px !important;

  border-width: 3px !important;
  border-radius: 14px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 證據圖片 */
.accusation-evidence-image {
  width: clamp(54px, 4.8vw, 76px) !important;
  height: clamp(46px, 4.2vw, 64px) !important;

  margin-bottom: 8px !important;

  object-fit: contain !important;
}

/* 關鍵01 / 次要01 */
.accusation-evidence-code {
  margin-bottom: 4px !important;

  font-size: clamp(14px, 1.15vw, 17px) !important;
  line-height: 1.15 !important;
}

/* 證據名稱 */
.accusation-evidence-name {
  font-size: clamp(15px, 1.25vw, 18px) !important;
  line-height: 1.25 !important;

  font-weight: 900 !important;
  text-align: center !important;
  word-break: keep-all !important;
}

/* 底部區塊 */
.accusation-bottom-row {
  width: min(100%, 1120px) !important;

  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;

  column-gap: 24px !important;

  margin-top: 8px !important;
}

/* 底部按鈕也稍微放大 */
.accusation-sub-button,
.accusation-main-button {
  min-width: 160px !important;
  height: 54px !important;

  padding: 0 26px !important;
  border-radius: 16px !important;

  font-size: clamp(19px, 1.55vw, 25px) !important;
  font-weight: 900 !important;
}

/* 已選擇：0 / 2 */
.selected-evidence-counter {
  font-size: clamp(22px, 1.8vw, 30px) !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* ================================================= */
/* 指認兇手：人物選擇頁空白修正 */
/* 只修選人物頁，不影響證據選擇頁 */
/* ================================================= */

#suspectSelectArea {
  padding-top: 55px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

/* 說明文字和人物按鈕的距離 */
#suspectSelectArea .accusation-instruction {
  margin: 0 0 22px !important;

  font-size: clamp(22px, 1.9vw, 30px) !important;
  line-height: 1.35 !important;
}

/* 人物按鈕區維持舒服距離 */
#suspectSelectArea .suspect-button-grid {
  margin-top: 0 !important;
  gap: 28px 34px !important;
}

/* ================================================= */
/* 隱藏指認 / 結局劇情中的地點標籤 */
/* ================================================= */

.ending-location-label {
  display: none !important;
}

/* ================================================= */
/* 圖片放大檢視：高解析放大、低解析適度放大 */
/* ================================================= */

#imagePreviewOverlay.open {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 32px !important;
  box-sizing: border-box !important;
}

/* 一般高解析圖片：可以大張顯示 */
#imagePreviewImage {
  max-width: 88vw !important;
  max-height: 82vh !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;
  display: block !important;
}

/* 低解析圖片：不要撐滿畫面，避免糊掉 */
#imagePreviewImage.low-resolution-preview {
  max-width: 70vw !important;
  max-height: 78vh !important;

  object-fit: contain !important;
  image-rendering: auto !important;
}

/* ================================================= */
/* 圖片放大檢視：確保低解析圖片也有明顯放大 */
/* ================================================= */

#imagePreviewOverlay.open {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 32px !important;
  box-sizing: border-box !important;
}

/* 預覽圖片基礎樣式 */
#imagePreviewImage {
  display: block !important;

  max-width: 88vw !important;
  max-height: 82vh !important;

  object-fit: contain !important;

  border-radius: 14px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45) !important;
}

/* 低解析圖片：不要被 auto 壓回原尺寸 */
#imagePreviewImage.low-resolution-preview {
  max-width: 72vw !important;
  max-height: 78vh !important;

  object-fit: contain !important;
  image-rendering: auto !important;
}

/* ================================================= */
/* 調查筆記：筆記目錄頁 */
/* ================================================= */

.clue-page.note-directory-page #clueContent {
  display: block !important;
  width: 100% !important;
}

.clue-page.note-directory-page #clueImage {
  display: none !important;
}

.clue-page.note-directory-page #clueDescription {
  width: 100% !important;
  height: 100% !important;

  margin-top: 8px !important;
  text-align: left !important;

  overflow: hidden !important;
}

.note-directory-wrapper {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 14px !important;
  box-sizing: border-box !important;
}

.note-directory-room-tabs {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;

  width: 100% !important;
}

.note-directory-room-button {
  min-height: 48px !important;
  padding: 8px 10px !important;

  border: 2px solid #8a4b1f !important;
  border-radius: 14px !important;

  background: rgba(255, 250, 240, 0.9) !important;
  color: #4a2b16 !important;

  font-size: clamp(15px, 1.15vw, 20px) !important;
  font-weight: 900 !important;

  cursor: pointer !important;
  box-sizing: border-box !important;
}

.note-directory-room-button.active {
  background: #8a4b1f !important;
  color: #fff7ea !important;
}

.note-directory-list {
  flex: 1 !important;
  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding-right: 10px !important;
  box-sizing: border-box !important;
}

.note-directory-item {
  display: grid !important;
  grid-template-columns: 90px minmax(0, 1fr) !important;
  gap: 12px !important;

  padding: 10px 12px !important;
  margin-bottom: 10px !important;

  border-radius: 12px !important;
  border: 2px solid rgba(138, 75, 31, 0.35) !important;

  background: rgba(255, 252, 244, 0.92) !important;

  box-sizing: border-box !important;
}

.note-directory-item.locked {
  opacity: 0.55 !important;
}

.note-directory-item-title {
  color: #8a4b1f !important;

  font-size: clamp(15px, 1.1vw, 19px) !important;
  font-weight: 900 !important;

  white-space: nowrap !important;
}

.note-directory-item-text {
  color: #3a2416 !important;

  font-size: clamp(15px, 1.1vw, 19px) !important;
  line-height: 1.55 !important;

  word-break: break-word !important;
}

.note-directory-item.locked .note-directory-item-text {
  font-weight: 900 !important;
  letter-spacing: 3px !important;
}

/* ================================================= */
/* 調查筆記：筆記目錄修正版 */
/* 解決只顯示一個 ???、已收集筆記不顯示內容 */
/* ================================================= */

.clue-page.note-directory-page {
  overflow: hidden !important;
}

.clue-page.note-directory-page #clueContent {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  overflow: hidden !important;
}

.clue-page.note-directory-page #clueImage {
  display: none !important;
}

.clue-page.note-directory-page #clueDescription {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;

  overflow: hidden !important;
}

.note-directory-wrapper {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 12px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}

.note-directory-room-tabs {
  flex: 0 0 auto !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;

  width: 100% !important;
}

.note-directory-room-button {
  min-height: 44px !important;
  padding: 8px 8px !important;

  border: 2px solid #8a4b1f !important;
  border-radius: 14px !important;

  background: rgba(255, 250, 240, 0.9) !important;
  color: #4a2b16 !important;

  font-size: clamp(14px, 1vw, 18px) !important;
  font-weight: 900 !important;

  white-space: nowrap !important;

  cursor: pointer !important;
  box-sizing: border-box !important;
}

.note-directory-room-button.active {
  background: #8a4b1f !important;
  color: #fff7ea !important;
}

.note-directory-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding-right: 10px !important;
  box-sizing: border-box !important;
}

.note-directory-item {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  gap: 12px !important;

  padding: 10px 12px !important;
  margin-bottom: 10px !important;

  border-radius: 12px !important;
  border: 2px solid rgba(138, 75, 31, 0.35) !important;

  background: rgba(255, 252, 244, 0.92) !important;

  box-sizing: border-box !important;
}

.note-directory-item.locked {
  opacity: 0.62 !important;
}

.note-directory-item-title {
  color: #8a4b1f !important;

  font-size: clamp(14px, 1vw, 18px) !important;
  font-weight: 900 !important;

  white-space: nowrap !important;
}

.note-directory-item-text {
  color: #3a2416 !important;

  font-size: clamp(14px, 1vw, 18px) !important;
  line-height: 1.55 !important;

  word-break: break-word !important;
}

.note-directory-item.locked .note-directory-item-text {
  font-weight: 900 !important;
  letter-spacing: 3px !important;
}

/* ================================================= */
/* 筆記目錄：移除大標題後的空間修正 */
/* ================================================= */

.clue-page.note-directory-page .clue-header {
  display: none !important;
}

.clue-page.note-directory-page {
  padding-top: 16px !important;
}

.clue-page.note-directory-page #clueContent {
  height: 100% !important;
}

/* ================================================= */
/* 筆記目錄：放大筆記文字 */
/* ================================================= */

/* 每一則筆記卡片：高度變大一點，讓大字不擠 */
.note-directory-item {
  grid-template-columns: 120px minmax(0, 1fr) !important;
  gap: 18px !important;

  padding: 16px 18px !important;
  margin-bottom: 14px !important;

  align-items: start !important;
}

/* 左邊「筆記 10」 */
.note-directory-item-title {
  font-size: 26px !important;
  line-height: 1.4 !important;

  font-weight: 900 !important;
}

/* 右邊筆記內容 */
.note-directory-item-text {
  font-size: 26px !important;
  line-height: 1.65 !important;

  font-weight: 500 !important;
}

/* 未收集的 ??? 也同步放大 */
.note-directory-item.locked .note-directory-item-text {
  font-size: 26px !important;
  line-height: 1.65 !important;

  letter-spacing: 6px !important;
}

/* 筆記列表區：保留卷軸，讓大字時可以往下滑 */
.note-directory-list {
  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding-right: 14px !important;
}

/* ================================================= */
/* 指認兇手畫面：防重疊最終修正版 */
/* 貼在 style.css 最下面 */
/* ================================================= */

.accusation-screen {
  padding: 16px !important;
  box-sizing: border-box !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 整個米色面板 */
.accusation-panel {
  width: min(86vw, 1380px) !important;
  height: min(820px, 88vh) !important;

  padding: 34px 48px 34px !important;

  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  row-gap: 18px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 大標題 */
.accusation-title {
  margin: 0 !important;

  font-size: clamp(38px, 3.4vw, 54px) !important;
  line-height: 1.1 !important;
  letter-spacing: 7px !important;

  text-align: center !important;
}

/* ================================================= */
/* 第一階段：選人物 */
/* ================================================= */

#suspectSelectArea {
  min-height: 0 !important;

  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;

  padding-top: 36px !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
}

#suspectSelectArea .accusation-instruction {
  margin: 0 0 24px !important;

  font-size: clamp(22px, 1.9vw, 30px) !important;
  line-height: 1.35 !important;
}

.suspect-button-grid,
.suspect-grid {
  margin-top: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(260px, 380px)) !important;
  gap: 28px 36px !important;
}

.suspect-button {
  height: 78px !important;

  font-size: clamp(28px, 2.4vw, 40px) !important;
  line-height: 1 !important;
}

/* ================================================= */
/* 第二階段：選證據 */
/* ================================================= */

/* 讓 JS 控制顯示/隱藏，避免人物選擇和證據選擇同時出現 */
#suspectSelectArea[style*="none"] {
  display: none !important;
}

#suspectSelectArea[style*="flex"] {
  display: flex !important;
}

#evidenceSelectArea[style*="none"] {
  display: none !important;
}

#evidenceSelectArea[style*="flex"] {
  display: grid !important;
}

/* 證據選擇整區：明確切成 4 層，不讓元素互相壓到 */
#evidenceSelectArea,
.evidence-select-area {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  row-gap: 18px !important;

  align-items: center !important;
  justify-items: center !important;

  padding-top: 4px !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
  position: relative !important;
}

/* 防止舊 CSS 把元素變成 absolute 後重疊 */
#evidenceSelectArea > *,
.evidence-select-area > * {
  position: static !important;
}

/* 「你選擇指認：大哥」 */
.selected-suspect-text {
  margin: 0 !important;

  font-size: clamp(22px, 1.9vw, 30px) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;

  text-align: center !important;
}

/* 「請選擇 2 項...」 */
#evidenceSelectArea .accusation-instruction,
.evidence-select-area .accusation-instruction {
  margin: 0 !important;

  font-size: clamp(20px, 1.75vw, 27px) !important;
  line-height: 1.35 !important;
  letter-spacing: 1px !important;

  text-align: center !important;
}

/* 證據卡片區：維持 5 × 2 */
.accusation-evidence-grid {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;

  margin: 0 !important;

  align-self: center !important;
  justify-self: center !important;

  overflow: visible !important;
}

/* 每張證據卡 */
.accusation-evidence-card {
  height: clamp(128px, 15.5vh, 158px) !important;
  min-height: 0 !important;

  padding: 10px 8px !important;

  border-width: 3px !important;
  border-radius: 14px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 證據圖片 */
.accusation-evidence-image {
  width: clamp(54px, 4.6vw, 74px) !important;
  height: clamp(44px, 4vw, 62px) !important;

  margin-bottom: 8px !important;

  object-fit: contain !important;
}

/* 關鍵01 / 次要01 */
.accusation-evidence-code {
  margin-bottom: 4px !important;

  font-size: clamp(14px, 1.1vw, 17px) !important;
  line-height: 1.15 !important;
}

/* 證據名稱 */
.accusation-evidence-name {
  font-size: clamp(15px, 1.2vw, 18px) !important;
  line-height: 1.25 !important;

  font-weight: 900 !important;
  text-align: center !important;

  word-break: keep-all !important;
}

/* 底部返回 / 已選擇 / 確認 */
.accusation-bottom-row {
  width: min(100%, 1120px) !important;

  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;

  column-gap: 24px !important;

  margin: 0 !important;
  padding-top: 4px !important;

  position: static !important;
  box-sizing: border-box !important;
}

.accusation-sub-button,
.accusation-main-button {
  min-width: 160px !important;
  height: 54px !important;

  padding: 0 26px !important;

  border-radius: 16px !important;

  font-size: clamp(19px, 1.55vw, 25px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.accusation-sub-button {
  justify-self: start !important;
}

.accusation-main-button {
  justify-self: end !important;
}

.selected-evidence-counter {
  justify-self: center !important;

  font-size: clamp(22px, 1.8vw, 30px) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;

  white-space: nowrap !important;
}

/* 錯誤提示不要擠版面 */
.accusation-error-text {
  position: absolute !important;
  bottom: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  margin: 0 !important;

  font-size: 18px !important;
  line-height: 1.2 !important;

  text-align: center !important;
}

/* 小螢幕高度時再壓縮一點 */
@media (max-height: 820px) {
  .accusation-panel {
    height: 90vh !important;
    padding: 24px 44px 26px !important;
    row-gap: 12px !important;
  }

  #evidenceSelectArea,
  .evidence-select-area {
    row-gap: 12px !important;
  }

  .accusation-evidence-grid {
    gap: 12px !important;
  }

  .accusation-evidence-card {
    height: clamp(112px, 14vh, 138px) !important;
  }

  .accusation-evidence-image {
    width: 54px !important;
    height: 44px !important;
    margin-bottom: 5px !important;
  }

  .accusation-evidence-name {
    font-size: 14px !important;
  }

  .accusation-sub-button,
  .accusation-main-button {
    height: 48px !important;
    font-size: 20px !important;
  }
}

/* ================================================= */
/* 全畫面切換修正：只有 active 的 screen 可以顯示 */
/* 一定要放在 style.css 最下面 */
/* ================================================= */

.screen {
  display: none !important;
}

.screen.active {
  display: flex !important;
}

/* 保險：避免指認畫面被舊 CSS 強制顯示 */
.accusation-screen:not(.active) {
  display: none !important;
}

/* 保險：避免搜索地圖被舊 CSS 強制顯示 */
.search-screen:not(.active) {
  display: none !important;
}

/* 保險：避免片尾被舊 CSS 強制顯示 */
.credits-screen:not(.active) {
  display: none !important;
}

/* 保險：避免暫存提示被蓋掉 */
.resume-notice-screen.active {
  display: flex !important;
}

/* ================================================= */
/* 調查筆記按鈕：調查階段 + 指認選擇階段顯示 */
/* ================================================= */

/* 預設隱藏，改由 JS 加 .show 控制 */
#notebookButton {
  display: none !important;
}

/* JS 加上 show 時才顯示 */
#notebookButton.show {
  display: flex !important;
  z-index: 950 !important;
}

/* 筆記本視窗要蓋過指認畫面 */
#notebookOverlay {
  z-index: 2000 !important;
}

/* 筆記更新提示也要在上層 */
#notebookUpdateToast {
  z-index: 2100 !important;
}