/* 包青天斷案錄引擎樣式:所有選擇器以 .bqt(createEngine 的 root)開頭,不外洩到宿主頁 */
.bqt { font-family: "Microsoft JhengHei", "PingFang TC", sans-serif; color: #eee; user-select: none; }
.bqt * { margin: 0; padding: 0; box-sizing: border-box; }
.bqt .hidden { display: none !important; }
/* ---- 載入畫面 ---- */
.bqt #loadScreen {
  position: fixed; inset: 0; z-index: 70;
  /* 大堂背景壓一層暗罩——不壓的話金字和進度條會埋在匾額的亮部裡 */
  background: linear-gradient(rgba(13,13,20,.78), rgba(13,13,20,.92)),
              #0d0d14 url("assets/img/bg/bg_court.png") center / cover no-repeat;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px;
}
.bqt #loadTitle { color: #e0b84c; letter-spacing: 0.3em; font-size: 1.2em; }
.bqt #loadTrack {
  width: min(70vw, 360px); height: 10px; border: 1px solid #7a5c1e;
  border-radius: 5px; overflow: hidden; background: #1a130b;
}
.bqt #loadBar {
  width: 0%; height: 100%; transition: width 0.2s;
  background: linear-gradient(90deg, #7a5c1e, #e0b84c);
}
.bqt #loadPct { color: #997; font-size: 0.9em; letter-spacing: 0.1em; }

/* ---- 遊戲主畫面 ---- */
.bqt #stage {
  position: relative; height: 340px; border: 3px solid #7a5c1e;
  border-bottom: none; border-radius: 10px 10px 0 0; overflow: hidden;
  display: flex; justify-content: center; align-items: center;
}
.bqt #portrait { font-size: 130px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)); }
.bqt #portraitImg {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 94%; max-width: 90%; object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.6));
}
.bqt .evIcon img { width: 56px; height: 56px; object-fit: contain; }
.bqt #nameplate {
  position: absolute; top: 12px; left: 12px; padding: 4px 14px;
  background: rgba(0,0,0,.6); border: 1px solid #e0b84c; border-radius: 4px;
  color: #e0b84c; letter-spacing: 0.1em;
}
.bqt #hp {
  position: absolute; top: 12px; right: 12px; padding: 4px 10px;
  background: rgba(0,0,0,.6); border-radius: 4px; font-size: 0.9em;
}
.bqt #btnBag {
  position: absolute; bottom: 12px; right: 12px; padding: 8px 14px;
  background: #2a1f14; color: #e0b84c; border: 1px solid #7a5c1e;
  border-radius: 6px; cursor: pointer; font-size: 1em;
}
.bqt #btnFF {
  position: absolute; bottom: 12px; left: 12px; padding: 8px 14px;
  background: #2a1f14; color: #e0b84c; border: 1px solid #7a5c1e;
  border-radius: 6px; cursor: pointer; font-size: 1em;
}
.bqt #endGrade { color: #e0b84c; font-size: 1.2em; letter-spacing: 0.1em; margin-bottom: 20px; }
.bqt .overlayScreen button + button { margin-top: 10px; }
.bqt #toast {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%); z-index: 6;
  padding: 6px 14px; background: rgba(0,0,0,.8); color: #e0b84c;
  border: 1px solid #7a5c1e; border-radius: 6px; white-space: nowrap;
}
.bqt #banner {
  position: absolute; inset: 0; display: flex; justify-content: center; align-items: center;
  background: rgba(0,0,0,.75); color: #e0b84c; font-size: 1.8em;
  letter-spacing: 0.3em; z-index: 5;
}
.bqt #flash {
  position: fixed; inset: 0; z-index: 50;
  display: flex; justify-content: center; align-items: center;
  background: #fff; /* 圖載入失敗時的純白 fallback */
}
.bqt #flashImg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; animation: bqt-slamZoom 1.4s ease-out;
}
.bqt #flashText {
  position: relative; z-index: 1; margin-top: 38vh;
  color: #c1121f; font-size: clamp(3em, 12vw, 6.5em); font-weight: 900;
  letter-spacing: 0.1em; -webkit-text-stroke: 3px #fff;
  text-shadow: 0 0 24px rgba(0,0,0,.9), 5px 5px 0 #000;
}
@keyframes bqt-slamZoom { 0% { transform: scale(1.15); } 100% { transform: scale(1); } }
.bqt #penaltyFlash {
  position: fixed; inset: 0; z-index: 50;
  display: flex; justify-content: center; align-items: center;
  background: #f5e6c8; /* 圖載入失敗時的 fallback */
}
.bqt #penaltyImg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; animation: bqt-slamZoom 1.4s ease-out;
}
.bqt #penaltyText {
  position: relative; z-index: 1; margin-top: 40vh;
  color: #2a4b8d; font-size: clamp(2.4em, 9vw, 5em); font-weight: 900;
  letter-spacing: 0.1em; -webkit-text-stroke: 3px #fff;
  text-shadow: 0 0 20px rgba(0,0,0,.5), 4px 4px 0 rgba(0,0,0,.7);
  transform: rotate(-6deg);
}

/* ---- 三選一 ---- */
.bqt #choiceBox {
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: #1a130b; border-left: 3px solid #7a5c1e; border-right: 3px solid #7a5c1e;
}
.bqt .choiceBtn {
  padding: 12px 16px; font-size: 1.05em; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, #2a1f14, #1a130b);
  color: #e0b84c; border: 1px solid #7a5c1e; border-radius: 6px;
  font-family: inherit; line-height: 1.5;
}
.bqt .choiceBtn:hover { background: #3a2c1a; filter: brightness(1.2); }
.bqt.bqt-shake #game, .bqt.bqt-shake #flash, .bqt.bqt-shake #penaltyFlash { animation: bqt-shake 0.4s; }
@keyframes bqt-shake {
  0%,100% { transform: translate(0); } 20% { transform: translate(-8px, 4px); }
  40% { transform: translate(8px, -4px); } 60% { transform: translate(-6px, -3px); }
  80% { transform: translate(6px, 3px); }
}

/* ---- 詰問操作列 ---- */
.bqt #testimonyBar {
  display: flex; gap: 8px; padding: 10px;
  background: #1a130b; border-left: 3px solid #7a5c1e; border-right: 3px solid #7a5c1e;
  align-items: center; flex-wrap: wrap;
}
.bqt #stCounter { color: #997; font-size: 0.85em; margin-right: auto; }
.bqt #testimonyBar button {
  padding: 10px 16px; font-size: 1em; cursor: pointer; border-radius: 6px;
  border: 1px solid #7a5c1e; background: #2a1f14; color: #eee;
}
.bqt #btnPress { border-color: #4a7a9e; color: #9ecfff; }
.bqt #btnPresent { border-color: #9e4a4a; color: #ff9e9e; font-weight: bold; }
.bqt #testimonyBar button:hover { filter: brightness(1.4); }

/* ---- 對話框 ---- */
.bqt #dialogueBox {
  min-height: 130px; padding: 16px 20px; cursor: pointer;
  background: linear-gradient(180deg, #1e1629, #14101c);
  border: 3px solid #7a5c1e; border-radius: 0 0 10px 10px;
}
.bqt #speaker {
  display: inline-block; padding: 2px 12px; margin-bottom: 8px;
  background: #7a1e1e; border-radius: 4px; font-size: 0.9em; letter-spacing: 0.1em;
}
.bqt #text { line-height: 1.7; font-size: 1.15em; min-height: 3.4em; }
.bqt #hint { text-align: right; color: #665; font-size: 0.8em; margin-top: 6px; }

/* ---- 證物袋 ---- */
.bqt #evModal {
  position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.8);
  display: flex; justify-content: center; align-items: center;
}
.bqt #evPanel {
  width: min(92vw, 560px); max-height: 80vh; overflow-y: auto;
  background: #1a130b; border: 2px solid #e0b84c; border-radius: 10px; padding: 20px;
}
.bqt #evTitle { color: #e0b84c; margin-bottom: 14px; letter-spacing: 0.15em; }
.bqt #evGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bqt .evItem {
  text-align: left; padding: 12px; cursor: pointer; border-radius: 8px;
  background: #241a10; border: 1px solid #7a5c1e; color: #eee; font-family: inherit;
}
.bqt .evItem:hover { background: #3a2c1a; }
.bqt .evIcon { font-size: 1.8em; display: block; margin-bottom: 4px; }
.bqt .evItem small { display: block; color: #aa9; margin-top: 4px; line-height: 1.4; }
.bqt #evClose {
  margin-top: 14px; padding: 8px 18px; cursor: pointer; border-radius: 6px;
  background: #2a1f14; color: #e0b84c; border: 1px solid #7a5c1e; font-size: 1em;
}
/* ---- 證物檢視(細看) ---- */
.bqt #evDetail { text-align: center; }
/* ponytail: 證物圖皆 1:1,圖框寬度定死讓熱區百分比與圖對齊;非方圖高度隨比例 */
.bqt #insFig { position: relative; width: min(100%, 45vh); margin: 0 auto 10px; }
.bqt #insFig img { display: block; width: 100%; height: auto; }
.bqt .insEmoji { display: block; font-size: 96px; line-height: 1.3; }
.bqt .insSpot {
  position: absolute; padding: 0; cursor: pointer; border-radius: 6px;
  border: 2px dashed rgba(224,184,76,.9); background: rgba(224,184,76,.12);
}
.bqt .insSpot.seen { border-style: solid; border-color: #7fbf7f; background: rgba(127,191,127,.12); }
.bqt #insName { display: block; color: #e0b84c; font-size: 1.1em; letter-spacing: .1em; }
.bqt #insDesc { color: #aa9; margin: 6px 0 10px; line-height: 1.5; }
.bqt #insHint { color: #e0b84c; font-size: .9em; margin: 0 0 8px; }
.bqt #insList { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.bqt .insPt {
  padding: 8px 12px; text-align: left; cursor: pointer; border-radius: 6px; line-height: 1.5;
  background: #241a10; border: 1px solid #7a5c1e; color: #eee; font-family: inherit; font-size: 1em;
}
.bqt .insPt.seen { border-color: #7fbf7f; }
.bqt .insPt small { display: block; color: #dcc9a0; margin-top: 4px; }
.bqt .evItem small.insCount { color: #e0b84c; }
.bqt #insPresent, .bqt #insBack {
  margin-top: 12px; padding: 8px 18px; cursor: pointer; border-radius: 6px;
  background: #2a1f14; color: #e0b84c; border: 1px solid #7a5c1e; font-size: 1em;
}
.bqt #insPresent { margin-right: 8px; border-color: #9e4a4a; color: #ff9e9e; font-weight: bold; }

/* ---- 結局 / 敗北 ---- */
.bqt .overlayScreen {
  position: fixed; inset: 0; z-index: 60; background: rgba(5,5,10,.95);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 20px;
}
.bqt .overlayScreen h2 { color: #e0b84c; font-size: 2em; letter-spacing: 0.2em; margin-bottom: 20px; }
.bqt .overlayScreen p { color: #ccc; line-height: 2; white-space: pre-line; margin-bottom: 32px; }
.bqt .overlayScreen button {
  padding: 12px 32px; font-size: 1.1em; cursor: pointer; border-radius: 8px;
  background: #2a1f14; color: #e0b84c; border: 2px solid #7a5c1e;
}
@media (max-width: 600px) {
  .bqt #stage { height: 260px; }
  .bqt #portrait { font-size: 90px; }
  .bqt #evGrid { grid-template-columns: 1fr; }
  .bqt #insFig { width: min(100%, 38vh); }
}