/* ============================================================
   奥术飞升 · 样式
   深空奥术风：黑紫底 + 星辉蓝 + 薄边框 + 衬线字
   ============================================================ */
:root{
  --bg:#07070d;
  --card:rgba(255,255,255,.022);
  --line:#241f3a;
  --line2:#171425;
  --accent:#a9c6ff;
  --accent2:#b58cff;
  --text:#c8c5dc;
  --dim:#5b5a74;
  --bad:#c25c6d;
  --ok:#7fd6a8;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background-color:var(--bg);
  background-image:radial-gradient(120% 70% at 50% -10%, #16132b 0%, #0a0912 48%, #06060b 100%);
  color:var(--text);
  font-family:"Noto Serif CJK SC","Songti SC","STSong","SimSun",serif;
  font-size:15px;
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
}

#app{
  position:fixed; left:0; top:0; right:0; bottom:0;
  display:flex; flex-direction:column;
}

/* ---------------- 顶部 ---------------- */
#topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(10px + var(--sat)) 14px 2px; flex:none;
}
.tb-left{ display:flex; gap:8px; }
.sq{
  width:34px; height:34px; border:1px solid var(--line); background:transparent;
  color:var(--accent); font-family:inherit; font-size:15px; line-height:1; border-radius:2px;
}
.sq:active{ background:rgba(169,198,255,.12); }
.tb-right{ color:var(--dim); font-size:14px; letter-spacing:1px; }
.tb-right b{ color:var(--accent); font-weight:normal; margin-left:5px; }

/* ---------------- 页面 ---------------- */
.page{
  display:none; flex:1; position:relative; overflow-y:auto;
  padding:0 14px 24px; -webkit-overflow-scrolling:touch;
}
.page.active{ display:block; }
.page-title{
  text-align:center; font-weight:normal; font-size:19px; letter-spacing:7px;
  color:var(--accent); margin:14px 0 10px;
  text-shadow:0 0 14px rgba(150,180,255,.35);
}
.page-sub{
  text-align:center; color:var(--dim); font-size:13px;
  margin:0 0 14px; letter-spacing:1px;
}
.page-sub span{ color:var(--accent); }
.sub-title{
  font-weight:normal; font-size:15px; letter-spacing:4px;
  color:var(--accent); margin:20px 0 10px;
}
.tip-line{
  margin:18px 6px 0; font-size:12px; color:var(--dim);
  line-height:1.9; text-align:center;
}

/* ---------------- 冥想页 ---------------- */
#page-meditate{ padding-top:2px; }
.center-col{ display:flex; flex-direction:column; align-items:center; }
.rune{
  width:24px; height:24px; margin:18px 0 14px;
  border:1px solid #3a3550; transform:rotate(45deg); position:relative;
}
.rune:after{
  content:''; position:absolute; left:6px; top:6px; right:6px; bottom:6px;
  border:1px solid #2a2640;
}
.realm{
  font-size:26px; letter-spacing:6px; color:var(--accent);
  text-shadow:0 0 20px rgba(150,180,255,.45);
}
.meta{ margin-top:15px; font-size:13px; color:var(--dim); letter-spacing:1px; }
.layer{ margin-top:12px; font-size:15px; color:var(--bad); letter-spacing:2px; }
.big-num{ margin-top:12px; font-size:24px; letter-spacing:2px; color:var(--accent); }

.bar{
  width:100%; max-width:330px; height:3px; margin:14px 0 10px;
  background:#1b1830; overflow:hidden;
}
.bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,#7f8fd0,#c8b6ff);
}

.rates{ font-size:12.5px; color:var(--dim); text-align:center; }
.rates .dot{ margin:0 5px; }

.cast-btn{
  width:82%; max-width:340px; margin-top:16px; padding:40px 0;
  border:1px solid #3b3a6a; background-color:transparent; color:var(--accent);
  background-image:radial-gradient(60% 60% at 50% 50%, rgba(120,140,255,.10), rgba(0,0,0,0) 70%);
  font-family:inherit; font-size:30px; letter-spacing:6px;
  text-shadow:0 0 16px rgba(150,180,255,.5);
  touch-action:manipulation;
}
.cast-btn:active{
  border-color:#6f6bb0;
  background-image:radial-gradient(60% 60% at 50% 50%, rgba(160,180,255,.28), rgba(0,0,0,0) 70%);
}
.ring{
  display:inline-block; width:15px; height:15px; border:1px solid currentColor;
  border-radius:50%; vertical-align:middle; margin-right:14px; position:relative;
}
.ring:after{
  content:''; position:absolute; left:4px; top:4px; right:4px; bottom:4px;
  border-radius:50%; background:currentColor; opacity:.6;
}

.side-btns{
  position:absolute; right:0; top:4px;
  display:flex; flex-direction:column; gap:8px;
}
.sm-btn{
  width:86px; padding:9px 0; border:1px solid #2a2745; background:transparent;
  color:var(--dim); font-family:inherit; font-size:12.5px; letter-spacing:1px;
}
.sm-btn.ready{ color:var(--accent); border-color:#3d3a68; }
.sm-btn:active{ background:rgba(169,198,255,.1); }

/* ---------------- 批量购买 ---------------- */
.batch{ display:flex; gap:6px; justify-content:center; margin:0 0 12px; }
.bm{
  min-width:62px; padding:8px 0; border:1px solid var(--line2); background:transparent;
  color:var(--dim); font-family:inherit; font-size:13px; letter-spacing:1px;
}
.bm.on{ color:var(--accent); border-color:#4a4680; background:rgba(120,140,255,.08); }
.bm:active{ background:rgba(169,198,255,.12); }

/* ---------------- 天赋分组 ---------------- */
.grp{ border:1px solid var(--line2); background:rgba(255,255,255,.018); margin-bottom:10px; }
.grp-head{ display:flex; align-items:center; gap:8px; padding:13px 13px 11px; }
.grp-arrow{ width:11px; color:#6f6bb0; font-size:11px; transition:transform .18s ease; }
.grp.folded .grp-arrow{ transform:rotate(-90deg); }
.grp-name{ font-size:15px; color:var(--accent); letter-spacing:2px; flex:none; }
.grp-tag{ flex:1; font-size:10.5px; color:var(--dim); letter-spacing:1px; }
.grp-sum{ font-size:11.5px; color:var(--dim); letter-spacing:1px; }
.grp-dot{ width:9px; font-size:8px; color:var(--ok); text-align:right; text-shadow:0 0 8px rgba(127,214,168,.8); }
.grp-track{ height:2px; margin:0 13px; background:#1b1830; overflow:hidden; }
.grp-track i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#4e4a7c,#a9c6ff); transition:width .2s; }
.grp-body{ padding:11px 10px 3px; }
.grp.folded .grp-body{ display:none; }
.grp.folded .grp-track{ margin-bottom:13px; }

.up{
  display:flex; align-items:center; gap:10px; padding:10px 11px; margin-bottom:8px;
  border:1px solid #171425; background:rgba(255,255,255,.015);
}
.up.aff{ border-color:#3d3a68; background:rgba(120,140,255,.07); }
.up.maxed{ opacity:.5; }
.up-main{ flex:1; min-width:0; }
.up-name{ font-size:14px; color:var(--accent); letter-spacing:1px; }
.up-desc{ font-size:11.5px; color:var(--dim); margin-top:3px; line-height:1.45; }
.up-lv{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.up-track{ flex:1; height:3px; background:#1b1830; overflow:hidden; }
.up-track i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#7f8fd0,#c8b6ff); }
.up-lv span{ min-width:46px; text-align:right; font-size:11px; color:var(--dim); letter-spacing:.5px; }
.up-buy{ flex:none; }
.up-cost{
  display:block; min-width:92px; padding:9px 8px; text-align:center; font-size:12px;
  color:var(--accent); border:1px solid var(--line2); background:rgba(255,255,255,.03);
}
.up.aff .up-cost{ border-color:#4a4680; background:rgba(120,140,255,.14); text-shadow:0 0 10px rgba(150,180,255,.55); }
.up.off .up-cost{ color:#4a4760; border-color:#1d1a2c; }
.up:active{ background:rgba(169,198,255,.08); }

/* ---------------- 列表 ---------------- *//* ---------------- 列表 ---------------- */
.list{ display:flex; flex-direction:column; gap:8px; }

.row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--card); border:1px solid var(--line2); padding:11px 12px;
}
.row-main{ flex:1; min-width:0; }
.row-name{ font-size:14.5px; color:var(--accent); letter-spacing:1px; }
.row-desc{ font-size:12px; color:var(--dim); margin-top:5px; line-height:1.5; }
.row-price{
  border:1px solid var(--line2); background:rgba(255,255,255,.03);
  color:var(--accent); font-size:13px; padding:11px 8px;
  min-width:96px; text-align:center; flex:none;
}
.row-btn{
  border:1px solid #5a3a44; background:rgba(120,50,64,.16); color:#d98392;
  font-family:inherit; font-size:13.5px; padding:9px 14px; letter-spacing:2px;
  min-width:70px; flex:none;
}
.row-btn.enter{ border-color:#3d3a68; color:var(--accent); background:rgba(120,140,255,.07); }
.row-btn:active{ background:rgba(150,60,80,.3); }
.row-btn.enter:active{ background:rgba(140,170,255,.2); }
.row-btn[disabled]{ border-color:#2a2740; color:#575470; background:transparent; }

.row.off .row-price{ color:#4a4760; border-color:#1d1a2c; }
.row.off .row-btn{ border-color:#2a2740; color:#575470; background:transparent; }
.row.maxed .row-price{ color:#4a4760; border-color:#1d1a2c; }

.row-status{ font-size:12.5px; margin-top:5px; }
.row-reward{ font-size:11.5px; color:var(--accent2); margin-top:4px; letter-spacing:.5px; opacity:.85; }
.row-status.ok{ color:var(--bad); }
.row-status.bad{ color:#8a4550; }
.row-status.dim{ color:var(--dim); }
.row-name .dim{ color:var(--dim); font-size:12.5px; margin-left:6px; }
.row-status.done{ color:var(--ok); }
.trib-row{
  border-color:#3a3560;
  background-image:linear-gradient(180deg, rgba(120,140,255,.08), rgba(0,0,0,0));
}
.trib.go{ cursor:pointer; }

/* ---------------- 战斗 ---------------- */
.battle{
  border:1px solid #33305a; padding:12px; margin-bottom:10px;
  background-image:linear-gradient(180deg, rgba(120,140,255,.07), rgba(0,0,0,0));
}
.battle-top{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--accent); }
.bar.hp{ max-width:none; margin:11px 0; height:5px; }
.bar.hp i{ background:linear-gradient(90deg,#b05a6e,#e6aab3); }
.battle-foot{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--dim); }

/* ---------------- 升神页 ---------------- */
.kv{ text-align:center; font-size:14px; color:var(--accent); margin:9px 0; letter-spacing:1.5px; }
.hint{
  text-align:center; font-size:12.5px; color:var(--dim);
  line-height:1.95; margin:20px 8px 14px;
}
.trib{ text-align:center; font-size:15px; color:var(--bad); letter-spacing:2px; margin:6px 0 18px; }
.trib.done{ color:var(--ok); }
.mid-btn{
  display:block; width:70%; margin:0 auto 4px; padding:15px 0;
  border:1px solid #3b3a6a; background:transparent; color:var(--accent);
  font-family:inherit; font-size:17px; letter-spacing:6px;
}
.mid-btn[disabled]{ border-color:#221f36; color:#454260; }
/* 天劫按钮遮住升神按钮，打完天劫后自动隐去 */
.ascend-stack{ position:relative; }
.ascend-stack .mid-btn{ width:70%; margin:0 auto 4px; }
.trib-btn{
  position:absolute; left:15%; right:15%; top:0; bottom:0; width:auto; margin:0; z-index:2;
  border-color:#6a3a48; color:#d98392; background:rgba(120,50,64,.18);
}
.trib-btn[disabled]{ border-color:#2a2740; color:#575470; background:transparent; }
.mid-btn:not([disabled]):active{ background:rgba(169,198,255,.12); }

.mem-list{ display:flex; flex-direction:column; gap:11px; }
.mem-row{ display:flex; align-items:center; gap:10px; }
.mem-name{ width:104px; font-size:13px; color:#8a7fbd; letter-spacing:1px; flex:none; }
.mem-name.on{ color:var(--accent); }
.mem-bar{ flex:1; height:9px; background:#1a1728; overflow:hidden; }
.mem-bar i{ display:block; height:100%; background:linear-gradient(90deg,#4e4a7c,#8a7fbd); }
.mem-bar.on i{ background:linear-gradient(90deg,#8a7fd0,#d9cfff); }
.mem-need{ width:44px; text-align:right; font-size:11.5px; color:var(--dim); flex:none; }

/* ---------------- 底部导航（避让手势条） ---------------- */
#tabbar{
  display:flex; flex:none; border-top:1px solid #2a2440; background:#0a0912;
  padding-bottom:var(--sab);
}
.tab{
  flex:1; padding:14px 0 15px; border:0; border-left:1px solid #211d33;
  background:transparent; color:var(--dim);
  font-family:inherit; font-size:14px; letter-spacing:3px;
}
.tab:first-child{ border-left:0; }
.tab.active{ color:var(--accent); text-shadow:0 0 12px rgba(150,180,255,.5); }

/* ---------------- 弹窗 ---------------- */
.modal{
  position:fixed; left:0; top:0; right:0; bottom:0; z-index:50;
  background:rgba(4,4,8,.84);
  display:flex; align-items:center; justify-content:center;
  padding:calc(22px + var(--sat)) 22px calc(22px + var(--sab));
}
.modal-box{
  width:100%; max-width:342px; border:1px solid #33305a;
  background:#0c0b16; padding:18px 16px 14px;
}
.modal-title{
  text-align:center; font-size:15px; letter-spacing:4px;
  color:var(--accent); margin-bottom:12px;
}
.modal-body{ font-size:13px; line-height:1.95; color:var(--text); max-height:54vh; overflow-y:auto; }
.modal-body b{ color:var(--accent); font-weight:normal; }
.modal-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.modal-btns .mb{
  flex:1 1 40%; padding:11px 0; border:1px solid #2a2745; background:transparent;
  color:var(--text); font-family:inherit; font-size:14px; letter-spacing:2px;
}
.modal-btns .mb.primary{ color:var(--accent); border-color:#4a4680; }
.modal-btns .mb:active{ background:rgba(169,198,255,.12); }

/* 玩法引导 */
.gd-p{ font-size:12.5px; line-height:1.9; color:var(--text); margin-bottom:8px; }
.gd-dim{ color:var(--dim); font-size:11.5px; }
.gd-table{
  display:grid; grid-template-columns:1fr 1fr; column-gap:16px;
  margin:8px 0 10px; border-top:1px solid #171425;
}
.gd-row{
  display:flex; justify-content:space-between; padding:6px 0;
  border-bottom:1px solid #171425; font-size:12px; color:var(--dim);
}
.gd-row span:last-child{ color:var(--accent2); }
.gd-sub{ margin:14px 0 4px; font-size:12px; letter-spacing:2px; color:var(--accent2); }
.gd-eye{ padding:7px 0; border-bottom:1px solid #171425; font-size:12px; line-height:1.6; color:var(--dim); }
.gd-eye b{ color:var(--accent); font-weight:normal; margin-right:10px; letter-spacing:2px; }

.ach-row{
  font-size:13px; color:#5d5a78; padding:7px 0;
  border-bottom:1px solid #171425;
}
.ach-row.on{ color:var(--accent); }
.ach-desc{ display:block; font-size:11.5px; color:var(--dim); margin-top:3px; }

/* ---------------- 星位 ---------------- */
.star-ess{ float:right; font-size:10.5px; letter-spacing:1px; color:var(--dim); }
.star-box{ margin-top:2px; }
.star-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 12px; border:1px solid #2a2745; background:rgba(255,255,255,.02);
  font-size:13px; color:var(--text); letter-spacing:1px; cursor:pointer;
}
.star-head.off{ color:#4a4762; cursor:default; }
.star-head .star-arrow{ font-style:normal; color:#5b5a74; transition:transform .18s; }
.star-head.open .star-arrow{ transform:rotate(180deg); }
.star-body{ border:1px solid #2a2745; border-top:0; padding:12px; }
.star-status{ font-size:12px; color:var(--dim); margin-bottom:8px; }
.star-status b{ color:var(--accent); font-weight:normal; }
.star-status b.wound{ color:#e06a7a; }
.star-arts{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; font-size:11.5px; color:#5b5a74; }
.star-arts .art b{ color:var(--accent2); font-weight:normal; }
.seat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.seat-tile{
  border:1px solid #2a2745; padding:8px 4px; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; gap:2px; background:rgba(255,255,255,.01);
}
.seat-tile .st-name{ font-size:12px; letter-spacing:2px; color:#8a88a8; }
.seat-tile .st-grade{ font-size:9px; color:#4a4762; }
.seat-tile .st-cost{ font-size:9px; color:#4a4762; }
.seat-tile.ok{ border-color:#4a4680; }
.seat-tile.ok .st-name{ color:var(--accent); }
.seat-tile.done{ border-color:#6c5a2f; background:rgba(255,212,121,.06); }
.seat-tile.done .st-name{ color:#ffd479; }
.seat-tile.seen{ border-style:dashed; }
.star-forge{ display:flex; flex-direction:column; gap:5px; margin-top:12px; }
.star-btn{
  padding:9px 0; border:1px solid #3b3a6a; background:transparent;
  color:var(--accent); font-family:inherit; font-size:13px; letter-spacing:3px;
}
.star-btn[disabled]{ border-color:#221f36; color:#454260; }
.star-act{ display:flex; gap:8px; margin:0 0 10px; }
.star-btn.sbtn{ flex:1; padding:8px 0; font-size:12px; letter-spacing:2px; }
.star-tip{ font-size:10.5px; color:#4a4762; text-align:center; }
.sd-name{ font-size:15px; letter-spacing:3px; color:var(--accent); text-align:center; margin-bottom:8px; }
.sd-grade{ font-size:10px; color:var(--accent2); margin-left:8px; letter-spacing:1px; }
.sd-desc{ font-size:12.5px; color:var(--text); margin-bottom:10px; }
.sd-req{ border-top:1px solid #171425; margin-bottom:8px; }
.sd-req-row{
  display:flex; justify-content:space-between; padding:6px 2px;
  border-bottom:1px solid #171425; font-size:12px; color:var(--dim);
}
.sd-req-row .ok{ color:#7fd6a8; }
.sd-req-row .miss{ color:#e06a7a; }
.sd-meta{ font-size:12px; color:var(--accent2); margin:6px 0; }
.sd-note{ font-size:11px; color:#5b5a74; margin-top:6px; }
.forge-names{ display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.forge-name{
  padding:11px 8px; border:1px solid #3b3a6a; background:transparent;
  color:var(--accent); font-family:inherit; font-size:14px; letter-spacing:2px;
}
.forge-boon{
  display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; margin-bottom:8px;
  padding:10px; border:1px solid #2a2745; background:rgba(255,255,255,.02); color:var(--text);
  font-family:inherit;
}
.forge-boon b{ color:var(--accent); font-weight:normal; letter-spacing:2px; }
.forge-boon span{ font-size:11.5px; color:var(--dim); }

/* ---------------- 隐藏 GM 面板 ---------------- */
#gm-btn{
  position:fixed; right:8px; bottom:64px; z-index:80;
  padding:6px 10px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px;
  letter-spacing:1px; color:#ffd479; background:rgba(30,24,56,.95);
  border:1px solid #6c5a2f; border-radius:3px; opacity:.8;
}
#gm-btn:active{ background:rgba(60,48,90,.95); }
.gm-info{ font-size:11.5px; line-height:1.85; color:var(--dim); margin-bottom:10px; }
.gm-info b{ color:var(--accent); font-weight:normal; }
.gm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.gm-btn{
  padding:9px 4px; border:1px solid #2a2745; background:rgba(255,255,255,.02);
  color:var(--text); font-family:inherit; font-size:12px; letter-spacing:1px;
}
.gm-btn:active{ background:rgba(169,198,255,.12); }
.gm-tip{ margin-top:10px; font-size:10.5px; color:#4a4762; text-align:center; }

/* ---------------- 设置面板 ---------------- */
.set-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 2px; border-bottom:1px solid #171425; font-size:14px; color:var(--text);
}
.set-val{ color:var(--accent); font-size:13px; }
.tg{
  min-width:64px; padding:7px 14px; border:1px solid #2a2745; background:transparent;
  color:#5d5a78; font-family:inherit; font-size:13px; letter-spacing:2px;
}
.tg.on{ color:var(--accent); border-color:#4a4680; background:rgba(120,140,255,.10); }
.tg:active{ background:rgba(169,198,255,.14); }
.set-slider{ padding:12px 2px 4px; }
.set-slider input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px;
  background:linear-gradient(90deg,#7f8fd0,#c8b6ff); border-radius:2px; outline:none;
}
.set-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:#0c0b16; border:2px solid var(--accent); box-shadow:0 0 10px rgba(150,180,255,.6);
}
.set-tip{ margin-top:12px; font-size:11.5px; color:var(--dim); line-height:1.8; }
.path{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; line-height:1.7;
  color:var(--accent); word-break:break-all; margin-top:5px;
  border:1px solid var(--line2); background:rgba(255,255,255,.02); padding:8px 9px;
}
.save-area{
  width:100%; height:120px; margin-top:4px; padding:8px;
  background:#07070d; border:1px solid #2a2745; color:var(--text);
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; line-height:1.5;
  -webkit-user-select:text; user-select:text; resize:none;
}

/* ---------------- 星尘背景 ---------------- */
#app{ z-index:1; }
#stars{ position:fixed; left:0; top:0; right:0; bottom:0; z-index:0; pointer-events:none; overflow:hidden; }
#stars i{ position:absolute; left:0; top:0; width:1px; height:1px; border-radius:50%; animation:twinkle 5s ease-in-out infinite; }
#stars i:nth-child(1){ color:rgba(169,198,255,.55); animation-duration:5.2s; }
#stars i:nth-child(2){ color:rgba(181,140,255,.45); animation-duration:7.4s; animation-delay:-2.4s; }
#stars i:nth-child(3){ color:rgba(220,230,255,.38); animation-duration:4.3s; animation-delay:-1.1s; }
@keyframes twinkle{ 0%,100%{ opacity:.22; } 50%{ opacity:.92; } }

/* ---------------- 符阵 ---------------- */
.sigil{ position:relative; width:104px; height:104px; margin:6px 0 4px; display:flex; align-items:center; justify-content:center; }
.sigil .halo{ position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; border:1px solid rgba(120,140,255,.15); }
.sigil .halo:after{ content:''; position:absolute; left:8px; top:8px; right:8px; bottom:8px; border-radius:50%; border:1px dashed rgba(120,140,255,.13); animation:spin 44s linear infinite; }
.sigil .spin{ position:absolute; width:54px; height:54px; animation:spin 24s linear infinite; }
.sigil .spin i{ display:block; width:100%; height:100%; border:1px solid rgba(169,198,255,.22); transform:rotate(45deg); }
.sigil .spin.rev{ width:40px; height:40px; animation-duration:16s; animation-direction:reverse; }
.sigil .spin.rev i{ border-color:rgba(181,140,255,.20); }
.sigil .core{ position:absolute; width:26px; height:26px; border:1px solid #3a3550; transform:rotate(45deg); background-image:radial-gradient(circle, rgba(169,198,255,.16), rgba(0,0,0,0) 70%); }
.sigil .core:after{ content:''; position:absolute; left:6px; top:6px; right:6px; bottom:6px; border:1px solid #2a2640; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------------- 无尽天劫 ---------------- */
.endless{
  border:1px solid #3a3560; padding:12px; margin-bottom:10px;
  background-image:linear-gradient(180deg, rgba(181,140,255,.09), rgba(0,0,0,0));
}
.endless-top{ display:flex; justify-content:space-between; align-items:center; font-size:13.5px; color:var(--accent2); letter-spacing:1px; }
.endless-mid{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; }
.endless-mid span{ font-size:12px; color:var(--dim); flex:1; line-height:1.6; }
.endless-bonus{ font-size:11.5px; color:var(--dim); margin-top:9px; line-height:1.7; }

/* ---------------- 典籍弹窗 ---------------- */
.modal.wide .modal-box{ max-width:384px; }
.modal.wide .modal-body{ max-height:68vh; }
.sec-title{ font-size:12px; color:var(--accent2); letter-spacing:3px; margin:16px 0 8px; }

/* ---------------- 典籍 ---------------- *//* ---------------- 典籍 ---------------- */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.stat{ border:1px solid var(--line2); background:rgba(255,255,255,.018); padding:9px 10px; }
.stat-k{ display:block; font-size:11px; color:var(--dim); letter-spacing:1px; }
.stat-v{ display:block; font-size:13.5px; color:var(--accent); margin-top:4px; }
.dex-tag{
  flex:none; min-width:66px; text-align:center; font-size:12px; color:var(--accent);
  border:1px solid var(--line2); background:rgba(255,255,255,.03); padding:7px 9px;
}
.row.off .dex-tag{ color:#4a4760; border-color:#1d1a2c; }
.realm-map{ display:flex; flex-direction:column; gap:7px; }
.rm{ display:flex; align-items:center; gap:10px; border:1px solid var(--line2); background:rgba(255,255,255,.015); padding:9px 11px; }
.rm-name{ flex:1; font-size:13px; color:var(--dim); letter-spacing:2px; }
.rm-layers{ display:flex; gap:5px; }
.rm-layers i{ width:8px; height:8px; border:1px solid #2a2740; transform:rotate(45deg); }
.rm-layers i.on{ background:linear-gradient(135deg,#8a7fd0,#d9cfff); border-color:#8a7fd0; box-shadow:0 0 8px rgba(150,180,255,.55); }

/* ---------------- 归元 / 法则 ---------------- */
.src-box{
  border:1px solid #4a4680; padding:13px; margin-bottom:8px;
  background-image:linear-gradient(180deg, rgba(181,140,255,.10), rgba(0,0,0,0));
}
.src-top{ display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--accent2); letter-spacing:1px; }
.src-top span:last-child{ font-size:11.5px; color:var(--dim); letter-spacing:0; }
.src-info{ font-size:11.5px; color:var(--dim); line-height:1.85; margin:10px 0 12px; }
.src-box .mid-btn{ width:100%; }
.row.aff{ border-color:#3d3a68; background:rgba(120,140,255,.06); }
.row.aff .row-price{ border-color:#4a4680; color:var(--accent); text-shadow:0 0 10px rgba(150,180,255,.5); }
.up.part .up-cost{ border-color:#3d3a68; }
.up-cost b{ display:block; font-weight:normal; }
.up-cost em{ display:block; font-style:normal; font-size:10px; color:var(--dim); margin-top:3px; letter-spacing:0; }

/* ---------------- 动效 ---------------- *//* ---------------- 动效 ---------------- */
.page.active{ animation:pageIn .16s ease-out; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
.modal-box{ animation:popIn .18s ease-out; }
@keyframes popIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
.cast-btn .ring{ animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.lvfx{
  position:fixed; left:0; top:0; right:0; bottom:0; z-index:58; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  animation:lvFade 1.1s ease-out forwards;
}
.lvfx:before{
  content:''; position:absolute; left:50%; top:50%; width:36px; height:36px; margin:-18px 0 0 -18px;
  border-radius:50%; border:1px solid rgba(169,198,255,.85); animation:lvRing 1s ease-out forwards;
}
.lvfx span{
  position:relative; font-size:19px; letter-spacing:6px; color:#e2eaff;
  text-shadow:0 0 18px rgba(150,180,255,.9); animation:lvText 1.05s ease-out forwards;
}
@keyframes lvRing{ to{ width:340px; height:340px; margin:-170px 0 0 -170px; opacity:0; } }
@keyframes lvText{ 0%{ opacity:0; transform:scale(.82); } 22%{ opacity:1; transform:scale(1); } 78%{ opacity:1; } 100%{ opacity:0; transform:translateY(-18px); } }
@keyframes lvFade{ to{ opacity:0; } }

/* ---------------- 飘字 ---------------- *//* ---------------- 飘字 ---------------- */
.float{
  position:fixed; pointer-events:none; z-index:60;
  font-size:16px; color:var(--accent);
  text-shadow:0 0 10px rgba(150,180,255,.6);
  animation:floatUp .75s ease-out forwards;
  white-space:nowrap;
}
.float.crit{ color:#d3c0ff; font-size:19px; }
@keyframes floatUp{
  from{ opacity:1; transform:translate(-50%,0); }
  to{ opacity:0; transform:translate(-50%,-52px); }
}

.hidden{ display:none !important; }

/* ---------------- 冥想页紧凑布局（为下方新功能区腾位置） ---------------- */
.hdr{ display:flex; align-items:center; gap:10px; width:100%; margin:4px 0 0; }
.hdr-main{ flex:1; min-width:0; }
.buff-col{ display:flex; flex-direction:column; gap:6px; flex:none; }
.sigil.mini{ width:46px; height:46px; margin:0; flex:none; }
.sigil.mini .halo:after{ left:4px; top:4px; right:4px; bottom:4px; }
.sigil.mini .spin{ width:30px; height:30px; }
.sigil.mini .spin.rev{ width:22px; height:22px; }
.sigil.mini .core{ width:16px; height:16px; }
.sigil.mini .core:after{ left:4px; top:4px; right:4px; bottom:4px; }
#page-meditate .realm{ font-size:21px; letter-spacing:4px; }
#page-meditate .meta{ margin-top:4px; font-size:11.5px; letter-spacing:0; }
#page-meditate .layer{ margin-top:10px; font-size:13px; letter-spacing:1px; }
#page-meditate .big-num{ margin-top:6px; font-size:26px; }
#page-meditate .bar{ margin:10px 0 8px; }
#page-meditate .rates{ font-size:11.5px; }
#page-meditate .cast-btn{ margin-top:12px; padding:22px 0; font-size:24px; letter-spacing:5px; }
#page-meditate .tip-line{ margin-top:12px; font-size:11.5px; }
#page-meditate .sm-btn{ width:78px; padding:7px 0; font-size:11.5px; letter-spacing:0; }
.extra{ width:100%; display:flex; flex-direction:column; gap:8px; }
.offline-card{
  width:100%; border:1px solid #4a4680; padding:11px 12px;
  background-image:linear-gradient(180deg, rgba(181,140,255,.10), rgba(0,0,0,0));
  animation:popIn .18s ease-out;
}
.oc-title{ font-size:12px; color:var(--accent2); letter-spacing:1px; }
.oc-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--dim); margin-top:6px; }
.oc-row b{ color:var(--accent); font-weight:normal; }
.oc-tap{ margin-top:9px; text-align:center; font-size:11px; color:var(--dim); letter-spacing:2px; }

/* ---------------- 嬗变 · 长明灯 ---------------- */
.lamp-box{
  width:100%; border:1px solid #2a2745; padding:12px 12px 14px;
  background-image:linear-gradient(180deg, rgba(181,140,255,.07), rgba(0,0,0,0));
}
.lamp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.lamp-title{ font-size:12px; letter-spacing:3px; color:var(--accent2); }
.lamp-guide{
  padding:3px 9px; border:1px solid #2a2745; background:transparent; color:var(--dim);
  font-family:inherit; font-size:10.5px; letter-spacing:2px;
}
.lamp-guide:active{ background:rgba(169,198,255,.12); color:var(--accent); }

.al-slot{
  width:100%; box-sizing:border-box; border:1px dashed #3a3550; padding:11px; text-align:center;
  font-size:12.5px; color:var(--dim); letter-spacing:1px; margin-top:10px;
}
.al-slot.on{ border-style:solid; }
.al-slot.q-w{ border-color:#3a3550; color:#c8c5dc; }
.al-slot.q-g{ border-color:#2f5c46; color:#7fd6a8; }
.al-slot.q-b{ border-color:#2f4a6c; color:#7fb8ff; }
.al-slot.q-p{ border-color:#4a3a6c; color:#b58cff; }
.al-slot.q-y{ border-color:#6c5a2f; color:#ffd479; }
.al-slot.q-r{ border-color:#6c3038; color:#e06a7a; }
.al-btn{
  width:100%; box-sizing:border-box; margin-top:8px; padding:12px 0;
  border:1px solid #3b3a6a; background:transparent;
  color:var(--accent); font-family:inherit; font-size:15px; letter-spacing:5px;
}
.al-btn[disabled]{ border-color:#221f36; color:#454260; }
.al-btn:not([disabled]):active{ background:rgba(169,198,255,.12); }
.al-hint{ margin-top:9px; font-size:11px; color:var(--accent2); text-align:center; letter-spacing:.5px; min-height:15px; }
.al-fate{ display:block; margin-top:3px; color:#5b5a74; }

/* 临时槽：只有复刻留下东西时才出现 */
.al-temp{ display:none; margin-top:8px; padding:9px 8px; text-align:center; cursor:pointer;
  border:1px dashed #4a4762; background:rgba(255,255,255,.02);
  font-size:12px; letter-spacing:1px; color:#8a88a8; }
.al-temp.show{ display:block; }
.al-temp.q-w{ border-color:#3a3550; color:#c8c5dc; }
.al-temp.q-g{ border-color:#2f5c46; color:#7fd6a8; }
.al-temp.q-b{ border-color:#2f4a6c; color:#7fb8ff; }
.al-temp.q-p{ border-color:#4a3a6c; color:#b58cff; }
.al-temp.q-y{ border-color:#6c5a2f; color:#ffd479; }
.al-temp.q-r{ border-color:#6c3038; color:#e06a7a; }

.lamps{ width:100%; display:flex; gap:8px; }
.lamp{
  flex:1; border:1px solid #2a2745; background:rgba(255,255,255,.02);
  padding:9px 2px 7px; display:flex; flex-direction:column; align-items:center; gap:5px;
  cursor:pointer;
}
.lamp-name{ font-size:11px; letter-spacing:2px; color:#5d5a78; line-height:1.2; }
.lamp .pips{ font-size:12px; letter-spacing:1px; color:#3a3550; line-height:1.2; }
.lamp.on{ border-color:#4a4680; background:rgba(120,140,255,.10); box-shadow:0 0 12px rgba(150,180,255,.10); }
.lamp.on .lamp-name{ color:var(--accent); }
.lamp.on .pips{ color:#b58cff; text-shadow:0 0 8px rgba(181,140,255,.55); }
.lamp.out{ border-style:dashed; opacity:.55; }
.lamp.out .lamp-name{ color:#47435f; }
.lamp.out .pips{ color:#2a2740; text-shadow:none; }

/* 嬗变记录 */
.al-stat{ float:right; font-size:10.5px; letter-spacing:1px; color:var(--dim); }
.al-log{ display:flex; flex-direction:column; }
.al-log .lrow{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:8px 2px; border-bottom:1px solid #171425; font-size:12px; color:var(--dim);
}
.al-log .lmain{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-log .llamp{ color:#6f6b8c; font-style:normal; letter-spacing:1px; }
.al-log .lres{ letter-spacing:1px; }
.al-log .lres.ok{ color:var(--accent); }
.al-log .lres.bad{ color:#e06a7a; }
.al-log .lres.warn{ color:#ffd479; }
.al-log .ldim{ color:#4a4762; }
.al-log .ltime{ flex:none; font-size:10px; color:#3f3b57; letter-spacing:0; }
.al-empty{ padding:14px 2px; text-align:center; font-size:11.5px; color:#4a4762; letter-spacing:1px; }
.al-more{ padding:9px 2px 2px; text-align:center; font-size:10.5px; color:#3f3b57; letter-spacing:1px; }

/* ---------------- 交易行品质配色 ---------------- *//* ---------------- 交易行品质配色 ---------------- */
.row.q-w .row-name{ color:#c8c5dc; }
.row.q-g .row-name{ color:#7fd6a8; }
.row.q-b .row-name{ color:#7fb8ff; }
.row.q-p .row-name{ color:#b58cff; }
.row.q-y .row-name{ color:#ffd479; }
.row.q-r .row-name{ color:#e06a7a; }
.row.q-p{ border-color:#3a2f56; }
.row.q-y{ border-color:#4a3d20; }
.row.q-r{ border-color:#4a2228; }
.row.ti .row-price{ min-width:104px; }

/* ---------------- 藏品囊 ---------------- *//* ---------------- 藏品囊 ---------------- */
.bag-info{ text-align:center; font-size:12px; color:var(--dim); letter-spacing:1px; margin-bottom:10px; }
.bag-info b{ color:var(--accent); font-weight:normal; }
.bag-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.slot{
  border:1px solid var(--line2); background:rgba(255,255,255,.02);
  padding:8px 9px; min-height:62px; display:flex; flex-direction:column; justify-content:space-between;
}
.slot span{ font-size:12px; line-height:1.35; word-break:break-all; }
.slot em{ font-style:normal; font-size:10px; color:var(--dim); margin-top:5px; letter-spacing:1px; }
.slot.empty{ align-items:center; justify-content:center; border-style:dashed; color:#3a3550; font-size:11px; }
.slot.empty span{ font-size:11px; }
.q-w{ border-color:#3a3550; } .q-w span{ color:#c8c5dc; }
.q-g{ border-color:#2f5c46; } .q-g span{ color:#7fd6a8; }
.q-b{ border-color:#2f4a6c; } .q-b span{ color:#7fb8ff; }
.q-p{ border-color:#4a3a6c; } .q-p span{ color:#b58cff; }
.q-y{ border-color:#6c5a2f; } .q-y span{ color:#ffd479; }
.q-r{ border-color:#6c3038; } .q-r span{ color:#e06a7a; }

/* 弹窗默认不显示：只有 showModal 写入内容并加上 live 才会出现 *//* 弹窗默认不显示：只有 showModal 写入内容并加上 live 才会出现 */
#modal{ display:none !important; }
#modal.live{ display:flex !important; }