/* 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;
  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;
}
/* 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;
}
@media (max-width: 700px) { .app { padding: 16px; } }

.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: #999278; font-size: 0.85em; }

/* 右上角語系切換 — 比照「加入成員」的 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-content { padding: 10px; } }

#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; }

/* 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; }

.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: #d8b46a; 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: center; }
.check-row .item-icon { width: 20px; height: 20px; image-rendering: pixelated; margin-right: 4px; flex: 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;
  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); }

/* Flyffulator round close button */
button.flyff-close-button {
  font-weight: 700;
  color: black;
  background: radial-gradient(circle, rgba(231,190,66,1) 0%, rgba(231,190,66,1) 40%, rgba(246,223,156,1) 59%, rgba(231,190,66,1) 95%);
  border-radius: 50%;
  outline: 1px solid #dfac16;
  border: 1px solid black;
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 15px black;
  opacity: 0.8;
  font-size: 10px;
  line-height: 1;
  padding: 0;
  flex: none;
}
button.flyff-close-button:hover { opacity: 1; cursor: pointer; }

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; }

#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; }

/* 職業選擇與圖示 */
.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; }

/* Flyffulator stat rows */
.basic-stat {
  display: flex;
  gap: 5px;
  justify-content: space-between;
  background-color: var(--stat-bg-color);
  border-radius: 3px;
  padding: 3px 12px;
}
.basic-stat:hover { background-color: var(--stat-bg-color-hover); }
.basic-stat .basic-value { text-align: right; flex-grow: 1; font-weight: 700; min-width: 50px; white-space: nowrap; }
/* 窄螢幕：長數值（如掉落率的轉生/1v1 附註）允許換行，避免超出視窗 */
@media (max-width: 700px) { .basic-stat .basic-value { white-space: normal; overflow-wrap: anywhere; } }
.basic-stat .basic-value.gold { color: var(--border-color); }
.basic-stat .basic-value.warn { color: #ff6b6b; }
.stat-note { font-size: 0.8em; color: #999278; padding: 0 12px; }

/* 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; }
/* inline-block：放不下時整段摘要換到下一行，不會從中間斷開 */
.mr-name small { display: inline-block; color: #999278; font-weight: 400; margin-left: 6px; }
.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-note { font-size: 0.8em; color: #999278; }
.mr-note .why { color: #ff6b6b; }
.total-row {
  display: flex; justify-content: space-between;
  border-top: 1px solid var(--soft-border-color);
  padding-top: 8px; margin-top: 4px;
}
.total-row span:last-child { font-weight: 700; color: var(--border-color); }
/* 有成員覆蓋怪物經驗時取代合計列的警示文字 — 外觀比照 basic-value.warn（同字級、紅色） */
.total-row span.total-warn { color: #ff6b6b; }

details { color: #999278; font-size: 0.85em; margin-top: 20px; }
details summary { cursor: pointer; color: #d8b46a; }
details li { margin: 3px 0; }
/* 計算公式：分區塊各自摺疊 */
.calc-notes { margin-top: 20px; display: flex; flex-direction: column; gap: 4px; }
.calc-notes-title { color: #d8b46a; 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: #999278;
  font-size: 0.75em;
}
.app-footer .footer-text { display: flex; flex-direction: column; gap: 6px; }
.app-footer .footer-text p { margin: 0; }