Spaces:

Lashtw
/

escapetest

Running

Upload 24 files
5b66d64 verified 2 months ago
28.8 kB
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600;700;900&display=swap');

:root{
  --paper: #ead9b6;
  --paper-dark: #3a2a1a;
  --ink: #2b1d10;
  --amber: #c98a3c;
  --amber-dark: #8a5a20;
  --gold: #e0b053;
  --success: #4a7c3f;
  --danger: #a33a2c;
  --panel-bg: #f3e4c2;
  --shadow: rgba(0,0,0,.5);
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; width:100%; height:100%;
  font-family:"Noto Serif TC", serif;
  background:#0d0906;
  color: var(--ink);
  overflow:hidden;
}
.hidden{ display:none !important; }

/* ---------------- 全螢幕開場/結局 ---------------- */
.fullscreen-overlay{
  position:fixed; inset:0; z-index:100;
  background:
    radial-gradient(ellipse at center, rgba(60,40,20,.2), rgba(10,6,3,.92) 75%),
    url('assets/scenes/scene_A_desk.png') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
}
.intro-content{
  max-width: 720px;
  background: linear-gradient(180deg, rgba(243,228,194,.97), rgba(234,217,182,.97));
  border: 3px solid var(--amber-dark);
  border-radius: 12px;
  padding: 36px 40px;
  box-shadow: 0 20px 60px var(--shadow), inset 0 0 40px rgba(139,90,32,.15);
  text-align:center;
  max-height: 88vh;
  overflow-y:auto;
}
.intro-title{
  font-family:"Noto Serif TC", serif; font-weight:900;
  font-size: 2.6em;
  color: var(--amber-dark);
  margin: 0 0 4px;
  letter-spacing: 4px;
}
.intro-sub{
  color:#6b4a26; font-size:1.05em; margin-bottom:20px; letter-spacing:2px;
}
.intro-story{
  text-align:left;
  line-height:1.9;
  font-size:1.02em;
  color: var(--ink);
  margin-bottom: 24px;
  white-space: pre-line;
}
.intro-story b{ color: var(--amber-dark); }

.btn-primary{
  background: linear-gradient(180deg, var(--gold), var(--amber-dark));
  color:#2b1d10;
  border: none;
  padding: 12px 32px;
  font-size: 1.05em;
  font-weight:700;
  border-radius: 8px;
  cursor:pointer;
  box-shadow: 0 4px 0 #6b4114, 0 8px 16px rgba(0,0,0,.4);
  font-family:"Noto Serif TC", serif;
  letter-spacing: 2px;
  transition: transform .1s;
}
.btn-primary:hover{ transform: translateY(-2px); }
.btn-primary:active{ transform: translateY(2px); box-shadow: 0 2px 0 #6b4114; }

.btn-secondary{
  background: rgba(139,90,32,.15);
  border: 1.5px solid var(--amber-dark);
  color: var(--amber-dark);
  padding: 8px 18px;
  border-radius: 6px;
  cursor:pointer;
  font-family:"Noto Serif TC", serif;
  font-weight:600;
}
.btn-secondary:hover{ background: rgba(139,90,32,.28); }

/* ---------------- 遊戲主畫面 ---------------- */
#game-screen{ position:fixed; inset:0; display:flex; flex-direction:column; }

#top-bar{
  height:56px; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(180deg,#241a10,#150e08);
  border-bottom: 2px solid var(--amber-dark);
  padding: 0 16px;
  color: var(--gold);
  gap: 12px;
  z-index: 50;
}
#game-title{
  font-family:"Noto Serif TC", serif;
  font-weight:900;
  font-size:1.18em;
  letter-spacing:1.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
#lock-progress{
  font-size:.92em;
  color:#e6d4ac;
  white-space: nowrap;
  flex-shrink: 1;
}
#lock-progress span{ color: var(--gold); font-weight:700; }

/* 40 分鐘倒數計時器 */
.timer-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  background: rgba(0,0,0,.45);
  border: 1.5px solid var(--amber);
  padding: 4px 12px;
  border-radius: 18px;
  box-shadow: inset 0 0 8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.5);
  flex-shrink: 0;
}
.timer-wrap .timer-icon{ font-size: 1.1em; }
.timer-wrap .timer-label{ font-size: .82em; color: #d4ba8a; font-family:"Noto Serif TC", serif; }
.timer-digits{
  font-family: "Courier New", monospace, sans-serif;
  font-size: 1.15em;
  font-weight: 900;
  color: #ffeaa7;
  letter-spacing: 1px;
  min-width: 54px;
  text-align: center;
}
.timer-wrap.warning{
  border-color: #ff5252;
  background: rgba(60, 10, 10, .6);
  animation: timerWarningPulse 1.2s infinite alternate ease-in-out;
}
.timer-wrap.warning .timer-digits{
  color: #ff7675;
}
@keyframes timerWarningPulse{
  0%{ box-shadow: 0 0 4px rgba(255,82,82,.4); }
  100%{ box-shadow: 0 0 14px rgba(255,82,82,.9); border-color: #ff7675; }
}

#top-bar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink: 0;
}

/* 音樂控制器 */
.music-controls{
  display:flex; align-items:center; gap:8px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(224,176,83,.3);
  padding: 4px 10px;
  border-radius: 20px;
}
.music-controls .btn-icon{
  background: transparent;
  border: none;
  padding: 2px 4px;
  box-shadow: none;
  font-size: .85em;
}
.music-controls .btn-icon:hover{
  background: rgba(224,176,83,.2);
  transform: none;
}
.volume-slider-wrap{
  display:flex; align-items:center; gap:4px;
  color: var(--gold);
}
.volume-slider-wrap .vol-icon{ font-size: 11px; opacity: .85; }
#volume-slider{
  width: 60px;
  height: 5px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(224,176,83,.25);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
#volume-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold);
  border: 1.5px solid #241a10;
  box-shadow: 0 0 6px rgba(224,176,83,.9);
  cursor: pointer;
}
#volume-slider::-moz-range-thumb{
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold);
  border: 1.5px solid #241a10;
  box-shadow: 0 0 6px rgba(224,176,83,.9);
  cursor: pointer;
}

.btn-icon{
  position:relative;
  background: linear-gradient(180deg, rgba(224,176,83,.25), rgba(139,90,32,.25));
  border: 1.5px solid var(--amber);
  border-radius: 8px;
  padding: 6px 12px;
  cursor:pointer;
  display:flex; align-items:center; gap:6px;
  color: var(--gold);
  font-family:"Noto Serif TC", serif;
  font-weight:700;
  font-size:.9em;
  transition: all .15s ease;
  flex-shrink: 0;
  height: 36px;
  box-sizing: border-box;
}
.btn-icon:hover{
  background: linear-gradient(180deg, rgba(224,176,83,.45), rgba(139,90,32,.45));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(224,176,83,.25);
}
.btn-icon-emoji{ font-size:1.15em; line-height:1; }
.btn-icon img{
  width:20px !important;
  height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  object-fit:contain !important;
  border-radius:3px;
  display:inline-block !important;
  flex-shrink:0 !important;
}
.btn-icon-label{ font-size:.9em; white-space:nowrap; }

.badge{
  position:absolute; top:-6px; right:-6px;
  background: var(--danger); color:#fff;
  font-size:.7em; font-weight:700;
  border-radius: 50%; width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}

#stage{
  flex:1; position:relative; overflow:hidden;
  background:#000;
}
#scene-container{
  position:absolute; inset:0;
  background-size: cover;
  background-position:center;
  transition: opacity .4s ease;
}
#scene-container.fading{ opacity: 0; }

#hotspot-layer{ position:absolute; inset:0; }

.hotspot{
  position:absolute;
  cursor:pointer;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  transform: translate(-50%, -50%);
  z-index: 10;
  box-sizing: border-box !important;
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  flex-shrink: 0;
  padding: 0;
}
.hotspot:hover{ z-index: 25; }

.hotspot.locked-node{
  width: 54px;
  height: 54px;
  max-width: 54px;
  max-height: 54px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.85));
}
.hotspot.locked-node.final-vault{
  width: 76px;
  height: 76px;
  max-width: 76px;
  max-height: 76px;
}

.hotspot .hotspot-dot{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1.5px dashed rgba(224,176,83,.4);
  transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), background .2s, border-color .2s, box-shadow .2s;
  display:flex; align-items:center; justify-content:center;
  transform: scale(1);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.hotspot:hover .hotspot-dot{
  background: rgba(224,176,83,.25);
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(224,176,83,.6);
  transform: scale(1.15);
}
.hotspot.found .hotspot-dot{
  background: rgba(120,200,120,.12);
  border: 1.5px solid rgba(120,200,120,.45);
}

/* 機關鎖專屬物件化樣式 */
.hotspot.locked-node .hotspot-dot{
  background: radial-gradient(circle, rgba(139,90,32,.95), rgba(40,25,10,.98));
  border: 2.5px solid var(--gold);
  box-shadow: 0 0 14px rgba(224,176,83,.65), inset 0 0 8px rgba(0,0,0,.8);
  animation: lockGlow 2.5s infinite alternate ease-in-out;
}
.hotspot-lock-img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  opacity: .92;
  pointer-events: none;
  flex-shrink: 0;
  transition: transform .2s ease, opacity .2s;
}
.hotspot.locked-node:hover .hotspot-lock-img{
  transform: scale(1.08);
  opacity: 1;
}
.hotspot.locked-node .hotspot-lock-badge{
  position:absolute;
  bottom: 0px; right: 0px;
  background: #241a10;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  width: 18px; height: 18px;
  display:flex; align-items:center; justify-content:center;
  font-size: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,.7);
  z-index: 5;
  pointer-events: none;
}

@keyframes lockGlow{
  0%{ box-shadow: 0 0 8px rgba(224,176,83,.4), inset 0 0 4px rgba(224,176,83,.2); }
  100%{ box-shadow: 0 0 18px rgba(224,176,83,.9), inset 0 0 10px rgba(224,176,83,.5); border-color:#ffe8a3; }
}

/* 已解開的機關 */
.hotspot.solved .hotspot-dot{
  background: radial-gradient(circle, rgba(40,100,50,.9), rgba(15,40,20,.95));
  border: 2px solid #6cd975;
  box-shadow: 0 0 12px rgba(108,217,117,.5);
}
.hotspot.solved .hotspot-lock-badge{
  background: #143018;
  border: 1.5px solid #6cd975;
  color:#6cd975;
}

/* 隱藏印璽碎片：微微發光的小碎片圖案，拾取後才散發璀璨仙光 */
.hotspot.seal-node{
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
}
.hotspot.seal-node .hotspot-dot{
  border: 1.5px dashed rgba(224, 176, 83, 0.45);
  background: radial-gradient(circle, rgba(255, 235, 170, 0.35), rgba(180, 130, 40, 0.15) 60%, transparent 85%);
  box-shadow: 0 0 8px rgba(224, 176, 83, 0.35);
  opacity: 0.72;
  animation: subtleSealGlow 3s infinite alternate ease-in-out;
  transition: opacity .25s, transform .25s, box-shadow .25s;
  position: relative;
}
/* 碎片內嵌的微光碎玉圖案 */
.hotspot.seal-node .hotspot-dot::before{
  content: '🔶';
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 0 3px rgba(255,215,0,0.6));
  opacity: 0.85;
  transform: scale(0.9);
  transition: transform .2s ease;
}
.hotspot.seal-node:hover .hotspot-dot{
  opacity: 1;
  border-color: var(--gold);
  background: radial-gradient(circle, rgba(255, 240, 180, 0.55), rgba(200, 140, 40, 0.25) 70%, transparent 90%);
  box-shadow: 0 0 14px rgba(224, 176, 83, 0.75);
  transform: scale(1.15);
}
.hotspot.seal-node:hover .hotspot-dot::before{
  transform: scale(1.05);
}

@keyframes subtleSealGlow{
  0%{
    transform: scale(0.94);
    box-shadow: 0 0 5px rgba(224, 176, 83, 0.25);
    border-color: rgba(224, 176, 83, 0.35);
  }
  100%{
    transform: scale(1.05);
    box-shadow: 0 0 11px rgba(224, 176, 83, 0.55), 0 0 18px rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 235, 150, 0.75);
  }
}

/* 找到/拾取後：散發強烈金綠璀璨光芒 */
.hotspot.seal-node.found .hotspot-dot{
  opacity: 1 !important;
  border: 2px solid #6cd975;
  background: radial-gradient(circle, rgba(255,230,130,.75), rgba(108,217,117,.5) 50%, rgba(30,80,40,.3) 80%);
  box-shadow: 0 0 16px rgba(108,217,117,.9), 0 0 28px rgba(255,215,0,.75), inset 0 0 10px rgba(255,255,200,.9);
  animation: sealFoundShimmer 2.2s infinite alternate ease-in-out;
}
.hotspot.seal-node.found .hotspot-dot::before{
  content: '✨';
  font-size: 14px;
}
.hotspot.seal-node.found:hover .hotspot-dot{
  transform: scale(1.2);
  box-shadow: 0 0 24px rgba(108,217,117,1), 0 0 38px rgba(255,225,50,1), inset 0 0 14px rgba(255,255,255,1);
}

@keyframes sealFoundShimmer{
  0%{
    transform: scale(0.95);
    box-shadow: 0 0 12px rgba(108,217,117,.8), 0 0 20px rgba(255,215,0,.5);
    border-color: #6cd975;
  }
  50%{
    box-shadow: 0 0 22px rgba(108,217,117,1), 0 0 32px rgba(255,230,100,.95), inset 0 0 12px rgba(255,255,220,.9);
    border-color: #ffe066;
  }
  100%{
    transform: scale(1.1);
    box-shadow: 0 0 28px rgba(108,217,117,1), 0 0 45px rgba(255,215,0,1), inset 0 0 16px rgba(255,255,240,1);
    border-color: #ffffff;
  }
}

/* 最終機關題目前置與 132 重磅登場特效 */
.final-lock-stage-box{
  background: rgba(24, 16, 10, 0.85);
  border: 2px solid var(--amber);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: inset 0 0 12px rgba(0,0,0,.6);
  text-align: center;
}
.final-equation-title{
  color: #e6d4ac;
  font-size: .95em;
  margin-bottom: 8px;
  font-family: "Noto Serif TC", serif;
}
.final-main-equation{
  font-size: 1.24em;
  color: #fff4d1;
  font-weight: 700;
  margin: 10px 0;
  line-height: 1.8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* 封印未解開時的未知符號 */
.sealed-constant-mystery{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #3d2612, #1f1208);
  border: 1.5px dashed var(--gold);
  color: #ffd166;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: .9em;
  letter-spacing: 1px;
  animation: mysteryPulse 2s infinite alternate ease-in-out;
  box-shadow: 0 0 8px rgba(224,176,83,.4);
}
@keyframes mysteryPulse{
  0%{ border-color: var(--amber); box-shadow: 0 0 4px rgba(224,176,83,.3); }
  100%{ border-color: #fff0aa; box-shadow: 0 0 14px rgba(255,215,0,.8); color: #fff; }
}
/* 132 重磅登場時的金色閃耀爆發樣式 */
.revealed-constant-132{
  display: inline-flex;
  align-items: center;
  background: linear-gradient(180deg, #d4af37, #8b5a20);
  color: #fffef0;
  padding: 3px 12px;
  border-radius: 8px;
  font-size: 1.25em;
  font-weight: 900;
  border: 2px solid #fff2a8;
  text-shadow: 0 0 10px rgba(255,215,0,.9), 0 2px 4px rgba(0,0,0,.8);
  box-shadow: 0 0 22px rgba(255,215,0,1), 0 0 38px rgba(255,180,0,.7);
  animation: heavy132Reveal .9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes heavy132Reveal{
  0%{ transform: scale(0.2) rotate(-15deg); opacity: 0; filter: brightness(3); }
  60%{ transform: scale(1.35) rotate(4deg); opacity: 1; }
  100%{ transform: scale(1) rotate(0deg); opacity: 1; }
}
.verify-stage-guide{
  font-size: .95em;
  line-height: 1.8;
  color: #e0d0b0;
  margin-bottom: 12px;
  text-align: left;
  background: rgba(0,0,0,.3);
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid var(--amber);
}
.hotspot-label{
  position:absolute;
  bottom: 125%;
  left:50%;
  transform: translateX(-50%);
  background: rgba(20,14,8,.94);
  color:#f3e4c2;
  padding:4px 10px;
  border-radius:6px;
  font-size:.82em;
  font-weight:600;
  white-space:nowrap;
  opacity:0;
  pointer-events:none !important;
  transition: opacity .18s ease, transform .18s ease;
  border:1px solid var(--amber);
  box-shadow: 0 4px 12px rgba(0,0,0,.7);
  z-index: 30;
}
.hotspot:hover .hotspot-label{
  opacity:1;
  transform: translateX(-50%) translateY(-4px);
}

.nav-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:56px; height:56px; border-radius:50%;
  background: rgba(20,14,8,.55);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-size:1.4em;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s, transform .15s;
  z-index: 5;
}
.nav-arrow:hover{ background: rgba(224,176,83,.35); transform: translateY(-50%) scale(1.08); }
.nav-left{ left:18px; }
.nav-right{ right:18px; }
.nav-arrow.disabled{ opacity:.25; pointer-events:none; }

#scene-label{
  position:absolute; top:16px; left:50%; transform: translateX(-50%);
  background: rgba(20,14,8,.7);
  color: var(--gold);
  padding: 6px 20px;
  border-radius: 20px;
  border: 1px solid var(--amber);
  font-size: 1.05em;
  letter-spacing: 3px;
  font-family:"Noto Serif TC", serif; font-weight:900;
}

#scene-dots{
  flex-shrink:0; height:44px;
  display:flex; align-items:center; justify-content:center; gap:14px;
  background: linear-gradient(0deg,#241a10,#150e08);
  border-top: 1px solid var(--amber-dark);
}
.scene-dot{
  width:12px; height:12px; border-radius:50%;
  background: rgba(224,176,83,.25);
  border: 1.5px solid var(--amber);
  cursor:pointer;
}
.scene-dot.active{ background: var(--gold); box-shadow:0 0 8px var(--gold); }
.scene-dot.locked{ opacity:.4; cursor:not-allowed; }

/* ---------------- 側邊面板（背包 & 機關紀錄） ---------------- */
.side-panel{
  position:fixed; top:0; right:0; height:100%; width:400px; max-width:92vw;
  background: linear-gradient(180deg, #f3e4c2, #e6d1a0);
  border-left: 3px solid var(--amber-dark);
  box-shadow: -10px 0 30px var(--shadow);
  z-index: 60;
  display:flex; flex-direction:column;
  padding: 18px 20px;
  overflow-y:auto;
  animation: slideIn .25s ease;
}
@keyframes slideIn{ from{ transform: translateX(100%);} to{ transform: translateX(0);} }
.panel-header{ display:flex; align-items:center; justify-content:space-between; }
.panel-header h2{ font-family:"Noto Serif TC", serif; font-weight:900; color: var(--amber-dark); margin:0; font-size:1.45em; }
.panel-hint{ font-size:.85em; color:#6b4a26; margin: 6px 0 16px; line-height: 1.5; }
.btn-close{
  background:none; border:none; font-size:1.6em; color: var(--amber-dark); cursor:pointer; line-height:1;
}

#clue-list, #solved-lock-list{ display:flex; flex-direction:column; gap:12px; }
.clue-section-title{
  font-weight:900; color: var(--amber-dark); font-size:1em;
  margin: 14px 0 2px; padding-bottom:4px;
  border-bottom: 1.5px solid rgba(139,90,32,.3);
}
.clue-section-title:first-child{ margin-top:0; }
.clue-card{
  background: rgba(255,255,255,.45);
  border: 1.5px solid var(--amber-dark);
  border-radius: 8px;
  padding: 10px 12px;
  cursor:pointer;
  display:flex; align-items:center; gap:10px;
  transition: all .15s ease;
}
.clue-card:hover{ background: rgba(255,255,255,.75); transform: translateX(-2px); }
.clue-card .clue-emoji{ font-size:1.6em; }
.clue-card .clue-title{ font-weight:700; color: var(--ink); font-size:.95em; }
.clue-card .clue-loc{ font-size:.78em; color:#8a5a20; }
.clue-card.seal-card{ border-color: #b5842f; background: rgba(224,176,83,.18); }
.clue-empty, .solved-empty{
  color:#8a5a20; text-align:center; margin-top:36px; font-size:.95em; line-height:1.7;
}

/* 已解機關卡片 */
.solved-card{
  background: rgba(255,255,255,.55);
  border: 1.5px solid #8a5a20;
  border-left: 5px solid #4a7c3f;
  border-radius: 8px;
  padding: 12px 14px;
  display:flex; flex-direction:column; gap:6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.solved-card-header{
  display:flex; align-items:center; justify-content:space-between;
}
.solved-card-title{
  font-weight:900; color: var(--amber-dark); font-size:1em;
}
.solved-badge-pill{
  background: rgba(74,124,63,.15);
  color: #3b6832;
  border: 1px solid rgba(74,124,63,.4);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: .75em;
  font-weight:700;
}
.solved-formula{
  font-size: .88em; color: #5a3d1c; line-height: 1.5;
}
.solved-result{
  font-size: .95em; font-weight:700; color: var(--ink);
  background: rgba(224,176,83,.2);
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 2px;
}
.solved-keynote{
  font-size: .85em; font-weight:700; color: #9c4819;
  display:flex; align-items:center; gap:4px;
}
.solved-keynote.highlight{
  color: #b33918;
  background: rgba(217,83,79,.12);
  border: 1px dashed rgba(217,83,79,.4);
  padding: 4px 8px;
  border-radius: 4px;
}

/* ---------------- Modal ---------------- */
.modal-overlay{
  position:fixed; inset:0; z-index:80;
  background: rgba(10,6,3,.75);
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
}
.modal-box{
  position:relative;
  background: linear-gradient(180deg, #f6ecd4, #ecdab3);
  border: 3px solid var(--amber-dark);
  border-radius: 14px;
  max-width: 640px; width:100%;
  max-height: 86vh;
  overflow-y:auto;
  padding: 28px 30px;
  box-shadow: 0 20px 60px var(--shadow);
}
.modal-close{
  position:absolute; top:12px; right:16px;
}
.clue-modal-header, .lock-modal-header{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.clue-modal-header h3, .lock-modal-header h3{
  margin:0; color: var(--amber-dark); font-family:"Noto Serif TC", serif; font-weight:900; font-size:1.4em;
}
#clue-modal-image-wrap, .lock-modal-image-wrap{
  text-align:center; margin-bottom:14px;
}
#clue-modal-image-wrap img, .lock-modal-image-wrap img{
  max-width:100%; max-height:220px; border-radius:8px; border:2px solid var(--amber-dark);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

/* 線索不足提示盒 */
.lock-locked-box{
  background: rgba(163,58,44,.08);
  border: 2px dashed #a33a2c;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 12px 0 16px;
  text-align: center;
}
.lock-locked-badge{
  font-size: 1.05em; font-weight:900; color: #a33a2c; margin-bottom: 10px;
}

.latex-content{
  line-height:1.9; font-size:1.02em; color: var(--ink); margin-bottom: 16px; white-space: pre-line;
}
.latex-content b{ color: var(--amber-dark); }

.modal-ok-btn{ width:100%; }

#lock-modal-hint-toggle{ margin-bottom: 16px; }
#lock-modal-hint{
  margin-top:10px; padding:12px 14px;
  background: rgba(224,176,83,.18);
  border-left: 4px solid var(--amber);
  border-radius: 6px;
  font-size:.95em;
}

#lock-input-area{ margin-bottom: 14px; }
.lock-feedback{
  min-height: 24px; font-weight:700; margin-bottom: 12px; text-align:center;
}
.lock-feedback.correct{ color: var(--success); }
.lock-feedback.wrong{ color: var(--danger); }

/* 轉盤 / 分段輸入樣式 */
.dial-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin: 14px 0; }
.dial-group{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.dial-group label{ font-size:.8em; color:#6b4a26; }
.dial-input{
  width: 84px; padding: 10px 6px;
  text-align:center; font-size:1.2em; font-weight:700;
  border: 2px solid var(--amber-dark); border-radius: 8px;
  background:#fffaf0; color: var(--ink);
  font-family:"Noto Serif TC", serif;
}
.dial-input:focus{ outline:2px solid var(--gold); }
.single-input{
  width: 100%; max-width:220px; display:block; margin: 14px auto 0;
  padding: 12px; text-align:center; font-size:1.3em; font-weight:700;
  border: 2px solid var(--amber-dark); border-radius: 8px;
  background:#fffaf0; color: var(--ink);
}

.success-modal-box{ text-align:center; max-width: 420px; }
.success-icon{ font-size:3em; margin-bottom:6px; }
#success-title{ color: var(--success); font-family:"Noto Serif TC", serif; font-weight:900; font-size:1.6em; margin:6px 0; }
#success-reward{ line-height:1.7; margin-bottom:20px; }

#ending-stats{
  background: rgba(224,176,83,.18);
  border: 1.5px solid var(--amber);
  border-radius:10px;
  padding: 16px 20px;
  margin-bottom:20px;
  font-size:.96em;
  line-height:1.9;
  box-shadow: inset 0 0 10px rgba(139,90,32,.1);
}
.time-stat-grid{
  display:flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.time-stat-card{
  flex: 1;
  min-width: 200px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 8px 14px;
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.time-stat-label{ font-size: .85em; color: #7a4f21; font-weight:700; }
.time-stat-val{ font-size: 1.15em; font-weight: 900; color: var(--ink); font-family: "Courier New", monospace, sans-serif; }
.time-stat-card.hidden-time{
  background: linear-gradient(180deg, rgba(255,245,210,.9), rgba(240,220,160,.9));
  border-color: #d4af37;
  box-shadow: 0 0 10px rgba(212,175,55,.35);
}
.time-stat-card.hidden-time .time-stat-val{ color: #9c6500; }

.intro-btns{
  display:flex; flex-direction:column; align-items:center; gap:8px;
}

.ending-actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:16px;
}

/* 五關通關震撼轉場層 */
.door-reveal-overlay{
  position:fixed; inset:0; z-index:150;
  background: radial-gradient(circle at center, rgba(139,90,32,.9), rgba(15,10,5,.98) 70%);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation: revealFadeIn .6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes revealFadeIn{
  from{ opacity:0; transform: scale(1.08); }
  to{ opacity:1; transform: scale(1); }
}
.door-reveal-box{
  max-width: 620px;
  background: linear-gradient(180deg, rgba(246,236,212,.98), rgba(230,210,165,.98));
  border: 4px solid var(--gold);
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 0 60px rgba(224,176,83,.6), 0 20px 60px rgba(0,0,0,.9);
  animation: boxShake .5s ease-out;
}
@keyframes boxShake{
  0%, 100%{ transform: translate(0,0); }
  20%{ transform: translate(-4px, 2px); }
  40%{ transform: translate(4px, -2px); }
  60%{ transform: translate(-2px, 1px); }
  80%{ transform: translate(2px, -1px); }
}
.door-reveal-icon{ font-size:3.6em; margin-bottom:8px; animation: glowPulse 2s infinite alternate ease-in-out; }
@keyframes glowPulse{ from{ filter: drop-shadow(0 0 10px rgba(224,176,83,.5)); } to{ filter: drop-shadow(0 0 30px rgba(224,176,83,.95)); } }
.door-reveal-title{
  color: var(--amber-dark); font-family:"Noto Serif TC", serif; font-weight:900; font-size:1.8em; margin: 6px 0 14px;
  letter-spacing: 2px;
}
.door-reveal-text{
  font-size:1.05em; line-height:1.9; color: var(--ink); margin-bottom:24px;
}
.pulse-btn{
  animation: pulseBtn 1.8s infinite ease-in-out;
}
@keyframes pulseBtn{
  0%, 100%{ transform: scale(1); box-shadow: 0 4px 0 #6b4114, 0 8px 16px rgba(0,0,0,.4); }
  50%{ transform: scale(1.05); box-shadow: 0 4px 0 #6b4114, 0 12px 28px rgba(224,176,83,.8); }
}

.toast{
  position:fixed; bottom: 70px; left:50%; transform: translateX(-50%);
  background: rgba(20,14,8,.92); color: var(--gold);
  border: 1.5px solid var(--amber);
  padding: 10px 22px; border-radius: 24px;
  font-size:.95em; z-index: 200;
  animation: toastIn .2s ease;
}
@keyframes toastIn{ from{ opacity:0; transform: translate(-50%, 10px);} to{ opacity:1; transform: translate(-50%,0);} }

/* 結局立繪與對白視覺專區 */
.ending-content-box{
  max-width: 720px !important;
  max-height: 92vh;
  overflow-y: auto;
}
.ending-visual-wrap{
  display:flex;
  justify-content:center;
  margin: 12px 0 16px;
}
.ending-portrait-card{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  background: linear-gradient(180deg, rgba(40,25,12,.95), rgba(20,12,6,.98));
  border: 3px solid var(--gold);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.7), 0 0 25px rgba(224,176,83,.4);
  position:relative;
  animation: portraitFadeIn .7s ease;
}
@keyframes portraitFadeIn{
  from{ opacity:0; transform: translateY(12px) scale(.95); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.ending-portrait-img{
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  border: 1.5px solid var(--amber);
  box-shadow: 0 4px 12px rgba(0,0,0,.8);
}
.ending-portrait-card.jade-seal .ending-portrait-img{
  border-color: #7ce890;
  box-shadow: 0 0 24px rgba(120,230,140,.6), 0 0 40px rgba(255,215,0,.5);
}
.ending-role-tag{
  margin-top: 8px;
  background: linear-gradient(90deg, #8b5a20, #4a2808, #8b5a20);
  color: var(--gold);
  font-family: "Noto Serif TC", serif;
  font-weight: 900;
  font-size: .92em;
  letter-spacing: 2px;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid var(--amber);
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.ending-dialog-box{
  background: rgba(246,236,212,.95);
  border: 2px solid var(--amber-dark);
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: inset 0 0 15px rgba(139,90,32,.12);
  margin-bottom: 16px;
}

/* KaTeX 微調 */
.katex{ font-size: 1.05em; }

@media (max-width: 640px){
  #game-title{ font-size:1.0em; }
  #lock-progress{ display:none; }
  .music-controls{ padding: 2px 6px; }
  #volume-slider{ width: 45px; }
  .nav-arrow{ width:44px; height:44px; font-size:1.1em; }
  .intro-content{ padding: 20px 16px; }
  .modal-box{ padding: 18px 16px; }
  .door-reveal-title{ font-size:1.35em; }
  .ending-portrait-img{ width: 160px; height: 160px; }
}