/* ============================================================
   装备与魔杖附魔（白金色）
   ------------------------------------------------------------
   创作者 2026-10-14 定的这一身皮：**白金色、干净、神圣**——
   和别处那些暗底描金的纸刻意不一样：这里是银白底、淡金线、
   方正的格子，像摊在绒布上的一盘仪器。

   用到它的两处：
     · 装备面板（ui/gear.js 的 openGear，skin: 'eq-panel'）
     · 奥利凡德那一屏（ui/enchant.js 的 screenEnchant）

   配色（一处定，别处只读 --eq-*）：
     底 #f7f5ef / 次层 #efece3 / 金线 #c9a961 / 亮金 #e8cf94 /
     墨（正文）#2f2a20 / 次要 #7d7461
   ============================================================ */

.eq-panel,
.eq-paper {
  --eq-bg: #f7f5ef;
  --eq-bg2: #efece3;
  --eq-gold: #c9a961;
  --eq-gold-hi: #e8cf94;
  --eq-ink: #2f2a20;
  --eq-dim: #7d7461;
}

/* ── 面板那一张纸（装备） ── */
.panel.eq-panel {
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(232, 207, 148, 0.4), transparent 70%),
    linear-gradient(180deg, #fbf9f4, #eeeae0 96%);
  border: 1px solid rgba(201, 169, 97, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    inset 0 0 46px rgba(201, 169, 97, 0.12),
    0 18px 44px rgba(0, 0, 0, 0.5);
}
.panel.eq-panel .panel-title .pt-zh { color: #4a3d24; letter-spacing: 0.14em; text-shadow: none; }
.panel.eq-panel .panel-title .pt-en { color: rgba(140, 120, 80, 0.72); }
.panel.eq-panel .x-btn {
  border: 1px solid rgba(201, 169, 97, 0.7);
  border-radius: 4px;
  background: linear-gradient(180deg, #fdfbf6, #ece7da);
  color: #6b5c3c;
}
.panel.eq-panel .x-btn:hover { border-color: #b08a2c; }

/* ── 那一栏（两处共用） ──
 * ⚠️ 装备面板里这一栏是**摊在面板那张白金纸上的**（不再套一层底）；
 *    奥利凡德那一屏是一整屏（不是面板），所以 .eq-paper 自己得是一张纸——
 *    不然那一屏的杖和词条就直接飘在巷子的照片上，暗色的杖会看不见。 */
.eq-paper {
  display: block;
  margin: 0 auto;
  max-width: 560px;
  padding: var(--sp-3);
  border: 1px solid rgba(201, 169, 97, 0.6);
  border-radius: 8px;
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(232, 207, 148, 0.34), transparent 70%),
    linear-gradient(180deg, #fbf9f4, #eeeae0 96%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 12px 30px rgba(0, 0, 0, 0.42);
}
.panel.eq-panel .eq-paper {
  margin: 0;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.eq-cap {
  margin: var(--sp-3) 0 6px;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  color: var(--eq-dim);
}

/* ── 那一栏：左边一根漂着的大魔杖 + 右边四行词条 ──
 * 创作者 2026-10-14 的版式：「魔杖为最大、透明底色、漂浮在左边、做漂浮动效；旁边是词条」。
 * 所以杖**没有卡片底**——它就浮在纸面上，靠一圈柔光和上下轻浮表示"悬着"。 */
.eq-top {
  display: flex;
  align-items: stretch;
  gap: var(--sp-3);
}
.eq-wand {
  flex: none;
  width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 0 2px;
}
/* 杖本体：尽量大（这一屏的主角），底色透明，只有一圈柔光 */
.eq-wand-art {
  width: 100%;
  height: 208px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(232, 207, 148, 0.55)) drop-shadow(0 6px 10px rgba(90, 70, 30, 0.3));
  animation: eqFloat 4.8s ease-in-out infinite;
}
@keyframes eqFloat {
  0%, 100% { transform: translateY(0) rotate(-1.6deg); }
  50%      { transform: translateY(-9px) rotate(1.6deg); }
}
.eq-wand-tx { text-align: center; }
.eq-top.compact .eq-wand { width: 116px; }
.eq-top.compact .eq-wand-art { height: 176px; }
/* 木与芯：各占一行（这一栏窄，一行写不下；见 ui/enchant.js 那段注释） */
.eq-wname {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-family: var(--font-hand);
  font-size: var(--fs-m);
  line-height: 1.25;
  color: #3a2f1a;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.eq-wen { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(150, 128, 84, 0.7); }
.eq-wcount { display: inline-flex; align-items: baseline; gap: 4px; margin-top: 2px; }
.eq-wnum { font-family: var(--font-hand); font-size: var(--fs-m); color: #8a6d24; }
.eq-wlb { font-size: 9px; letter-spacing: 0.16em; color: var(--eq-dim); }

/* ── 四行词条（一行一条：品质 + 名字 + 效果 + 那颗锁） ── */
.eqlist { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.eqlist .eq-cap { margin: 0 0 1px; }
.eqrow {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 2px var(--sp-2);
  min-height: 42px;
  padding: 7px 30px 7px 10px;
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 6px;
  background: linear-gradient(180deg, #fdfcf8, #f2eee4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
/* 有词条的那几行：左边一道品质色的竖线 + 一点同色的底 */
.eqrow.r-common, .eqrow.r-fine, .eqrow.r-rare, .eqrow.r-legend {
  border-left: 3px solid var(--rar);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rar) 26%, transparent), transparent 34%),
    linear-gradient(180deg, #fdfcf8, #f1ede3);
}
/*
 * ⚠️ 品质那两个字在**白纸**上要用"墨色版"的同一档颜色（--rar-ink）：
 *    data 里那四个 --rar 是给**暗底**配的（普通的白、优秀的浅蓝在白纸上等于看不见），
 *    只有左边那道竖线还用亮色（它够粗，看得出是哪个品质）。
 */
.eqrow.r-common { --rar-ink: #8a8378; }
.eqrow.r-fine   { --rar-ink: #3f6fae; }
.eqrow.r-rare   { --rar-ink: #7a4fc0; }
.eqrow.r-legend { --rar-ink: #a07c1e; }
.eqrow.is-empty { border-style: dashed; background: linear-gradient(180deg, #f4f1ea, #e9e5db); }
.eqrow.is-locked { box-shadow: inset 0 0 0 2px var(--eq-gold-hi), inset 0 1px 0 rgba(255, 255, 255, 0.85); }
.er-idx { grid-row: 1 / span 2; font-size: 10px; letter-spacing: 0.1em; color: rgba(140, 120, 80, 0.75); }
.er-rar { font-size: 9px; letter-spacing: 0.18em; color: var(--rar-ink, var(--eq-dim)); }
.er-name { font-size: var(--fs-s); color: #3a2f1a; letter-spacing: 0.04em; }
.er-name.empty { color: rgba(140, 128, 104, 0.75); }
.er-tx { grid-column: 2 / span 2; font-size: 10px; line-height: 1.45; color: #5c5341; overflow-wrap: anywhere; }
.er-tx.empty { color: rgba(140, 128, 104, 0.6); }

/* ── 五页重铸方案的页码（四行下面一排点 + 左右两颗小箭头） ──
 * 换页是白的，点本身只是页码；哪一页已经有词条，点上会多一层暗金。
 * 当前这一页点成暗红（这屏别处没有这种红，正好当"你在这儿"）。 */
.eq-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 9px;
}
.eq-pager-arrow {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(140, 120, 80, 0.7);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.eq-pager-arrow:hover { color: #8a6d24; }
.eq-pager-dots { display: flex; align-items: center; gap: 9px; }
.eq-pager-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(140, 120, 80, 0.72);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.eq-pager-dot.has { background: rgba(201, 169, 97, 0.55); border-color: rgba(176, 138, 44, 0.8); }
.eq-pager-dot.on { background: #7a3a2a; border-color: #7a3a2a; transform: scale(1.16); }
.eq-pager-dot:hover { border-color: #b08a2c; }

/* 那把锁（纯 CSS：一截环 + 一块牌体），点它就是锁定 / 解开。摆在这一行的最右边 */
.es-lock {
  position: absolute; right: 6px; top: 50%;
  width: 18px; height: 20px;
  margin-top: -10px;
  padding: 0; border: 0; background: transparent;
  cursor: pointer;
}
.es-lock.static { cursor: default; }
.es-lock i { position: absolute; left: 50%; display: block; }
.es-lock-ring {
  top: 0; width: 9px; height: 8px;
  transform: translateX(-50%);
  border: 2px solid #a0937a;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.es-lock-body {
  bottom: 0; width: 14px; height: 11px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(180deg, #cfc6b3, #a1967f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background 0.18s ease;
}
.es-lock.on .es-lock-ring { border-color: #b08a2c; }
.es-lock.on .es-lock-body { background: linear-gradient(180deg, var(--eq-gold-hi), var(--eq-gold)); }
.es-lock:disabled { opacity: 0.32; cursor: default; }
.es-lock:not(:disabled):hover .es-lock-ring { border-color: #b08a2c; }

/* ── 价格那一栏 / 概率那一行 ── */
.eq-cost {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 4px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 7px;
  background: linear-gradient(180deg, #fdfcf8, #f2eee4);
}
.eq-cost.is-off { filter: saturate(0.6); }
.ec-lb { font-size: var(--fs-xs); letter-spacing: 0.18em; color: var(--eq-dim); }
.ec-n { font-family: var(--font-hand); font-size: var(--fs-l); color: #8a6d24; }
.ec-note { flex: 1 1 auto; text-align: right; font-size: var(--fs-xs); color: var(--eq-dim); }

.eq-odds { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--sp-2); margin: 6px 0 0; }
.eo-lb { font-size: var(--fs-xs); letter-spacing: 0.16em; color: var(--eq-dim); }
.eo-one { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: #5c5341; }
.eo-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(60, 50, 20, 0.35); }

.eq-acts { display: flex; justify-content: center; margin: var(--sp-3) 0 2px; }
.btn.eq-go {
  width: auto;
  min-width: 190px;
  padding: 9px 26px 10px;
  text-align: center;
  font-size: var(--fs-m);
  letter-spacing: 0.14em;
  color: #3a2f1a;
  background: linear-gradient(180deg, #fdf6e2, var(--eq-gold-hi) 46%, #c9a961);
  border: 1px solid rgba(176, 138, 44, 0.7);
  border-radius: 8px;
  box-shadow: 0 3px 0 rgba(120, 92, 30, 0.28), 0 10px 20px rgba(90, 70, 30, 0.16);
  transition: transform 0.14s ease, filter 0.14s ease;
}
.btn.eq-go:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-2px); }
.btn.eq-go:disabled { opacity: 0.55; filter: saturate(0.5); cursor: not-allowed; }
.eq-warn { margin: 4px 0 0; text-align: center; font-size: var(--fs-xs); color: #a2573f; }
.eq-hint, .eq-note { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); line-height: 1.75; color: var(--eq-dim); }

/* ── 底下一排那两列：衣物 / 扫把在左，两个首饰在右（data/gear.js 的 GEAR_COLUMNS） ── */
.eq-wear {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: var(--sp-3) 0 0;
}
.ew-col { display: flex; flex-direction: column; gap: 8px; }

.eq-slot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 58px;
  padding: 6px 10px;
  text-align: left;
  font-family: var(--font-body);
  border: 1px solid rgba(201, 169, 97, 0.5);
  border-radius: 7px;
  background: linear-gradient(180deg, #fdfcf8, #f1ede3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.14s ease;
}
.eq-slot:hover { border-color: #b08a2c; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(90, 70, 30, 0.16); }
/* 空着的那几格：虚线框，只写这一格叫什么（不写"空"字） */
.eq-slot.is-empty { border-style: dashed; border-color: rgba(160, 148, 120, 0.6); background: linear-gradient(180deg, #f6f3ec, #ebe7dd); }
.eq-slot.is-empty .gs-duo { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.eq-slot.is-empty .gs-duo .duo-zh { font-size: var(--fs-s); color: rgba(90, 80, 60, 0.8); }
.eq-slot.is-empty .gs-duo .duo-en { font-size: 9px; color: rgba(140, 128, 104, 0.7); }
.es-art { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.es-art img, .es-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(90, 70, 30, 0.24)); }
.es-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.es-worn-name { font-size: var(--fs-s); color: #3a2f1a; letter-spacing: 0.04em; }
.es-worn-fx { font-size: 10px; line-height: 1.4; color: #6b6248; overflow-wrap: anywhere; }

/* ── 挑一件穿的那张小纸（白金色，和面板同一身皮） ── */
.sheet.eq-sheet {
  width: min(94vw, 420px);
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(232, 207, 148, 0.4), transparent 70%),
    linear-gradient(180deg, #fbf9f4, #eeeae0 96%);
  border: 1px solid rgba(201, 169, 97, 0.72);
  color: #2f2a20;
}
.sheet.eq-sheet .sheet-head { border-bottom: 1px solid rgba(201, 169, 97, 0.42); }
.sheet.eq-sheet .sheet-head h2 { color: #4a3d24; letter-spacing: 0.1em; text-shadow: none; }
.sheet.eq-sheet .x-btn {
  border: 1px solid rgba(201, 169, 97, 0.7);
  border-radius: 4px;
  background: linear-gradient(180deg, #fdfbf6, #ece7da);
  color: #6b5c3c;
}
.sheet.eq-sheet .acts { justify-content: center; }
.sheet.eq-sheet .acts .btn { min-width: 100px; width: auto; }

.eq-pick {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  margin: 0 0 6px;
  padding: 7px 10px;
  text-align: left;
  font-family: var(--font-body);
  border: 1px solid rgba(201, 169, 97, 0.5);
  border-radius: 7px;
  background: linear-gradient(180deg, #fdfcf8, #f1ede3);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.eq-pick:hover { border-color: #b08a2c; box-shadow: 0 0 14px rgba(201, 169, 97, 0.28); }
/* 正穿着的那一件：金边 + 亮一档；在另一个格子上的是"挪过来" */
.eq-pick.is-here {
  border-color: rgba(176, 138, 44, 0.85);
  box-shadow: inset 0 0 0 1px rgba(232, 207, 148, 0.6), 0 0 12px rgba(201, 169, 97, 0.22);
}
.eq-pick .ep-art { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; }
.eq-pick .ep-art img, .ep-img { width: 100%; height: 100%; object-fit: contain; }
.eq-pick .ep-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ep-name { font-size: var(--fs-s); color: #3a2f1a; }
.ep-fx { font-size: 10px; line-height: 1.4; color: #6b6248; overflow-wrap: anywhere; }
.ep-state { flex: none; font-size: var(--fs-xs); letter-spacing: 0.1em; color: #8a6d24; }
.eq-pick.is-here .ep-state { color: #a2573f; }
.eq-none { margin: var(--sp-3) 0; text-align: center; font-size: var(--fs-s); color: #5c5341; }

/* ── 摩金夫人那一屏：一行一件（图标 / 名字 / 效果 / 价钱） ── */
.eq-shop { display: flex; flex-direction: column; gap: 8px; }
.eq-buy {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 10px;
  border: 1px solid rgba(201, 169, 97, 0.5);
  border-radius: 7px;
  background: linear-gradient(180deg, #fdfcf8, #f1ede3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/*
 * 买过的那一行：**货**灰下去（创作者 2026-10-14 指的，和其他店卖掉东西一样）。
 * 从前这一行反过来描金强调，读起来像"这件更该买"，是反的。
 * 灰的是图与名字那一段——右边那颗【穿上】还是个真动作（穿着去【背包 · 装备】里换太绕），
 * 所以它不跟着变灰；只有已经穿着的那一颗按不动，那才是"没得做"。
 */
.eq-buy.is-owned {
  border-color: rgba(120, 110, 90, 0.34);
  background: linear-gradient(180deg, #f4f2ee, #eae7e0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.eq-buy.is-owned .eb-art,
.eq-buy.is-owned .eb-tx {
  opacity: 0.55;
  filter: grayscale(0.6);
}
.eb-art { flex: none; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.eb-art img, .eb-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(90, 70, 30, 0.22)); }
.eb-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.eb-name { font-size: var(--fs-m); color: #3a2f1a; letter-spacing: 0.04em; }
.eb-en { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(150, 128, 84, 0.7); }
.eb-fx { margin-top: 2px; font-size: var(--fs-xs); color: #6b6248; }
/* 那一颗小钮（买 / 穿上）：白金底描金，别用大按钮 */
.btn.eq-mini {
  flex: none;
  width: auto;
  min-width: 74px;
  padding: 7px 12px 8px;
  text-align: center;
  font-size: var(--fs-s);
  letter-spacing: 0.06em;
  color: #3a2f1a;
  background: linear-gradient(180deg, #fdf6e2, var(--eq-gold-hi) 52%, #d3b06a);
  border: 1px solid rgba(176, 138, 44, 0.7);
  border-radius: 7px;
  box-shadow: 0 2px 0 rgba(120, 92, 30, 0.26), 0 6px 14px rgba(90, 70, 30, 0.14);
}
.btn.eq-mini:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.btn.eq-mini:disabled { opacity: 0.6; filter: saturate(0.55); cursor: not-allowed; }
.btn.eq-mini.buy { font-family: var(--font-hand); }
.sheet.eq-sheet .btn.eq-go {
  width: auto; min-width: 100px;
  padding: 8px 20px 9px;
  color: #3a2f1a;
  background: linear-gradient(180deg, #fdf6e2, var(--eq-gold-hi) 46%, #c9a961);
  border: 1px solid rgba(176, 138, 44, 0.7);
  border-radius: 8px;
}

/* ── 重铸确认那张纸（沿用决斗图鉴那一身暗金纸，里面这几块是白金的） ── */
.eq-keep, .eq-roll { margin: 6px 0 0; }
.eq-keep-cap { display: block; margin-bottom: 4px; font-size: var(--fs-xs); letter-spacing: 0.18em; color: #b9a47c; }
.eq-keep-one {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: 3px 0 3px 8px;
  border-left: 2px solid var(--rar);
}
.eko-name { font-size: var(--fs-s); color: #f2e4c0; }
.eko-tx { font-size: var(--fs-xs); color: #cbbfe4; }
.eq-roll-ones { font-size: var(--fs-s); color: #f2e4c0; }
.eq-pay { margin: var(--sp-2) 0 0; font-size: var(--fs-s); color: #e8cb8d; }

/* ── 窄屏：杖小一档，词条还是竖着排（版式不动，只收尺寸） ──
 * ⚠️ 那一栏的宽度是照着「冬青木 · 凤凰尾羽」折成两行量出来的（76px 差 2px 会切掉半个字）。 */
@media (max-width: 560px) {
  .eq-top { gap: var(--sp-2); }
  .eq-wand { width: 92px; }
  .eq-wand-art { height: 150px; }
  .eq-top.compact .eq-wand { width: 86px; }
  .eq-top.compact .eq-wand-art { height: 132px; }
  .eqrow { min-height: 38px; padding: 6px 28px 6px 8px; }
  .eq-wname { font-size: var(--fs-xs); }
  .btn.eq-go { min-width: 0; width: 100%; }
}

/* 少动效那一档：杖不浮（它是装饰，不是信息），其余照旧 */
@media (prefers-reduced-motion: reduce) {
  .eq-wand-art { animation: none; }
}