/* Flyff Universe 劇團經驗計算器 — 全部樣式
   視覺語言基於 Flyffulator variables.scss。 */

:root {
  --bg-color: #0d0d0d;
  --fg-color: #050505;
  --fg2-color: #141414;
  --border-color-fg: #202020;
  --input-bg-color: #020202;
  --input-border-color: #726953;
  --border-color: #f1cb58;
  --border-color-light: #f1cb5850;
  --soft-border-color: #ffffff30;
  --stat-bg-color: #00000020;
  --stat-bg-color-hover: #00000050;
  /* 共用設計 token：次要文字兩級、小字兩級（手機版於下方 media query 放大）、共用圖示 */
  --text-muted: #999278;          /* 一般說明文字 */
  --text-muted-strong: #c2baa0;   /* 較醒目的次要文字：勾選說明、成員收合摘要 */
  --label-color: #d8b46a;         /* 欄位標籤、連結、分組標題 */
  --fs-note: 0.8em;               /* 說明、摘要、輔助數值 */
  --fs-tiny: 0.75em;              /* 頁尾、分組標題 */
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0d9a0' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); /* 展開／收合箭頭（金色 ⌄，收合時旋轉為 ›） */
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4cc'/%3E%3Cstop offset='.5' stop-color='%23ecc666'/%3E%3Cstop offset='1' stop-color='%23b98a2e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(45 12 12)' fill='%2324180a' stroke='%2324180a' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='9.6' y='2' width='4.8' height='20' rx='1.6'/%3E%3Crect x='2' y='9.6' width='20' height='4.8' rx='1.6'/%3E%3C/g%3E%3Cg transform='rotate(45 12 12)' fill='url(%23g)'%3E%3Crect x='9.6' y='2' width='4.8' height='20' rx='1.6'/%3E%3Crect x='2' y='9.6' width='20' height='4.8' rx='1.6'/%3E%3C/g%3E%3C/svg%3E"); /* 遊戲風格金色叉叉 */
  font-family: "Noto Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.87);
}
*, *:before, *:after {
  scrollbar-width: thin;
  scrollbar-color: rgb(255, 255, 255, 0.3) transparent;
  box-sizing: border-box;
}
/* 關閉 iOS Safari 橫向時的自動放大字級（會打亂版面） */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* hidden 屬性必須贏過任何作者 display（如 .column 的 flex），否則 JS 以 hidden 切換顯示會失效 */
[hidden] { display: none !important; }
body { margin: 0; background-color: var(--bg-color); padding: 20px 10px 40px; }

.app {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1280px;
  background-color: var(--fg-color);
  border: 2px solid var(--soft-border-color);
  outline: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 30px;
}
/* 窄螢幕：外框層層內距會吃掉內容寬度（375px 寬只剩約 260px），各層一併收窄 */
@media (max-width: 700px) {
  body { padding: 12px 6px 30px; }
  .app { padding: 12px; }
}

.app-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.app-header .app-icon { width: 34px; height: 34px; align-self: center; flex: none; }
.app-header h2 { margin: 0; font-weight: 500; }
.app-header > span { color: var(--text-muted); font-size: 0.85em; }
/* 標題分「Flyff Universe」與工具名兩段，各自不拆行：寬度不足時在兩段之間換行 */
.app-header .title-part { display: inline-block; }
/* 窄螢幕：圖示與語系切換同一列（切換鈕靠右），標題、副標各佔一列 — 中英文版面一致 */
@media (max-width: 700px) {
  .app-header { row-gap: 8px; }
  .app-header .lang-switch { order: 1; }
  .app-header h2 { order: 2; flex-basis: 100%; }
  .app-header > span { order: 3; flex-basis: 100%; }
}

/* 右上角語系切換 — 比照「加入成員」的 flyff-button 金色樣式；
   兩顆固定同寬，非當前語系降飽和（仍可點擊），突顯 active */
.lang-switch { margin-left: auto; display: flex; gap: 6px; align-self: center; }
.lang-switch button.flyff-button { padding: 2px 0; width: 44px; font-size: 0.85em; }
.lang-switch button.flyff-button:not(.active) { filter: grayscale(0.8) brightness(0.6); }
.lang-switch button.flyff-button:not(.active):hover { filter: none; }

.cols { display: flex; gap: 20px; align-items: flex-start; }
.cols > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 860px) { .cols { flex-direction: column; } .cols > div { width: 100%; } }

/* Flyffulator skills-window-titlebar */
.window-title {
  text-align: center;
  color: #f0d9a0;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 4px 0 8px;
  border-bottom: 1px solid #3a3222;
}
.window {
  background-color: var(--fg-color);
  border: 2px solid var(--soft-border-color);
  outline: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 0 0 15px black;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.window-content {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 700px) {
  .window { padding: 4px; }
  .window-content { padding: 8px; }
}
/* 手機可收合視窗：role="button" 僅在單欄排版（≤860px）由 app.js 加上；
   箭頭固定在標題列右緣，外觀與成員卡的收合鈕相同（深色方框＋金色 SVG 箭頭，展開 ⌄、旋轉為 › 收合），
   左右留白讓標題維持置中 */
.window-title[role="button"] {
  position: relative;
  padding-left: 44px;
  padding-right: 44px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.window-title[role="button"]:focus-visible { outline: 1px solid var(--border-color); }
/* ::before 為固定的方框，::after 為箭頭 — 收合時只旋轉箭頭（與成員卡的收合鈕相同），方框與漸層底色不動 */
.window-title[role="button"]::before,
.window-title[role="button"]::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  transform: translateY(-50%);
}
.window-title[role="button"]::before {
  border: 1px solid var(--input-border-color);
  border-radius: 5px;
  background: linear-gradient(180deg, #1a1a1a 0%, #050505 100%);
}
.window-title[role="button"]::after {
  background: var(--icon-chevron) center / 18px no-repeat;
  transition: transform .2s;
}
.window-title[role="button"]:hover::before { border-color: var(--border-color); }
.window.collapsed > .window-title { border-bottom-color: transparent; padding-bottom: 4px; }
.window.collapsed > .window-title::after { transform: translateY(-50%) rotate(-90deg); }
.window.collapsed > .window-content { display: none; }
/* 收合時的摘要（最低等級與等級差懲罰、選定怪物與伺服器加成、人數…）：放得下就接在標題右側；放不下時整段換到標題下一行置中，
   不擠成窄欄、不截斷；各組以 .kv 保持完整，極端情況最多兩行 */
.win-summary { display: none; }
.window.collapsed > .window-title { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 8px; }
.window.collapsed .win-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
  line-height: 1.35;
  overflow-wrap: anywhere;
  font-size: var(--fs-note);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
}
.win-summary .warn { color: #ff6b6b; }

/* 摘要片段的統一格式（收合摘要、成員卡、結果列、怪物列表；見 app.js 的 kv／val／GAP）：
   「標籤：數值」整組不斷行、數值金色；組與組之間是加寬的空白，換行時留在行尾不顯示 */
.kv { white-space: nowrap; }
.kv-v { color: var(--border-color); }
.kv-v.warn { color: #ff6b6b; }
.kv-gap { word-spacing: .9em; }
@media (prefers-reduced-motion: reduce) { .window-title[role="button"]::after { transition: none; } }

#facts, #party-level-facts { gap: 5px; }

.fields {
  display: grid;
  /* 最小欄寬需容納英文標籤／placeholder（如 "Highest member level"），避免文字被截斷 */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 15px;
}
/* .column 提高權重：勝過後方 input[type="number"] 的固定 130px 基準寬 */
.fields .column input, .fields .column select { width: 100%; max-width: 190px; }
/* 窄螢幕：短欄位兩兩並排（不再單欄堆疊、右側留白）；欄內輸入框填滿欄寬；
   選項文字較長的「怪物經驗值來源」獨佔一列，避免選單文字被截斷 */
@media (max-width: 700px) {
  .fields { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 10px 12px; }
  .fields .column input, .fields .column select { max-width: none; }
  .fields .column:has(#msrc) { grid-column: 1 / -1; }
}

/* Flyffulator range slider */
.flyff-range {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
  color: var(--border-color);
}
.flyff-range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  border: 1px solid var(--input-border-color);
  border-radius: 15px;
  cursor: pointer;
  user-select: none;
  height: 4px;
  background-color: var(--input-bg-color);
}
.flyff-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--border-color);
  border-radius: 15px;
  height: 14px;
  width: 4px;
}
.flyff-range input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  background-color: var(--border-color);
  border: none;
  border-radius: 15px;
  height: 14px;
  width: 4px;
}
.flyff-range input[type="range"]:hover { outline: none; }
/* 數字＋單位輸入盒（單位符號固定在盒內右側），滑桿旁與獨立欄位共用 */
.range-box {
  display: flex;
  align-items: center;
  background-color: var(--input-bg-color);
  border: 1px solid var(--input-border-color);
  border-radius: 3px;
  padding: 2px 8px;
  width: 130px;
}
.range-box:hover, .range-box:focus-within { outline: 1px solid var(--border-color); }
.range-box input[type="number"] {
  border: none;
  background: none;
  color: var(--border-color);
  font-weight: 600;
  width: 100%;
  padding: 0;
}
.range-box input[type="number"]:hover,
.range-box input[type="number"]:focus-visible { outline: none; }
.range-box span { color: var(--border-color); font-weight: 600; }
.fields .range-box { width: 100%; max-width: 190px; }
@media (max-width: 700px) { .fields .range-box { max-width: none; } }

.column { display: flex; flex-direction: column; gap: 5px; }
.row { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

label { user-select: none; }
.field-label { color: var(--label-color); font-weight: 600; font-size: 0.9em; }

input[type="text"], input[type="number"] {
  background-color: var(--input-bg-color);
  border: 1px solid var(--input-border-color);
  border-radius: 3px;
  padding: 3px;
  color: inherit;
  font: inherit;
  width: 130px;
}
input[type="number"].small { width: 70px; }
input:focus-visible { outline: none; }
input:hover, select:hover { outline: 1px solid var(--border-color); }
input:focus-visible, select:focus-visible { outline: 1px solid var(--border-color); }

select {
  background: var(--input-bg-color);
  border: 1px solid var(--input-border-color);
  border-radius: 3px;
  padding: 3px 6px;
  font-weight: 600;
  font-family: inherit;
  color: inherit;
  box-shadow: 0 0 5px black;
  cursor: pointer;
}

/* Flyffulator checkbox */
input[type="checkbox"] {
  appearance: none;
  background: linear-gradient(-45deg, #ffffff80 0%, var(--input-bg-color) 40%);
  margin: 3px 5px 0px 5px;
  font: inherit;
  width: 13px;
  height: 13px;
  outline: 1px solid var(--input-border-color);
  border: 1px solid var(--input-bg-color);
  border-radius: 2px;
  flex: none;
}
input[type="checkbox"]::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  opacity: 0;
  transition: 0.1s opacity ease-in-out;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDUgNzkuMTY0NTkwLCAyMDIwLzEyLzA5LTExOjU3OjQ0ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjIuMSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDI0LTExLTI3VDAxOjE0OjM2LTA1OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0LTExLTI3VDAxOjE0OjM2LTA1OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0xMS0yN1QwMToxNDozNi0wNTowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphZDhiZTFiZi01YTAxLTRiNDktODRjNi01NGRjZDE2MTFiY2MiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpmOWIxMTdhMS1iMGIyLWZmNDgtOTAzOS05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");
  background-size: contain;
}
input[type="checkbox"]:hover { cursor: pointer; }
input[type="checkbox"]:checked { background: var(--input-bg-color); }
input[type="checkbox"]:checked::before { opacity: 1; }
/* 勾選框與圖示對齊文字第一行（標籤折成多行時不會置中在兩行之間） */
.check-row { display: flex; align-items: flex-start; }
.check-row input[type="checkbox"] { margin-top: 6px; }
.check-row .item-icon { width: 20px; height: 20px; image-rendering: pixelated; margin: 2px 4px 0 0; flex: none; }
/* 勾選標籤的說明（如 1v1 加成的觸發條件）：桌機以括號接在標題後、整段不拆開；
   窄螢幕改為標題下方的小字副標（不加括號），避免「傷害｜擊殺）」從中間斷開。括號依語系由 CSS 補上 */
.check-hint { display: inline-block; }
.check-hint::before { content: "（"; }
.check-hint::after { content: "）"; }
/* inline-block 開頭的空白會被吃掉，英文括號前的間距改用 margin */
:lang(en) .check-hint { margin-left: 0.3em; }
:lang(en) .check-hint::before { content: "("; }
:lang(en) .check-hint::after { content: ")"; }
@media (max-width: 700px) {
  .check-hint, :lang(en) .check-hint { display: block; margin-left: 0; font-size: var(--fs-note); line-height: 1.45; color: var(--text-muted-strong); }
  .check-hint::before, .check-hint::after, :lang(en) .check-hint::before, :lang(en) .check-hint::after { content: none; }
}
.check-row:hover { cursor: pointer; }

/* Flyffulator gold button */
button.flyff-button {
  padding: 3px 25px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 236, 194, 1) 0%, rgba(236, 202, 116, 1) 48%, rgba(230, 191, 95, 1) 51%, rgba(230, 191, 95, 1) 78%, rgba(255, 236, 194, 1) 100%);
  border: 2px solid black;
  outline: 1px solid var(--border-color-light);
  transition: 0.2s;
  font-weight: 600;
  font-family: inherit;
  /* 明確指定字級：button 預設字級依瀏覽器而異（桌機約 13.3px、iOS Safari 約 11px），不指定會在手機上變小 */
  font-size: 0.85em;
  text-shadow: 0 0 2px white;
  color: black;
  user-select: none;
  width: fit-content;
}
button.flyff-button:hover:not(:disabled) {
  box-shadow: inset 0 0 25px #f5ebbd;
  color: rgb(61, 61, 61);
  cursor: pointer;
}
button.flyff-button:active:not(:disabled) { box-shadow: inset 0 0 10px black; color: black; }
button.flyff-button:disabled { filter: grayscale(0.8) brightness(0.5); }

/* 關閉／移除鈕：比照遊戲內視窗的金色叉叉（無底圓），確認框、移除成員、清除怪物共用 */
button.flyff-close-button {
  display: inline-flex; flex: none;
  width: 22px; height: 22px; padding: 0;
  background: var(--icon-close) center / 18px no-repeat;
  border: none; cursor: pointer;
  filter: drop-shadow(0 1px 1px #000);
  -webkit-tap-highlight-color: transparent;
}
button.flyff-close-button:hover { filter: drop-shadow(0 1px 1px #000) brightness(1.15); }
button.flyff-close-button:focus-visible { outline: 1px solid var(--border-color); border-radius: 3px; }

hr { width: 100%; height: 0px; border: 1px solid var(--soft-border-color); margin: 10px 0; }
hr.thin { border-color: var(--border-color-fg); margin: 3px 0; }

/* 分享設定／重設：頁首下方、各視窗上方靠右（桌機與手機相同） */
.app-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; }
/* 圖示＋文字按鈕：內嵌 SVG 以線條繪製、顏色跟隨文字 */
button.icon-button { display: inline-flex; align-items: center; gap: 5px; }
/* 分享／重設：圖示已佔左側，左右內距縮小，避免按鈕過長、文字兩側留白過多 */
.app-actions button.flyff-button { padding: 3px 12px; }
.btn-icon {
  width: 1.05em; height: 1.05em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
/* 重設（破壞性操作）：深紅色版本的 flyff-button，與金色主按鈕區隔 */
button.flyff-button.danger {
  background: linear-gradient(180deg, #b44a40 0%, #8e2620 48%, #7c1d18 51%, #7c1d18 78%, #a8423a 100%);
  outline-color: #ff6b6b50;
  color: #ffe9e2;
  text-shadow: 0 0 2px black;
}
button.flyff-button.danger:hover:not(:disabled) { box-shadow: inset 0 0 25px #ff9a8a70; color: #fff; }
button.flyff-button.danger:active:not(:disabled) { box-shadow: inset 0 0 10px black; color: #ffe9e2; }
@media (max-width: 700px) { .app-actions button.flyff-button { padding: 7px 14px; font-size: 0.95em; } }

/* 確認框：比照遊戲內確認視窗 — 金色圓角外框＋深色面板、右上金色 ✕、黑底訊息框、下方兩顆金色按鈕 */
.flyff-dialog {
  width: min(380px, calc(100vw - 32px));
  padding: 30px 16px 16px;
  color: rgba(255, 255, 255, 0.87);
  background: linear-gradient(180deg, #1c1c1c 0%, #0a0a0a 100%);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 2px #2f291c, inset 0 0 0 3px #ffffff18, 0 0 30px black;
}
.flyff-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
/* 右上金色叉叉：共用 .flyff-close-button，這裡只定位 */
.flyff-dialog .dialog-close { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; background-size: 20px; }
@media (pointer: coarse) { .flyff-dialog .dialog-close { width: 32px; height: 32px; top: 2px; right: 2px; } }
.dialog-message {
  margin: 0 0 16px;
  min-height: 84px;
  padding: 10px 12px;
  background: #000;
  border: 1px solid #5c5545;
  border-radius: 4px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.dialog-actions { display: flex; justify-content: space-around; gap: 16px; }
.dialog-actions button.flyff-button { min-width: 110px; padding: 6px 16px; font-size: 1em; }

#rows { display: flex; flex-direction: column; gap: 10px; }
#add { align-self: flex-end; } /* 「加入成員」靠劇團成員視窗右下角 */
.member-name { font-style: italic; margin-left: 10px; width: 150px; }
.teammate {
  background-color: var(--stat-bg-color);
  outline: 1px solid var(--soft-border-color);
  border-radius: 3px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.teammate h4 { margin: 0; }
.teammate-head { display: flex; justify-content: space-between; align-items: center; }
.tm-body { display: flex; flex-direction: column; gap: 10px; }
.teammate { scroll-margin-top: 12px; } /* 加入成員後捲動定位時，卡片上緣保留一點空隙 */
/* 成員卡收合（桌機與手機皆可；大視窗的收合僅限單欄排版）：方框箭頭鈕（展開 ⌄、收合 ›），收合時以兩行摘要取代欄位；
   「成員 N」標題與摘要列也可點擊切換，加大點擊範圍 */
.tm-fold {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-right: 4px; padding: 0; flex: none;
  background: linear-gradient(180deg, #1a1a1a 0%, #050505 100%);
  border: 1px solid var(--input-border-color); border-radius: 5px;
  color: #f0d9a0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tm-fold svg {
  width: 18px; height: 18px; transition: transform .2s;
  fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
}
.teammate.folded .tm-fold svg { transform: rotate(-90deg); }
/* 全部收合／展開鈕：劇團成員標題列左側（與右側的區塊收合箭頭對稱；不佔額外高度），區塊收合時隱藏 */
.window[data-win="members"] { position: relative; }
.tm-fold-all { position: absolute; left: 12px; top: 9.5px; margin: 0; } /* 垂直置中於標題列（與右側箭頭同高） */
.tm-fold-all.all-folded svg { transform: rotate(-90deg); }
.window.collapsed > .tm-fold-all { display: none; }
@media (max-width: 700px) { .tm-fold-all { left: 10px; top: 7.5px; } }
.tm-fold:hover, .tm-fold:focus-visible { outline: 1px solid var(--border-color); }
.teammate h4[data-fold], .tm-summary, .tm-head-sum { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.tm-summary { display: none; }
.teammate.folded .tm-body { display: none; }
/* 摘要字級：桌機卡片寬、0.8em 的小字顯得太小 → 0.9em；手機（≤700px）見下方，沿用 --fs-note */
.teammate.folded .tm-summary { display: block; font-size: 0.9em; line-height: 1.5; color: var(--text-muted-strong); }
.tm-summary .job-icon, .tm-head-sum .job-icon { width: 20px; height: 20px; vertical-align: -5px; margin-right: 6px; }
/* 摘要排法依「卡片本身的寬度」切換（container query；桌機雙欄時卡片較窄、單欄或大螢幕時較寬）：
   窄卡片：兩行 — 首行 職業圖示＋等級 職業、角色標記，次行 經驗加成、傷害佔比
   寬卡片（≥520px）：職業圖示＋等級 職業移到標題列名稱旁，下方只剩一行 — 角色標記、經驗加成、傷害佔比
   不支援 container query 的瀏覽器維持兩行排法 */
.teammate { container-type: inline-size; }
.tm-head-sum { display: none; margin-left: 10px; font-size: 0.9em; color: var(--text-muted-strong); }
.tm-sum-roles { display: none; }
@container (min-width: 520px) {
  .teammate.folded .tm-head-sum { display: block; }
  .tm-sum-a { display: none; }
  .tm-sum-roles { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .tm-fold svg { transition: none; } }

/* 職業選擇與圖示 */
.job-select-row { display: flex; align-items: center; gap: 6px; }
.job-select-row select { flex: 1; min-width: 0; }
.job-icon { width: 24px; height: 24px; flex: none; }
.mr-name .job-icon { width: 20px; height: 20px; vertical-align: -5px; margin-right: 6px; }

/* 怪物選擇：搜尋框 + 下拉清單 + 已選 chip */
.monster-combo { position: relative; }
.monster-combo input[type="text"] { width: 100%; }
.monster-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  max-height: 340px; overflow-y: auto; /* 每列兩行約 52px → 約 6 列 */
  background-color: var(--fg2-color);
  border: 1px solid var(--input-border-color);
  outline: 1px solid var(--border-color-light);
  border-radius: 3px;
  margin-top: 3px;
  box-shadow: 0 6px 15px black;
}
/* 每列固定兩行：第一行元素圖示＋名稱，第二行資訊（等級／階級／標籤／HP）；
   各列等高、掃視與鍵盤反白不跳動；窄寬度下資訊行自然折成 3~4 行，名稱不被擠壓、清單不橫向溢出 */
.monster-row {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 10px; cursor: pointer;
}
.monster-row:hover, .monster-row.hi { background-color: #f1cb5820; }
.monster-row .monster-row-name { overflow-wrap: anywhere; }
/* 元素圖示（icons/element/）：內嵌於名稱前，與文字基線對齊 */
.elem-icon { width: 18px; height: 18px; vertical-align: -4px; margin-right: 5px; }
.monster-row small { color: var(--text-muted); font-size: var(--fs-note); }
/* 「Lv.X（±差）」與「HP 數字」各自不拆行 */
.monster-lv { white-space: nowrap; }
.monster-row small .warn, .monster-chip small .warn { color: #ff6b6b; }
.monster-row small .good, .monster-chip small .good { color: var(--border-color); }
.monster-empty { padding: 6px 10px; color: var(--text-muted); font-size: var(--fs-note); }
/* 怪物搜尋規則小字：桌機已寫在 placeholder 內不顯示；窄螢幕 placeholder 改短版時才顯示 */
#msearch-hint { display: none; }
@media (max-width: 700px) { #msearch-hint { display: block; padding: 0 2px; } }
/* 窄螢幕聚焦時搜尋框會被捲到畫面上方：保留上方的「怪物」標籤可見 */
#msearch { scroll-margin-top: 36px; }
/* 等級差區間分組標題（依全團最高等級：懲罰區／無懲罰區／全員 0 區），捲動時吸頂 */
.monster-group {
  position: sticky; top: 0; z-index: 1;
  padding: 3px 10px;
  font-size: var(--fs-tiny); font-weight: 600; letter-spacing: 0.5px;
  color: var(--label-color);
  background-color: var(--fg2-color);
  border-top: 1px solid var(--border-color-fg);
  border-bottom: 1px solid var(--border-color-fg);
}
.monster-group[data-band="zero"] { color: #ff6b6b; }
/* 1v1 不適用／區域共享經驗提醒 */
#mon-warns .stat-note.warn { color: #ff6b6b; }
/* 已選怪物 chip，與下拉列同構：第一行等級＋元素圖示＋名稱，第二行資訊；清除鈕固定右側 */
.monster-chip {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 1px;
  background-color: var(--stat-bg-color);
  outline: 1px solid var(--soft-border-color);
  border-radius: 3px;
  padding: 4px 34px 4px 10px;
}
.monster-chip .monster-chip-lv { font-weight: 700; font-size: 1.25em; line-height: 1.2; color: var(--border-color); flex: none; }
.monster-chip .monster-chip-name { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.monster-chip small { color: var(--text-muted); font-size: var(--fs-note); flex-basis: 100%; }
.monster-chip .flyff-close-button { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }

/* Flyffulator stat rows */
/* 標籤與數值以 max-content 為基準寬：放得下就同一行左右對齊；放不下時整段數值折到標籤下一行靠右，
   不再兩邊各自從中間斷開（如「主動經驗加成（貢｜獻）」）；單獨一行仍超寬時才在段內換行 */
.basic-stat {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  background-color: var(--stat-bg-color);
  border-radius: 3px;
  padding: 3px 12px;
}
.basic-stat:hover { background-color: var(--stat-bg-color-hover); }
.basic-stat > span:first-child { flex: 1 1 auto; }
.basic-stat .basic-value { flex: 0 1 auto; margin-left: auto; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.basic-stat .basic-value.gold { color: var(--border-color); }
.basic-stat .basic-value.warn { color: #ff6b6b; }
.stat-note { font-size: var(--fs-note); color: var(--text-muted); padding: 0 12px; }
@media (max-width: 700px) {
  .basic-stat { padding: 3px 8px; }
  .stat-note { padding: 0 8px; }
}

/* result bars */
.member-result { display: flex; flex-direction: column; gap: 3px; }
.mr-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mr-name { font-weight: 600; }
/* 首行等級放大（比照已選怪物 chip 的等級樣式） */
.mr-name .mr-lv { font-weight: 700; font-size: 1.2em; color: var(--border-color); margin-right: 6px; }
/* inline-block：放不下時整段角色標記換到下一行，不會從中間斷開 */
.mr-name small { display: inline-block; color: var(--text-muted); font-weight: 400; margin-left: 6px; }
/* 次行：左為數值摘要（經驗加成／傷害佔比／怪物經驗值），右為經驗值（緊貼長條上方）；
   窄螢幕摘要換成多行時，經驗值對齊最後一行（last baseline；不支援的瀏覽器退回 flex-end 底部對齊） */
.mr-stats { display: flex; justify-content: space-between; align-items: flex-end; align-items: last baseline; gap: 8px; }
.mr-stats .mr-stats-text { font-size: var(--fs-note); color: var(--text-muted); }
.mr-exp { font-weight: 700; color: var(--border-color); }
.mr-exp.zero { color: #ff6b6b; }
.bar {
  height: 9px;
  background-color: var(--input-bg-color);
  border: 1px solid var(--input-border-color);
  border-radius: 15px;
  overflow: hidden;
}
.bar > i {
  display: block; height: 100%;
  background: linear-gradient(180deg, #ffecc2 0%, #ecca74 48%, #e6bf5f 51%, #e6bf5f 78%, #ffecc2 100%);
  transition: width .25s;
}
@media (prefers-reduced-motion: reduce) { .bar > i { transition: none; } }
/* 長條下方：左為貢獻標記／原因（＋佔比），右為升下一級所需怪物擊殺數（與上方 mr-stats 左文右數的結構一致）；
   窄寬度放不下時擊殺數折到下一行、仍靠右 */
.mr-note { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; font-size: var(--fs-note); color: var(--text-muted); }
.mr-note .why { color: #ff6b6b; }
.mr-note .mr-kills { margin-left: auto; white-space: nowrap; }
.mr-note .mr-kills b { color: var(--border-color); margin-left: 6px; }
/* 成員之間與合計列之前的分隔線（hr.thin）：視窗本身已有 12px 間距，不再加上下邊距 */
#results > hr.thin { margin: 0; }
.total-row { display: flex; justify-content: space-between; }
.total-row span:last-child { font-weight: 700; color: var(--border-color); }
/* 有成員覆蓋怪物經驗時取代合計列的警示文字 — 外觀比照 basic-value.warn（同字級、紅色） */
.total-row span.total-warn { color: #ff6b6b; }

details { color: var(--text-muted); font-size: 0.85em; margin-top: 20px; }
/* 展開箭頭與區塊／成員卡同款（無方框的小號版）：隱藏瀏覽器預設三角形，收合時旋轉為 › */
details summary { cursor: pointer; color: var(--label-color); list-style: none; display: flex; align-items: center; gap: 4px; }
details summary::-webkit-details-marker { display: none; }
details summary::before {
  content: ""; flex: none; width: 1.15em; height: 1.15em;
  background: var(--icon-chevron) center / contain no-repeat;
  transform: rotate(-90deg); transition: transform .2s;
}
details[open] > summary::before { transform: none; }
@media (prefers-reduced-motion: reduce) { details summary::before { transition: none; } }
details li { margin: 3px 0; }
/* 計算公式：分區塊各自摺疊 */
.calc-notes { margin-top: 20px; display: flex; flex-direction: column; gap: 4px; }
.calc-notes-title { color: var(--label-color); font-weight: 600; font-size: 0.9em; }
.calc-notes details { margin-top: 0; }
.calc-notes details ul { margin: 4px 0; }
code {
  font-family: 'Courier New', Courier, monospace;
  color: rgba(255,255,255,0.87);
  background-color: var(--stat-bg-color);
  border: 1px solid var(--border-color-fg);
  padding: 0 4px;
  border-radius: 3px;
}

/* footer 版本標示 */
.app-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* 版本號對齊免責文字的最後一行 */
  gap: 10px;
  margin-top: 20px;
  color: var(--text-muted);
  font-size: var(--fs-tiny);
}
.app-footer .footer-text { display: flex; flex-direction: column; gap: 6px; }
.app-footer .footer-text p { margin: 0; }
/* 頁尾授權連結（GPL-3.0 → /LICENSE） */
.app-footer a { color: var(--label-color); text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }

/* ===== 手機（窄螢幕）可讀性 ===== */
@media (max-width: 700px) {
  /* 小字略放大、行距拉開：說明、成員數值摘要、長條下方標記、怪物清單資訊行 */
  :root { --fs-note: 0.85em; }
  .stat-note, .mr-stats .mr-stats-text, .mr-note, .monster-row small, .monster-chip small { line-height: 1.55; }
  /* iOS Safari 對小於 16px 的輸入元件聚焦時會自動放大頁面：select 預設約 13px，統一拉到 16px */
  select { font-size: 16px; }
  .teammate { padding: 10px 8px; }
  .teammate.folded .tm-summary { font-size: var(--fs-note); line-height: normal; }
  .tm-summary .job-icon { width: 18px; height: 18px; vertical-align: -4px; }
  /* 語系切換與「加入成員」按鈕放大，方便手指點擊 */
  .lang-switch { gap: 8px; }
  .lang-switch button.flyff-button { width: 54px; padding: 6px 0; font-size: 0.95em; }
  #add { padding: 8px 30px; font-size: 0.95em; }
}

/* ===== 觸控裝置：加大點擊目標（勾選框、✕ 按鈕、拉桿把手）===== */
@media (pointer: coarse) {
  input[type="checkbox"] { width: 18px; height: 18px; margin: 0 6px 0 2px; }
  input[type="checkbox"]::before { width: 16px; height: 16px; }
  .check-row { padding: 4px 0; }
  .check-row input[type="checkbox"] { margin-top: 3px; }
  button.flyff-close-button { width: 32px; height: 32px; background-size: 20px; }
  .monster-chip { padding-right: 42px; }
  .flyff-range input[type="range"]::-webkit-slider-thumb { width: 10px; height: 22px; border-radius: 4px; }
  .flyff-range input[type="range"]::-moz-range-thumb { width: 10px; height: 22px; border-radius: 4px; }
}