/* 覓井 — 遊戲世界主題外觀（覆蓋 index.html 與 ui.css 的基本樣式）
   原則：明亮溫暖（羊皮紙、蜂蜜色木框、黃銅）、閱讀舒適（深墨色字、足夠字級、動態輕柔）、
   光影對比（說話時場景微暗、左上方暖光照進來）。 */
:root {
  --ink: #3B2E22; --inkSoft: #6B5A45; --cream: #FBF1DC; --honey: #C98B3E; --brass: #C9A04A;
  --teal: #2F7F7A; --tealSoft: #DCEDE9; --rust: #B4462F;
  --fs: 1;                               /* 文字大小設定：0.9 / 1 / 1.15 */
  --ease: cubic-bezier(.2,.8,.2,1);
}
html[data-fs=sm] { --fs: .9; } html[data-fs=lg] { --fs: 1.15; }
body { color: var(--ink); }
button { font-family: inherit; }
:focus-visible { outline: 3px solid rgba(47,127,122,.6); outline-offset: 2px; }

/* ---------- 載入畫面 ---------- */
#loading { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(ellipse at 35% 25%, #FFF4DA 0%, #F2DDB2 45%, #D9B67E 100%); transition: opacity .6s; }
#loading.done { opacity: 0; pointer-events: none; }
#loading img { width: 108px; animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(0 8px 12px rgba(80,50,20,.3)); }
#loading .lbar { width: min(320px, 70vw); height: 10px; border-radius: 6px; background: rgba(90,60,30,.18); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
#loading .lbar i { display: block; height: 100%; width: 3%; background: linear-gradient(90deg, var(--honey), #E9B866); border-radius: 6px; transition: width .3s; }
#ltext { font-family: 'Noto Serif TC', serif; color: var(--inkSoft); font-size: 15px; letter-spacing: .05em; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- 標題畫面：掛在村子裡的告示板 ---------- */
#title { justify-content: center; gap: 2vh; background:
  radial-gradient(ellipse at 28% 18%, rgba(255,240,200,.45), rgba(255,240,200,0) 55%),
  linear-gradient(to bottom, rgba(40,28,15,.0) 40%, rgba(40,28,15,.35)); }
.tbrand { display: flex; flex-direction: column; align-items: center; }
.tbrand .emblem { width: clamp(120px, 16vh, 170px); filter: drop-shadow(0 6px 10px rgba(60,35,10,.4)); margin-bottom: -6px; }
.tbrand .org { font-size: 13px; letter-spacing: .3em; color: #FFF3D6; text-shadow: 0 1px 3px rgba(60,35,10,.8); }
.tbrand h1 { font-size: clamp(54px, 9vh, 96px); margin: 0; color: #FFF8E8; letter-spacing: .12em;
  text-shadow: 0 2px 0 #9B6A2E, 0 4px 0 #7A5022, 0 10px 24px rgba(60,35,10,.55); }
.tbrand .tag { font-size: clamp(15px, 2.3vh, 20px); color: #FFF3D6; text-shadow: 0 1px 4px rgba(50,30,10,.9); margin-top: 4px; }
.tboard { position: relative; width: min(400px, 86vw, 52vh); aspect-ratio: 675 / 900; background: url(assets/ui/board.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 22px rgba(50,30,10,.45)); animation: swing 6s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes swing { 0%,100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } }
.tmenu { position: absolute; left: 13%; right: 17%; top: 21%; bottom: 13%; width: auto; display: flex; flex-direction: column; justify-content: center; gap: 1.1vh; }
.tmenu button { height: clamp(36px, 5.6vh, 50px); padding: 0 8px; font-size: calc(clamp(15px, 2.2vh, 18px) * var(--fs)); color: #FFF6E2; text-shadow: 0 1px 2px rgba(50,25,5,.8);
  background: url(assets/ui/plaque.webp) center / 100% 100% no-repeat; border: 0; border-radius: 0; backdrop-filter: none; transition: transform .15s var(--ease), filter .15s; }
.tmenu button:hover, .tmenu button:focus-visible { transform: scale(1.04); filter: brightness(1.08); background-color: transparent; border: 0; }
.tmenu button.primary { background-image: url(assets/ui/choice2_on.webp); color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.6); font-weight: 600; }
.tctl { color: #FFF3D6; text-shadow: 0 1px 3px rgba(40,25,10,.9); font-size: 13px; }

/* ---------- 探索 HUD ---------- */
#journal { display: none; }
body.playing #journal { display: flex; }
body.talking #journal { display: none; }
#journal { align-items: center; gap: 10px; top: 14px; left: 14px; max-width: min(400px, 74vw); padding: 10px 18px 10px 12px; border: 0; border-radius: 0;
  background: url(assets/ui/choice2.webp) center / 100% 100% no-repeat; color: var(--ink); filter: drop-shadow(0 4px 6px rgba(50,30,10,.35)); }
#journal .jIcon { width: 40px; flex: none; }
#jTitle { color: var(--teal); font-size: 11px; letter-spacing: .15em; font-weight: 600; }
#jText { font-size: calc(14px * var(--fs)); line-height: 1.45; font-family: 'Noto Serif TC', serif; }
#journal.pulse { animation: pulse 1.2s var(--ease) 2; }
@keyframes pulse { 50% { transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(255,214,120,.9)); } }

#iconBar { position: fixed; top: 12px; right: 12px; z-index: 30; display: flex; gap: 8px; align-items: center; }
#iconBar .ico { display: none; width: 50px; height: 50px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 3px 4px rgba(40,25,10,.4)); transition: transform .15s var(--ease); }
body.playing #iconBar .ico { display: block; }
body.talking #iconBar .ico { display: none; }
#iconBar .ico img { width: 100%; height: 100%; }
#iconBar .ico:hover { transform: scale(1.08) rotate(-3deg); }
#langBtn { position: static; height: 36px; min-width: 46px; padding: 0 10px; border: 0; color: #FFF6E2; font-weight: 600; text-shadow: 0 1px 2px rgba(50,25,5,.8);
  background: url(assets/ui/plaque.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 3px 4px rgba(40,25,10,.4)); border-radius: 0; }
#menuBtn { position: static; display: none; }   /* 舊樣式覆蓋 */
#cross { width: 8px; height: 8px; margin: -4px; background: rgba(255,250,235,.9); box-shadow: 0 0 0 1.5px rgba(60,40,20,.45); }
#prompt { top: calc(50% + 34px); padding: 8px 26px; border: 0; border-radius: 0; color: #FFF6E2; font-size: calc(16px * var(--fs)); text-shadow: 0 1px 2px rgba(20,40,40,.8);
  background: url(assets/ui/nameplate.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 4px 6px rgba(30,20,10,.4)); }
#prompt b { background: #FFF6E2; color: var(--ink); border-radius: 4px; padding: 0 6px; margin-right: 6px; text-shadow: none; }
#talkBtn { width: 84px; height: 84px; border-radius: 50%; color: var(--ink); font-weight: 600; font-size: 16px;
  background: url(assets/ui/i_salon.webp) center / 100% 100% no-repeat; border: 0; text-shadow: 0 0 4px #FFF6E2, 0 0 8px #FFF6E2; padding-top: 52px; }

/* ---------- 對話：場景微暗＋左上暖光（光影對比） ---------- */
body.talking #c { filter: blur(3px) brightness(.9) saturate(1.05); }
#dlgBg { filter: blur(1.5px) saturate(1.08) brightness(1.02); }
#dlgShade { background:
  radial-gradient(ellipse 70% 60% at 18% 8%, rgba(255,236,190,.42), rgba(255,236,190,0) 60%),
  radial-gradient(ellipse 120% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(45,28,12,.42) 100%),
  linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(45,28,12,.28)); }
#portrait { filter: drop-shadow(0 14px 22px rgba(40,25,10,.38)); animation: slideIn .35s var(--ease); }
@keyframes slideIn { from { opacity: 0; transform: translateX(-66%); } }

#dBox { width: min(1060px, 96vw); bottom: 18px; min-height: 0; padding: 6px 18px 4px; border-radius: 0;
  background: none; border-style: solid; border-color: transparent;
  border-width: 62px 46px 44px 62px; border-image: url(assets/ui/dialog2.webp) 100 75 70 100 fill / 62px 46px 44px 62px stretch;
  filter: drop-shadow(0 10px 18px rgba(40,25,10,.35)); animation: rise .28s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 16px); } }
#dName { top: -12px; left: 54px; transform: translateY(-50%); padding: 8px 40px 10px; border: 0; border-radius: 0; color: #FFF6E2; font-size: calc(18px * var(--fs)); font-weight: 600;
  font-family: 'Noto Serif TC', 'EB Garamond', serif; letter-spacing: .04em; text-shadow: 0 1px 2px rgba(10,40,40,.75);
  background: url(assets/ui/nameplate.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 4px 5px rgba(30,20,10,.35)); }
#dText { color: var(--ink); font-size: calc(clamp(17px, 2vw, 21px) * var(--fs)); line-height: 1.8; min-height: 3.6em; margin: 0; }
#dText.narr { color: var(--inkSoft); font-style: italic; }
#dHint { opacity: 1; color: var(--teal); font-size: calc(13px * var(--fs)); margin-top: 0; }
#dHint::after { content: ' ▾'; display: inline-block; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(3px); } }

#choices { gap: 10px; margin-bottom: 26px; width: min(760px, 92vw); }
#choices button { position: relative; min-height: 58px; padding: 10px 56px 12px 66px; border: 0; border-radius: 0; color: var(--ink); text-align: left;
  font-family: 'Noto Serif TC', 'EB Garamond', serif; font-size: calc(17px * var(--fs)); line-height: 1.45;
  background: url(assets/ui/choice2.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 4px 6px rgba(40,25,10,.3));
  opacity: 0; animation: fadeUp .3s var(--ease) forwards; transition: transform .15s var(--ease); }
#choices button:nth-child(2) { animation-delay: .06s; } #choices button:nth-child(3) { animation-delay: .12s; }
#choices button:hover, #choices button:focus-visible { background-image: url(assets/ui/choice2_on.webp); background-color: transparent; transform: translateX(4px); outline: none; }
#choices button .k { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff;
  font: 600 13px/26px 'Noto Sans TC', sans-serif; text-align: center; font-style: normal; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 洞見卡 */
#card { width: min(640px, 94vw); max-height: 84vh; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  filter: drop-shadow(0 18px 30px rgba(40,25,10,.45)); animation: cardIn .4s var(--ease); }
@keyframes cardIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
#card .cardIn { border-style: solid; border-color: transparent; border-width: 74px 24px 26px; border-image: url(assets/ui/card.webp) 150 46 50 fill / 74px 24px 26px stretch;
  padding: 0 18px 8px; max-height: 84vh; overflow: auto; }
#card h3 { position: relative; margin: -60px 0 30px; text-align: center; color: #FFFBEF; font-size: calc(21px * var(--fs)); text-shadow: 0 1px 3px rgba(10,50,50,.7); }
#card .row { grid-template-columns: 116px 1fr; border-top: 1px solid rgba(107,90,69,.22); }
#card .row span { color: var(--teal); font-weight: 600; }
#card .row p { font-size: calc(15.5px * var(--fs)); color: var(--ink); }
#cardNew { position: static; text-align: center; color: var(--teal); font-size: 12px; margin: -22px 0 8px; }

/* ---------- 疊加面板：一律是羊皮紙＋木框（明亮、一致） ---------- */
#ov { background: radial-gradient(ellipse at 30% 15%, rgba(255,236,190,.25), rgba(40,25,10,.45)); backdrop-filter: blur(4px); }
#ov .panel, #ov .panel.parchment { background: none; border-style: solid; border-color: transparent; border-radius: 0; box-shadow: none; color: var(--ink);
  border-width: 44px 34px 40px 40px; border-image: url(assets/ui/panel.webp) 82 62 82 78 fill / 44px 34px 40px 40px stretch;
  filter: drop-shadow(0 20px 30px rgba(40,25,10,.45)); animation: pop .26s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } }
#ov .panel header { padding: 0 8px 8px; border-bottom: 1px solid rgba(107,90,69,.25); justify-content: center; position: relative; }
#ov .panel h2 { color: var(--teal); font-size: calc(23px * var(--fs)); letter-spacing: .06em; text-align: center; }
#ov .panel .x { position: absolute; right: -6px; top: -8px; width: 36px; height: 36px; border-radius: 50%; padding: 0; font-size: 16px; opacity: 1;
  color: #FFF6E2; background: radial-gradient(circle at 35% 30%, #E7C27A, #A7752F 70%); box-shadow: 0 2px 4px rgba(40,25,10,.4), inset 0 -2px 0 rgba(0,0,0,.2); }
#ov .pbody { padding: 12px 8px 4px; font-size: calc(15.5px * var(--fs)); }
#ov .pbody button { background: url(assets/ui/choice2.webp) center / 100% 100% no-repeat; border: 0; border-radius: 0; color: var(--ink); padding: 10px 28px; min-height: 44px; }
#ov .pbody button:hover, #ov .pbody button:focus-visible { background-image: url(assets/ui/choice2_on.webp); }
#ov .pbody button.primary { background-image: url(assets/ui/choice2_on.webp); color: var(--ink); font-weight: 600; }
#ov .pbody button.sm { padding: 6px 22px; min-height: 36px; }
#ov .note { color: var(--inkSoft); opacity: 1; }
#ov .lead { color: var(--ink); }
.vmenu button { background: url(assets/ui/plaque.webp) center / 100% 100% no-repeat !important; color: #FFF6E2 !important; text-shadow: 0 1px 2px rgba(50,25,5,.8); min-height: 50px !important; font-size: calc(17px * var(--fs)); }
.vmenu button.primary { background-image: url(assets/ui/choice2_on.webp) !important; color: var(--ink) !important; text-shadow: none; }
/* 案件檔案（原本深色版） */
.case { border-top-color: rgba(107,90,69,.22); }
.case .cmonth { color: var(--honey); font-weight: 600; }
.case .ctopic { color: var(--teal); }
.case p { color: var(--ink); }
.badge.open { color: var(--rust); } .badge.done { color: var(--teal); } .badge.soon { color: #9A8B76; }
/* 設定 */
.set { border-bottom-color: rgba(107,90,69,.2); }
.set label { color: var(--teal); }
#ov .pbody .seg button { padding: 6px 18px; min-height: 36px; }
#ov .pbody .seg button.on { background-image: url(assets/ui/choice2_on.webp); font-weight: 600; color: var(--ink); }
.set.danger button { color: var(--rust) !important; }
/* 手帳分頁：書籤 */
#ov .pbody .tabs button { background: none; min-height: 0; padding: 8px 14px; border-bottom: 3px solid transparent; }
#ov .pbody .tabs button.on { border-bottom-color: var(--teal); }
.tabs { position: relative; }
.jcard { border: 1px solid rgba(47,127,122,.35); background: rgba(255,251,240,.75); }
.jcard summary { color: var(--teal); }
#ov textarea, #ov input { background: rgba(255,252,243,.92); color: var(--ink); border: 1px solid rgba(107,90,69,.35); border-radius: 4px; font: inherit; padding: 10px 12px; width: 100%; }
/* 章末獎章 */
.medal { display: block; width: 220px; margin: -6px auto 4px; }
/* 沙龍 */
.post .pb { background: rgba(255,252,243,.95); }
.post.me .pb { background: var(--tealSoft); }
#ov .pbody .kinds button { background: transparent; min-height: 0; border: 1.5px solid var(--kc); border-radius: 14px; padding: 4px 12px; color: var(--kc); }
#ov .pbody .kinds button.on { background: var(--kc); color: #fff; }
.toastIcon { width: 28px; vertical-align: middle; margin-right: 8px; }
#toast { background: url(assets/ui/choice2.webp) center / 100% 100% no-repeat; border: 0; border-radius: 0; color: var(--ink); padding: 16px 44px; filter: drop-shadow(0 6px 10px rgba(40,25,10,.4)); }

/* 手機 */
@media (max-width: 560px) {
  #dBox { border-width: 46px 30px 34px 44px; border-image-width: 46px 30px 34px 44px; padding: 4px 8px; }
  #dName { left: 34px; font-size: 16px; padding: 6px 28px 8px; }
  #choices button { padding: 10px 30px 12px 50px; min-height: 54px; }
  #choices button .k { left: 16px; }
  #ov .panel, #ov .panel.parchment { border-width: 34px 24px 30px 28px; border-image-width: 34px 24px 30px 28px; }
  #iconBar .ico { width: 44px; height: 44px; }
  #journal { max-width: 62vw; }
}
/* 減少動態（系統設定或遊戲設定） */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
html.calm *, html.calm *::before, html.calm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

/* ---- 第 1 輪測試後的修正 ---- */
#card { border-style: solid; border-color: transparent; border-width: 74px 24px 26px; border-image: url(assets/ui/card.webp) 150 46 50 fill / 74px 24px 26px stretch; }
#card .cardIn { border: 0; border-image: none; padding: 0 18px 6px; max-height: calc(84vh - 110px); overflow: auto; }
#card h3 { position: absolute; left: 0; right: 0; top: -58px; margin: 0; }
#cardNew { margin: 4px 0 6px; }
.tbrand { position: relative; padding: 10px 40px 14px; }
.tbrand::before { content: ''; position: absolute; inset: -10px -60px; z-index: -1; background: radial-gradient(ellipse at 50% 55%, rgba(255,246,222,.78), rgba(255,246,222,.35) 45%, rgba(255,246,222,0) 72%); }
.tbrand h1 { font-size: clamp(60px, 11vh, 108px); }
.tbrand .org { color: #7A5022; text-shadow: none; font-weight: 600; font-size: 13px; }
.tbrand .tag { color: #4A3826; text-shadow: 0 1px 0 rgba(255,250,235,.8); font-size: clamp(16px, 2.5vh, 21px); font-weight: 500; }
.salonBar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.salonBar .rules { flex: 1 1 200px; }
.salonBar .invite { flex: 2 1 320px; }
.salonPanel .thread { max-height: 32vh; }
#ov .pbody section + section { border-top: 1px dashed rgba(107,90,69,.3); margin-top: 12px; }
@media (min-width: 900px) { #ov .panel.narrow:has(.set) { width: min(760px, 96vw); } #ov .panel.narrow:has(.set) .pbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; } }
#portrait { animation: slideIn .35s var(--ease), breathe 5s ease-in-out .4s infinite; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: translateX(-62%) scale(1.008); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-66%); } to { transform: translateX(-62%); } }
#toast { top: auto; bottom: 22%; }
#portrait { --px: -62%; transform: translateX(var(--px)); }
@keyframes breathe { 0%,100% { transform: translateX(var(--px)) scale(1); } 50% { transform: translateX(var(--px)) scale(1.008); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(calc(var(--px) - 4%)); } to { transform: translateX(var(--px)); } }
@media (max-width: 560px) { #portrait { --px: -50%; } }

/* ---- 第 2 輪測試後的修正 ---- */
#toast { background: #FBF1DC; border: 2px solid var(--honey); border-radius: 10px; padding: 12px 22px; max-width: min(520px, 88vw); line-height: 1.6; font-size: calc(16px * var(--fs)); }
@media (max-width: 560px) {
  #card .row { grid-template-columns: 1fr; gap: 2px; }
  .salonPanel .pbody { display: block; overflow: auto; }
  .salonPanel .thread { max-height: none; overflow: visible; margin: 8px 0; }
  .salonPanel .compose { position: sticky; bottom: -4px; background: #F6EBD3; padding-bottom: 6px; }
}
.reflQuote { background: rgba(255,252,243,.9); border-left: 4px solid var(--teal); padding: 10px 14px; border-radius: 4px; font-family: 'Noto Serif TC', serif; white-space: pre-wrap; }
#logBtn { position: absolute; right: -6px; top: -18px; width: 40px; height: 40px; border: 0; padding: 0; background: url(assets/ui/i_journal.webp) center / 100% 100% no-repeat; cursor: pointer; filter: drop-shadow(0 3px 4px rgba(40,25,10,.4)); }
.backlog p { margin: 0 0 10px; line-height: 1.7; }
.backlog b { color: var(--teal); margin-right: 6px; }
.backlog .narr { color: var(--inkSoft); font-style: italic; }

/* 四股線（案件手帳上的收集進度） */
#jStrands { display: flex; gap: 6px; margin-top: 4px; }
#jStrands i { width: 26px; height: 5px; border-radius: 3px; background: rgba(107,90,69,.18); position: relative; overflow: hidden; }
#jStrands i.on { background: repeating-linear-gradient(115deg, var(--c) 0 5px, color-mix(in srgb, var(--c) 70%, white) 5px 8px); box-shadow: 0 0 6px color-mix(in srgb, var(--c) 60%, transparent); }
#card a, .jcard a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.blessing { text-align: center; color: var(--teal); font-size: calc(16px * var(--fs)); margin: 16px 0 4px; font-style: italic; }

/* 沙龍尚未開放 */
.salonLock { text-align: center; }
.salonLock .lockBadge { display: inline-block; font-size: 15px; padding: 4px 14px; margin: 4px 0 10px; }
.salonLock .join.locked, .salonLock button[disabled] { opacity: .5; filter: grayscale(.6); cursor: not-allowed; }
.salonLock input[disabled] { cursor: not-allowed; }
.soonTag { font-size: 11px; opacity: .75; margin-left: 4px; padding: 0 5px; border: 1px solid currentColor; border-radius: 8px; vertical-align: 2px; }
.ctopic.secret { font-style: italic; opacity: .7; }
/* 滑鼠操作 */
#c { cursor: default; }
#c.grab { cursor: grabbing; }
#c.hoverPerson { cursor: pointer; }
body.mouseMode #cross { display: none; }
body.mouseMode #prompt { top: auto; bottom: 120px; cursor: pointer; pointer-events: auto; }

/* =====================================================================
   第四輪：字型、按鈕、入口頁、對話版面（覆蓋上面的舊樣式）
   - 中文用霞鶩文楷（溫暖、像手寫的繪本字），英文用 Century Gothic（沒有安裝時用 Didact Gothic）
   - 按鈕全部改用 CSS 畫，不再拉伸小圖片，滑過去時不會糊、不會變形
   ===================================================================== */
:root { --fUI: 'LXGW WenKai TC', 'Noto Serif TC', serif; --fText: 'LXGW WenKai TC', 'Noto Serif TC', serif; }
html[lang=en] { --fUI: 'Century Gothic', 'Didact Gothic', 'Questrial', sans-serif; --fText: 'EB Garamond', 'Noto Serif TC', serif; }
#title, .tmenu button, #ov .panel h2, #ov .pbody button, #dName, #choices button, #jText, #jTitle, #prompt, #toast, #langPick, #ltext, .vmenu button, #langBtn, .case h3, .tctl { font-family: var(--fUI); }
#dText, #card, .jcard, #ov .lead { font-family: var(--fText); }
#dText { font-size: calc(clamp(18px, 1.55vw, 22px) * var(--fs)); letter-spacing: .02em; }

/* ---- 共用：木頭膠囊按鈕 / 金色滑過 ---- */
.tmenu button, .vmenu button, #ov .pbody button:not(.x), #langBtn {
  background: linear-gradient(180deg, #8C5C33 0%, #6E4423 100%) !important; color: #FFF4DC !important; border: 0 !important; border-radius: 999px !important;
  box-shadow: inset 0 0 0 2px rgba(255,226,160,.42), inset 0 2px 0 rgba(255,255,255,.18), 0 3px 0 #4A2C14, 0 6px 12px rgba(40,22,8,.28) !important;
  text-shadow: 0 1px 1px rgba(40,20,5,.6) !important; filter: none !important; transform: none;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s var(--ease) !important; }
.tmenu button:hover, .tmenu button:focus-visible, .vmenu button:hover, .vmenu button:focus-visible,
#ov .pbody button:not(.x):not([disabled]):hover, #ov .pbody button:not(.x):focus-visible, #langBtn:hover {
  background: linear-gradient(180deg, #FFE7A6 0%, #EDB955 100%) !important; color: #3B2410 !important; text-shadow: 0 1px 0 rgba(255,255,255,.55) !important;
  box-shadow: inset 0 0 0 2px rgba(255,250,230,.9), 0 3px 0 #A9752C, 0 0 0 3px rgba(255,214,120,.35), 0 0 22px rgba(255,205,110,.6) !important; transform: translateY(-1px); outline: none; }
.tmenu button.primary, .vmenu button.primary, #ov .pbody button.primary {
  background: linear-gradient(180deg, #45A39C 0%, #2B726D 100%) !important; color: #FFFDF6 !important;
  box-shadow: inset 0 0 0 2px rgba(220,255,248,.45), inset 0 2px 0 rgba(255,255,255,.2), 0 3px 0 #1D4E4A, 0 6px 12px rgba(20,40,38,.3) !important; }
#ov .pbody button[disabled] { opacity: .45; cursor: not-allowed; }
#ov .pbody .seg button.on { background: linear-gradient(180deg, #FFE7A6 0%, #EDB955 100%) !important; color: #3B2410 !important; text-shadow: none !important; }
#ov .pbody .tabs button { background: none !important; box-shadow: none !important; color: var(--ink) !important; text-shadow: none !important; border-radius: 0 !important; border-bottom: 3px solid transparent !important; }
#ov .pbody .tabs button.on { border-bottom-color: var(--teal) !important; color: var(--teal) !important; }
#ov .pbody .kinds button { background: transparent !important; box-shadow: none !important; color: var(--kc) !important; text-shadow: none !important; border: 1.5px solid var(--kc) !important; }
#ov .pbody .kinds button.on { background: var(--kc) !important; color: #fff !important; }

/* ---- 語言選擇（載入前） ---- */
#langPick { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(ellipse at 35% 25%, #FFF4DA 0%, #F2DDB2 45%, #D9B67E 100%); transition: opacity .5s; }
#langPick.done { opacity: 0; pointer-events: none; }
#langPick .lpWell { width: 110px; filter: drop-shadow(0 8px 12px rgba(80,50,20,.3)); animation: bob 2.4s ease-in-out infinite; }
#langPick .lpQ { margin: 0; color: var(--inkSoft); font-size: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#langPick .lpQ .zh { font-family: 'LXGW WenKai TC', serif; font-size: 22px; color: var(--ink); }
#langPick .lpQ .en { font-family: 'Century Gothic', 'Didact Gothic', sans-serif; letter-spacing: .04em; }
#langPick .lpBtns { display: flex; gap: 16px; }
#langPick button { min-width: 150px; padding: 12px 28px; font-size: 20px; cursor: pointer; border: 0; border-radius: 999px; color: #FFF4DC;
  background: linear-gradient(180deg, #8C5C33, #6E4423); box-shadow: inset 0 0 0 2px rgba(255,226,160,.42), 0 3px 0 #4A2C14, 0 8px 14px rgba(40,22,8,.25); transition: all .18s ease; }
#langPick button.zh { font-family: 'LXGW WenKai TC', serif; } #langPick button.en { font-family: 'Century Gothic', 'Didact Gothic', sans-serif; }
#langPick button.last { box-shadow: inset 0 0 0 2px rgba(255,240,200,.9), 0 3px 0 #4A2C14, 0 8px 14px rgba(40,22,8,.25); }
#langPick button:hover, #langPick button:focus-visible { background: linear-gradient(180deg, #FFE7A6, #EDB955); color: #3B2410; box-shadow: 0 3px 0 #A9752C, 0 0 22px rgba(255,205,110,.65); transform: translateY(-1px); outline: none; }
#loading.wait { opacity: 0; }
#ltext { font-family: var(--fUI); font-size: 17px; }
html[lang=en] #ltext { letter-spacing: .06em; }

/* ---- 入口頁 ---- */
#title { justify-content: center; gap: 1.6vh; padding: 64px 16px 18px; overflow-y: auto; }
.tbrand .tname { margin: 0; font-family: var(--fUI); font-weight: 700; font-size: clamp(38px, 8vh, 86px); line-height: 1.1; color: #FFF8E8; letter-spacing: .1em;
  text-shadow: 0 2px 0 #9B6A2E, 0 4px 0 #7A5022, 0 10px 24px rgba(60,35,10,.55); }
html[lang=en] .tbrand .tname { letter-spacing: .03em; font-size: clamp(32px, 6.6vh, 70px); }
.tbrand .tag { margin: 6px 0 0; font-family: var(--fUI); font-size: clamp(15px, 2.3vh, 20px); color: #FFF3D6; text-shadow: 0 1px 4px rgba(50,30,10,.9); max-width: 92vw; }
.tboard { width: min(380px, 86vw, 46vh); flex: none; }
.tmenu { gap: 1.2vh; }
.tmenu button { height: clamp(36px, 5.4vh, 48px); font-size: calc(clamp(15px, 2.2vh, 19px) * var(--fs)); font-weight: 700; letter-spacing: .06em; }
html[lang=en] .tmenu button { letter-spacing: .02em; font-weight: 400; }
.soonTag { border-color: rgba(255,240,210,.7); }

/* ---- 右上角：語言鈕＋覓井 logo ---- */
#iconBar { gap: 10px; }
#langBtn { height: 38px; min-width: 52px; padding: 0 14px; font-size: 15px; cursor: pointer; }
#mjLogo { display: flex; align-items: center; justify-content: center; height: 42px; padding: 4px 12px; border-radius: 12px;
  background: rgba(255,250,238,.94); box-shadow: inset 0 0 0 2px rgba(201,160,74,.55), 0 4px 10px rgba(40,22,8,.25); transition: transform .18s var(--ease), box-shadow .18s; }
#mjLogo img { height: 32px; width: auto; display: block; }
#mjLogo:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 2px #E9B85A, 0 0 18px rgba(255,205,110,.55); }
body.talking #mjLogo { display: none; }

/* ---- 彈出視窗：黃銅關閉鈕＋捲軸 ---- */
#ov .panel .x { right: -2px; top: -10px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; font-size: 0; color: transparent;
  background: url(assets/ui/i_close.webp) center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 3px 4px rgba(40,22,8,.35)); transition: transform .2s var(--ease), filter .2s; z-index: 2; }
#ov .panel .x:hover, #ov .panel .x:focus-visible { transform: rotate(90deg) scale(1.06); filter: drop-shadow(0 0 10px rgba(255,205,110,.8)) brightness(1.06); outline: none; }
#ov, #ov * { scrollbar-width: thin; scrollbar-color: #B98A45 transparent; }
#ov ::-webkit-scrollbar, #card ::-webkit-scrollbar { width: 9px; }
#ov ::-webkit-scrollbar-track, #card ::-webkit-scrollbar-track { background: rgba(160,120,70,.12); border-radius: 9px; }
#ov ::-webkit-scrollbar-thumb, #card ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #D7AE63, #A9752F); border-radius: 9px; border: 2px solid rgba(251,241,220,.9); }
#ov ::-webkit-scrollbar-button, #card ::-webkit-scrollbar-button { display: none; height: 0; }

/* ---- 對話：人物站在右前方，文字框在左，選項在文字框上方（不遮字） ---- */
#portrait { left: auto; right: 2vw; transform: none; height: min(86vh, 900px); max-width: 46vw; z-index: 3; animation: slideInR .35s var(--ease); }
@keyframes slideInR { from { opacity: 0; transform: translateX(28px); } }
#dBox { left: 3vw; transform: none; width: min(980px, calc(100vw - 60vh - 6vw)); min-width: min(560px, 94vw); z-index: 2; animation: riseL .28s var(--ease); }
@keyframes riseL { from { opacity: 0; transform: translateY(16px); } }
#card { z-index: 5; }
#choices { left: 6px; transform: none; width: min(600px, 100%); align-items: stretch; gap: 10px; margin-bottom: 30px; }
#choices button { min-height: 0; padding: 11px 24px 11px 54px; border-radius: 999px; color: #FFF4DC; font-family: var(--fUI); font-size: calc(17px * var(--fs)); line-height: 1.45;
  background: rgba(52,34,18,.8); box-shadow: inset 0 0 0 1.5px rgba(255,228,170,.45), 0 4px 12px rgba(20,10,0,.3); backdrop-filter: blur(3px); filter: none;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s var(--ease); }
#choices button:hover, #choices button:focus-visible { background: linear-gradient(180deg, #FFE7A6, #EDB955); background-image: linear-gradient(180deg, #FFE7A6, #EDB955); color: #3B2410;
  box-shadow: inset 0 0 0 1.5px rgba(255,250,230,.95), 0 0 0 3px rgba(255,214,120,.3), 0 0 20px rgba(255,205,110,.55); transform: translateX(4px); }
#choices button .k { left: 14px; background: #2F7F7A; box-shadow: 0 0 0 2px rgba(255,240,210,.6); }
#choices button.cold .k { background: #7D7468; }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  #portrait { right: 0; height: 46vh; max-width: 74vw; }
  #dBox { left: 2vw; width: 96vw; min-width: 0; }
  #choices { width: 100%; left: 0; }
  #mjLogo { height: 36px; padding: 3px 8px; } #mjLogo img { height: 26px; }
}
.tbrand .tag { display: inline-block; margin-top: 10px; padding: 6px 20px; border-radius: 999px; background: rgba(62,38,16,.55); backdrop-filter: blur(3px);
  box-shadow: inset 0 0 0 1px rgba(255,226,160,.35); color: #FFF6E2; text-shadow: 0 1px 2px rgba(30,15,0,.7); }
.tctl { display: inline-block; padding: 4px 14px; border-radius: 999px; background: rgba(62,38,16,.45); }
.tbrand .tname { font-size: min(clamp(38px, 8vh, 86px), 15vw); }
html[lang=en] .tbrand .tname { font-size: min(clamp(32px, 6.6vh, 70px), 9vw); }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  /* 手機：人物站在文字框上方，不遮字 */
  #portrait { right: 50%; transform: translateX(50%); bottom: 190px; height: min(42vh, calc(100vh - 230px)); max-width: 92vw; z-index: 1; animation: fadeOnly .35s ease; }
  @keyframes fadeOnly { from { opacity: 0; } }
  #dBox { z-index: 2; }
}
@media (max-width: 760px) { #journal { top: 70px; max-width: calc(100vw - 28px); } }
/* 覓井 logo：中文版用「覓井文化」圓印，英文版用 MACHIEN */
#mjLogo { padding: 0; height: 46px; background: none; box-shadow: none; border-radius: 0; }
#mjLogo img { display: none; }
html[lang^=zh] #mjLogo .lz { display: block; width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,236,190,.85), 0 4px 10px rgba(40,22,8,.35); }
html[lang=en] #mjLogo .le { display: block; height: 30px; width: auto; }
html[lang=en] #mjLogo { padding: 6px 14px; border-radius: 999px; background: linear-gradient(180deg, #4A3220, #2E1F14); box-shadow: inset 0 0 0 1.5px rgba(255,226,160,.45), 0 4px 10px rgba(40,22,8,.35); }
#mjLogo:hover { box-shadow: none; } html[lang^=zh] #mjLogo:hover .lz { box-shadow: 0 0 0 2px #FFE3A0, 0 0 16px rgba(255,205,110,.7); }
html[lang=en] #mjLogo:hover { box-shadow: inset 0 0 0 1.5px #FFE3A0, 0 0 16px rgba(255,205,110,.6); }
@media (max-width: 760px) { #mjLogo { height: 40px; } html[lang^=zh] #mjLogo .lz { width: 40px; height: 40px; } html[lang=en] #mjLogo .le { height: 24px; } }
#leaveBtn { position: absolute; right: 60px; top: -14px; transform: translateY(-50%); padding: 4px 14px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--fUI); font-size: calc(13px * var(--fs));
  color: #FFF4DC; background: rgba(52,34,18,.78); box-shadow: inset 0 0 0 1.5px rgba(255,228,170,.45); transition: background .16s, color .16s; }
#leaveBtn:hover, #leaveBtn:focus-visible { background: linear-gradient(180deg, #FFE7A6, #EDB955); color: #3B2410; outline: none; }

/* ---- 立繪：兩層圖片交替淡入（覆蓋前面所有 #portrait 規則） ---- */
#dlg .pimg { --px: 0%; position: absolute; left: auto !important; right: 2vw; bottom: 0; height: min(86vh, 900px); max-width: 46vw; width: auto;
  object-fit: contain; object-position: bottom right; pointer-events: none; z-index: 3; opacity: 0;
  transform: translateX(var(--px)); transform-origin: 50% 100%; transition: opacity .22s ease;
  filter: drop-shadow(0 14px 22px rgba(40,25,10,.38)); animation: pBreathe 5s ease-in-out infinite !important; }
#dlg .pimg.on { opacity: 1; }
#dlg .pimg.enter.on { animation: pIn .35s var(--ease), pBreathe 5s ease-in-out .4s infinite !important; }
@keyframes pBreathe { 0%, 100% { transform: translateX(var(--px)) scale(1); } 50% { transform: translateX(var(--px)) scale(1.008); } }
@keyframes pIn { from { opacity: 0; transform: translateX(calc(var(--px) + 28px)); } }
body.calm #dlg .pimg { animation: none !important; }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  #dlg .pimg { --px: 50%; right: 50%; bottom: 190px; height: min(42vh, calc(100vh - 230px)); max-width: 92vw; z-index: 1; object-position: bottom center; }
  @keyframes pIn { from { opacity: 0; } }
}
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) { #leaveBtn { top: -52px; right: 4px; transform: none; } }
/* 卡片內容可以分行（清單） */
#card .row p, .jcard .row p, .jcard p { white-space: pre-line; }
/* ---- 游標提示 ---- */
#hoverTip { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none; padding: 5px 14px; border-radius: 999px; font-family: var(--fUI); font-size: calc(14px * var(--fs));
  color: #FFF4DC; background: rgba(52,34,18,.86); box-shadow: inset 0 0 0 1.5px rgba(255,228,170,.5), 0 4px 10px rgba(20,10,0,.3); opacity: 0; transition: opacity .12s; white-space: nowrap; }
#hoverTip.on { opacity: 1; }
body:not(.mouseMode) #hoverTip { display: none; }
/* ---- 拿到一股線：徽章從中央浮出，飛向手帳 ---- */
#strandFx { position: fixed; left: 50%; top: 42%; z-index: 46; width: 120px; height: 120px; margin: -60px 0 0 -60px; pointer-events: none; opacity: 0; }
#strandFx i { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.75), rgba(255,255,255,0) 40%), repeating-linear-gradient(45deg, var(--c) 0 9px, color-mix(in srgb, var(--c) 70%, #000) 9px 14px);
  box-shadow: 0 0 0 5px #F4D27A, 0 0 0 9px rgba(120,80,30,.55), 0 0 40px 10px color-mix(in srgb, var(--c) 60%, #FFE7A6); }
#strandFx.go { animation: strandFly 2.1s cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes strandFly {
  0% { opacity: 0; transform: scale(.2) rotate(-40deg); }
  18% { opacity: 1; transform: scale(1.12) rotate(8deg); }
  30% { transform: scale(1) rotate(0deg); }
  62% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50vw + 120px), calc(-42vh + 60px)) scale(.18); }
}
body.calm #strandFx.go { animation-duration: 1.2s; }
#strandFx b { position: absolute; left: 50%; top: 100%; margin-top: 16px; transform: translateX(-50%); white-space: nowrap; padding: 6px 18px; border-radius: 999px;
  font-family: var(--fUI); font-weight: 700; font-size: 17px; color: #3B2410; background: linear-gradient(180deg, #FFE7A6, #EDB955); box-shadow: 0 4px 12px rgba(40,20,0,.35); }

/* ---- 第十二輪：文字框永遠不會被立繪蓋住（立繪是接近正方形的圖，寬度約等於高度） ---- */
@media (min-width: 761px) and (min-aspect-ratio: 4/5), (min-width: 1101px) {
  #dlg .pimg { --pmax: min(46vw, calc(100vw - 600px - 5vw)); max-width: var(--pmax); height: min(84vh, 900px, var(--pmax)); }
  #dBox { min-width: 0; width: min(980px, calc(100vw - min(84vh, 900px, 46vw, 100vw - 600px - 5vw) - 5vw - 28px)); }
}

/* ---- 第十二輪（續）：選項很多時改成緊湊排版，放不下就在選項區裡捲動 ---- */
#choices.many { gap: 6px; }
#choices.many button { padding-top: 7px; padding-bottom: 7px; font-size: calc(15.5px * var(--fs)); line-height: 1.35; }
#choices { scrollbar-width: thin; scrollbar-color: rgba(255,228,170,.6) transparent; overscroll-behavior: contain; }
#choices button { flex-shrink: 0; }
/* 矮螢幕（手機橫拿、小筆電）：結尾畫面的徽章和邊框縮小，反思題不用捲就看得到 */
@media (max-height: 520px) {
  .medal { width: 110px; margin: -10px auto 0; }
  #ov .panel, #ov .panel.parchment { border-width: 26px 20px 22px 22px; border-image-width: 26px 20px 22px 22px; max-height: 96vh; }
  #ov .panel h2 { font-size: calc(19px * var(--fs)); }
  #ov .pbody { padding-top: 6px; }
}
/* 手機：「先離開」放回木框右上角，不會壓到選項；選項和木框保持距離 */
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  #leaveBtn { top: -14px !important; right: 56px !important; transform: translateY(-50%) !important; }
  #choices { margin-bottom: 40px; }
}
/* 矮螢幕（手機橫拿）：選項多時兩欄並排，選項和木框保持距離 */
@media (max-height: 520px) {
  #choices { margin-bottom: 40px; }
  #choices.many { display: grid; grid-template-columns: 1fr 1fr; width: min(820px, calc(97vw - 80px)); gap: 6px; }
  #choices.many button { font-size: calc(14px * var(--fs)); padding: 6px 12px 6px 46px; }
}
@media (max-height: 520px) {
  #choices.many button { font-size: calc(13px * var(--fs)); line-height: 1.25; padding: 5px 10px 5px 42px; }
  #choices.many button .k { width: 22px; height: 22px; font-size: 12px; left: 10px; }
}
/* 選項放不下時，底部漸層提示「往下還有」 */
#choices.scrolly { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); }
/* 矮螢幕對話中：右上角的按鈕先收起來，讓選項可以用到整個高度 */
@media (max-height: 520px) { body.talking #langBtn, body.talking #mjLogo, body.talking #hudR, body.talking .tctl { display: none !important; } }

/* ---- 第十三輪：立繪放在文字框左邊（角色大多是 3/4 側身朝右，這樣會看向文字框，也就是看向玩家） ---- */
@media (min-width: 761px) and (min-aspect-ratio: 4/5), (min-width: 1101px) {
  #dlg .pimg { left: var(--pl, 1.5vw) !important; right: auto !important; object-position: bottom left; }
  #dlg .pimg.enter.on { animation: pInL .35s var(--ease), pBreathe 5s ease-in-out .4s infinite !important; }
  @keyframes pInL { from { opacity: 0; transform: translateX(calc(var(--px) - 28px)); } }
  #dlg #dBox { right: 3vw; }
}

/* ---- 第十三輪：關於這趟旅程：中文思源宋體、英文 Century Gothic；隱私等備註縮小 ---- */
.aboutTxt, .aboutTxt h3, .aboutTxt p { font-family: 'Century Gothic', 'Didact Gothic', 'Source Han Serif TC', 'Source Han Serif', 'Noto Serif TC', serif !important; }
.aboutTxt h3 { font-weight: 600; letter-spacing: .06em; }
.aboutTxt p { line-height: 1.85; }
.aboutTxt p.note { font-size: .78em; line-height: 1.6; opacity: .78; margin-top: .6em; }

/* ---- 第十三輪：研究洞見的破關公告板＋徽章 ---- */
#award { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 3vh 3vw;
  background: radial-gradient(ellipse at center, rgba(40,24,8,.55), rgba(20,10,0,.78)); }
#award.on { display: flex; animation: awFade .35s ease; }
#award.out { animation: awOut .5s ease forwards; }
@keyframes awFade { from { opacity: 0; } }
@keyframes awOut { to { background: rgba(0,0,0,0); } }
#award.out .awPanel { animation: awPanelOut .45s ease forwards; }
@keyframes awPanelOut { to { opacity: 0; transform: translateY(18px) scale(.97); } }
.awPanel { position: relative; width: min(640px, 94vw); max-height: 94vh; display: flex; flex-direction: column; align-items: center; overflow: hidden;
  padding: 26px 30px 22px; border-radius: 18px; color: #3B2410; text-align: center;
  background: linear-gradient(180deg, #FFF8E6, #F6E6C2); box-shadow: 0 0 0 3px #C9973F, 0 0 0 7px rgba(255,236,190,.55), 0 24px 60px rgba(0,0,0,.5);
  animation: awPop .55s cubic-bezier(.2,1.4,.4,1); }
@keyframes awPop { from { opacity: 0; transform: scale(.82) translateY(20px); } }
.awRays { position: absolute; left: 50%; top: 150px; width: 520px; height: 520px; margin: -260px 0 0 -260px; pointer-events: none; opacity: .35; z-index: 0;
  background: repeating-conic-gradient(from 0deg, rgba(233,183,80,.55) 0 8deg, transparent 8deg 20deg); border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%); mask-image: radial-gradient(circle, #000 20%, transparent 68%); animation: awSpin 24s linear infinite; }
@keyframes awSpin { to { transform: rotate(360deg); } }
.awPanel > *:not(.awRays) { position: relative; z-index: 1; }
.awStep { margin: 0; font-family: var(--fUI); font-size: 13px; letter-spacing: .14em; color: #8A5A2B; text-transform: uppercase; }
.awPanel h2 { margin: 4px 0 8px; font-family: var(--fUI); font-size: clamp(20px, 3.2vh, 27px); line-height: 1.35; color: #5A3412; }
.awBadge { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 2px; }
.awBadge svg { width: clamp(92px, 16vh, 132px); height: auto; filter: drop-shadow(0 6px 10px rgba(90,50,10,.4)); animation: awBadgeIn .9s cubic-bezier(.2,1.5,.35,1) .15s backwards, awShine 2.6s ease-in-out 1.1s infinite; }
@keyframes awBadgeIn { from { opacity: 0; transform: scale(.2) rotate(-200deg); } }
@keyframes awShine { 0%, 100% { filter: drop-shadow(0 6px 10px rgba(90,50,10,.4)); } 50% { filter: drop-shadow(0 0 18px rgba(255,214,120,.95)); } }
.awBadge span { padding: 3px 16px; border-radius: 999px; font-family: var(--fUI); font-weight: 700; font-size: 15px; color: #FFF6E2; background: linear-gradient(180deg, #2F7F7A, #1F5E5A); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.awNew { margin: 6px 0 2px; font-family: var(--fUI); font-size: 14px; color: #8A5A2B; }
.awPanel h3 { margin: 6px 0 8px; font-family: var(--fText); font-size: 18px; color: #3B2410; }
.awBody { width: 100%; overflow-y: auto; text-align: left; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(160,110,40,.25);
  font-family: var(--fText); font-size: calc(15px * var(--fs)); line-height: 1.6; flex: 1 1 auto; min-height: 80px; }
.awBody .row { display: grid; grid-template-columns: 7.6em 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(160,110,40,.3); }
.awBody .row:last-child { border-bottom: 0; }
.awBody .row span { font-family: var(--fUI); font-weight: 700; color: #2F7F7A; }
.awBody .row p { margin: 0; white-space: pre-line; }
.awGo { margin-top: 14px; padding: 11px 34px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--fUI); font-weight: 700; font-size: 17px; color: #3B2410;
  background: linear-gradient(180deg, #FFE7A6, #EDB955); box-shadow: 0 4px 12px rgba(80,40,0,.35), inset 0 0 0 2px rgba(255,255,255,.5); }
.awGo:hover, .awGo:focus-visible { outline: none; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(80,40,0,.4), 0 0 0 3px #2F7F7A; }
.awFly { position: fixed; z-index: 61; pointer-events: none; }
.awFly svg { width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgba(255,214,120,.9)); }
#jBtn.gotBadge { animation: jGot 1.2s ease; }
@keyframes jGot { 0% { transform: scale(1); } 25% { transform: scale(1.35); filter: drop-shadow(0 0 14px #FFD36B); } 60% { transform: scale(.95); } 100% { transform: scale(1); } }
@media (max-width: 560px), (max-height: 520px) {
  .awPanel { padding: 16px 16px 14px; }
  .awBody .row { grid-template-columns: 1fr; gap: 2px; }
  .awRays { top: 110px; }
}
@media (max-height: 520px) { .awBadge svg { width: 70px; } .awPanel h2 { font-size: 18px; } .awNew { display: none; } }
body.calm .awRays, body.calm .awBadge svg { animation: none !important; }
/* 旁白時，對話對象的立繪留著但稍微變暗 */
#dlg .pimg { transition: opacity .22s ease, filter .3s ease; }
#dlg .pimg.dim { filter: brightness(.68) saturate(.8) drop-shadow(0 14px 22px rgba(40,25,10,.38)); }
/* 參考文獻裡的長網址可以換行 */
#card .row p, .jcard .row p, .awBody .row p { overflow-wrap: anywhere; }
/* ---- 章末反思：矮螢幕（手機橫拿、小筆電）時，存檔按鈕一直看得到 ---- */
#ov .panel.chEnd .row-btns { position: sticky; bottom: -2px; z-index: 2; padding: 8px 0 6px; background: linear-gradient(180deg, rgba(246,236,214,0), rgba(246,236,214,.96) 30%); }
@media (max-height: 700px) {
  #ov .panel.chEnd .medal { display: none; }
  #ov .panel.chEnd textarea { min-height: 0; height: 4.2em; }
  #ov .panel.chEnd section { margin-top: 6px; }
}
#lnote { margin-top: 6px; font-family: var(--fUI); font-size: 13px; color: var(--inkSoft, #7a6a55); opacity: .8; text-align: center; }

/* ---- 延伸練習：井外的繩子（A）、喝另一口井的水（C） ---- */
.xsec { margin: 4px 0 18px; }
.xsec h3 { margin: 4px 0 2px; color: #5A3412; }
.xgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.xcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 12px 10px; border: 0; border-radius: 12px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, #FFFBF1, #F3E5C6); box-shadow: inset 4px 0 0 var(--xc, #8A5A2B), 0 2px 6px rgba(80,50,10,.18); font-family: var(--fUI); color: #3B2410; transition: transform .15s; }
.xcard:hover, .xcard:focus-visible { transform: translateY(-2px); outline: none; box-shadow: inset 4px 0 0 var(--xc, #8A5A2B), 0 0 0 2px #2F7F7A, 0 4px 10px rgba(80,50,10,.25); }
.xcard small { font-size: 12px; color: #8A5A2B; letter-spacing: .06em; }
.xcard b { font-size: 16px; line-height: 1.3; }
.xcard i { font-style: normal; font-size: 12px; color: #2F7F7A; margin-top: 2px; }
.xcard.xp { padding-left: 64px; min-height: 76px; justify-content: center; box-shadow: 0 2px 6px rgba(80,50,10,.18); }
.xcard.xp img { position: absolute; left: 6px; bottom: 0; width: 54px; height: 64px; object-fit: cover; object-position: top; border-radius: 0 0 0 10px; }
.aPlay .pbody { font-family: var(--fText); }
.aScene p { margin: 0 0 10px; line-height: 1.85; font-size: calc(16px * var(--fs)); }
.aScene p:last-child { font-weight: 600; color: #5A3412; }
.aOpts { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.aOpts button { text-align: left; padding: 11px 16px; border: 0; border-radius: 12px; cursor: pointer; font-family: var(--fUI); font-size: calc(15.5px * var(--fs)); line-height: 1.5; color: #FFF4DC;
  background: linear-gradient(180deg, #5B3B1E, #45290F); box-shadow: inset 0 0 0 1.5px rgba(255,228,170,.45); }
.aOpts button:hover, .aOpts button:focus-visible { background: linear-gradient(180deg, #FFE7A6, #EDB955); color: #3B2410; outline: none; }
.aMirror { margin: 8px 0; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(160,110,40,.25); animation: awFade .4s ease; }
.aYou { font-family: var(--fUI); font-size: 14px; color: #8A5A2B; margin-bottom: 6px; }
.aYou::before { content: '→ '; }
.aMirror p { margin: 0; line-height: 1.8; }
.aStrands { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aStrands li { padding: 10px 12px 10px 18px; border-radius: 10px; background: rgba(255,255,255,.65); box-shadow: inset 6px 0 0 var(--sc); }
.aStrands li.new { animation: strandIn .5s cubic-bezier(.2,1.2,.4,1); }
@keyframes strandIn { from { opacity: 0; transform: translateX(-24px); } }
.aStrands b { font-family: var(--fUI); color: #3B2410; }
.aStrands p { margin: 2px 0 0; line-height: 1.7; }
.aRopeSvg { display: block; width: 100%; height: 64px; margin: 4px 0 8px; animation: awFade .8s ease; }
.aRope { font-size: calc(17px * var(--fs)); line-height: 1.8; color: #5A3412; text-align: center; margin: 4px 6px 12px; }
.aRes { padding: 10px 14px; border-radius: 10px; background: rgba(47,127,122,.08); box-shadow: inset 0 0 0 1px rgba(47,127,122,.25); }
.aRes h5 { margin: 0 0 4px; font-family: var(--fUI); color: #2F7F7A; font-size: 14px; }
.aRes p { margin: 0; line-height: 1.75; font-size: calc(14.5px * var(--fs)); }
.aQ { line-height: 1.8; margin: 4px 0 8px; }
.aPlay textarea { width: 100%; box-sizing: border-box; }
.xFace { display: block; height: 120px; margin: 0 auto 6px; filter: drop-shadow(0 4px 8px rgba(60,30,0,.25)); }
@media (max-height: 640px) { .xFace { height: 80px; } }
/* 延伸練習卡片：蓋過面板按鈕的共用樣式 */
#ov .pbody button.xcard:not(.x) { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 0; width: auto; margin: 0; padding: 12px 12px 10px; border-radius: 12px; text-align: left; color: #3B2410; white-space: normal;
  background: linear-gradient(180deg, #FFFBF1, #F3E5C6); background-image: linear-gradient(180deg, #FFFBF1, #F3E5C6); border: 0; box-shadow: inset 4px 0 0 var(--xc, #8A5A2B), 0 2px 6px rgba(80,50,10,.18); font-size: 15px; }
#ov .pbody button.xcard:not(.x):not([disabled]):hover, #ov .pbody button.xcard:not(.x):focus-visible { background: linear-gradient(180deg, #FFFDF6, #F7EBCF); color: #3B2410; box-shadow: inset 4px 0 0 var(--xc, #8A5A2B), 0 0 0 2px #2F7F7A, 0 4px 10px rgba(80,50,10,.25); }
#ov .pbody button.xcard.xp:not(.x) { padding-left: 66px; min-height: 78px; justify-content: center; box-shadow: inset 0 0 0 1px rgba(160,110,40,.25), 0 2px 6px rgba(80,50,10,.18); }
#ov .pbody .xcard small, #ov .pbody .xcard b, #ov .pbody .xcard i { display: block; }
#ov .pbody button.xcard:not(.x) { background: linear-gradient(180deg, #FFFBF1, #F3E5C6) !important; color: #3B2410 !important; border-radius: 12px !important; text-shadow: none !important;
  box-shadow: inset 4px 0 0 var(--xc, #8A5A2B), 0 2px 6px rgba(80,50,10,.18) !important; }
#ov .pbody button.xcard.xp:not(.x) { box-shadow: inset 0 0 0 1px rgba(160,110,40,.28), 0 2px 6px rgba(80,50,10,.18) !important; }
#ov .pbody button.xcard:not(.x):not([disabled]):hover, #ov .pbody button.xcard:not(.x):focus-visible { background: linear-gradient(180deg, #FFFDF6, #F7EBCF) !important; color: #3B2410 !important;
  box-shadow: inset 4px 0 0 var(--xc, #8A5A2B), 0 0 0 2px #2F7F7A, 0 4px 10px rgba(80,50,10,.25) !important; }