/* =========================================================
   基底：變數 / 字型
   ========================================================= */
:root{
  --tile: 40px;
  --pad-size: 64px;  /* D‑pad 與 A/SEL 尺寸一致 */
  --pad-gap: 12px;   /* 按鍵間距一致 */
  font-family: system-ui, Inter, "Segoe UI", Arial, sans-serif;
}

body{ margin:0; color:#eaf0ff; }

/* =========================================================
   夜色漸層主題（含微光暈）
   ========================================================= */
body{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(59,76,192,.25), transparent 60%),
    radial-gradient(800px 400px at 80% 40%, rgba(255,70,70,.12), transparent 55%),
    linear-gradient(180deg, #0f1220 0%, #0b0e17 100%);
}

header, footer{ padding:8px 12px; background: transparent; color:#8ca0ff; }

/* =========================================================
   版面
   ========================================================= */
.wrap{
  display:flex;
  flex-direction:column;
  min-height: calc(100vh - 0px);

  /* Floor background stage.
     A1 at menu, then game.js will switch to A2~A5 depending on floor.
     Must be on the stage container (not #grid), because tiles fully cover #grid. */
  /* Default background at main menu (PC). */
  background-image: url('assets/background/A1_pc.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #000;
}

/* Mobile background (fallback) */
@media (max-width: 768px){
  .wrap{ background-image: url('assets/background/A1_m.jpg'); }
  #menu{ background-image: url('assets/background/A1_m.jpg'); }
}
#game{ flex:1; display:none; flex-direction:column; }

/* =========================================================
   主選單（霧面面板 直排按鈕）
   ========================================================= */
#menu{ display:flex; align-items:center; justify-content:center; padding: 48px 24px; min-height: 100vh; box-sizing:border-box; overflow:hidden; }
#menu .panel{
  display:grid; grid-template-columns:1fr; row-gap:12px;
  background: rgba(22, 28, 45, 0.85);
  border: 1px solid rgba(120,140,200,.25);
  border-radius: 16px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 28px 24px; backdrop-filter: blur(6px);

  max-width: min(520px, 46vw);
}
#menu .panel h1{ margin:0 0 14px; font-size:26px; letter-spacing:.5px; color:#eaf0ff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
#menu .panel button{
  width:100%; height:48px; border-radius:12px; font-size:16px; font-weight:600;
  border:0; cursor:pointer; transition:all .18s ease; color:#eef3ff;
  box-shadow: 0 10px 24px rgba(24,40,90,.35), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  background: linear-gradient(180deg, #3b5ef8 0%, #2e49c8 100%);
}
#menu .panel button:hover{
  box-shadow: 0 16px 36px rgba(24,40,90,.45), inset 0 -2px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
  transform: translateY(-1px);
}
#menu .panel button[disabled]{ background: linear-gradient(180deg, #33405f 0%, #2a3248 100%); color:#a9b3cf; cursor:not-allowed; opacity:.85; }
/* 離開遊戲特別色 */
#menu button[onclick]{ background: linear-gradient(180deg, #e85757 0%, #c13b3b 100%); }
#menu button[onclick]:hover{
  box-shadow: 0 16px 36px rgba(180,40,40,.45), inset 0 -2px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
}

/* =========================================================
   HUD（遊戲狀態列）
   ========================================================= */
#hud{
  display:flex; flex-wrap:wrap; gap:10px; padding:8px;
  justify-content:center; align-items:center;
  width: calc(9 * 40px);
  max-width: calc(100% - 16px);
  margin: 6px auto 0;
  background: linear-gradient(180deg, rgba(18,22,38,.85), rgba(15,19,32,.85));
  border-radius: 12px;
}

#hud .stat{ background: rgba(22,28,45,.85); border:1px solid rgba(120,140,200,.18); border-radius:8px; padding:6px 10px; }

.stat-icon{ cursor: default; user-select:none; display:flex; align-items:center; gap:6px; }
.stat-icon[data-tip]{ position:relative; }
.stat-icon[data-tip]:hover::after{
  content: attr(data-tip);
  position:absolute;
  left:50%; top:calc(100% + 6px);
  transform: translateX(-50%);
  background: rgba(10,12,18,.95);
  border:1px solid rgba(140,160,255,.25);
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  white-space:nowrap;
  z-index:9999;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.hero-name{ color:#8ca0ff; font-weight:700; }

/* =========================================================
   地圖 Grid
   ========================================================= */
#grid{
  display:grid;
  grid-template-columns: repeat(9, 40px);
  grid-template-rows: repeat(9, 40px);
  width: calc(9 * 40px);
  height: calc(9 * 40px);
  /* Keep transparent so the stage background can be visible behind tiles / gaps */
  background: transparent;
  margin:12px auto;
  position:relative;
}
.cell{ width:var(--tile); height:var(--tile); display:flex; align-items:center; justify-content:center; font-size:22px; }
.floor{ background:#101010; } .wall{ background:#2b2b2b; }
#hero{ position:absolute; width:var(--tile); height:var(--tile); display:flex; align-items:center; justify-content:center; font-size:22px; pointer-events:none; }

/* =========================================================
   右上角 Overlay（不遮右下 D‑pad）
   ========================================================= */
#overlay{ position: fixed; top: 12px; right: 12px; bottom:auto; left:auto; width: min(480px, 40vw); display:none; z-index:1000; pointer-events:auto; }
#overlay .card{
  max-height: 72vh; overflow:auto;
  background: rgba(22, 28, 45, 0.92);
  border-left: 1px solid rgba(120,140,200,.25);
  box-shadow: -18px 0 46px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  padding:16px; border-radius:12px;
}
#overlay h3{ margin:8px 0 12px; color:#eaf0ff; text-shadow:0 1px 2px rgba(0,0,0,.25); }
#overlay .row{ display:flex; gap:8px; margin:10px 0; flex-wrap:wrap; }
#overlay button{ height:36px; border-radius:10px; padding:0 12px; cursor:pointer; border:0; color:#eef3ff; box-shadow: 0 10px 24px rgba(24,40,90,.25), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08); background: linear-gradient(180deg, #3b5ef8 0%, #2e49c8 100%); }
#overlay button:disabled{ cursor:not-allowed; opacity:.65; filter: grayscale(.25); }

/* Segmented buttons for settings (m/pc, auto/manual) */
#overlay .seg{ min-width:56px; background: linear-gradient(180deg, #32457d 0%, #253463 100%); box-shadow: 0 10px 24px rgba(24,40,90,.18), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08); }
#overlay .seg.active{ background: linear-gradient(180deg, #48c37c 0%, #2c9b5a 100%); }
.btn-selected{ outline:2px solid #8ca0ff; filter:brightness(1.06); }
#overlay input[type="range"]{ accent-color:#8ca0ff; }

/* =========================================================
   D‑pad（遊戲開始後顯示，預設 JS 控制）
   ========================================================= */
#dpadCross{
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: none; /* 初始隱藏（首頁） */
  z-index: 9999;
  display: grid; grid-template-columns: repeat(3, var(--pad-size)); grid-template-rows: repeat(3, var(--pad-size)); gap: var(--pad-gap);
  align-items: center; justify-items: center;
}
#dpadCross button{
  width: var(--pad-size); height: var(--pad-size);
  border-radius: 50%; border:0; color:#eef3ff; font-weight:700; font-size:20px;
  cursor:pointer; touch-action:manipulation; user-select:none;
  background: linear-gradient(180deg, #3b5ef8 0%, #2e49c8 100%);
  box-shadow: 0 10px 24px rgba(24,40,90,.35), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .12s ease, filter .12s ease;
}
#dpadCross button:active{ transform: translateY(1px); filter: brightness(.96); }
#btnUp   { grid-row: 1; grid-column: 2; }
#btnLeft { grid-row: 2; grid-column: 1; }
#btnRight{ grid-row: 2; grid-column: 3; }
#btnDown { grid-row: 3; grid-column: 2; }
/* A / SEL 垂直同側（左下或右下） */
#actionsStack{ position: fixed; bottom: 16px; z-index: 9999; display: none; display: flex; flex-direction: column; gap: var(--pad-gap); }
#actionsStack.pos-right{ right:16px; left: auto; }
#actionsStack.pos-left { left: 16px; right: auto; }
#actionsStack button{ width: var(--pad-size); height: var(--pad-size); border-radius: 50%; border:0; color:#eef3ff; font-weight:700; font-size:20px; cursor:pointer; touch-action:manipulation; user-select:none; background: linear-gradient(180deg, #3b5ef8 0%, #2e49c8 100%); box-shadow: 0 10px 24px rgba(24,40,90,.35), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08); transition: transform .12s ease, filter .12s ease; }
#actionsStack button:active{ transform: translateY(1px); filter: brightness(.96); }

@media (max-width: 1024px){ #dpadCross{ display:none; } #actionsStack{ display:none; } }
@media (min-width: 1025px){ #dpadCross{ display:none; } #actionsStack{ display:none; } }

/* =========================================================
   Emoji 動畫（Hero / Monsters）
   ========================================================= */
#hero { transform-origin: 50% 100%; pointer-events: none; }
#hero.face-left  { transform: scaleX(1); }
#hero.face-right { transform: scaleX(-1); }
#hero.face-right.no-flip{ transform: none; }

#hero.face-up, #hero.face-down { transform: none; }
#hero .hero-emoji { display:inline-block; }
#hero.walking .hero-emoji { animation: walk 320ms infinite ease-in-out; }
.cell .emo { display:inline-block; }
.cell .monster { animation: monsterIdle 900ms infinite ease-in-out; will-change: transform; }

@keyframes walk { 0%{ transform: translateY(0) rotate(-2deg);} 50%{ transform: translateY(-2px) rotate(2deg);} 100%{ transform: translateY(0) rotate(-2deg);} }
@keyframes monsterIdle { 0%{ transform: translateY(0);} 50%{ transform: translateY(-1px);} 100%{ transform: translateY(0);} }

#hero .hero-frame{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; opacity: 0; }
#hero .frame1 { animation: heroSwapA 1s steps(1) infinite; }
#hero .frame2 { animation: heroSwapB 1s steps(1) infinite; }
@keyframes heroSwapA { 0%{opacity:1} 50%{opacity:0} 100%{opacity:1} }
@keyframes heroSwapB { 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} }
#hero.walking .frame1{ animation: heroSwapA 1s steps(1) infinite; }
#hero.walking .frame2{ animation: heroSwapB 1s steps(1) infinite; }

/* ===== 隊員帧動畫（CSS 版，不受主角移動影響） ===== */
@keyframes compSwapA { 0%{opacity:1} 50%{opacity:0} 100%{opacity:1} }
@keyframes compSwapB { 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} }
.companion .comp1 { animation: compSwapA 1s steps(1) infinite; }
.companion .comp2 { animation: compSwapB 1s steps(1) infinite; }

/* =========================================================
   舞台置中（圖片＋文字）— 原有通用
   ========================================================= */
.center-stage{
  min-height: calc(100vh - 140px);
  padding: 24px 12px 140px; /* 預留底部空間給固定操作鍵 */
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px;
}
.center-stage img{ max-width: min(92vw, 900px); height: auto; display: block; border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,.35); }
.center-stage .caption{ max-width: 92vw; line-height: 1.7; color: #eaf0ff; }
.center-stage .hint{ opacity:.82; font-size: 14px; color:#a9b3cf; }

/* =========================================================
   全螢幕故事層（#storyOverlayFS）樣式 / 通用按鈕
   ========================================================= */
#storyOverlayFS { font-size:18px; line-height:1.8; text-align:left; }
#storyOverlayFS p { margin:6px 0; }
#storyOverlayFS .progress { margin-top:12px; opacity:.7; }
#storyOverlayFS .hint { margin-top:8px; opacity:.6; }
#storyOverlayFS .btn-bar { margin-top:6px; }

/* 通用按鈕（供故事層、Overlay、主選單重用） */
.btn{
    width:auto;
height:36px; border-radius:10px; padding:0 14px; cursor:pointer; border:0; color:#eef3ff;
  background: linear-gradient(180deg, #3b5ef8 0%, #2e49c8 100%);
  box-shadow: 0 10px 24px rgba(24,40,90,.25), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .12s ease, filter .12s ease, box-shadow .18s ease;
}
.btn:hover{ box-shadow: 0 16px 36px rgba(24,40,90,.38), inset 0 -2px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1); }
.btn:active{ transform: translateY(1px); filter: brightness(.96); }
.btn-primary{ background: linear-gradient(180deg, #5f8bff 0%, #3b5ef8 100%); }
#storyOverlayFS .btn-bar .btn { margin: 0 6px; }

/* 故事圖片：交由 CSS 控制（Route A + 圖片放大） */
#storyOverlayFS .story-img{
  max-width: min(72vw, 1000px);
  max-height: 60vh;           /* ↑ 把圖片變大（可調 56~64） */
  display:block; margin:0 auto 12px;
  border-radius:12px; box-shadow: 0 18px 48px rgba(0,0,0,.35);
}

/* =========================================================
   三行分頁（故事層文字區塊）
   ========================================================= */
#storyOverlayFS .stage{
  position: relative;
  width: min(72vw, 1000px);
  margin: 8px auto 12px;
}
#storyOverlayFS .story-lines{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(22,28,45,0.66);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
#storyOverlayFS .story-lines .line{
  min-height: 1.6em;
  color: #eaf0ff;
}

/* 進/退場動畫（保留；若不使用，JS 不套 class 即可） */
@keyframes slideUpIn   { from{ transform: translateY(24px); opacity:0; } to{ transform: translateY(0); opacity:1; } }
@keyframes slideUpOut  { from{ transform: translateY(0);   opacity:1; } to{ transform: translateY(-24px); opacity:0; } }
@keyframes slideDownIn { from{ transform: translateY(-24px); opacity:0; } to{ transform: translateY(0); opacity:1; } }
@keyframes slideDownOut{ from{ transform: translateY(0);   opacity:1; } to{ transform: translateY(24px); opacity:0; } }

#storyOverlayFS .story-lines.enter-up   { animation: slideUpIn 240ms ease-out both; }
#storyOverlayFS .story-lines.leave-up   { animation: slideUpOut 240ms ease-in  both; position:absolute; inset:0; }
#storyOverlayFS .story-lines.enter-down { animation: slideDownIn 240ms ease-out both; }
/* 修正原本 typo：slideDownOut240ms -> slideDownOut 240ms */
#storyOverlayFS .story-lines.leave-down { animation: slideDownOut 240ms ease-in both; position:absolute; inset:0; }

/* =========================================================
   視窗固定（無滾輪）
   ========================================================= */
html, body { height: 100vh; overflow: hidden; } /* 僅去除捲軸；不影響既有版面 */

/* =========================================================
   隊員對話泡泡（貼在地圖下方）
   ========================================================= */
/* 版本一：寬度跟 9x9 地圖一致（calc 公式） */
#sideTalk{
  position: relative;
  width: calc(9 * 40px); /* 若你改 --tile，可用 calc(9 * var(--tile)) */
  z-index: 2;
  display: none;
  pointer-events: none;
  margin-top: 6px;
}
#sideTalk .bubble{
  background: rgba(22,28,45,0.88);
  border: 1px solid rgba(120,140,200,.25);
  color:#eaf0ff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
#sideTalk .title{ font-weight:700; color:#8ca0ff; margin-bottom:4px; }
#sideTalk .body{ line-height:1.6; }
@keyframes talkShow { from{ transform: translateY(8px); opacity:0; } to{ transform: translateY(0); opacity:1; } }
@keyframes talkHide { from{ transform: translateY(0);   opacity:1; } to{ transform: translateY(8px); opacity:0; } }
#sideTalk.show { animation: talkShow 180ms ease-out both; }
#sideTalk.hide { animation: talkHide 180ms ease-in  both; }

/* 版本二：固定 360px 寬度（若需要） */
#sideTalk{
  position: relative;
  width: 360px;
  z-index: 2;
  display: none;
  pointer-events: none;
}
#sideTalk .bubble{
  background: rgba(22,28,45,0.88);
  border: 1px solid rgba(120,140,200,.25);
  color:#eaf0ff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
#sideTalk .title{ font-weight:700; color:#8ca0ff; margin-bottom:4px; }
#sideTalk .body{ line-height:1.6; }
@keyframes talkShow { from{ transform: translateY(8px); opacity:0; } to{ transform: translateY(0); opacity:1; } }
@keyframes talkHide { from{ transform: translateY(0);   opacity:1; } to{ transform: translateY(8px); opacity:0; } }
#sideTalk.show { animation: talkShow 180ms ease-out both; }
#sideTalk.hide { animation: talkHide 180ms ease-in  both; }

/* =========================================================
   Route A：故事層垂直位置與安全區（靠左 + 圖片放大 + 頂端距離減半）
   ========================================================= */
#storyOverlayFS{
  padding-top: calc(12px + env(safe-area-inset-top, 0px)); /* 頂端距離減半 */
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column;
  align-items:flex-start;  /* 靠左 */
  justify-content:flex-start;
  text-align:left;
}
.center-stage{
  margin-top: clamp(12px, 4vh, 60px);       /* 頂端距離減半 */
  margin-bottom: clamp(12px, 3vh, 48px);    /* 底部留白縮短 */
  align-items:flex-start;                   /* 靠左 */
  text-align:left;
}
#storyTextBlock{ margin-top: 8px; padding: 10px 12px; }
#storyTextBlock .line{
  line-height: 1.8;
  word-break: break-word;
  white-space: pre-wrap;
}
.center-stage .progress{ margin-top:10px; text-align:left; }
.center-stage .btn-bar{  margin-top:8px; display:flex; justify-content:flex-start; gap:10px; text-align:left; }
.center-stage .hint{     margin-top:8px; opacity:.75; text-align:left; }

/* 小型裝置優化 */
@media (max-width: 420px){
  .center-stage{ margin-top: clamp(8px, 3vh, 40px); }
}

/* 大型螢幕優化 */
@media (min-width: 1200px){
  #storyOverlayFS .story-img{ max-height: 64vh; }
  .center-stage{
    margin-top: clamp(16px, 4vh, 80px);
    margin-bottom: clamp(16px, 4vh, 64px);
  }
}




/* ===================== Story Overlay UI (fixed 3-line + fixed footer) ===================== */
#storyOverlayFS{
  background: rgba(9,12,20,0.82);
  padding: 32px 24px;
  box-sizing: border-box;
}

#storyOverlayFS .story-frame{
  width: min(1200px, 96vw);
  height: min(720px, 88vh);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(20,26,40,0.78);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  box-sizing: border-box;
}

#storyOverlayFS .story-image-wrap{
  flex: 1 1 auto;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

#storyOverlayFS .story-image{
  width: 100%;
  height: 100%;
  object-fit: contain; /* 最大化但不裁切 */
  display: block;
}

#storyOverlayFS .story-text-box{
  flex: 0 0 auto;
  border-radius: 12px;
  background: rgba(9,12,20,0.6);
  padding: 12px 14px;
  box-sizing: border-box;
}

#storyOverlayFS .story-text{
  margin: 0;
  white-space: pre-wrap; /* 保留 \n，並可自動換行 */
  word-break: break-word;
  font-size: 18px;       /* 比之前小 */
  line-height: 1.55;     /* 行距收斂 */
  min-height: calc(1.55em * 3); /* 固定三行高度 */
  max-height: calc(1.55em * 3);
  overflow: hidden; /* 三行固定，內容由分頁控制 */
}

#storyOverlayFS .story-footer{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

#storyOverlayFS .story-pageinfo{
  color: rgba(234,240,255,0.78);
  font-size: 14px;
  padding-left: 4px;
  user-select: none;
}

#storyOverlayFS .story-buttons{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  width:100%;
}

#storyOverlayFS .story-buttons .btn{
  min-width: 92px;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
}

#storyOverlayFS .btn-secondary{ background: rgba(255,255,255,0.12); color:#eaf0ff; }
#storyOverlayFS .btn-primary{ background: rgba(59,130,246,0.95); color:#fff; }
#storyOverlayFS .btn-danger{ background: rgba(239,68,68,0.95); color:#fff; }

#storyOverlayFS .btn-skip{ background: rgba(34,197,94,0.95) !important; color:#fff !important; }
#storyOverlayFS .btn-prev{ background: rgba(250,204,21,0.95) !important; color:#1a1a1a !important; }


.btn-warn{ background: rgba(255,105,180,0.80) !important; color:#2a0a1c !important; }
.btn-next{ background: rgba(0,255,255,0.55) !important; color:#06383a !important; }
#storyOverlayFS .btn:active{ transform: translateY(1px); }


/* =========================================================
   行動裝置：字體/Overlay/控制器（Swipe 取代 D-pad）
   ========================================================= */
@media (max-width: 768px){
  :root{
    --pad-size: 56px; /* 即使顯示也不會過大（但我們會隱藏） */
  }
  body{ font-size: 14px; }
  #hud{
  display:flex; flex-wrap:wrap; gap:10px; padding:8px;
  justify-content:center; align-items:center;
  width: calc(9 * 40px);
  max-width: calc(100% - 16px);
  margin: 6px auto 0;
  background: linear-gradient(180deg, rgba(18,22,38,.85), rgba(15,19,32,.85));
  border-radius: 12px;
}

  #hud .stat{ padding:5px 8px; font-size: 14px; }
  #overlay{ left: 12px; right: 12px; width: auto; max-width: none; }
  #overlay .card{ max-height: 60vh; padding: 12px; border-radius: 12px; }
  #overlay h3{ font-size: 16px; }
  #overlay .row{ font-size: 14px; }
  /* 不使用 D-pad（改用滑動） */
  #dpadCross, #actionsStack{ display:none !important; }
}
/* ===== Mobile UI tuning ===== */
@media (max-width: 768px){
  body{ font-size:14px; }
  #hud{
  display:flex; flex-wrap:wrap; gap:10px; padding:8px;
  justify-content:center; align-items:center;
  width: calc(9 * 40px);
  max-width: calc(100% - 16px);
  margin: 6px auto 0;
  background: linear-gradient(180deg, rgba(18,22,38,.85), rgba(15,19,32,.85));
  border-radius: 12px;
}

  #hud .stat{ padding:5px 8px; font-size:14px; }
  #overlay{ left:12px; right:12px; width:auto; max-width:none; }
  #overlay .card{ max-height:60vh; padding:12px; border-radius:12px; }
  #overlay h3{ font-size:16px; }
  #overlay .row{ font-size:14px; }
}

/* D-PAD removed (safety) */
#dpadCross, #actionsStack{ display:none !important; }


/* 非鎖定劇情視窗：縮小圖片區域，避免彈窗過高 */
#storyOverlayFS.story-nonblock { padding: 16px 12px; }
#storyOverlayFS.story-nonblock .story-frame { height: min(520px, 70vh); }
#storyOverlayFS.story-nonblock .story-image-wrap { flex: 0 0 auto; max-height: 35vh; }
#storyOverlayFS.story-nonblock .story-image { max-height: 35vh; }

/* =========================================================
   Story Overlay：手機版避免按鈕溢出（頁碼與按鈕分行、按鈕自動換行）
   ========================================================= */
@media (max-width: 768px){
  #storyOverlayFS{ padding: 14px 10px; }
  #storyOverlayFS .story-frame{
    width: min(720px, 96vw);
    height: min(720px, 92vh);
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
  }
  #storyOverlayFS .story-text{ font-size: 15px; }

  /* 頁碼資訊獨佔一行，避免擠壓按鈕列導致溢出 */
  #storyOverlayFS .story-footer{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
  }
  #storyOverlayFS .story-pageinfo{
    width: 100%;
    text-align: left;
    padding-left: 2px;
  }

  /* 按鈕列：自動換行，預設兩欄 */
  #storyOverlayFS .story-buttons{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  #storyOverlayFS .story-buttons .btn{
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
    padding: 10px 10px;
    border-radius: 12px;
    font-size: 14px;
  }
}

@media (max-width: 420px){
  /* 超小螢幕：單欄，確保不會擠到外面 */
  #storyOverlayFS .story-buttons .btn{ flex-basis: 100%; }
}


/* ===================== Story Overlay Button Layout (V2) ===================== */
#storyOverlayFS button,
#storyOverlayFS2 button{
  width:auto !important;
}

/* 讓全螢幕故事/選項按鈕統一：文字結束後下一行開始顯示，並可自動換行排列 */
#storyOverlayFS #storyActionsFS{
  margin-top: 14px !important;
  display:flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 100% !important;
}

#storyOverlayFS #storyActionsFS button{
  height: auto !important;
  min-height: 52px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  min-width: 128px !important;
  max-width: 100% !important;
}

/* 手機：兩欄排列、避免超出 */
@media (max-width: 520px){
  #storyOverlayFS #storyActionsFS button{
    flex: 1 1 calc(50% - 12px) !important;
    min-width: 0 !important;
  }
}

/* 文字區與按鈕區距離，確保按鈕永遠在下一行 */
#storyOverlayFS #storyContentFS{
  display:block;
  margin-bottom: 12px;
}

/* 數字密碼鎖：按鈕列自動換行且一致尺寸 */
#storyOverlayFS .btn{
  width:auto !important;
  height:auto;
  min-height: 46px;
  padding: 10px 14px;
  white-space: normal;
}


/* ===== Story Overlay (FS) Sticky Bottom Bar ===== */
#storyOverlayFS{
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
#storyOverlayFS .fs-panel{
  width: 100%;
  max-width: 1000px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: rgba(20,26,40,0.78);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  overflow: hidden;
}
#storyOverlayFS .fs-scroll{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px 10px 16px;
}
#storyOverlayFS .fs-imgwrap{
  display:flex;
  justify-content:center;
  margin-bottom: 12px;
}
#storyOverlayFS .fs-img{
  width: 100%;
  max-width: 900px;
  height: auto;
  border-radius: 10px;
}
#storyOverlayFS .fs-text{
  font-size: 18px;
  line-height: 1.7;
  text-align: left;
  word-break: break-word;
}
#storyOverlayFS .fs-progress{
  margin-top: 6px;
  font-size: 13px;
  color: #9fb3ff;
}
#storyOverlayFS .fs-hint{
  opacity: .82;
  font-size: 14px;
  color: #a9b3cf;
  margin-top: 8px;
}
#storyOverlayFS .fs-actions{
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 12px 12px;
  background: rgba(11,14,23,0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.10);
}
#storyOverlayFS .fs-actions button{
  height: 48px;
  border: 0;
  border-radius: 14px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 800;
  color: #eaf0ff;
  background: rgba(255,255,255,0.14);
  white-space: normal;
  line-height: 1.2;
  min-width: 150px;
  max-width: 100%;
}
#storyOverlayFS .fs-actions button:disabled{
  opacity: .45;
}
#storyOverlayFS .fs-actions #fsNext{
  background: linear-gradient(180deg,#3b5ef8 0%,#2e49c8 100%);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
#storyOverlayFS .fs-actions #fsSkip{
  background: linear-gradient(180deg,#e85757 0%,#c13b3b 100%);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
#storyOverlayFS .fs-actions .fsChoice{
  background: linear-gradient(180deg,#3b5ef8 0%,#2e49c8 100%);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
@media (max-width: 520px){
  #storyOverlayFS .fs-actions button{
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
  }
}

/* ===== Story Overlay (FS2) footer behaves like bottom bar ===== */
.story-footer{
  margin-top: auto;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(20,26,40,0) 0%, rgba(20,26,40,0.85) 28%, rgba(20,26,40,0.95) 100%);
}


/* ===== Fix: FS2 footer should be full-width bottom bar (avoid right-side vertical buttons) ===== */
#storyOverlayFS2 .story-footer{
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 12px 12px 12px;
  background: rgba(11,14,23,0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.10);
  border-radius: 0 0 18px 18px;
  box-sizing: border-box;
}
#storyOverlayFS2 .story-buttons{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
}
#storyOverlayFS2 .story-buttons button{
  height: 48px;
  border: 0;
  border-radius: 14px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 800;
  color: #eaf0ff;
  background: rgba(255,255,255,0.14);
  white-space: normal;
  line-height: 1.2;
  flex: 1 1 160px;
  min-width: 150px;
  max-width: 100%;
}
#storyOverlayFS2 .story-buttons button.primary{
  background: linear-gradient(180deg,#3b5ef8 0%,#2e49c8 100%);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
#storyOverlayFS2 .story-buttons button.danger{
  background: linear-gradient(180deg,#e85757 0%,#c13b3b 100%);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
#storyOverlayFS2 .story-pageinfo{
  padding-left: 0;
  text-align: left;
}
@media (max-width: 520px){
  #storyOverlayFS2 .story-buttons button{
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
  }
}


#storyOverlayFS2 .story-frame{ display:flex; flex-direction:column; height:100%; }
#storyOverlayFS2 .story-body{ flex:1 1 auto; overflow-y:auto; }


/* Ensure '上一頁' (fsPrev) button height matches other buttons */
#storyOverlayFS .fs-actions .fsPrev{ height: 48px; }


/* Center bottom action buttons (desktop & mobile) */
#storyOverlayFS .fs-actions{ justify-content:center !important; }
#storyOverlayFS2 .story-buttons{ justify-content:center !important; }

/* ===============================
   Unified Dialog Button Colors
   prev: yellow, next: cyan, skip/back: pink, leave: keep red
   =============================== */
.btn.btn-prev, .btn-prev, #fsPrev, #trPrev {
  background: #ffd400 !important;
  color: #111 !important;
}
.btn.btn-next, .btn-next, #fsNext {
  background: rgb(0,255,255) !important;
  color: #111 !important;
}
.btn.btn-skip, .btn-skip, #fsSkip {
  background: #ff9ad5 !important;
  color: #111 !important;
}


/* =========================================================
   首頁（主視覺 + 主選單）- V1 強化
   只影響 #menu 區塊，不改動遊戲內 UI
   ========================================================= */

header{ display:none; } /* 首頁以主視覺取代標頭，避免重複 */

#menu{
  position: relative;
  min-height: 100vh;
  width: 100%;
  padding: 0;
  overflow: hidden;

  /* 首頁 Key Art：沿用 A1（不影響遊戲樓層背景切換） */
  background-image: url('assets/background/A1_pc.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

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

/* 暗角 + 霧面覆蓋 */
#menu::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 700px at 18% 18%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 480px at 78% 35%, rgba(64,180,255,.10), transparent 58%),
    linear-gradient(180deg, rgba(6,8,16,.72) 0%, rgba(8,10,20,.80) 55%, rgba(6,8,16,.88) 100%);
  pointer-events:none;
}

/* 淡光點/霧流（純 CSS） */
.heroFx{
  position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.16), transparent 38%),
    radial-gradient(circle at 42% 55%, rgba(120,200,255,.12), transparent 42%),
    radial-gradient(circle at 78% 35%, rgba(255,120,120,.10), transparent 44%),
    radial-gradient(circle at 68% 70%, rgba(255,255,255,.08), transparent 46%);
  filter: blur(10px);
  opacity: .55;
  animation: heroDrift 14s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes heroDrift{
  0%{ transform: translate3d(-2%, -1%, 0) scale(1.02); }
  100%{ transform: translate3d(2.5%, 1.5%, 0) scale(1.06); }
}

#menu .hero{
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 48px));
  display: grid;
  grid-template-columns: minmax(320px, 520px) 420px;
  gap: 28px;
  align-items: stretch;
  height: calc(100vh - 96px);

  min-height: calc(100vh - 96px);
}

/* 左側：品牌 + 面板 */
#menu .heroLeft{ display:flex; flex-direction:column; gap:18px; }

#menu .brand{
  display:flex; align-items:center; gap:12px;
  padding: 6px 6px;
}
#menu .brandMark{
  width: 52px; height: 52px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  font-size: 26px; font-weight: 900;
}
#menu .brandTitle{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  line-height: 1.1;
}
#menu .brandSub{
  margin-top: 4px;
  opacity: .9;
  font-size: 13px;
  letter-spacing: 1.6px;
}

/* 覆寫舊的 #menu .panel，保持不影響遊戲 */
#menu .panel{
  padding: 22px 20px;
  /* 左側面板再縮窄，但保持按鈕可讀 */
  max-width: 420px;
  border-radius: 18px;
  background: rgba(18, 22, 36, 0.72);
  border: 1px solid rgba(120,140,200,.28);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

#menu .panelTop{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
#menu .versionTag{
  font-weight: 800;
  letter-spacing: .5px;
  color: rgba(234,240,255,.92);
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
#menu .metaLine{
  text-align: right;
  font-size: 12px;
  opacity: .9;
  margin-top: 2px;
}
#menu .metaLabel{ opacity: .7; }
#menu .metaValue{ font-weight: 700; }

/* 按鈕區 */
#menu .menuBtns{ display:grid; grid-template-columns:1fr; gap:10px; justify-items:center; }

#menu .menuBtn{
  width: min(420px, 92%);
  height:50px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(70,110,255,.95) 0%, rgba(45,75,210,.96) 100%);
  color:#eef3ff;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding: 0 14px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 14px 30px rgba(24,40,90,.35), inset 0 -2px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);

  max-width: 280px;
}
#menu .menuBtn .ic{
  width: 30px;
  display:flex;
  justify-content:center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
#menu .menuBtn:hover{
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 18px 42px rgba(24,40,90,.42), inset 0 -2px 0 rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12);
  filter: brightness(1.03);
}
#menu .menuBtn:active{
  transform: translateY(0px) scale(.995);
}
#menu .menuBtn[disabled]{
  background: linear-gradient(180deg, rgba(55,65,95,.92) 0%, rgba(40,48,72,.92) 100%);
  color:#a9b3cf;
  cursor:not-allowed;
  opacity:.9;
  transform: none;
  box-shadow: 0 10px 22px rgba(0,0,0,.22), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
#menu .menuBtn.danger{
  background: linear-gradient(180deg, rgba(245,96,96,.95) 0%, rgba(200,56,56,.96) 100%);
}

/* 面板底部 */
#menu .panelFoot{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
#menu .hintRow{
  font-size: 12px;
  opacity: .88;
  letter-spacing: .2px;
}
#menu .hintKey{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 20px;
  min-width: 34px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 800;
  margin: 0 4px;
}
#menu .creditRow{
  font-size: 12px;
  opacity: .7;
}

/* 右側：截圖條 */
#menu .heroRight{ display:flex; justify-content:center; align-items:center; }
#menu .shotstrip{
  width: 420px;
  display:flex;
  flex-direction:column;
  gap: 18px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-right: 6px;
}
#menu .shot{
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(180,200,255,.22);
  box-shadow: 0 18px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: clamp(110px, 14vh, 150px);
}

/* ===== Menu layout alignment fix: make left & right zones share the same top/bottom ===== */
#menu .heroLeft, #menu .heroRight{ height: 100%; }

/* Left panel (dark card) stretches; footer pinned to bottom */
#menu .panel{
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
#menu .panelFoot{ margin-top: auto; }

/* Right shots: 4 cards span the same height as the left panel (top/bottom aligned) */
#menu .shotstrip{
  height: 100%;
  max-height: none;
  overflow: visible;
}
#menu .shot{
  height: calc((100% - 54px) / 4); /* 4 shots, 3 gaps * 18px = 54px */
}


#menu .shot.s1{ background-image: url('assets/front/01.jpg'); }
#menu .shot.s2{ background-image: url('assets/front/02.jpg'); }
#menu .shot.s3{ background-image: url('assets/front/03.jpg'); }
#menu .shot.s4{ background-image: url('assets/front/04.jpg'); }

/* RWD：小螢幕改成單欄 */
@media (max-width: 860px){
  #menu .hero{ grid-template-columns: 1fr; }
  #menu .heroRight{ display:none; }
  #menu .brandTitle{ font-size: 30px; }
}


/* =========================================================
   Home background slideshow
   ========================================================= */
#bgCarousel, #bgCarousel2{
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.03);
  opacity: 0;
  transition: opacity 1200ms ease;
  pointer-events: none;
}
#bgCarousel.bgReady, #bgCarousel2.bgReady2{ opacity: 1; }
#bgCarousel2{ opacity: 0; }
#bgCarousel.show{ opacity: 1; }
#bgCarousel2.show{ opacity: 1; }
#bgCarousel::after, #bgCarousel2::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(0,0,0,.25), transparent 60%),
    radial-gradient(900px 600px at 80% 60%, rgba(0,0,0,.25), transparent 60%),
    linear-gradient(180deg, rgba(8,10,16,.65) 0%, rgba(8,10,16,.78) 70%, rgba(8,10,16,.88) 100%);
}

/* ensure app layers above background */
#app{ position: relative; z-index: 1; }

/* shot backgrounds */
#menu .shot[data-shot="01"]{ background-image:url("assets/front/01.jpg"); }
#menu .shot[data-shot="02"]{ background-image:url("assets/front/02.jpg"); }
#menu .shot[data-shot="03"]{ background-image:url("assets/front/03.jpg"); }
#menu .shot[data-shot="04"]{ background-image:url("assets/front/04.jpg"); }
#menu .shot[data-shot="05"]{ background-image:url("assets/short/05.jpg"); }
#menu .shot[data-shot="06"]{ background-image:url("assets/short/06.jpg"); }
#menu .shot[data-shot="07"]{ background-image:url("assets/short/07.jpg"); }
#menu .shot[data-shot="08"]{ background-image:url("assets/short/08.jpg"); }
#menu .shot[data-shot="09"]{ background-image:url("assets/short/09.jpg"); }
#menu .shot[data-shot="10"]{ background-image:url("assets/short/10.jpg"); }


/* menu centering desktop tweak */
@media (min-width: 900px){
  #menu .heroLeft{ justify-self: center; }
  #menu .heroRight{ justify-self: end; }
}



/* =========================================================
   PATCH: Cover layout (tagline box) + About modal + Micro-glass buttons
   (CSS-only overrides; do not touch game logic)
   ========================================================= */

/* Tagline box between version row and buttons */
#menu #menuTagline.taglineBox{
  margin: 6px 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  color: rgba(234,240,255,.92);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: .2px;
}

/* Micro-color glass base (menu + HUD share the same concept) */
:root{
  --glass-bg: rgba(255,255,255,.06);
  --glass-br: rgba(255,255,255,.16);
  --glass-hi: rgba(255,255,255,.12);
  --glass-shadow: 0 16px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10);
}

/* Menu buttons: turn "all-blue" into micro-color glass */
#menu .menuBtn{
  position: relative;
  overflow: hidden;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-br) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(10px);
}

#menu .menuBtn::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    var(--tone1, rgba(120,180,255,.40)) 0%,
    var(--tone2, rgba(255,120,220,.22)) 100%);
  opacity: .78;
  mix-blend-mode: screen;
  pointer-events:none;
}

#menu .menuBtn::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 25% 15%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,0) 55%);
  opacity: .9;
  pointer-events:none;
}

#menu .menuBtn > *{ position: relative; z-index: 1; }

#menu .menuBtn:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 22px 56px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#menu .menuBtn:active{
  transform: translateY(0px) scale(.995);
}

/* Per-button micro tones */
#menu #btnNew{ --tone1: rgba(110,190,255,.55); --tone2: rgba(255,130,210,.24); }
#menu #btnContinue{ --tone1: rgba(140,150,255,.45); --tone2: rgba(255,150,200,.18); }
#menu #btnLoadMain{ --tone1: rgba(120,240,200,.38); --tone2: rgba(120,190,255,.20); }
#menu #btnSettingsMain{ --tone1: rgba(170,200,255,.25); --tone2: rgba(200,190,255,.16); }
#menu #btnAboutGame{ --tone1: rgba(210,170,255,.36); --tone2: rgba(255,150,220,.18); }
#menu .menuBtn.danger{ --tone1: rgba(255,120,120,.50); --tone2: rgba(255,180,200,.18); }

/* Disabled: keep glass but muted */
#menu .menuBtn[disabled]{
  filter: saturate(.6) brightness(.92);
  opacity: .85;
}

/* About modal (Game Introduction) */
body.modalLock{ overflow: hidden; }

.glassModal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}

.glassModal.open{ display: flex; }

.glassModalCard{
  width: min(860px, 94vw);
  max-height: min(82vh, 780px);
  border-radius: 18px;
  background: rgba(18, 22, 36, 0.82);
  border: 1px solid rgba(140,160,220,.30);
  box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.glassModalHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.glassModalTitle{
  font-weight: 900;
  letter-spacing: .6px;
}

.glassModalClose{
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.92);
  border-radius: 12px;
  height: 34px;
  width: 38px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.glassModalClose:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.glassModalClose:active{ transform: translateY(0); }

.glassModalBody{
  padding: 16px 18px 18px;
  overflow: auto;
  color: rgba(234,240,255,.92);
  line-height: 1.7;
}
.glassModalBody h3{
  margin: 14px 0 8px;
  font-size: 15px;
  letter-spacing: .3px;
}
.glassModalBody ul{ margin: 8px 0 0 18px; padding: 0; }
.glassModalBody li{ margin: 6px 0; }
.glassModalBody p{ margin: 0 0 10px; }

/* =========================================================
   PATCH: HUD top 6 buttons -> 3x3 grid + pill micro-glass
   ========================================================= */

/* 3 columns, 2 rows */
#hud .btns{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  align-items: stretch;
}

/* Base pill glass for HUD buttons inside btns */
#hud .btns button{
  position: relative;
  overflow: hidden;
  /* Prevent label wrapping (e.g. "+1" / counters) inside a 3-column HUD grid */
  width: 100%;
  min-width: 0;
  padding: 10px 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(234,240,255,.94) !important;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

#hud .btns button::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    var(--tone1, rgba(120,180,255,.40)) 0%,
    var(--tone2, rgba(255,120,220,.22)) 100%);
  opacity: .72;
  mix-blend-mode: screen;
  pointer-events:none;
}

#hud .btns button::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 25% 15%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,0) 55%);
  opacity: .85;
  pointer-events:none;
}

#hud .btns button > *{ position: relative; z-index: 1; }

#hud .btns button:hover{
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.03);
  box-shadow: 0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#hud .btns button:active{
  transform: translateY(0) scale(.995);
}

/* HUD per-button tones (by id) */
#hud #importantBtn{ --tone1: rgba(255,220,120,.55); --tone2: rgba(255,140,200,.22); }
#hud #catalogBtn{  --tone1: rgba(190,170,255,.46); --tone2: rgba(120,190,255,.18); }
#hud #flyBtn{      --tone1: rgba(120,240,255,.40); --tone2: rgba(140,170,255,.18); }
#hud #saveBtn{     --tone1: rgba(140,255,190,.38); --tone2: rgba(120,190,255,.18); }
#hud #loadBtn{     --tone1: rgba(255,190,120,.44); --tone2: rgba(255,140,200,.18); }
#hud #settingsBtn{ --tone1: rgba(180,200,255,.30); --tone2: rgba(220,190,255,.16); }


/* =========================================================
   v1.1 任務頁 / 任務跳窗
   ========================================================= */
.questPanelV11{ display:flex; flex-direction:column; gap:10px; }
.questSectionV11{ border:1px solid rgba(120,140,200,.22); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.04); }
.questHeadV11{ width:100%; text-align:left; border:0; border-radius:0; padding:12px 14px; font-size:16px; font-weight:900; color:#eaf0ff; background:rgba(255,255,255,.06); cursor:pointer; }
.questListV11{ padding:8px 10px 10px; display:flex; flex-direction:column; gap:6px; }
.questRowV11{ display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.045); line-height:1.45; word-break:break-word; }
.questDoneV11{ opacity:.48; filter:grayscale(.35); }
.questMarkV11{ flex:0 0 auto; }
.questCountV11{ opacity:.72; font-size:12px; font-weight:700; }
.questEmptyV11{ opacity:.62; padding:8px 10px; font-size:14px; }
.questToastV11{ text-align:center; }
.questToastV11 h3{ margin:0 0 12px; }
.questToastTitle{ font-size:20px; font-weight:900; margin:8px 0; color:#fff; }
.questToastDesc{ opacity:.85; line-height:1.6; margin:8px 0 12px; }
@media (max-width:768px){
  .questHeadV11{ font-size:15px; padding:11px 12px; }
  .questRowV11{ font-size:14px; padding:8px; }
}


/* ===================== Tutorial Pages v1.1 ===================== */
.tutorialPanel{
  width:min(92vw, 760px);
  max-height:86vh;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tutorialHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:2px;
}
.tutorialTitle{
  font-size:20px;
  font-weight:900;
  color:#eef3ff;
}
.tutorialPage{
  font-size:14px;
  font-weight:800;
  color:#9fb3ff;
  white-space:nowrap;
}
.tutorialImageWrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(140,160,255,.18);
  border-radius:14px;
  overflow:hidden;
}
.tutorialImage{
  width:100%;
  max-height:54vh;
  object-fit:contain;
  display:block;
  background:#0b0e17;
}
.tutorialText{
  background:rgba(22,28,45,.82);
  border:1px solid rgba(140,160,255,.18);
  border-radius:14px;
  padding:12px 14px;
  font-size:16px;
  line-height:1.65;
  color:#eaf0ff;
  word-break:break-word;
}
.tutorialActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.tutorialActions .btn{
  min-width:110px;
  height:42px;
  font-weight:900;
}

@media (max-width: 520px){
  .tutorialPanel{ width:94vw; max-height:88vh; gap:8px; }
  .tutorialTitle{ font-size:17px; }
  .tutorialImage{ max-height:48vh; }
  .tutorialText{ font-size:14px; line-height:1.55; padding:10px 12px; }
  .tutorialActions .btn{
    flex:1 1 calc(33.333% - 10px);
    min-width:0;
    padding:0 8px;
  }
}

/* =========================================================
   Mobile portrait QA patch — iPhone / Galaxy (2026-08-10)
   Keeps every menu, HUD, dialog and story choice inside the visual viewport.
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }

html{
  height:100%;
  min-height:100%;
  background:#0b0e17;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  height:100vh;
  height:100dvh;
  min-height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
button, input, select, textarea{ font:inherit; }
button{ touch-action:manipulation; }

.wrap{
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow:hidden;
}

#game{
  min-width:0;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-left:max(0px, env(safe-area-inset-left));
  padding-right:max(0px, env(safe-area-inset-right));
  padding-bottom:max(8px, env(safe-area-inset-bottom));
}

#grid{
  max-width:calc(100% - 8px);
  flex:0 0 auto;
}

#sideTalk{
  width:min(360px, calc(100% - 16px));
  max-width:calc(100% - 16px);
  margin-left:auto;
  margin-right:auto;
}
#sideTalk .bubble{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Full-screen card overlays share one safe-area-aware boundary. */
#overlay{
  inset:0 !important;
  width:auto !important;
  max-width:none !important;
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  overflow:hidden;
  align-items:center;
  justify-content:center;
}
#overlay .card{
  width:min(100%, 760px);
  max-width:100% !important;
  max-height:calc(100vh - 20px) !important;
  max-height:calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  padding:clamp(12px, 3.5vw, 18px) !important;
}
#overlay .row{
  max-width:100%;
  min-width:0;
  align-items:stretch;
}
#overlay .row > *{
  min-width:0 !important;
  max-width:100%;
  overflow-wrap:anywhere;
}
#overlay .row > .stat{
  flex:1 1 180px;
}
#overlay button,
#overlay .btn{
  min-height:44px;
  height:auto;
  max-width:100%;
  padding:9px 12px;
  white-space:normal;
  line-height:1.25;
  overflow-wrap:anywhere;
}
#overlay input[type="range"]{
  min-width:96px !important;
  max-width:100%;
}
#overlay img{ max-width:100%; height:auto; }

/* Story/photo/choice UI: no footer or choice can fall below the viewport. */
#storyOverlayFS{
  width:100%;
  height:100vh;
  height:100dvh;
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  overflow:hidden;
}
#storyOverlayFS .story-frame{
  width:min(1200px, 100%);
  height:min(720px, calc(100vh - 16px));
  height:min(720px, calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))));
  min-height:0;
  max-height:100%;
  gap:clamp(8px, 1.6vh, 14px);
  padding:clamp(10px, 2.8vw, 16px);
  overflow:hidden;
}
#storyOverlayFS .story-image-wrap{
  min-width:0;
  min-height:0;
}
#storyOverlayFS .story-text-box{ min-width:0; }
#storyOverlayFS .story-text{
  max-width:100%;
  overflow-wrap:anywhere;
}
#storyOverlayFS .story-footer{
  min-width:0;
  max-width:100%;
  max-height:58vh;
  max-height:58dvh;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}
#storyOverlayFS .story-buttons .btn,
#storyOverlayFS .story-choice-row .btn,
#storyOverlayFS .story-choice-actions .btn,
#storyOverlayFS .digit-lock-actions .btn,
#storyOverlayFS .digit-lock-grid .btn{
  min-height:44px;
  height:auto;
  min-width:0;
  max-width:100%;
  padding:9px 10px;
  white-space:normal;
  line-height:1.25;
  overflow-wrap:anywhere;
}
#storyOverlayFS .story-choice-bar{
  min-width:0;
  max-width:100%;
}
#storyOverlayFS .story-choice-info,
#storyOverlayFS .story-choice-row,
#storyOverlayFS .story-choice-actions{
  min-width:0 !important;
  max-width:100%;
}
#storyOverlayFS .story-choice-row{
  justify-content:center !important;
}
#storyOverlayFS .digit-lock-grid{
  min-width:0;
  max-width:100% !important;
}

/* Main-menu dialogs also respect the notch and browser toolbar. */
.glassModal{
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}
.glassModalCard{
  width:min(860px, 100%);
  max-height:calc(100vh - 20px);
  max-height:calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
}

@media (max-width:860px){
  #menu{
    height:100vh;
    height:100dvh;
    min-height:0;
    align-items:flex-start;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }
  #menu .hero{
    width:min(520px, 100%);
    height:auto;
    min-height:0;
    display:block;
  }
  #menu .heroLeft{
    width:100%;
    height:auto;
    min-height:0;
    gap:12px;
  }
  #menu .brand{ padding:2px; }
  #menu .brandMark{
    width:46px;
    height:46px;
    border-radius:14px;
    flex:0 0 46px;
  }
  #menu .brandTitle{ font-size:clamp(26px, 8vw, 30px); }
  #menu .brandSub{ font-size:12px; letter-spacing:1.1px; }
  #menu .panel{
    width:100%;
    max-width:none;
    height:auto;
    min-height:0;
    max-height:none;
    padding:clamp(14px, 4vw, 20px);
  }
  #menu #menuTagline.taglineBox{
    margin:4px 0 10px;
    padding:10px 12px;
    font-size:12px;
    line-height:1.5;
  }
  #menu .menuBtns{ gap:8px; }
  #menu .menuBtn{
    width:min(100%, 300px);
    max-width:300px;
    min-height:44px;
    height:46px;
  }
  #menu .panelFoot{ margin-top:12px; padding-top:10px; }
  #menu .hintRow{ display:none; }
}

@media (max-width:768px){
  #hud{
    width:min(360px, calc(100% - 16px));
    max-width:calc(100% - 16px);
    gap:6px;
    padding:7px;
    margin-top:max(6px, env(safe-area-inset-top));
  }
  #hud .stat{
    min-width:0;
    max-width:100%;
    padding:5px 7px;
    font-size:13px;
    overflow-wrap:anywhere;
  }
  #hud .btns{
    width:100%;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:7px !important;
  }
  #hud .btns button{
    min-width:0;
    min-height:44px;
    height:auto;
    padding:7px 5px;
    font-size:clamp(12px, 3.5vw, 14px);
    line-height:1.2;
    white-space:normal;
    text-overflow:clip;
    overflow-wrap:anywhere;
  }
  #hud .topBadgeV11{
    min-width:16px;
    height:16px;
    padding:0 4px;
    margin-left:2px;
    font-size:10px;
    line-height:16px;
  }

  #storyOverlayFS .story-frame{
    width:100%;
    height:100%;
    border-radius:14px;
  }
  #storyOverlayFS .story-text{ font-size:clamp(14px, 3.9vw, 16px); }
  #storyOverlayFS .story-pageinfo{ font-size:12px; }
  #storyOverlayFS .story-buttons{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  #storyOverlayFS .story-buttons .btn{
    width:100% !important;
    min-height:44px;
  }
  #storyOverlayFS .story-choice-bar{
    flex-direction:column;
    align-items:stretch !important;
    gap:8px !important;
  }
  #storyOverlayFS .story-choice-info,
  #storyOverlayFS .story-choice-row,
  #storyOverlayFS .story-choice-actions{
    width:100%;
  }
  #storyOverlayFS .story-choice-info{ gap:2px !important; }
  #storyOverlayFS .story-choice-row{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px !important;
  }
  #storyOverlayFS .story-choice-row .btn{ width:100% !important; }
  #storyOverlayFS .story-choice-actions .btn{ width:100% !important; }
  #storyOverlayFS .digit-lock-grid{
    grid-template-columns:repeat(5, minmax(42px, 1fr)) !important;
    gap:6px !important;
  }
  #storyOverlayFS .digit-lock-slots{ gap:6px !important; }
  #storyOverlayFS .digit-lock-actions{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:100%;
    gap:8px !important;
  }
  #storyOverlayFS .digit-lock-actions .btn{ width:100% !important; }

  .tutorialPanel,
  .tutorialPanelV11{
    width:100% !important;
    max-width:100% !important;
    min-height:0;
    max-height:100% !important;
  }
  .tutorialImage,
  .tutorialImgWrapV11 img{ max-height:42dvh !important; }
  .tutorialActions .btn,
  .tutorialActionsV11 .btn{ min-height:44px; height:auto; }
}

@media (max-width:340px){
  #hud .btns button{ font-size:12px; }
  #hud .btns{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  #overlay .row{ gap:6px; }
  #storyOverlayFS .story-choice-row{
    grid-template-columns:1fr;
  }
  #storyOverlayFS .story-footer{ max-height:62vh; max-height:62dvh; }
}

@media (max-height:700px) and (max-width:860px){
  #menu .heroLeft{ gap:8px; }
  #menu .brandMark{ width:40px; height:40px; flex-basis:40px; }
  #menu .brandTitle{ font-size:24px; }
  #menu .brandSub{ display:none; }
  #menu .panel{ padding:12px 14px; }
  #menu .panelTop{ margin-bottom:8px; }
  #menu #menuTagline.taglineBox{ line-height:1.4; }
  #menu .menuBtns{ gap:6px; }
  #menu .menuBtn{ height:44px; }
}


/* Android 1.0.5 testfix v3:
   任務進入 choice / digit-lock 階段時，舊故事導覽列必須完全隱藏。
   這條規則用 !important 壓過手機版 .story-buttons { display:grid !important; }。 */
#storyOverlayFS .story-buttons.choice-stage-hidden{
  display:none !important;
}

/* =========================================================
   V1.1 mobile gameplay polish: compact HUD + responsive map
   ========================================================= */
@media (max-width:768px){
  :root{
    /* Keep all nine columns visible on narrow phones without touching the edge. */
    --tile:min(40px, calc((100vw - 16px) / 9));
  }

  #game{
    min-height:100dvh;
    justify-content:flex-start;
    overflow-x:hidden;
  }

  #hud{
    width:min(420px, calc(100% - 12px));
    max-width:calc(100% - 12px);
    box-sizing:border-box;
    gap:5px;
    padding:6px;
    margin-top:max(4px, env(safe-area-inset-top));
    border:1px solid rgba(170,194,255,.16);
    border-radius:10px;
    background:linear-gradient(180deg, rgba(13,18,31,.93), rgba(10,14,25,.89));
    box-shadow:0 7px 22px rgba(0,0,0,.25);
  }

  #hud .stat{
    flex:1 1 auto;
    min-width:48px;
    max-width:none;
    padding:4px 6px;
    border-radius:7px;
    font-size:clamp(11px, 3.15vw, 13px);
    line-height:1.25;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    background:rgba(32,42,67,.78);
    border-color:rgba(154,180,255,.16);
  }

  #hud .stat[title="鑰匙數量"]{
    flex-basis:100%;
    letter-spacing:.5px;
  }
  #hud .stat[title="鑰匙數量"] img{
    width:16px !important;
    height:16px !important;
  }

  #hud .btns{
    width:100%;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:5px !important;
  }
  #hud .btns button{
    min-height:38px;
    height:38px;
    padding:4px 2px;
    border-radius:9px !important;
    font-size:clamp(11px, 3vw, 13px);
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    box-shadow:0 5px 13px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  /* Functional colour groups: information / travel / storage / settings. */
  #hud #questBtn, #hud #tutorialBtn, #hud #importantBtn, #hud #catalogBtn{
    --tone1:rgba(96,150,255,.52);
    --tone2:rgba(94,99,220,.24);
  }
  #hud #flyBtn{
    --tone1:rgba(72,205,197,.48);
    --tone2:rgba(48,126,174,.23);
  }
  #hud #saveBtn, #hud #loadBtn{
    --tone1:rgba(91,198,131,.48);
    --tone2:rgba(45,127,104,.23);
  }
  #hud #settingsBtn{
    --tone1:rgba(171,142,225,.43);
    --tone2:rgba(101,91,166,.22);
  }

  #grid{
    grid-template-columns:repeat(9, var(--tile));
    grid-template-rows:repeat(9, var(--tile));
    width:calc(9 * var(--tile));
    height:calc(9 * var(--tile));
    margin:7px auto max(8px, env(safe-area-inset-bottom));
  }
  .cell, #hero{
    width:var(--tile);
    height:var(--tile);
    font-size:clamp(18px, calc(var(--tile) * .55), 22px);
  }
}

@media (max-width:340px){
  #hud .btns{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
  #hud .btns button{
    min-height:36px;
    height:36px;
    font-size:10.5px;
  }
}

@media (max-height:700px) and (max-width:768px){
  #hud{ gap:4px; padding:5px; }
  #hud .stat{ padding:3px 5px; }
  #hud .btns button{ min-height:34px; height:34px; }
  #grid{ margin-top:5px; }
}

/* =========================================================
   V1.1 map depth pass: subtle 2.5D without changing collision coordinates
   ========================================================= */
#grid{
  isolation:isolate;
  box-sizing:content-box;
  border:1px solid rgba(175,201,255,.22);
  border-radius:5px;
  overflow:hidden;
  box-shadow:
    0 14px 25px rgba(0,0,0,.42),
    0 3px 0 rgba(3,6,12,.78),
    inset 0 1px 0 rgba(255,255,255,.10);
  transform:perspective(720px) rotateX(7deg) scale(.985) translateZ(0);
  transform-origin:50% 100%;
  backface-visibility:hidden;
}

#grid .cell{
  position:relative;
  box-sizing:border-box;
  min-width:0;
  min-height:0;
  max-width:var(--tile);
  max-height:var(--tile);
  overflow:hidden;
  contain:layout paint style;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-size:0 !important;
  background-color:#15171b;
}

/* Floor gets a recessed edge and a very soft directional light. */
#grid .cell.floor::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.035),
    inset -1px -1px 0 rgba(0,0,0,.20);
  background:linear-gradient(145deg, rgba(255,255,255,.025), transparent 42%, rgba(0,0,0,.08));
}

/* Wall top lip + right/bottom face creates the slight 2.5D block effect. */
#grid .cell.wall{
  z-index:2;
  filter:saturate(.96) contrast(1.04);
}
#grid .cell.wall::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-top:5px solid rgba(235,242,255,.30);
  border-left:3px solid rgba(208,220,244,.15);
  border-right:5px solid rgba(0,0,0,.34);
  border-bottom:7px solid rgba(0,0,0,.46);
  box-sizing:border-box;
  box-shadow:inset 0 5px 8px rgba(255,255,255,.045), inset -5px -6px 9px rgba(0,0,0,.15);
}

/* Emoji and image-backed entities are hard-clamped to their own tile. */
#grid .cell .emo{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  overflow:hidden;
  font-size:calc(var(--tile) * .54) !important;
  line-height:1 !important;
  text-indent:0;
  white-space:nowrap;
  transform-origin:50% 72%;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.58));
}

#hero{
  z-index:8;
  box-sizing:border-box;
  max-width:var(--tile);
  max-height:var(--tile);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-size:calc(var(--tile) * .55) !important;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.62));
}
#hero .hero-emoji{
  font-size:calc(var(--tile) * .55) !important;
  line-height:1 !important;
}

/* Prevent Android/WebView large-font accessibility settings from resizing
   background objects. UI copy can still follow the user's preferred size. */
#grid, #grid *{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

@media (max-width:768px){
  #grid{
    transform:perspective(620px) rotateX(8deg) scale(.975) translateY(-1px) translateZ(0);
    box-shadow:0 18px 25px rgba(0,0,0,.48), 0 7px 0 rgba(3,6,12,.80);
  }
  #grid .cell.wall::before{
    border-top-width:4px;
    border-left-width:2px;
    border-right-width:4px;
    border-bottom-width:6px;
  }
}


/* === Android 1.0.5 啟動圖片預載畫面 === */
.yfImagePreloadOverlay{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#0c1220;
  color:#f4f7ff;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .22s ease, visibility .22s ease;
}

/* === Android Google Play 強制版本檢查 === */
.yfPlayUpdateOverlay{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
          max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background:radial-gradient(circle at 50% 18%, #293c72 0, #10182b 42%, #080d18 100%);
  color:#f5f7ff;
  font-family:system-ui, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  pointer-events:auto;
}
.yfPlayUpdateOverlay[hidden]{ display:none; }
.yfPlayUpdateCard{
  width:min(420px, 92vw);
  box-sizing:border-box;
  padding:26px 22px 22px;
  border:1px solid rgba(155,178,255,.30);
  border-radius:20px;
  background:rgba(16,24,43,.94);
  box-shadow:0 24px 64px rgba(0,0,0,.55);
  text-align:center;
}
.yfPlayUpdateIcon{ font-size:42px; line-height:1; margin-bottom:12px; }
.yfPlayUpdateTitle{ margin:0 0 10px; font-size:clamp(21px,5.7vw,27px); font-weight:900; }
.yfPlayUpdateText{
  margin:0 auto 18px;
  max-width:34em;
  font-size:clamp(15px,4vw,17px);
  line-height:1.6;
  color:#dce4ff;
  white-space:pre-line;
}
.yfPlayUpdateActions{ display:grid; gap:10px; }
.yfPlayUpdateButton{
  min-height:50px;
  box-sizing:border-box;
  padding:11px 16px;
  border:0;
  border-radius:13px;
  background:linear-gradient(180deg,#5b7cff,#3f5dd5);
  color:#fff;
  font:800 clamp(15px,4vw,17px)/1.25 inherit;
  box-shadow:0 10px 25px rgba(35,65,175,.36);
}
.yfPlayUpdateButton.secondary{
  border:1px solid rgba(174,190,255,.35);
  background:rgba(255,255,255,.08);
  box-shadow:none;
}
.yfPlayUpdateButton:disabled{ opacity:.55; }
.yfImagePreloadOverlay.done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.yfImagePreloadCard{
  width:min(360px,86vw);
  text-align:center;
}
.yfImagePreloadTitle{
  font-size:28px;
  font-weight:900;
  letter-spacing:.08em;
  margin-bottom:14px;
}
.yfImagePreloadText{
  font-size:14px;
  opacity:.88;
  margin-bottom:10px;
}
.yfImagePreloadTrack{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.16);
}
.yfImagePreloadBar{
  width:0;
  height:100%;
  border-radius:inherit;
  background:rgba(255,255,255,.9);
  transition:width .08s linear;
}


/* V1.0.8：解謎/劇情文字手機自適應，避免超框、過度斷行 */
#storyOverlayFS .story-text,
#storyOverlayFS2 .story-text{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  margin:0;
  font-size:clamp(13px,3.55vw,16px) !important;
  line-height:1.45 !important;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:normal;
  min-height:calc(1.45em * 4) !important;
  max-height:calc(1.45em * 4) !important;
  overflow:hidden !important;
}
#storyOverlayFS .story-text-box,
#storyOverlayFS2 .story-text-box{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  padding:10px 12px;
}
@media (max-width:430px){
  #storyOverlayFS .story-frame,
  #storyOverlayFS2 .story-frame{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    padding:10px !important;
    gap:9px !important;
  }
  #storyOverlayFS .story-text,
  #storyOverlayFS2 .story-text{
    font-size:clamp(13px,3.45vw,15px) !important;
    line-height:1.42 !important;
    min-height:calc(1.42em * 4) !important;
    max-height:calc(1.42em * 4) !important;
  }
}
@media (max-width:360px){
  #storyOverlayFS .story-text,
  #storyOverlayFS2 .story-text{
    font-size:12.5px !important;
    line-height:1.4 !important;
    min-height:calc(1.4em * 4) !important;
    max-height:calc(1.4em * 4) !important;
  }
}

/* V1.1 visual polish: fluid mobile layout, readable dialogs and combat motion */
*, *::before, *::after{ box-sizing:border-box; }
html, body{ width:100%; min-width:0; }
button, input, select, textarea{ font:inherit; }
button{ -webkit-tap-highlight-color:transparent; }

#overlay{
  width:min(480px, calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
}
#overlay .card{
  max-height:calc(100dvh - 24px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}
#overlay .row{ align-items:stretch; }
#overlay .row > .stat{
  flex:1 1 150px;
  min-width:0 !important;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.55;
}
#overlay button, .btn{
  min-height:44px;
  height:auto;
  padding:9px 14px;
  line-height:1.25;
  white-space:normal;
}

/* Do not crop dialog lines: the text area grows, then scrolls only when needed. */
#storyOverlayFS .story-frame,
#storyOverlayFS2 .story-frame{
  max-height:calc(100dvh - 16px) !important;
  overflow:hidden;
}
#storyOverlayFS .story-text-box,
#storyOverlayFS2 .story-text-box{
  min-height:0 !important;
  max-height:min(34dvh, 250px) !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
}
#storyOverlayFS .story-text,
#storyOverlayFS2 .story-text{
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  font-size:clamp(14px, 3.7vw, 18px) !important;
  line-height:1.62 !important;
  letter-spacing:.01em;
  word-break:normal;
  overflow-wrap:anywhere;
}

/* Two-pose idle motion for emoji monsters. */
.monster-cell .emo{
  transform-origin:50% 88%;
  animation:monsterTwoFrame .72s steps(1,end) infinite !important;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.45));
}
@keyframes monsterTwoFrame{
  0%,49%{ transform:translateY(0) rotate(-3deg) scaleX(1); }
  50%,100%{ transform:translateY(-2px) rotate(3deg) scaleX(.96); }
}
.monster-defeated .emo{
  animation:monsterDefeat .5s ease-out forwards !important;
}
.monster-slash{
  position:absolute;
  z-index:8;
  left:12%; top:46%;
  width:76%; height:4px;
  border-radius:999px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, #fff 18%, #ffe38b 54%, transparent);
  box-shadow:0 0 7px #fff, 0 0 15px #ffca4b;
  transform:rotate(-34deg) scaleX(0);
  animation:monsterSlash .28s ease-out forwards;
}
@keyframes monsterSlash{
  0%{ opacity:0; transform:rotate(-34deg) scaleX(0); }
  35%{ opacity:1; transform:rotate(-34deg) scaleX(1.16); }
  100%{ opacity:0; transform:rotate(-34deg) scaleX(1.25); }
}
@keyframes monsterDefeat{
  0%{ opacity:1; transform:translate(0,0) scale(1); filter:brightness(1); }
  25%{ opacity:1; transform:translate(3px,-2px) scale(1.08); filter:brightness(2) saturate(.35); }
  100%{ opacity:0; transform:translate(8px,6px) scale(.72); filter:blur(3px) brightness(1.4); }
}

/* Battle exchange: both sides visibly react before the enemy disappears. */
.monster-hit-flash .emo{
  animation:monsterHitImpact .38s ease-out 1 !important;
}
.monster-slash-impact{
  animation-duration:.22s !important;
  filter:drop-shadow(0 0 5px #fff);
}
@keyframes monsterHitImpact{
  0%{ transform:translateX(0) scale(1); filter:brightness(1); }
  18%{ transform:translateX(3px) scale(1.10); filter:brightness(2.2) saturate(.2); }
  48%{ transform:translateX(-3px) scale(.96); filter:sepia(1) saturate(4) hue-rotate(320deg); }
  100%{ transform:translateX(0) scale(1); filter:brightness(1); }
}

/* HP=0: fixed, readable and intentionally single-action death state. */
.deathPanel{
  width:min(420px, 90vw);
  margin:auto;
  padding:clamp(18px,5vw,30px);
  text-align:center;
  border:1px solid rgba(255,104,104,.34);
  border-radius:20px;
  background:radial-gradient(circle at 50% 8%, rgba(139,26,38,.45), rgba(12,15,25,.96) 58%);
  box-shadow:0 24px 70px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06);
}
.deathMark{
  font-size:clamp(50px,15vw,78px);
  line-height:1;
  color:#ff6570;
  text-shadow:0 0 22px rgba(255,42,62,.46);
  animation:deathMarkDrop .55s cubic-bezier(.2,.9,.25,1) both;
}
.deathPanel h3{ margin:10px 0; font-size:clamp(24px,7vw,32px); color:#fff; }
.deathMessage{ font-size:clamp(15px,4.2vw,18px); line-height:1.65; color:#f2dfe2; }
.deathCause{ margin:10px auto 0; padding:8px 10px; border-radius:10px; background:rgba(255,83,96,.10); color:#ffc5cb; font-size:clamp(13px,3.7vw,15px); }
.deathHint{ margin:12px 0 18px; font-size:clamp(13px,3.6vw,15px); line-height:1.55; color:#bac5df; }
.deathPanel #deathReturnMenu{ width:100%; min-height:50px !important; font-weight:900; }
@keyframes deathMarkDrop{
  from{ opacity:0; transform:translateY(-18px) scale(1.35); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* Detailed battle window: short turn-by-turn exchange, mobile first. */
.battleStage{ width:min(560px,92vw); margin:auto; text-align:center; }
.battleStageTitle{ margin-bottom:14px; font-size:clamp(20px,5.5vw,27px); font-weight:900; }
.battleFighters{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px; }
.battleVersus{ font-size:clamp(14px,4vw,20px); font-weight:1000; color:#ffcf66; text-shadow:0 0 12px rgba(255,193,57,.45); }
.battleFighter{
  position:relative;
  min-width:0;
  padding:14px 10px 12px;
  border:1px solid rgba(155,178,255,.24);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(39,51,82,.80),rgba(16,22,38,.92));
  transition:transform .12s ease,filter .12s ease,opacity .22s ease;
}
.battleFighter b{ display:block; min-height:2.5em; font-size:clamp(13px,3.6vw,17px); line-height:1.25; overflow-wrap:anywhere; }
.battleAvatar{ font-size:clamp(42px,13vw,68px); line-height:1.1; filter:drop-shadow(0 5px 4px rgba(0,0,0,.5)); }
.battleHpText{ margin:7px 0 5px; font-size:clamp(12px,3.2vw,15px); color:#eaf0ff; }
.battleHpTrack{ height:9px; overflow:hidden; border-radius:99px; background:rgba(0,0,0,.46); }
.battleHpTrack i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ff4757,#ffcf54 48%,#53dc85); transition:width .18s linear; }
.battleFighter em{ position:absolute; top:7px; right:8px; min-height:1.3em; color:#ff6d77; font-style:normal; font-weight:1000; font-size:clamp(17px,5vw,24px); text-shadow:0 2px 4px #000; }
.battleFighter.isAttacking{ transform:translateX(7px) scale(1.04); filter:brightness(1.25); }
.battleFighter.monsterSide.isAttacking{ transform:translateX(-7px) scale(1.04); }
.battleFighter.isHurt{ animation:battleFighterHurt .25s ease-out 1; }
.battleFighter.isDefeated{ opacity:.28; transform:translateY(8px) scale(.82); filter:grayscale(1) blur(1px); }
.battleTurnText{ min-height:2.8em; margin:14px 0 10px; font-size:clamp(14px,3.8vw,17px); line-height:1.4; color:#f4f6ff; }
.battleQuickResolve{ width:100%; min-height:46px !important; }
@keyframes battleFighterHurt{
  0%{ transform:translateX(0); filter:brightness(1); }
  25%{ transform:translateX(-5px); filter:brightness(2) sepia(1) saturate(4); }
  55%{ transform:translateX(5px); }
  100%{ transform:translateX(0); filter:brightness(1); }
}
@media(max-width:350px){
  .battleFighters{ gap:5px; }
  .battleFighter{ padding:10px 6px; }
  .battleAvatar{ font-size:38px; }
}

/* Compact precision pad: swipe remains available; every tap moves exactly one tile. */
#dpadCross{ display:none !important; }
@media (max-width:900px){
  body.yf-game-active #dpadCross{
    position:relative;
    inset:auto;
    left:auto;
    bottom:auto;
    transform:none;
    flex:0 0 auto;
    align-self:center;
    display:grid !important;
    grid-template-columns:repeat(3,42px);
    grid-template-rows:repeat(2,42px);
    gap:5px;
    box-sizing:border-box;
    width:auto;
    margin:1px auto max(8px,env(safe-area-inset-bottom));
    padding:5px;
    border:1px solid rgba(154,181,255,.20);
    border-radius:16px;
    background:rgba(12,18,31,.58);
    box-shadow:0 8px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(7px);
    z-index:40;
  }
  #dpadCross button{
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
    margin:0;
    padding:0;
    border:1px solid rgba(182,204,255,.25);
    border-radius:12px;
    color:#f1f5ff;
    background:linear-gradient(180deg,rgba(79,105,184,.88),rgba(43,60,116,.92));
    box-shadow:0 4px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12);
    font-size:16px;
    line-height:1;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  #dpadCross button:active{
    transform:translateY(1px) scale(.95);
    filter:brightness(1.22);
  }
  #btnUp{ grid-row:1;grid-column:2; }
  #btnLeft{ grid-row:2;grid-column:1; }
  #btnDown{ grid-row:2;grid-column:2; }
  #btnRight{ grid-row:2;grid-column:3; }
}
@media (max-height:680px) and (max-width:900px){
  body.yf-game-active #dpadCross{
    grid-template-columns:repeat(3,38px);
    grid-template-rows:repeat(2,38px);
    gap:4px;
    padding:4px;
    margin-bottom:max(4px,env(safe-area-inset-bottom));
  }
  #dpadCross button{ width:38px;height:38px;min-width:38px;min-height:38px;font-size:14px; }
}

/* =========================================================
   Mobile-first home screen (single portrait composition)
   ========================================================= */
#menu{
  width:100%;
  height:100vh;
  height:100svh;
  min-height:0;
  padding:
    max(14px,env(safe-area-inset-top))
    max(14px,env(safe-area-inset-right))
    max(14px,env(safe-area-inset-bottom))
    max(14px,env(safe-area-inset-left));
  align-items:stretch;
  overflow-x:hidden;
  overflow-y:auto;
  background-image:url('assets/background/A1_m.jpg') !important;
  background-position:center center !important;
  background-size:cover !important;
}
#menu::before{
  background:
    linear-gradient(180deg,rgba(4,11,18,.48) 0%,rgba(7,12,20,.08) 29%,rgba(8,11,18,.30) 52%,rgba(5,8,15,.88) 100%),
    radial-gradient(ellipse at 50% 45%,transparent 20%,rgba(0,0,0,.30) 100%);
}
#menu .heroFx{
  inset:0;
  opacity:.42;
  filter:blur(16px);
  background:
    radial-gradient(circle at 50% 36%,rgba(255,183,89,.22),transparent 35%),
    radial-gradient(circle at 18% 12%,rgba(122,180,255,.16),transparent 34%);
}
#menu .hero{
  width:min(430px,100%);
  height:100%;
  min-height:580px;
  margin:0 auto;
  display:block;
}
#menu .heroRight{ display:none !important; }
#menu .heroLeft{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
}
#menu .brand{
  flex:0 0 auto;
  align-items:center;
  gap:11px;
  padding:3px 4px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.55));
}
#menu .brandMark{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border-radius:15px;
  color:#ffe2a5;
  background:linear-gradient(145deg,rgba(91,47,21,.86),rgba(25,26,35,.88));
  border:1px solid rgba(255,211,132,.48);
  box-shadow:0 9px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.12);
  font-family:"Noto Serif TC","PMingLiU",serif;
  font-size:29px;
}
#menu .brandEyebrow{
  margin-bottom:2px;
  color:#ffd188;
  font-size:11px;
  font-weight:900;
  letter-spacing:.32em;
}
#menu .brandTitle{
  color:#fff8e8;
  font-family:"Noto Serif TC","PMingLiU",serif;
  font-size:clamp(29px,8.7vw,38px);
  line-height:1;
  letter-spacing:.13em;
  text-shadow:0 2px 12px rgba(0,0,0,.72),0 0 22px rgba(255,171,67,.20);
}
#menu .brandSub{
  margin-top:5px;
  color:rgba(239,231,213,.82);
  font-size:10px;
  letter-spacing:.09em;
}
#menu .panel{
  flex:0 0 auto;
  width:100%;
  max-width:none;
  height:auto;
  min-height:0;
  max-height:none;
  margin:0;
  padding:15px;
  border:1px solid rgba(255,220,163,.22);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(13,19,29,.72),rgba(8,12,20,.91));
  box-shadow:0 20px 52px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(13px) saturate(1.12);
}
#menu .panelTop{
  align-items:center;
  margin-bottom:9px;
}
#menu .versionTag{
  padding:5px 9px;
  border-color:rgba(255,210,135,.26);
  background:rgba(116,66,30,.30);
  color:#ffe0a6;
  font-size:11px;
}
#menu .metaLine{
  max-width:62%;
  color:#dbe4f7;
  font-size:10.5px;
  line-height:1.35;
}
#menu #menuTagline.taglineBox{
  margin:0 0 11px;
  padding:9px 11px;
  border:0;
  border-left:2px solid rgba(255,190,91,.62);
  border-radius:2px 10px 10px 2px;
  background:linear-gradient(90deg,rgba(255,183,73,.09),rgba(255,255,255,.025));
  color:rgba(242,238,228,.88);
  font-size:clamp(11.5px,3.25vw,13px);
  line-height:1.52;
}
#menu .menuBtns{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
#menu #btnNew,
#menu #btnContinue,
#menu #btnLoadMain,
#menu #btnSettingsMain{ grid-column:1/-1; }
#menu .menuBtn{
  width:100%;
  max-width:none;
  min-width:0;
  height:48px;
  min-height:48px;
  padding:0 14px;
  border-radius:14px;
  justify-content:flex-start;
  border:1px solid rgba(212,226,255,.18);
  background:linear-gradient(180deg,rgba(64,86,150,.94),rgba(35,49,96,.96));
  box-shadow:0 8px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10);
  font-size:15px;
  letter-spacing:.04em;
}
#menu .menuBtn .ic{
  width:28px;
  flex:0 0 28px;
  font-size:18px;
}
#menu #btnNew{
  border-color:rgba(255,209,125,.43);
  background:linear-gradient(180deg,rgba(173,105,41,.96),rgba(111,59,28,.98));
  box-shadow:0 9px 22px rgba(72,35,12,.40),inset 0 1px 0 rgba(255,243,209,.16);
}
#menu #btnContinue{ background:linear-gradient(180deg,rgba(70,98,171,.96),rgba(38,55,109,.98)); }
#menu #btnLoadMain,
#menu #btnSettingsMain{ background:linear-gradient(180deg,rgba(50,66,112,.94),rgba(29,39,72,.97)); }
#menu #btnAboutGame,
#menu .menuBtn.danger{
  justify-content:center;
  height:43px;
  min-height:43px;
  padding:0 9px;
  font-size:13px;
}
#menu .menuBtn.danger{
  border-color:rgba(255,139,139,.22);
  background:linear-gradient(180deg,rgba(104,49,55,.86),rgba(68,31,38,.92));
}
#menu .menuBtn[disabled]{ opacity:.55; filter:saturate(.45); }
#menu .panelFoot{
  margin-top:9px;
  padding-top:8px;
  justify-content:center;
  border-top-color:rgba(255,255,255,.07);
}
#menu .hintRow{ display:none !important; }
#menu .creditRow{ color:rgba(226,224,218,.58); font-size:10px; letter-spacing:.08em; }

@media (max-height:700px){
  #menu{ padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom)); }
  #menu .hero{ min-height:544px; }
  #menu .heroLeft{ gap:7px; }
  #menu .brandMark{ width:43px;height:43px;flex-basis:43px;font-size:24px; }
  #menu .brandTitle{ font-size:26px; }
  #menu .brandSub{ display:none; }
  #menu .panel{ padding:11px 12px;border-radius:18px; }
  #menu #menuTagline.taglineBox{ margin-bottom:8px;padding:6px 9px;font-size:11px;line-height:1.38; }
  #menu .menuBtns{ gap:6px; }
  #menu .menuBtn{ height:42px;min-height:42px;font-size:14px; }
  #menu #btnAboutGame,#menu .menuBtn.danger{ height:38px;min-height:38px; }
  #menu .panelFoot{ margin-top:6px;padding-top:5px; }
}

/* Low-HP warning remains compact but unmistakable. */
#hud .stat.hp-danger{
  color:#fff2f2;
  border-color:rgba(255,74,85,.72);
  background:linear-gradient(180deg,rgba(139,27,40,.90),rgba(78,19,29,.94));
  box-shadow:0 0 0 1px rgba(255,89,102,.18),0 0 14px rgba(255,39,58,.30);
  animation:hpDangerPulse 1.05s ease-in-out infinite;
}
@keyframes hpDangerPulse{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.24); }
}
@media (prefers-reduced-motion:reduce){ #hud .stat.hp-danger{ animation:none; } }

/* Village characters: cohesive portrait tokens instead of raw oversized emoji. */
.village-npc{
  background:radial-gradient(circle at 50% 38%, rgba(255,238,176,.34), rgba(70,44,28,.46) 72%) !important;
  border-radius:18%;
  box-shadow:inset 0 0 0 1px rgba(255,231,166,.3);
}
.village-npc .emo{
  font-size:.78em;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.55));
  animation:villagerBreathe 1.5s ease-in-out infinite;
}
@keyframes villagerBreathe{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1px)} }

@media (max-width:600px){
  #overlay{ inset:8px; width:auto; }
  #overlay .card{ width:100%; padding:14px; border-radius:14px; }
  #overlay .row{ display:grid; grid-template-columns:minmax(0,1fr); }
  #overlay .row > button{ width:100%; }
  #storyOverlayFS .story-buttons,
  #storyOverlayFS2 .story-buttons{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:350px), (max-height:620px){
  #storyOverlayFS .story-text,
  #storyOverlayFS2 .story-text{ font-size:13px !important; line-height:1.5 !important; }
  #storyOverlayFS .story-text-box,
  #storyOverlayFS2 .story-text-box{ max-height:31dvh !important; }
}
@media (prefers-reduced-motion:reduce){
  .monster-cell .emo, .village-npc .emo{ animation:none !important; }
}

/* =========================================================
   V1.1 quest/dialogue readability pass
   Mobile font scaling may enlarge copy, never the frame or navigation.
   ========================================================= */
#storyOverlayFS,
#storyOverlayFS2{
  --dialog-font:clamp(15px, 3.75vw, 19px);
  --dialog-leading:1.68;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  text-align:left;
}

#storyOverlayFS .story-frame,
#storyOverlayFS2 .story-frame{
  width:min(1120px, calc(100vw - 16px)) !important;
  max-width:calc(100vw - 16px) !important;
  height:min(760px, calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)))) !important;
  max-height:calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
  min-width:0;
  min-height:0;
  padding:clamp(9px, 2.6vw, 17px) !important;
  gap:clamp(7px, 1.5dvh, 13px) !important;
  overflow:hidden !important;
}

#storyOverlayFS .story-image-wrap,
#storyOverlayFS2 .story-image-wrap{
  flex:1 1 0;
  min-width:0;
  min-height:96px;
  max-height:none !important;
}
#storyOverlayFS .story-image,
#storyOverlayFS2 .story-image{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

#storyOverlayFS .story-text-box,
#storyOverlayFS2 .story-text-box{
  flex:0 1 auto;
  width:100%;
  min-width:0;
  min-height:calc(var(--dialog-font) * var(--dialog-leading) * 2 + 20px) !important;
  max-height:min(35dvh, 285px) !important;
  padding:clamp(9px, 2.8vw, 14px) clamp(10px, 3vw, 16px) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  border:1px solid rgba(170,193,255,.17);
  background:linear-gradient(180deg, rgba(7,10,18,.82), rgba(10,14,24,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

#storyOverlayFS .story-text,
#storyOverlayFS2 .story-text{
  display:block;
  width:100%;
  min-width:0;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  font-family:inherit !important;
  font-size:var(--dialog-font) !important;
  font-weight:500;
  line-height:var(--dialog-leading) !important;
  letter-spacing:.025em;
  white-space:pre-wrap !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
  text-wrap:pretty;
  color:#f2f5ff;
  text-shadow:0 1px 1px rgba(0,0,0,.42);
}

#storyOverlayFS .story-footer,
#storyOverlayFS2 .story-footer{
  flex:0 0 auto;
  width:100%;
  min-width:0;
  max-width:100%;
  max-height:min(42dvh, 280px) !important;
  gap:7px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
#storyOverlayFS .story-pageinfo,
#storyOverlayFS2 .story-pageinfo{
  flex:0 0 auto;
  min-width:42px;
  font-size:clamp(11px, 3vw, 13px) !important;
  white-space:nowrap;
}
#storyOverlayFS .story-buttons,
#storyOverlayFS2 .story-buttons{
  flex:1 1 auto;
  min-width:0;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:7px !important;
}
#storyOverlayFS .story-buttons .btn,
#storyOverlayFS2 .story-buttons .btn,
#storyOverlayFS .story-choice-row .btn,
#storyOverlayFS .story-choice-actions .btn{
  width:100% !important;
  min-width:0 !important;
  min-height:44px !important;
  height:auto !important;
  padding:8px 9px !important;
  font-size:clamp(13px, 3.4vw, 16px) !important;
  line-height:1.3 !important;
  white-space:normal !important;
  word-break:normal;
  overflow-wrap:anywhere;
}

/* Quest list: long goals and large system fonts stay inside each card. */
.questPanelV11,
.questSectionV11,
.questListV11,
.questRowV11{
  min-width:0;
  max-width:100%;
}
.questPanelV11{
  max-height:calc(100dvh - 88px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.questHeadV11{
  min-height:44px;
  height:auto;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.4;
}
.questRowV11{
  align-items:flex-start;
  font-size:clamp(14px, 3.65vw, 17px);
  line-height:1.62;
  white-space:normal;
  overflow-wrap:anywhere;
}
.questMarkV11{ margin-top:.1em; }
.questCountV11{ font-size:.82em; line-height:1.45; }

@media (max-width:600px){
  #storyOverlayFS,
  #storyOverlayFS2{
    --dialog-font:clamp(15px, 4.1vw, 18px);
    --dialog-leading:1.65;
  }
  #storyOverlayFS .story-frame,
  #storyOverlayFS2 .story-frame{
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
  }
  #storyOverlayFS .story-text-box,
  #storyOverlayFS2 .story-text-box{
    max-height:34dvh !important;
  }
  #storyOverlayFS .story-buttons,
  #storyOverlayFS2 .story-buttons{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width:350px){
  #storyOverlayFS,
  #storyOverlayFS2{ --dialog-font:14px; --dialog-leading:1.58; }
  #storyOverlayFS .story-buttons,
  #storyOverlayFS2 .story-buttons{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-height:650px) and (max-width:900px){
  #storyOverlayFS,
  #storyOverlayFS2{ --dialog-font:14px; --dialog-leading:1.52; }
  #storyOverlayFS .story-image-wrap,
  #storyOverlayFS2 .story-image-wrap{ min-height:70px; }
  #storyOverlayFS .story-text-box,
  #storyOverlayFS2 .story-text-box{ max-height:31dvh !important; }
  #storyOverlayFS .story-buttons .btn,
  #storyOverlayFS2 .story-buttons .btn{ min-height:38px !important; padding:6px 8px !important; }
}

/* =========================================================
   V1.2 Dialogue continuous-wrap hotfix (2026-08-22)
   Goal: dialogue text must never be hard-wrapped by embedded \n / <br>
   or legacy fixed-line DIV chunks. The WebView alone decides visual wraps.
   ========================================================= */
#storyOverlayFS .story-text,
#storyOverlayFS2 .story-text,
#storyOverlayFS .fs-text,
#storyOverlayFS2 .fs-text,
#storyTextBlock,
#storyTextBlock .line,
#storyOverlayFS .story-lines,
#storyOverlayFS .story-lines .line,
#storyOverlayFS2 .story-lines,
#storyOverlayFS2 .story-lines .line,
#sideTalk .body{
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Legacy renderers may create one DIV per fixed-width text chunk.
   Make those chunks participate in one continuous inline text flow. */
#storyTextBlock .line,
#storyOverlayFS .story-lines .line,
#storyOverlayFS2 .story-lines .line{
  display: inline !important;
  min-height: 0 !important;
}

/* Legacy renderers may insert <br> tags for fixed character wrapping.
   Dialogue is intentionally continuous; only CSS width may wrap it. */
#storyOverlayFS .story-text br,
#storyOverlayFS2 .story-text br,
#storyOverlayFS .fs-text br,
#storyOverlayFS2 .fs-text br,
#storyTextBlock br,
#storyOverlayFS .story-lines br,
#storyOverlayFS2 .story-lines br,
#sideTalk .body br{
  display: none !important;
}

/* =========================================================
   V1.2 密碼任務 / 拾取 UX 修正 (2026-08-22)
   - 四格密碼固定顯示
   - 0~9 手機單排
   - 上一頁/退格/清除/確定/離開同排
   ========================================================= */
#storyOverlayFS .story-frame.digit-lock-mode,
#storyOverlayFS2 .story-frame.digit-lock-mode{
  gap:6px !important;
}
#storyOverlayFS .story-frame.digit-lock-mode .story-image-wrap,
#storyOverlayFS2 .story-frame.digit-lock-mode .story-image-wrap{
  flex:1 1 auto !important;
  min-height:80px !important;
}
#storyOverlayFS .story-frame.digit-lock-mode .story-text-box,
#storyOverlayFS2 .story-frame.digit-lock-mode .story-text-box{
  flex:0 0 auto !important;
  max-height:24dvh !important;
}
#storyOverlayFS .story-frame.digit-lock-mode .story-footer,
#storyOverlayFS2 .story-frame.digit-lock-mode .story-footer{
  max-height:none !important;
  overflow:visible !important;
  gap:4px !important;
}
#storyOverlayFS .story-choice-bar.digit-lock-stage,
#storyOverlayFS2 .story-choice-bar.digit-lock-stage{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:4px !important;
  flex-wrap:nowrap !important;
  width:100% !important;
}
#storyOverlayFS .story-choice-bar.digit-lock-stage .story-choice-info,
#storyOverlayFS2 .story-choice-bar.digit-lock-stage .story-choice-info{
  display:none !important;
}
#storyOverlayFS .story-choice-bar.digit-lock-stage .story-choice-row,
#storyOverlayFS2 .story-choice-bar.digit-lock-stage .story-choice-row{
  display:block !important;
  width:100% !important;
  flex:0 0 auto !important;
}
#storyOverlayFS .digit-lock-slots,
#storyOverlayFS2 .digit-lock-slots{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  min-height:34px !important;
  gap:5px !important;
  flex-wrap:nowrap !important;
  justify-content:center !important;
}
#storyOverlayFS .digit-lock-slots > div,
#storyOverlayFS2 .digit-lock-slots > div{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  border-radius:7px !important;
  font-size:17px !important;
}
#storyOverlayFS .digit-lock-grid,
#storyOverlayFS2 .digit-lock-grid{
  display:grid !important;
  grid-template-columns:repeat(10,minmax(0,1fr)) !important;
  gap:3px !important;
  width:100% !important;
  max-width:100% !important;
}
#storyOverlayFS .digit-lock-grid .btn,
#storyOverlayFS2 .digit-lock-grid .btn{
  min-width:0 !important;
  width:100% !important;
  min-height:32px !important;
  height:32px !important;
  padding:2px 0 !important;
  border-radius:7px !important;
  font-size:13px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
#storyOverlayFS .digit-lock-actions,
#storyOverlayFS2 .digit-lock-actions{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:4px !important;
  width:100% !important;
  max-width:100% !important;
  flex-wrap:nowrap !important;
  margin-top:0 !important;
}
#storyOverlayFS .digit-lock-actions .btn,
#storyOverlayFS2 .digit-lock-actions .btn{
  width:100% !important;
  min-width:0 !important;
  min-height:32px !important;
  height:32px !important;
  padding:3px 2px !important;
  border-radius:7px !important;
  font-size:12px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}
@media (max-width:600px){
  #storyOverlayFS .story-frame.digit-lock-mode .story-text-box,
  #storyOverlayFS2 .story-frame.digit-lock-mode .story-text-box{
    max-height:22dvh !important;
  }
  #storyOverlayFS .digit-lock-slots > div,
  #storyOverlayFS2 .digit-lock-slots > div{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    font-size:16px !important;
  }
  #storyOverlayFS .digit-lock-grid .btn,
  #storyOverlayFS2 .digit-lock-grid .btn{
    min-height:30px !important;
    height:30px !important;
    font-size:12px !important;
  }
  #storyOverlayFS .digit-lock-actions .btn,
  #storyOverlayFS2 .digit-lock-actions .btn{
    min-height:30px !important;
    height:30px !important;
    font-size:11px !important;
  }
}


/* =========================================================
   V1.2b 怪物 fullbleed / 任務選項列修正 (2026-08-22)
   ========================================================= */
/* 怪物尺寸唯一依 legend.fullbleed 判斷。
   先前通用 #grid .cell .emo 的 !important 會把大小怪壓成相同尺寸，
   這裡用更後方且更精確的 selector 覆蓋。 */
#grid .cell.monster-cell.monster-compact .emo{
  font-size:calc(var(--tile) * .46) !important;
  width:72% !important;
  height:72% !important;
  max-width:72% !important;
  max-height:72% !important;
}
#grid .cell.monster-cell.monster-fullbleed .emo{
  font-size:calc(var(--tile) * .86) !important;
  width:96% !important;
  height:96% !important;
  max-width:96% !important;
  max-height:96% !important;
}

/* 選項任務：上一頁 + 所有選項 + 離開維持同一條緊湊工具列。
   不再使用手機版 2 欄大按鈕規則。 */
#storyOverlayFS .story-choice-bar:not(.digit-lock-stage),
#storyOverlayFS2 .story-choice-bar:not(.digit-lock-stage){
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  width:100% !important;
  max-width:100% !important;
}
#storyOverlayFS .story-choice-bar:not(.digit-lock-stage) .story-choice-info,
#storyOverlayFS2 .story-choice-bar:not(.digit-lock-stage) .story-choice-info{
  display:none !important;
}
#storyOverlayFS .story-choice-bar:not(.digit-lock-stage) .story-choice-row,
#storyOverlayFS2 .story-choice-bar:not(.digit-lock-stage) .story-choice-row{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
}
#storyOverlayFS .story-choice-bar:not(.digit-lock-stage) .story-choice-actions,
#storyOverlayFS2 .story-choice-bar:not(.digit-lock-stage) .story-choice-actions{
  display:flex !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  gap:5px !important;
}
#storyOverlayFS .story-choice-bar:not(.digit-lock-stage) .story-choice-row .btn,
#storyOverlayFS2 .story-choice-bar:not(.digit-lock-stage) .story-choice-row .btn,
#storyOverlayFS .story-choice-bar:not(.digit-lock-stage) .story-choice-actions .btn,
#storyOverlayFS2 .story-choice-bar:not(.digit-lock-stage) .story-choice-actions .btn{
  flex:1 1 0 !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:32px !important;
  height:32px !important;
  padding:3px 7px !important;
  border-radius:7px !important;
  font-size:12px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#storyOverlayFS .story-choice-bar:not(.digit-lock-stage) .story-choice-actions .btn,
#storyOverlayFS2 .story-choice-bar:not(.digit-lock-stage) .story-choice-actions .btn{
  min-width:54px !important;
}
@media (max-width:600px){
  #storyOverlayFS .story-footer,
  #storyOverlayFS2 .story-footer{
    gap:4px !important;
    padding-top:4px !important;
  }
  #storyOverlayFS .story-choice-bar:not(.digit-lock-stage),
  #storyOverlayFS2 .story-choice-bar:not(.digit-lock-stage){ gap:3px !important; }
  #storyOverlayFS .story-choice-bar:not(.digit-lock-stage) .story-choice-row,
  #storyOverlayFS2 .story-choice-bar:not(.digit-lock-stage) .story-choice-row{ gap:3px !important; }
  #storyOverlayFS .story-choice-bar:not(.digit-lock-stage) .story-choice-row .btn,
  #storyOverlayFS2 .story-choice-bar:not(.digit-lock-stage) .story-choice-row .btn,
  #storyOverlayFS .story-choice-bar:not(.digit-lock-stage) .story-choice-actions .btn,
  #storyOverlayFS2 .story-choice-bar:not(.digit-lock-stage) .story-choice-actions .btn{
    min-height:30px !important;
    height:30px !important;
    padding:2px 4px !important;
    font-size:11px !important;
    border-radius:6px !important;
  }
  #storyOverlayFS .story-choice-bar:not(.digit-lock-stage) .story-choice-actions .btn,
  #storyOverlayFS2 .story-choice-bar:not(.digit-lock-stage) .story-choice-actions .btn{
    min-width:46px !important;
  }
}


/* =========================================================
   V1.2 FINAL story / quest / digit-lock unified button system
   ========================================================= */
#storyOverlayFS .story-buttons,
#storyOverlayFS .story-choice-row,
#storyOverlayFS .digit-lock-actions{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  justify-content:center !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
}
#storyOverlayFS .story-buttons .btn,
#storyOverlayFS .story-choice-row .btn,
#storyOverlayFS .digit-lock-actions .btn{
  flex:1 1 0 !important;
  width:0 !important;
  min-width:0 !important;
  max-width:none !important;
  height:44px !important;
  min-height:44px !important;
  padding:5px 7px !important;
  border-radius:8px !important;
  font-size:clamp(12px,1.35vw,16px) !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  text-align:center !important;
}
#storyOverlayFS .story-choice-bar{
  display:flex;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:6px !important;
}
#storyOverlayFS .story-choice-actions{ display:none !important; }
#storyOverlayFS .story-choice-info{ width:100% !important; min-width:0 !important; }

/* Password slots always visible. */
#storyOverlayFS .digit-lock-slots{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:center !important;
  gap:8px !important;
}
#storyOverlayFS .digit-lock-grid{
  display:grid !important;
  grid-template-columns:repeat(10,minmax(0,1fr)) !important;
  gap:6px !important;
  width:min(100%,760px) !important;
  max-width:760px !important;
}
#storyOverlayFS .digit-lock-grid .btn{
  width:100% !important;
  min-width:0 !important;
  height:42px !important;
  min-height:42px !important;
  padding:4px !important;
  font-size:16px !important;
  border-radius:8px !important;
}

@media (max-width:768px){
  /* Story navigation remains one row on phones. */
  #storyOverlayFS .story-buttons,
  #storyOverlayFS .story-choice-row,
  #storyOverlayFS .digit-lock-actions{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    gap:5px !important;
  }
  #storyOverlayFS .story-buttons .btn,
  #storyOverlayFS .story-choice-row .btn,
  #storyOverlayFS .digit-lock-actions .btn{
    width:0 !important;
    min-width:0 !important;
    height:40px !important;
    min-height:40px !important;
    padding:4px 3px !important;
    font-size:clamp(10px,3.05vw,13px) !important;
    border-radius:7px !important;
  }
  /* Phone password keypad: exactly 5 + 5. */
  #storyOverlayFS .digit-lock-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
  }
  #storyOverlayFS .digit-lock-grid .btn{
    width:100% !important;
    height:40px !important;
    min-height:40px !important;
    font-size:15px !important;
  }
  #storyOverlayFS .digit-lock-slots > *{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }
}


/* =========================================================
   V1.2 存檔槽位單排 + 怪物傷害層級修正 (2026-08-22)
   ========================================================= */
.save-slot-row{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  width:100% !important;
}
.save-slot-row .save-slot-btn{
  flex:1 1 0 !important;
  min-width:0 !important;
  width:auto !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 6px !important;
  font-size:15px !important;
  white-space:nowrap !important;
}
@media (max-width:520px){
  .save-slot-row{ gap:6px !important; }
  .save-slot-row .save-slot-btn{
    height:42px !important;
    min-height:42px !important;
    padding:0 4px !important;
    font-size:14px !important;
  }
}
/* 預估傷害/回復數字永遠壓在怪物與格子內容之上 */
#grid .cell{ isolation:isolate; }
#grid .cell .hp-overlay{
  z-index:9999 !important;
  position:absolute !important;
}
#grid .cell.monster-cell > .emo{
  z-index:1 !important;
  position:relative !important;
}
\n\n/* =========================================================\n   V1.2 dialogue / choice strict mutual-exclusion hotfix\n   一般對話、任務選項、密碼盤三種操作列任何時候只允許一組顯示。\n   解決 choice bar 被舊 display:flex!important 強制顯示而產生第二顆「離開」。\n   ========================================================= */\n#storyOverlayFS .story-footer .story-choice-bar[hidden],\n#storyOverlayFS2 .story-footer .story-choice-bar[hidden]{\n  display:none !important;\n  visibility:hidden !important;\n  pointer-events:none !important;\n}\n#storyOverlayFS .story-footer .story-buttons[hidden],\n#storyOverlayFS2 .story-footer .story-buttons[hidden]{\n  display:none !important;\n  visibility:hidden !important;\n  pointer-events:none !important;\n}\n#storyOverlayFS .story-footer .story-choice-bar.choice-stage-active:not([hidden]),\n#storyOverlayFS2 .story-footer .story-choice-bar.choice-stage-active:not([hidden]){\n  display:flex !important;\n  visibility:visible !important;\n  pointer-events:auto !important;\n}\n