/* ════════════════════════════════════════════════════════════════════
   說明模式 (Guide Mode) — 一鍵把當前頁面所有可點元素標出來 + 說明
   科幻深色 cyan/slate 主題（配合 base.html / cosmos.html）
   - 切換鈕固定右上角
   - 開啟時：dim overlay + 對每個可互動元素畫青色虛線高亮 + callout 氣泡
   - 關閉時：pointer-events:none，完全不擋頁面
   ════════════════════════════════════════════════════════════════════ */

/* 切換鈕 — 2026-06-24 用戶：移到工具列「開關燈介面」(🌙/👁) 旁，inline 不再 fixed（避免浮層擋內容）*/
/* position:relative + 高 z-index：留在工具列排版流內，但仍浮在 dim overlay(99990) 之上 → 開說明模式時這顆仍亮、可點關閉 */
#bp-guide-toggle {
  position: relative;
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  margin-left: 4px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  vertical-align: middle;
  font-family: -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: #d7f6ff;
  background: linear-gradient(135deg, rgba(8,18,34,.94), rgba(10,26,44,.9));
  border: 1px solid rgba(56,225,255,.55);
  box-shadow: 0 4px 18px rgba(0,0,0,.4), 0 0 14px rgba(56,225,255,.18);
  backdrop-filter: blur(8px);
  transition: .18s;
  user-select: none;
}
#bp-guide-toggle:hover {
  border-color: #38e1ff;
  box-shadow: 0 4px 22px rgba(0,0,0,.5), 0 0 20px rgba(56,225,255,.35);
}
#bp-guide-toggle.is-on {
  background: linear-gradient(135deg, rgba(56,225,255,.28), rgba(56,225,255,.1));
  border-color: #67e8f9;
  color: #eafaff;
  box-shadow: 0 0 0 1px rgba(103,232,249,.3), 0 4px 24px rgba(56,225,255,.4);
}
#bp-guide-toggle .gt-ico { font-size: 14px; }

/* dim overlay（蓋住頁面，但讓 callout / 高亮浮在上面）*/
#bp-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  pointer-events: none;
  background: rgba(3, 7, 16, .55);
  opacity: 0;
  transition: opacity .2s ease;
}
#bp-guide-overlay.is-on { opacity: 1; }

/* 高亮框（畫在每個可互動元素上方，絕對定位、不擋點）*/
.bp-guide-hl {
  position: fixed;
  z-index: 99992;
  pointer-events: none;
  border: 2px dashed #67e8f9;
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(3,7,16,.5), 0 0 16px rgba(56,225,255,.45),
              inset 0 0 12px rgba(56,225,255,.12);
  animation: bp-guide-glow 1.6s ease-in-out infinite;
}
@keyframes bp-guide-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(3,7,16,.5), 0 0 10px rgba(56,225,255,.35),
                         inset 0 0 8px rgba(56,225,255,.1); }
  50%      { box-shadow: 0 0 0 2px rgba(3,7,16,.5), 0 0 22px rgba(56,225,255,.7),
                         inset 0 0 14px rgba(56,225,255,.2); }
}

/* 編號徽章（黏在高亮框左上角）*/
.bp-guide-badge {
  position: fixed;
  z-index: 99994;
  pointer-events: none;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #67e8f9;
  color: #042029;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 10px rgba(56,225,255,.6);
}

/* callout 氣泡（說明文字）*/
.bp-guide-callout {
  position: fixed;
  z-index: 99993;
  pointer-events: auto;          /* 允許 hover/讀 — 但 dim 已擋住底下元素 */
  max-width: 270px;
  min-width: 140px;
  padding: 9px 12px 10px;
  border-radius: 10px;
  font-family: -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: #d7f6ff;
  background: linear-gradient(135deg, rgba(8,18,34,.97), rgba(11,26,46,.95));
  border: 1px solid rgba(56,225,255,.5);
  box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 0 16px rgba(56,225,255,.22);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.bp-guide-callout.is-shown { opacity: 1; transform: translateY(0); }
.bp-guide-callout .gc-num {
  display: inline-block;
  min-width: 17px;
  height: 17px;
  margin-right: 5px;
  border-radius: 999px;
  background: #67e8f9;
  color: #042029;
  font-size: 11px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  vertical-align: 1px;
}
.bp-guide-callout .gc-title {
  font-weight: 700;
  color: #eafaff;
  font-size: 13px;
}
.bp-guide-callout .gc-effect {
  display: block;
  margin-top: 4px;
  color: #a8d4e6;
  font-size: 12px;
  line-height: 1.55;
}
.bp-guide-callout .gc-effect b { color: #bdf0ff; font-weight: 700; }

/* 頁面層級的大說明面板（cosmos 用 canvas，無法逐元素標 → 用一張面板講互動模型）*/
.bp-guide-panel {
  position: fixed;
  z-index: 99995;
  pointer-events: auto;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  top: 56px;
  right: 14px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  font-family: -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: #d7f6ff;
  background: linear-gradient(160deg, rgba(8,18,34,.97), rgba(10,24,42,.96));
  border: 1px solid rgba(103,232,249,.55);
  box-shadow: 0 16px 50px rgba(0,0,0,.6), 0 0 24px rgba(56,225,255,.2);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.bp-guide-panel.is-shown { opacity: 1; transform: translateY(0); }
.bp-guide-panel h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: #eafaff;
  letter-spacing: .5px;
}
.bp-guide-panel .gp-sub {
  margin: 0 0 12px;
  font-size: 12px;
  color: #7fb7c8;
  line-height: 1.5;
}
.bp-guide-panel ul { margin: 0; padding: 0; list-style: none; }
.bp-guide-panel li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(103,232,249,.16);
  font-size: 12.8px;
  line-height: 1.55;
}
.bp-guide-panel li:last-child { border-bottom: 0; }
.bp-guide-panel li .gp-key {
  flex: 0 0 auto;
  display: inline-block;
  min-width: 30px;
  text-align: center;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(103,232,249,.14);
  border: 1px solid rgba(103,232,249,.4);
  color: #a5f3fc;
  font-size: 11.5px;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  white-space: nowrap;
}
.bp-guide-panel li .gp-txt { flex: 1; color: #cfe8f2; }
.bp-guide-panel li .gp-txt b { color: #eafaff; font-weight: 700; }
.bp-guide-panel .gp-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(103,232,249,.2);
  font-size: 11.5px;
  color: #7fb7c8;
  line-height: 1.5;
}

/* 頂部提示條：開啟時告訴使用者按 Esc 關閉 */
#bp-guide-hint {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 99996;
  pointer-events: none;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #d7f6ff;
  font-family: -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: linear-gradient(135deg, rgba(8,18,34,.95), rgba(10,26,44,.92));
  border: 1px solid rgba(56,225,255,.5);
  box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 16px rgba(56,225,255,.25);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
#bp-guide-hint.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#bp-guide-hint b { color: #7fe3ff; }

/* 沒有可標元素時的提示卡 */
.bp-guide-empty {
  position: fixed;
  z-index: 99995;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13px;
  color: #d7f6ff;
  background: linear-gradient(135deg, rgba(8,18,34,.96), rgba(10,26,44,.94));
  border: 1px solid rgba(56,225,255,.5);
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}

@media print {
  #bp-guide-toggle, #bp-guide-overlay, .bp-guide-hl, .bp-guide-badge,
  .bp-guide-callout, .bp-guide-panel, #bp-guide-hint, .bp-guide-empty {
    display: none !important;
  }
}