/* =====================================================================
   第十四輪：遊戲感 UI（參考休閒手遊介面：粗描邊、立體按鈕、緞帶標題）
   配色沿用繪本畫風：深木棕描邊、暖金、翡翠綠、莓紅；字體為遊戲感圓體
   這個檔案放在 theme.css 之後，覆蓋原本的按鈕、標題、分頁與卡片樣式
   ===================================================================== */
:root {
  --fGame: 'Lilita One', 'Chiron GoRound TC', 'LXGW WenKai TC', 'Noto Serif TC', sans-serif;
  --line: #3A2210;          /* 描邊：深木棕 */
  --gold1: #FFE58F; --gold2: #F4B840; --gold3: #C9821E;
  --green1: #8BE27B; --green2: #3FB45A; --green3: #237A3A;
  --wood1: #A8743F; --wood2: #7A4A22; --wood3: #4E2C12;
  --red1: #FF8A6E; --red2: #E2462F; --red3: #9E2416;
  --slate1: #5E5A7A; --slate2: #3F3B58;
}
/* 遊戲字體用在：按鈕、標題、名牌、分頁、提示 */
 #ov[data-ui=game] .pbody button, #ov[data-ui=game] .panel h2, .awGo, .awStep, .awPanel h2, .awBadge span,
#ov[data-ui=game] .pbody .tabs button, .xcard b { font-family: var(--fGame) !important; letter-spacing: .02em; }

/* 描邊字（白字＋深棕描邊＋下方陰影） */
#ov[data-ui=game] .pbody button:not(.x):not(.xcard) {
  text-shadow: -1.5px -1.5px 0 var(--line), 1.5px -1.5px 0 var(--line), -1.5px 1.5px 0 var(--line), 1.5px 1.5px 0 var(--line), 0 3px 0 var(--line) !important;
}

/* ---------- 按鈕：立體、粗描邊、上方亮光、下方厚度 ---------- */
#ov[data-ui=game] .pbody button:not(.x):not(.xcard) {
  position: relative; color: #FFFDF5 !important; border: 3px solid var(--line) !important; border-radius: 16px !important;
  background: linear-gradient(180deg, var(--wood1) 0%, var(--wood2) 100%) !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.22), 0 4px 0 var(--line), 0 8px 12px rgba(30,15,5,.3) !important;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease !important; font-weight: 400;
}
#ov[data-ui=game] .pbody button:not(.x):not(.xcard):not([disabled]):hover,
#ov[data-ui=game] .pbody button:not(.x):not(.xcard):focus-visible {
  filter: brightness(1.1) saturate(1.05); transform: translateY(-2px); outline: none !important;
  background: linear-gradient(180deg, var(--wood1) 0%, var(--wood2) 100%) !important; color: #FFFDF5 !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.22), 0 6px 0 var(--line), 0 0 0 3px rgba(255,214,120,.55), 0 10px 16px rgba(30,15,5,.3) !important;
}
#ov[data-ui=game] .pbody button:not(.x):not(.xcard):active {
  transform: translateY(3px) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.2), 0 1px 0 var(--line) !important;
}
/* 主要按鈕：翡翠綠（像「出發」） */
#ov[data-ui=game] .pbody button.primary:not(.x) {
  background: linear-gradient(180deg, var(--green1) 0%, var(--green2) 55%, #2E9A4A 100%) !important;
}
#ov[data-ui=game] .pbody button.primary:not(.x):hover,
#ov[data-ui=game] .pbody button.primary:not(.x):focus-visible {
  background: linear-gradient(180deg, #A2EE90 0%, #4CC466 55%, #33A852 100%) !important;
}
/* 選中的分段按鈕：暖金 */
#ov[data-ui=game] .pbody .seg button.on {
  background: linear-gradient(180deg, var(--gold1) 0%, var(--gold2) 60%, #E8A12C 100%) !important;
}
#ov[data-ui=game] .pbody button[disabled] { filter: grayscale(.6) brightness(.9); opacity: .7; }
/* 小標籤「未開放」 */
.soonTag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; vertical-align: 2px;
  background: var(--slate2); color: #FFF4DC; border: 2px solid var(--line); text-shadow: none !important; }

/* ---------- 面板標題：金色緞帶 ---------- */
#ov[data-ui=game] .panel header { border-bottom: 0 !important; padding-bottom: 14px !important; }
#ov[data-ui=game] .panel h2 {
  position: relative; display: inline-block; margin: -4px auto 0; padding: 8px 34px 10px; z-index: 1;
  color: #FFFDF5 !important; font-weight: 400; letter-spacing: .06em;
  background: linear-gradient(180deg, var(--gold1) 0%, var(--gold2) 60%, #E39A26 100%);
  border: 3px solid var(--line); border-radius: 10px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.15), 0 4px 0 var(--line);
  text-shadow: -1.5px -1.5px 0 var(--line), 1.5px -1.5px 0 var(--line), -1.5px 1.5px 0 var(--line), 1.5px 1.5px 0 var(--line), 0 3px 0 var(--line);
}
/* 緞帶兩端的折角 */
#ov[data-ui=game] .panel h2::before, #ov[data-ui=game] .panel h2::after {
  content: ''; position: absolute; top: 9px; width: 26px; height: calc(100% - 4px); z-index: -1;
  background: linear-gradient(180deg, #E39A26, var(--gold3)); border: 3px solid var(--line);
}
#ov[data-ui=game] .panel h2::before { left: -20px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 38% 50%); border-right: 0; }
#ov[data-ui=game] .panel h2::after { right: -20px; clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 100%, 0 100%); border-left: 0; }
#ov[data-ui=game] .panel header { text-align: center; }

/* ---------- 關閉鈕：莓紅方塊＋白色 X ---------- */
#ov[data-ui=game] .panel .x {
  width: 42px !important; height: 42px !important; border-radius: 12px !important; right: 2px !important; top: -12px !important;
  background: linear-gradient(180deg, var(--red1) 0%, var(--red2) 60%, #C93622 100%) !important; border: 3px solid var(--line) !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.2), 0 4px 0 var(--line) !important; filter: none !important;
  font-size: 0 !important; color: transparent !important;
}
#ov[data-ui=game] .panel .x::before, #ov[data-ui=game] .panel .x::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 5px; border-radius: 3px; background: #FFFDF5;
  box-shadow: 0 0 0 2px var(--line); transform: translate(-50%, -50%) rotate(45deg);
}
#ov[data-ui=game] .panel .x::after { transform: translate(-50%, -50%) rotate(-45deg); }
#ov[data-ui=game] .panel .x:hover, #ov[data-ui=game] .panel .x:focus-visible { transform: scale(1.08) !important; filter: brightness(1.08) !important; }

/* ---------- 分頁：立體頁籤 ---------- */
#ov[data-ui=game] .pbody .tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 3px solid var(--line); padding: 0 4px; margin-bottom: 12px; }
#ov[data-ui=game] .pbody .tabs button {
  border: 3px solid var(--line) !important; border-bottom: 0 !important; border-radius: 12px 12px 0 0 !important;
  background: linear-gradient(180deg, #E9D3A6, #CDAE78) !important; color: var(--wood3) !important; text-shadow: none !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5) !important; padding: 7px 14px 6px !important; margin-bottom: -3px; min-height: 0 !important;
}
#ov[data-ui=game] .pbody .tabs button:hover { transform: none !important; filter: brightness(1.05); color: var(--wood3) !important; }
#ov[data-ui=game] .pbody .tabs button.on {
  background: linear-gradient(180deg, var(--gold1), var(--gold2)) !important; color: #FFFDF5 !important; padding-bottom: 9px !important;
  text-shadow: -1px -1px 0 var(--line), 1px -1px 0 var(--line), -1px 1px 0 var(--line), 1px 1px 0 var(--line), 0 2px 0 var(--line) !important;
}

/* ---------- 卡片：延伸練習、案件、洞見卡 ---------- */
#ov[data-ui=game] .pbody button.xcard:not(.x) { border: 3px solid var(--line) !important; border-radius: 14px !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.7), inset 6px 0 0 var(--xc, #8A5A2B), 0 4px 0 var(--line), 0 8px 12px rgba(40,20,5,.18) !important; }
#ov[data-ui=game] .pbody button.xcard.xp:not(.x) { box-shadow: inset 0 3px 0 rgba(255,255,255,.7), 0 4px 0 var(--line), 0 8px 12px rgba(40,20,5,.18) !important; }
#ov[data-ui=game] .pbody button.xcard:not(.x):not([disabled]):hover, #ov[data-ui=game] .pbody button.xcard:not(.x):focus-visible { transform: translateY(-2px);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.7), inset 6px 0 0 var(--xc, #8A5A2B), 0 6px 0 var(--line), 0 0 0 3px rgba(255,214,120,.6), 0 10px 14px rgba(40,20,5,.2) !important; }
.xcard b { font-weight: 400 !important; font-size: 17px !important; color: var(--wood3); }
.xcard i { display: inline-block !important; margin-top: 4px !important; padding: 1px 10px; border-radius: 999px; background: var(--green2); color: #fff !important; border: 2px solid var(--line); font-family: var(--fGame); font-size: 12px !important; }
.jcard { border: 3px solid var(--line) !important; border-radius: 14px !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.6), 0 4px 0 var(--line) !important; overflow: hidden; }
.jcard > summary { font-family: var(--fGame) !important; background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: #FFFDF5;
  text-shadow: -1px -1px 0 var(--line), 1px -1px 0 var(--line), -1px 1px 0 var(--line), 1px 1px 0 var(--line), 0 2px 0 var(--line); padding: 8px 12px; border-bottom: 3px solid var(--line); }
.case { border: 3px solid var(--line) !important; border-radius: 16px !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.6), 0 4px 0 var(--line), 0 8px 14px rgba(40,20,5,.2) !important; }

/* ---------- 研究徽章公告板：和遊戲其他地方一樣的溫暖木色質感（不用粗黑框、不用描邊字，避免疊影）---------- */
.awPanel { border: 0 !important; border-radius: 20px !important;
  box-shadow: 0 0 0 3px #C9973F, 0 0 0 7px rgba(255,236,190,.55), inset 0 2px 0 rgba(255,255,255,.7), 0 24px 60px rgba(0,0,0,.5) !important; }
.awStep { display: inline-block; padding: 3px 14px; border-radius: 999px; background: linear-gradient(180deg, #8C5C33, #6E4423); color: #FFF4DC !important;
  box-shadow: inset 0 0 0 1.5px rgba(255,226,160,.42); letter-spacing: .1em !important; text-shadow: none !important; }
.awPanel h2 { color: #5A3412 !important; font-weight: 400 !important; text-shadow: 0 1px 0 rgba(255,255,255,.7) !important; }
.awBadge span { border: 0 !important; font-weight: 400 !important; text-shadow: none !important; color: #FFFDF6 !important;
  background: linear-gradient(180deg, #45A39C 0%, #2B726D 100%) !important;
  box-shadow: inset 0 0 0 1.5px rgba(220,255,248,.45), 0 2px 0 #1D4E4A, 0 4px 8px rgba(20,40,38,.25) !important; }
.awBody { border: 0 !important; border-radius: 12px !important; background: rgba(255,255,255,.6) !important;
  box-shadow: inset 0 0 0 1px rgba(160,110,40,.3), inset 0 2px 0 rgba(255,255,255,.7) !important; }
/* 「收進寶庫」：和「踏上旅程」「回到旅程」一樣的青綠色膠囊鈕；滑過時變成暖金色 */
.awGo { border: 0 !important; border-radius: 999px !important; padding: 12px 40px !important; font-size: 18px !important; font-weight: 400 !important; letter-spacing: .08em;
  background: linear-gradient(180deg, #45A39C 0%, #2B726D 100%) !important; color: #FFFDF6 !important; text-shadow: 0 1px 1px rgba(10,40,38,.5) !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;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important; }
@media (hover: hover) { .awGo: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; filter: none; } }
.awGo:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(220,255,248,.45), 0 3px 0 #1D4E4A, 0 0 0 3px rgba(255,214,120,.55), 0 6px 12px rgba(20,40,38,.3) !important; }
.awGo:active { transform: translateY(2px) !important; box-shadow: inset 0 0 0 2px rgba(220,255,248,.45), 0 1px 0 #1D4E4A !important; }

/* ---------- 井外的繩子：選項、繩子、研究框 ---------- */
.aOpts button { border: 3px solid var(--line) !important; border-radius: 16px !important;
  box-shadow: inset 0 3px 0 rgba(255,236,190,.22), 0 4px 0 var(--line) !important; font-family: 'Chiron GoRound TC', var(--fUI) !important; }
html[lang=en] .aOpts button { font-family: var(--fUI) !important; }
.aMirror, .aStrands li, .aRes { border: 3px solid var(--line); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 3px 0 var(--line) !important; border-radius: 14px !important; }
.aStrands li { box-shadow: inset 8px 0 0 var(--sc), inset 0 2px 0 rgba(255,255,255,.7), 0 3px 0 var(--line) !important; padding-left: 20px !important; }
.aStrands b { font-family: var(--fGame); font-weight: 400; color: var(--wood3); }
.aRes h5, .aYou { font-family: var(--fGame) !important; }
.aRopeSvg { filter: drop-shadow(0 3px 0 var(--line)); }

/* ---------- 章末、手帳裡的小標題 ---------- */
#ov[data-ui=game] .pbody h4, .xsec h3 { font-family: var(--fGame) !important; font-weight: 400 !important; color: var(--wood3) !important; letter-spacing: .03em; }
#ov[data-ui=game] .pbody textarea { border: 3px solid var(--line) !important; border-radius: 12px !important; box-shadow: inset 0 3px 4px rgba(60,30,0,.12) !important; background: #FFFCF4 !important; }
@media (max-width: 560px) {
  #ov[data-ui=game] .panel h2 { padding: 6px 20px 8px; }
  #ov[data-ui=game] .panel h2::before, #ov[data-ui=game] .panel h2::after { width: 18px; }
  #ov[data-ui=game] .panel h2::before { left: -14px; } #ov[data-ui=game] .panel h2::after { right: -14px; }
}
.awBody, .aMirror, .aStrands li, .aRes, #ov[data-ui=game] .pbody textarea { box-sizing: border-box; }
@media (max-width: 560px) {
  .awPanel h2 { font-size: 19px !important; }
  #ov[data-ui=game] .panel h2 { font-size: 18px !important; }
}

/* ---- 對話框文字：右側讓出木框和右上角手帳飾件的空間，手機、平板不再擠到邊框 ---- */
#dText { padding-right: 30px; box-sizing: border-box; }
@media (max-width: 1100px) { #dText { padding-right: 26px; } }
@media (max-width: 560px) { #dBox { padding-left: 10px !important; padding-right: 12px !important; } #dText { padding-right: 14px; font-size: calc(16.5px * var(--fs)) !important; line-height: 1.7; } }

/* 手機窄螢幕：第一行文字避開右上角的手帳圖示；名牌完整顯示；「先離開」縮成圓形 ✕；「點擊繼續」不碰到下緣的燈籠飾件 */
@media (max-width: 560px) {
  #dText::before { content: ''; float: right; width: 22px; height: 1.1em; }
  #dName { padding: 6px 16px 8px !important; font-size: min(calc(16px * var(--fs)), 17px) !important; max-width: calc(100% - 118px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #leaveBtn { right: 48px !important; }
  #dHint { font-size: 12px !important; margin-top: 2px; }
}

/* 「先離開」圓形 ✕ 版本（名牌太長時由程式切換） */
#leaveBtn.ico { right: 40px !important; width: 30px; height: 30px; padding: 0 !important; font-size: 0 !important; display: grid; place-items: center; }
#leaveBtn.ico::after { content: '✕'; font-size: 14px; line-height: 1; }
#dName.tight { font-size: min(calc(15px * var(--fs)), 16px) !important; padding-left: 16px !important; padding-right: 16px !important; letter-spacing: 0; max-width: calc(100% - 60px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 可以用滑鼠選取、複製的文字：對話、洞見卡、手帳、公告板內容、關於這趟旅程、延伸練習 */
#dText, #dName, #card, #card *, .jcard, .jcard *, .awBody, .awBody *, .awPanel h2, .awPanel h3,
#ov .pbody p, #ov .pbody li, #ov .pbody h3, #ov .pbody h4, #ov .pbody h5, #ov .pbody blockquote, #ov .lead, .aboutTxt, .aboutTxt *,
.aMirror, .aStrands li, .aRes, .aRes *, #ov .pbody .row, #ov .pbody .row * { user-select: text !important; -webkit-user-select: text !important; cursor: auto; }
#dText { cursor: pointer; }   /* 對話文字：點一下仍然是「下一句」，拖曳才是選取 */
::selection { background: rgba(69,163,156,.35); color: inherit; }