/* ============================================================
   诛仙2 装备洗练 · Wireframe MVP
   Figma 1:1 还原（1920x1080 画布，绝对定位，等比缩放）
   色板与字号均取自 Figma：PTA 2026 完美世界 / Week 03
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "SF Pro", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #1a1a1a;
  color: #272727;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 画布外工具条 ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; flex: none; }
.demo-btn {
  font-family: inherit; font-size: 13px; color: #ddd;
  background: #3a3a3a; border: 1px solid #555; border-radius: 6px;
  padding: 6px 16px; cursor: pointer;
}
.demo-btn:hover { background: #454545; }
.legend { font-size: 12px; color: #999; }

/* ---------- 舞台与缩放 ---------- */
.stage { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; }
.game {
  position: relative;
  width: 1920px; height: 1080px;
  background: #FFFFFF;
  transform-origin: center center;
  flex: none;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

/* ---------- 通用 ---------- */
.hidden { display: none !important; }
.mask {
  position: absolute; left: 0; top: -1px; width: 1920px; height: 1081px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6.5px);
  z-index: 20;
}
.modal { position: absolute; background: #FFFFFF; z-index: 21; }

/* ============================================================
   主界面
   ============================================================ */
.screen { position: absolute; inset: 0; }

/* 顶栏 x99 y25 宽294：返回键 + [标题+信息] 组合（gap 29）space-between */
.topbar { position: absolute; left: 99px; top: 25px; width: 294px; height: 48px; display: flex; align-items: center; justify-content: space-between; }
.topbar-group { display: flex; align-items: center; gap: 29px; }
.ic-back, .ic-info { width: 48px; height: 48px; }
.topbar-title { font-size: 40px; font-weight: 700; color: #272727; line-height: 48px; }

/* 右侧栏 x1640 280x1080（padding 114/87/4/44）：5 个文字按钮，100 宽，在 149 内列居中（相对侧栏 x68.5） */
.sidebar { position: absolute; left: 1640px; top: 0; width: 280px; height: 1080px; background: #D9D9D9; }
.side-btn {
  position: absolute; left: 68.5px; width: 100px; height: 68px;
  background: #707070; color: #FFFFFF;
  font-size: 40px; font-weight: 700; text-align: center; line-height: 48px;
  padding: 10px 0;
  cursor: pointer; transition: filter .15s;
}
.side-btn:hover { filter: brightness(1.15); }
.side-btn.on { background: #242424; }
.sid {
  position: absolute; left: 44px; top: 1052px; width: 149px;
  font-size: 20px; font-weight: 700; color: #272727; text-align: center;
}

/* 主体 x192 y166 宽1351 */
.main-area { position: absolute; left: 192px; top: 166px; width: 1351px; height: 683px; }

/* 环形 521x526（Figma 导出整图），在行内与 683 高面板垂直居中 → y78.5 */
.ring-wrap { position: absolute; left: 0; top: 78.5px; width: 521px; height: 526px; }
.ring-bg { position: absolute; left: 0; top: 0; width: 521px; height: 526px; }
/* 道法容器 159x159 方形 #D9D9D9，在 521x526 卡片内水平垂直居中 */
.ring-center {
  position: absolute; left: 181px; top: 183.5px; width: 159px; height: 159px;
  background: #D9D9D9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.rc-lbl { font-size: 28px; font-weight: 700; color: #272727; line-height: 33px; }
.rc-val { font-size: 36px; font-weight: 700; color: #272727; line-height: 43px; }
.rc-info { width: 34px; height: 34px; }

/* 总词条面板 799x683：相对 main-area x552（= 521 卡片 + 31 间距），绝对 x744 */
.panel { position: absolute; left: 552px; top: 0; width: 799px; height: 683px; background: #D9D9D9; }
.panel-title {
  position: absolute; left: 57px; top: 41px; width: 120px;
  font-size: 40px; font-weight: 700; color: #272727;
}
/* 属性总道法行 y296（相对面板 x57） */
.total-row { position: absolute; left: 57px; top: 130px; height: 31px; display: flex; align-items: center; }
.tr-bar { width: 7px; height: 31px; flex: none; }
.tr-pill {
  background: #B9B9B9; padding: 5px 15px; height: 31px; width: 237px;
  display: flex; align-items: center; gap: 16px;
  font-size: 24px; font-weight: 700; color: #272727;
}
.tr-pill .plus { font-weight: 400; }
.tr-num { font-weight: 400; }

/* 词条列表 x801 y356（相对面板 x57 y190） */
.word-list {
  position: absolute; left: 57px; top: 190px; width: 673px;
  display: flex; flex-direction: column; gap: 20px;
}
/* 词条行：整行 #E9E9E9 底色，左侧 7px 竖条撑满行高 */
.word-row { position: relative; display: flex; align-items: center; background: #E9E9E9; }
.wr-bar { width: 7px; align-self: stretch; flex: none; }
.wr-pill {
  background: #B9B9B9; padding: 5px 15px; height: 31px; width: 453px;
  display: flex; align-items: center; gap: 16px; flex: none;
}
.wr-pill .name { font-size: 24px; font-weight: 700; color: #272727; }
.wr-pill .plus { font-size: 24px; font-weight: 400; color: #272727; }
.wr-pill .num { font-size: 24px; font-weight: 400; color: #272727; }
.wr-rec {
  position: absolute; right: -17px; top: -18px; width: 35px; height: 35px;
  background: #242424; color: #FFFFFF; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
}
.wr-arrow { position: absolute; right: 28px; top: -14px; width: 24px; height: 24px; }
.wr-arrow img { width: 24px; height: 24px; }
.wr-arrow.down img { transform: rotate(180deg); }

/* 底部（Figma frame 5 新版：y893 起，高 187） */
.footer-area { position: absolute; left: 0; top: 893px; width: 1920px; height: 187px; }
/* 已选材料面板 (325,893) 396x146 */
.chips-panel { position: absolute; left: 325px; top: 0; width: 396px; height: 146px; background: #D9D9D9; }
.chips-clip { position: absolute; left: 335px; top: 42px; width: 379px; height: 94px; overflow: hidden; }
.picked-chips {
  display: flex; gap: 5px; align-items: flex-start;
}
.pc-chip {
  background: #505050; padding: 2px; display: flex; gap: 2px; height: 94px;
  flex: none;
}
.pc-chip .pc-icon {
  width: 90px; height: 90px; position: relative; flex: none;
}
.pc-chip .pc-icon .mc-img { position: absolute; left: 0; top: 0; width: 90px; height: 90px; }
.pc-chip .pc-icon .mc-bottom {
  position: absolute; left: 2px; right: 2px; bottom: 2px;
  display: flex; justify-content: space-between; align-items: center;
}
/* 已选提示 16px (335,904 → 相对 y11) */
.pick-warn {
  position: absolute; left: 335px; top: 11px; height: 19px;
  font-size: 16px; color: #000000; line-height: 19px;
}
/* 剩余次数 (904.5,893)：24px 灰 + 32px 黑 */
.left-count {
  position: absolute; left: 904.5px; top: 0; height: 38px;
  display: flex; align-items: center; gap: 11px;
  font-size: 24px; color: #3D3D3D; line-height: 38px;
}
.left-count b { color: #000000; font-size: 32px; font-weight: 400; }
.left-count b#main-lv { font-size: 24px; }
/* CTA (834,950 → 相对 y57) */
.cta-start {
  position: absolute; left: 834px; top: 57px; width: 374px; height: 89px;
  background: #707070; color: #FFFFFF;
  font-size: 40px; font-weight: 700; text-align: center; line-height: 89px;
  cursor: pointer; transition: filter .15s;
}
.cta-start:hover { filter: brightness(1.15); }
.cta-start:active { filter: brightness(.9); }

/* ============================================================
   材料选择弹窗 1551x818（x184 y132）
   ============================================================ */
.modal.mat { left: 184px; top: 132px; width: 1551px; height: 818px; background: #D9D9D9; }
.mat-title {
  position: absolute; left: 695px; top: 35px; width: 160px;
  font-size: 40px; font-weight: 700; color: #3D3D3D;
}
.mat-preview {
  position: absolute; left: 69px; top: 42px; height: 34px;
  display: flex; align-items: center; gap: 18px; cursor: pointer;
}
.mat-preview img { width: 34px; height: 34px; }
.mat-preview span { font-size: 24px; font-weight: 700; color: #3D3D3D; }
.mat-close { position: absolute; left: 1471px; top: 30px; width: 58px; height: 58px; cursor: pointer; }

/* 等级列 x66 y143 194x299 */
.lv-col { position: absolute; left: 66px; top: 143px; width: 194px; display: flex; flex-direction: column; gap: 1px; }
.lv {
  height: 74px; display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #000000; cursor: pointer;
}
.lv.on { background: #242424; color: #FFFFFF; }

/* 品质 tabs y151 */
.q-tabs { position: absolute; left: 290px; top: 151px; display: flex; gap: 34px; }
.qt {
  display: flex; align-items: flex-end; gap: 9px; height: 29px;
  font-size: 24px; color: #000000; cursor: pointer;
}
.qbox { width: 26px; height: 26px; display: block; background: #979797; }
.qt.on .qbox { outline: 2px solid #000000; outline-offset: 2px; }

/* 状态提示弹窗 */
.modal.hint { left: 660px; top: 330px; width: 600px; height: 300px; }
.modal.hint .m-btn { top: 214px; }
.h-title {
  position: absolute; left: 0; top: 44px; width: 600px;
  font-size: 32px; font-weight: 700; color: #272727; text-align: center;
}
.h-text {
  position: absolute; left: 60px; top: 118px; width: 480px;
  font-size: 24px; color: #3D3D3D; text-align: center; line-height: 36px;
}

/* 材料网格 x294 y205 760x400（卡片 120x94，每行 6 个） */
.mat-grid {
  position: absolute; left: 294px; top: 205px; width: 760px; height: 400px;
  display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  overflow: visible;
}
.mat-card {
  width: 120px; height: 94px; background: #505050; padding: 2px;
  display: flex; gap: 2px;
  position: relative; cursor: pointer; flex: none;
}
.mc-icon {
  width: 90px; height: 90px; padding: 2px;
  display: flex; flex-direction: column; justify-content: space-between;
  flex: none; position: relative;
}
.mc-icon .mc-img { position: absolute; left: 0; top: 0; width: 90px; height: 90px; }
.mc-icon .mc-lock { position: absolute; right: 2px; top: 2px; width: 15px; height: 15px; }
.mc-icon .mc-bottom {
  position: absolute; left: 2px; right: 2px; bottom: 2px;
  display: flex; justify-content: space-between; align-items: center;
}
.mc-lv {
  width: 43px; height: 20px; background: #D9D9D9;
  font-size: 18px; color: #000000; text-align: center; line-height: 20px;
}
.mc-cres {
  width: 21px; height: 21px; background: #D9D9D9;
  display: flex; align-items: center; justify-content: center;
}
.mc-cres img { width: 14px; height: 14px; }
.mc-side {
  width: 24px; flex: 1; display: flex; flex-direction: column;
  justify-content: space-between; align-items: center; padding: 0;
}
.mc-state {
  width: 24px; height: 55px; background: #FFFFFF;
  font-size: 14px; font-weight: 700; color: #000000;
  writing-mode: vertical-rl;
  display: flex; align-items: center; justify-content: center;
}
.mc-bind {
  width: 24px; background: #FFFFFF;
  font-size: 20px; color: #000000; text-align: center; line-height: 24px;
}
.mc-bind:empty { display: none; }
.mat-card.equipped { background: #6E6E6E; cursor: not-allowed; }
.mat-card.equipped .mc-icon { background: #575757; }
.mat-card.equipped .mc-state, .mat-card.equipped .mc-bind { background: #666666; color: #A0A0A0; }
.mat-card .mc-rec {
  position: absolute; left: -11px; top: -11px; width: 35px; height: 35px;
  background: #242424; color: #FFFFFF; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  z-index: 6;
}
.mat-card .mc-sel {
  position: absolute; left: 0; top: 0; width: 120px; height: 94px;
  display: none; z-index: 5;
}
.mat-card.sel .mc-sel { display: block; }
.mat-card.sel { outline: 3px solid #242424; outline-offset: -3px; }
.mat-empty {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding-top: 120px; font-size: 28px; color: #3D3D3D;
}

/* 滚动条 x1080 y205 */
.mat-scroll { position: absolute; left: 1080px; top: 205px; width: 14px; height: 400px; background: #BCBCBC; }
.mat-scroll-thumb { position: absolute; left: 0; top: 0; width: 14px; height: 126px; background: #595959; }

/* 未选中装备时的「获取更多」（Figma frame 2：modal 内 x1249 y368） */
.mat-get-more {
  position: absolute; left: 1249px; top: 368px;
  display: flex; align-items: flex-end; gap: 11px; cursor: pointer;
  font-size: 17px; font-weight: 700; color: #000000;
}
.mat-get-more:hover { filter: brightness(1.3); }
.mgm-icon {
  width: 22px; height: 22px; background: #4D4D4D; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; line-height: 1;
}

/* 详情面板 x1173 y143 */
.mat-detail { position: absolute; left: 1173px; top: 143px; width: 287px; background: #717171; padding: 13px; }
.md-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; }
.md-icon { width: 72px; height: 72px; }
.md-name { font-size: 21px; font-weight: 700; color: #FFFFFF; margin-left: 11px; }
.md-q { font-size: 18px; font-weight: 700; color: #FFFFFF; margin-left: 0; }
.md-type { font-size: 18px; font-weight: 700; color: #FFFFFF; margin-left: 4px; }
.md-bind {
  position: absolute; right: 0; top: 47px; width: 24px;
  font-size: 20px; color: #000000; background: #FFFFFF; text-align: center;
}
.md-line { height: 1px; background: #000000; margin: 13px 0 13px; }
.md-body { display: flex; flex-direction: column; gap: 8px; }
.md-sec { font-size: 25px; color: #FFFFFF; margin: 4px 0 2px; }
.md-row { display: flex; justify-content: space-between; font-size: 20px; color: #FFFFFF; }
.md-row b { font-weight: 400; }

/* 底部 */
.mat-count { position: absolute; left: 703px; top: 668px; height: 38px; display: flex; align-items: center; gap: 11px; font-size: 24px; color: #3D3D3D; }
.mat-count b { font-size: 32px; font-weight: 400; color: #000000; }
.m-btn {
  position: absolute; width: 214px; height: 58px;
  background: #707070; color: #FFFFFF;
  font-size: 32px; letter-spacing: 0.41em; text-indent: 0.41em;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: filter .15s;
}
.modal.mat .m-btn { top: 731px; }
.modal.consume .m-btn { top: 422px; }
.modal.result .m-btn { top: 628px; }
.m-btn.dark { background: #3D3D3D; }
#btn-keep, #btn-save {
  width: 244px;
  font-size: 22px;
  letter-spacing: .05em;
  text-indent: 0;
}
.m-btn:hover { filter: brightness(1.15); }
.m-btn:active { filter: brightness(.9); }
.m-btn.disabled { background: #B9B9B9; color: #8A8A8A; cursor: pointer; filter: none; }
.m-btn.disabled:hover { filter: none; }

/* ============================================================
   消耗确认弹窗 875x511（x522 y252）
   ============================================================ */
.modal.consume { left: 522px; top: 252px; width: 875px; height: 511px; }
.c-title {
  position: absolute; left: 294px; top: 23px; width: 288px;
  font-family: Inter, "SF Pro", "PingFang SC", system-ui, sans-serif;
  font-size: 36px; font-weight: 700; color: #000000;
}
.c-sub {
  position: absolute; left: 212px; top: 91px; width: 80px;
  font-family: Inter, "SF Pro", "PingFang SC", system-ui, sans-serif;
  font-size: 20px; font-weight: 700; color: #000000;
}
.c-cards { position: absolute; left: 212px; top: 123px; display: flex; gap: 24px; }
.c-card { background: #505050; padding: 2px; display: flex; flex-direction: column; gap: 2px; }
.c-card .cc-icon { width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; position: relative; }
.c-card .cc-icon .mc-img { width: 90px; height: 90px; }
.c-card .cc-tag { height: 21px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #000; }
.c-gain { position: absolute; left: 252px; top: 320px; display: flex; align-items: center; gap: 11px; height: 38px; font-size: 24px; color: #3D3D3D; }
.c-gain b { font-size: 32px; font-weight: 400; color: #000000; }
.c-warn { position: absolute; left: 323px; top: 371px; display: flex; align-items: center; gap: 7px; font-size: 20px; color: #3D3D3D; }
.c-warn img { width: 22px; height: 22px; }

/* ============================================================
   洗练预览弹窗 1260x720（x330 y180）
   ============================================================ */
.modal.result { left: 330px; top: 180px; width: 1260px; height: 720px; }
.r-title {
  position: absolute; left: 550px; top: 33px; width: 160px;
  font-size: 40px; font-weight: 700; color: #272727; text-align: center;
}
.r-col { position: absolute; top: 109px; width: 427px; display: flex; flex-direction: column; gap: 18px; }
.r-col.old { left: 87px; }
.r-col.new { left: 746px; }
.r-head { display: flex; align-items: center; }
.r-head .rh-bar { width: 6px; height: 27px; flex: none; }
.r-head .rh-pill {
  background: #B9B9B9; padding: 4px 13px; height: 27px;
  display: flex; align-items: center; gap: 14px;
  font-size: 21px; font-weight: 700; color: #272727;
}
.r-head .rh-pill .plus { font-weight: 400; }
.r-head .rh-num { font-weight: 400; }
.r-row { position: relative; display: flex; align-items: center; background: #DFDFDF; }
.r-row .wr-bar { width: 6px; align-self: stretch; }
.r-row .wr-pill { height: 27px; padding: 4px 13px; gap: 14px; }
.r-row .wr-pill .name, .r-row .wr-pill .plus, .r-row .wr-pill .num { font-size: 21px; }
.r-row .wr-rec { width: 31px; height: 31px; font-size: 21px; top: -16px; right: -15px; }
.r-row .wr-arrow { right: -45px; top: 2px; }
.r-arrow { position: absolute; left: 584px; top: 287px; width: 92px; height: 92px; }
.r-new-tag {
  position: absolute; left: 734px; top: 94px; width: 24px;
  font-size: 24px; color: #000000;
}
.r-left {
  position: absolute; left: 851px; top: 585px; height: 38px;
  display: flex; align-items: center; gap: 11px;
  font-size: 24px; color: #3D3D3D;
}
.r-left b { font-size: 32px; font-weight: 400; color: #000000; }
.r-left b#result-lv { font-size: 24px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; top: 70px; transform: translateX(-50%);
  background: #333; color: #fff; font-size: 13px; padding: 8px 18px;
  border-radius: 20px; z-index: 99; opacity: 0; transition: opacity .25s;
  pointer-events: none; white-space: nowrap;
}
.toast.show { opacity: 1; }

/* ============================================================
   V2.0：推荐理由 hover 提示
   ============================================================ */
.mc-rec, .wr-rec { cursor: help; }
.rec-tip {
  display: none; position: absolute; bottom: calc(100% + 8px); right: -6px;
  width: 232px; background: #242424; color: #FFFFFF;
  font-size: 16px; font-weight: 400; line-height: 24px; text-align: left;
  padding: 10px 12px; z-index: 40; pointer-events: none;
}
.rec-tip::after {
  content: ""; position: absolute; top: 100%; right: 16px;
  border: 6px solid transparent; border-top-color: #242424;
}
.mc-rec:hover .rec-tip, .wr-rec:hover .rec-tip { display: block; }

/* ============================================================
   V2.0：材料获取跳转页（参考诛仙2 PC 端副本页：左列表 + 右详情）
   ============================================================ */
#screen-acquire, #screen-acquired { background: #FFFFFF; z-index: 10; }
/* 左侧渠道列 */
.acq-channels {
  position: absolute; left: 99px; top: 166px; width: 280px;
  display: flex; flex-direction: column; gap: 1px;
}
.acq-ch {
  height: 74px; display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #000000; background: #E9E9E9; cursor: pointer;
}
.acq-ch.on { background: #242424; color: #FFFFFF; }
/* 右侧详情面板 */
.acq-detail { position: absolute; left: 419px; top: 166px; width: 1221px; height: 683px; background: #D9D9D9; }
.acqd-name { position: absolute; left: 57px; top: 41px; font-size: 40px; font-weight: 700; color: #272727; }
.acqd-desc { position: absolute; left: 57px; top: 113px; font-size: 24px; color: #3D3D3D; }
.acqd-sec { position: absolute; left: 57px; top: 203px; font-size: 28px; font-weight: 700; color: #272727; }
.acqd-rewards { position: absolute; left: 57px; top: 259px; display: flex; gap: 12px; }
.acqd-rewards .pc-chip { background: #505050; }
.acqd-count { position: absolute; left: 57px; top: 420px; font-size: 24px; color: #3D3D3D; }
.acq-go-btn { left: 424px; top: 537px; }

/* 获取完成返回页 */
.acqd-panel {
  position: absolute; left: 700px; top: 240px; width: 520px; height: 420px;
  background: #D9D9D9;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
.acqd-title { font-size: 28px; font-weight: 700; color: #272727; }
.acqd-title b { font-weight: 700; }
.acqd-chips { display: flex; gap: 12px; }
.acqd-chips .pc-chip { background: #505050; }
.acqd-note { font-size: 20px; color: #3D3D3D; }
/* 获取完成页顶栏无返回键，标题组靠左 */
.acqd-topbar { justify-content: flex-start; }
.acqd-back-btn { left: 615px; top: 840px; }
.acqd-again { left: 853px; top: 840px; }
.acqd-ok { left: 1091px; top: 840px; }