/* 裝備計算機 /library/eqcalc:版面沿用遊戲 eq 指令 */
.item-page.eqc { max-width: 1120px; --wood: #7a5a35; --wood-dark: #2e1f12; --wood-mid: #3a2817; --parch: #e8c56a; }
/* 表單:同站上搜尋框(.search-form input)的深底金框,聚焦轉亮黃 */
.eqc select, .eqc input { max-width: 100%; box-sizing: border-box; padding: 5px 8px; font: inherit; color: #ddd; background-color: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 164, 92, .5); border-radius: 4px; }
.eqc select:hover, .eqc input:hover { border-color: rgba(201, 164, 92, .85); }
.eqc select:focus, .eqc input:focus { outline: none; border-color: #f3df00; }
.eqc input::placeholder { color: #8a8a7a; }
.eqc input[readonly] { color: #bbb; }
.eqc select { -webkit-appearance: none; appearance: none; padding-right: 24px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23c9a45c'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.eqc select option, .eqc select optgroup { color: #ddd; background: #1a140d; }
.eqc [hidden] { display: none !important; }
.eqc-note { opacity: .8; font-size: .92em; }
.eqc-dim { opacity: .65; }
.eqc-warn { color: #f0b35a; }

/* 木框:九宮格素材 frame.png(角 32px,顯示為一半)。標題列、面板、提示列、選擇器共用 */
.eqc-bar, .eqc-frame, .eqc-hints, .eqc-panel { border: 16px solid transparent; border-image: url(/image/eqcalc/frame.png) 32 fill / 16px round; }

/* 三個面板:人形/裝備欄/能力合計 */
.eqc-term { display: flex; gap: 12px; align-items: stretch; color: #ccc; }
.eqc-frame { box-sizing: border-box; padding: 0 8px 8px; }
.item-page.eqc .eqc-frame-title { margin: 0 -8px 10px; padding: 4px 8px; background: var(--wood-mid); border-bottom: 2px solid var(--wood); color: var(--parch); font-size: 1.05em; }
.eqc-listwrap { flex: 1; min-width: 0; }
.eqc-row-part { display: flex; align-items: center; gap: 4px; }
.eqc-row-icon { flex: none; width: 24px; height: 24px; }
.eqc-row { display: grid; align-items: center; grid-template-columns: calc(3.2em + 28px) minmax(0, 1fr) minmax(0, 11em); gap: 10px; width: 100%; padding: 3px 6px; background: none; border: 0; border-left: 2px solid transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.eqc-row-name, .eqc-row-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eqc-row-sum { color: #8fd18f; }
button.eqc-row:hover, .eqc-row-hover { background: #1c1c1c; }
.eqc-row-on { background: #262626; border-left-color: #e8d48a; }
.eqc-mini { margin-top: 8px; padding: 2px 8px; font: inherit; font-size: .9em; cursor: pointer; }

/* 人形:每格固定正方形;方塊與三角形用 CSS 畫,不靠字型寬度 */
.eqf { --c: 20px; width: calc(var(--c) * 11); margin: 0 auto; color: #ddd; font-size: var(--c); line-height: var(--c); user-select: none; }
.eqf-row { display: flex; height: var(--c); }
.eqf-c { position: relative; display: block; flex: none; width: var(--c); height: var(--c); text-align: center; }
.eqf-b::before, .eqf-br::before, .eqf-bl::before, .eqf-tl::before, .eqf-tr::before { content: ""; position: absolute; inset: -.5px; z-index: 1; background: currentColor; }
/* 格子邊界落在小數像素(顯示縮放)時會透出黑縫:圖形(上面的 inset)與底色(::after)都往外多畫半像素互相壓住 */
.eqf-c::after { content: ""; position: absolute; inset: -.5px; background: inherit; }
.eqf-br::before { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.eqf-bl::before { clip-path: polygon(0 0, 100% 100%, 0 100%); }
.eqf-tl::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.eqf-tr::before { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.eqf-hit { cursor: pointer; }
/* 人形裡盔甲、披風、衣服、身體的前景、底色要是同一個顏色(ansi.css 的 BBLU/BGRN 是暗色版,只在這裡對齊) */
.eqf .BBLU { --bg: #0033ff; background-color: var(--bg); }
.eqf .BGRN { --bg: #00ac00; background-color: var(--bg); }
.eqf .BRED { --bg: #bf1b00; background-color: var(--bg); }
.eqf .BWHT { --bg: #ddd; background-color: var(--bg); }
/* 高亮只動前景:圖形動 ::before、文字動 .eqf-t;底色不變。只有底色的格子(披風)動 ::after */
.eqf-t { position: relative; z-index: 1; font-style: normal; }
.eqf-hover::before { background: color-mix(in srgb, currentColor 65%, #fff); }
.eqf-on::before { background: color-mix(in srgb, currentColor 40%, #fff); }
.eqf-hover .eqf-t { filter: brightness(1.45); }
.eqf-on .eqf-t { filter: brightness(1.8); }
/* 底色的高亮與前景(上面的 ::before)用同一條混色公式,兩者才會同色 */
.eqf-bg-hover::after, .eqf-hover.eqf-blank::after { background: color-mix(in srgb, var(--bg) 65%, #fff); }
.eqf-bg-on::after, .eqf-on.eqf-blank::after { background: color-mix(in srgb, var(--bg) 40%, #fff); }

/* 配裝提示:都放在裝備欄下方 */
.eqc-hints { margin-top: 12px; padding: 0 6px; }
.eqc-hints ul { margin: 0; padding: 0; list-style: none; }
.eqc-hints p { margin: 0; }

/* 工具列 */
.eqc-bar { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 0 6px; }
.item-page.eqc .eqc-bar h1 { margin: 0; color: var(--parch); font-size: 1.4em; }
.eqc-actions { display: flex; gap: 8px; }
.eqc .filter-btn:disabled { color: #555; cursor: default; }
.eqc-share { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-bottom: 12px; }
.eqc-share input { flex: 1 1 320px; box-sizing: border-box; }

/* 裝備選擇器:浮在最上層、不遮暗,開關都不影響底下的版面;靠右對齊黑框,寬螢幕時疊在能力合計那一欄上 */
.eqc-panel { position: fixed; z-index: 1000; top: var(--eqc-top, 16px); right: max(16px, calc(50vw - 544px)); bottom: 16px; width: 440px; box-sizing: border-box; padding: 0 6px 8px; overflow-y: auto; background: #0b0907; color: #ddd; box-shadow: 0 6px 24px rgba(0, 0, 0, .6); outline: none; }
/* 標題列黏在面板頂端,捲動時關閉鈕才按得到 */
.eqc-panel-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0 -6px 8px; padding: 6px; background: var(--wood-mid); border-bottom: 2px solid var(--wood); }
.item-page.eqc .eqc-panel-head h2 { margin: 0; color: var(--parch); font-size: 1.1em; }
.eqc-cur { margin: 6px 0; font-weight: bold; }
.eqc-ctl label { display: inline-block; margin: 3px 10px 3px 0; }
.eqc-ctl select { max-width: 190px; }
/* 晶紋:一格一列「晶紋選單＋龍晶顏色」;選項帶說明會很長,選單撐滿剩下的寬度、顏色選單固定寬 */
.eqc-affix { margin: 8px 0 4px; }
.eqc-affix-title { color: #c9a45c; margin-bottom: 2px; }
.eqc-affix-line { display: flex; gap: 6px; align-items: center; margin: 3px 0; }
.eqc-affix-line label { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; white-space: nowrap; }
.eqc .eqc-affix-pick { flex: 1 1 0; min-width: 0; }
.eqc .eqc-affix-color { flex: none; width: 8.5em; }
.eqc-affix-desc { font-size: .92em; margin-top: 2px; }
/* 關於裝備計算機:木框同提示區,收合時只剩一列標題 */
.eqc-about { margin-top: 12px; padding: 0 10px 4px; border: 16px solid transparent; border-image: url(/image/eqcalc/frame.png) 32 fill / 16px round; line-height: 1.7; }
.eqc-about summary { cursor: pointer; color: #c9a45c; font-weight: bold; }
.eqc-about h2 { margin: 14px 0 4px; font-size: 1.05em; color: #c9a45c; }
.eqc-about p, .eqc-about ol, .eqc-about ul { margin: 4px 0; }
.eqc-about ol, .eqc-about ul { padding-left: 1.6em; }
.eqc-about code { color: #f3df00; }
.eqc-faq dt { margin-top: 8px; font-weight: bold; }
.eqc-faq dd { margin: 2px 0 0 1.6em; }
.eqc-costbox { margin-top: 8px; }
.eqc-costbox summary { cursor: pointer; }
.eqc-costbox h3 { margin: 8px 0 2px; font-size: 1em; }
.eqc-find { display: flex; gap: 6px; margin-top: 10px; }
.eqc-search { flex: 1 1 0; min-width: 0; box-sizing: border-box; }
.eqc .eqc-find-stat { flex: 1 1 0; min-width: 0; }
.eqc-cand { margin-top: 4px; border: 1px solid #555; }
.eqc-cand-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.4em 7.5em; gap: 8px; width: 100%; padding: 3px 6px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.eqc-cand-item { display: flex; align-items: center; }
.eqc-cand-item .eqc-cand-row { flex: 1; min-width: 0; }
.eqc-cand-link { flex: none; width: 3em; text-align: center; font-size: .9em; }
.eqc-cand-row:hover { background: rgba(127, 127, 127, .2); }
.eqc-cand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eqc-table { width: 100%; min-width: 0; border-collapse: collapse; }
.eqc-table th, .eqc-table td { padding: 3px 6px; border-bottom: 1px solid #555; text-align: right; }
.eqc-table th:first-child, .eqc-table td:first-child { text-align: left; }

/* 換上後的差異:桌面是選擇器左邊的小卡,手機放在面板頂端 */
.eqc-preview { position: fixed; z-index: 1001; width: 250px; box-sizing: border-box; padding: 8px 10px; background: #0b0907; color: #ddd; border: 2px solid var(--wood); box-shadow: 0 6px 18px rgba(0, 0, 0, .6); pointer-events: none; }
.eqc-preview-head { margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--wood); font-weight: bold; }
.eqc-delta { display: flex; justify-content: space-between; gap: 10px; line-height: 1.5; }
.eqc-delta span:last-child { white-space: nowrap; }
.eqc-delta-box { margin-bottom: 8px; padding: 6px 8px; border: 1px solid var(--wood); }
.eqc-up { color: #6fd36f; }
.eqc-down { color: #f07a7a; }

/* 套裝效果:左邊套裝格,右邊選中那組的詳情 */
.eqc-suitebox { flex: 1 1 100%; min-width: 0; }
.eqc-suite-tray { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.eqc-suite-list { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
/* 第一欄不能用 auto:橫跨兩欄的套裝面板會用不換行寬度把它撐開 */
.eqc-suite-tile { margin-top: 0; padding: 4px 10px; background: #1a1a1a; color: #ddd; border: 1px solid #555; }
.eqc-suite-zero { opacity: .55; }
.eqc-suite-on { border-color: var(--parch); opacity: 1; }
.eqc-suite-detail { padding-left: 12px; border-left: 2px solid var(--wood); }
.eqc-suite-name { color: var(--parch); }
.eqc-suite-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.eqc-suite-more { display: block; margin-top: 4px; font-size: .9em; text-align: right; }
.eqc-badge { padding: 0 6px; background: var(--parch); color: #2e1f12; font-size: .85em; }
.eqc-badge-off { background: #444; color: #bbb; }

/* 能力合計 */
.eqc-result { flex: 1 1 100%; min-width: 0; }
.eqc-stats { columns: 2 240px; column-gap: 32px; }
.eqc-stat { display: flex; justify-content: space-between; gap: 12px; padding: 0 4px; line-height: 1.6; border-bottom: 1px solid #333; break-inside: avoid; }
.eqc-stat-group { margin-top: 6px; color: #e8d48a; font-size: .9em; break-after: avoid; }
.eqc-stat-group:first-child { margin-top: 0; }
.eqc-stat-v { white-space: nowrap; }
.eqc-figcol { flex: none; display: flex; flex-direction: column; }
/* 人形在框內垂直置中 */
.eqc-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }

@media (min-width: 761px) {
	.eqc-term { flex-wrap: wrap; }
	.eqc-listwrap { flex-basis: 300px; }
}
/* 寬螢幕三欄:人形/裝備欄/能力合計 */
@media (min-width: 1101px) {
	.eqc-term { display: grid; grid-template-columns: 268px 390px minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: 'fig list stats' 'suite suite stats'; }
	.eqc-figcol { grid-area: fig; }
	.eqc-listwrap { grid-area: list; }
	.eqc-suitebox { grid-area: suite; }
	.eqc-result { grid-area: stats; }
	.eqc-row { grid-template-columns: calc(3.2em + 28px) minmax(0, 1fr) minmax(0, 5em); }
	.eqc-stats { columns: 2; column-gap: 20px; }
}
@media (max-width: 760px) {
	.eqc-term { display: block; }
	.eqc select, .eqc input { font-size: 16px; }
	.eqc-frame { margin-bottom: 10px; }
	.eqf { --c: 15px; }
	.eqc-row { grid-template-columns: calc(2.8em + 26px) minmax(0, 1fr) minmax(0, 7em); gap: 6px; }
	.eqc-bar, .eqc-frame, .eqc-hints { border-width: 10px; border-image-width: 10px; }
	/* 手機:選擇器全螢幕 */
	.eqc-panel { top: 0; right: 0; bottom: 0; left: 0; width: auto; border: 0; border-image: none; }
	body.eqc-open { overflow: hidden; }
	.eqc-stats { columns: 1; }
	.eqc-cand-row { grid-template-columns: minmax(0, 1fr) 3.2em 6.6em; }
	.eqc-suite-tray { grid-template-columns: minmax(0, 1fr); }
	.eqc-suite-detail { padding: 8px 0 0; border-left: 0; border-top: 2px solid var(--wood); }
}