/* ===== 谁是最富宝宝 · 国风主题（明暗 + 多色可切换） ===== */
:root{
  --bg:#0f0d0a;
  --bg2:#17130d;
  --panel:#1c1710;
  --panel2:#221b12;
  --line:#3a3122;
  --text:#e9e0cc;
  --dim:#948a74;
  --ink:#0b0a08;
  --gold:#d9b370;
  --gold-strong:#e8c986;
  --red:#c0392b;
  --red-soft:#e05a45;
  --gold-soft:rgba(217,179,112,.16);
  --gold-glow:rgba(232,201,134,.38);
  --gold-faint:rgba(217,179,112,.08);
  --cell-bg:rgba(255,255,255,.025);
  --cell-line:rgba(255,255,255,.03);
  --cell-text:#d8cfba;
  --log-dice:#9dc0e8;
  --log-buy:#e8b93c;
  --log-rent:#e08a7a;
  --log-gain:#7fd0b4;
  --log-lose:#e08a7a;
  --log-skill:#c9a0e0;
  --log-event:#d9a8a0;
  --log-win:#e8c986;
  --log-sys:#948a74;
  --fac-wei:#8ab5e8;
  --fac-shu:#e89282;
  --fac-wu:#7fd0b4;
  --fac-qun:#e8c986;
  --toast-bg:rgba(20,16,10,.95);
  --tier-chip-bg:rgba(255,255,255,.06);
  --shadow:rgba(0,0,0,.35);
  --serif:"STKaiti","KaiTi","Kaiti SC","FZKai-Z03S","Noto Serif SC","Songti SC","SimSun",serif;
  --lishu:"STLiti","LiSu","Baoli SC","隶书","STKaiti","KaiTi",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

/* 浅色主题 */
html[data-theme="light"]{
  --bg:#f2ecdf;
  --bg2:#e9e0cc;
  --panel:#fdf9f0;
  --panel2:#f7f1e3;
  --line:#d8cdb4;
  --text:#3a3226;
  --dim:#8a7d64;
  --ink:#1a1408;
  --red:#c0392b;
  --red-soft:#d94b34;
  --cell-bg:rgba(0,0,0,.035);
  --cell-line:rgba(0,0,0,.06);
  --cell-text:#4a4132;
  --log-dice:#3a6ea5;
  --log-buy:#a3741a;
  --log-rent:#b04a3a;
  --log-gain:#2e7d63;
  --log-lose:#b04a3a;
  --log-skill:#7a5aa0;
  --log-event:#b06050;
  --log-win:#a3741a;
  --log-sys:#8a7d64;
  --fac-wei:#3a6ea5;
  --fac-shu:#b04a3a;
  --fac-wu:#2e7d63;
  --fac-qun:#a3741a;
  --toast-bg:rgba(255,252,244,.97);
  --tier-chip-bg:rgba(0,0,0,.06);
  --shadow:rgba(120,100,60,.18);
}

/* 主题色（多色切换，只替换金色系强调色） */
html[data-accent="gold"]{ --gold:#d9b370; --gold-strong:#e8c986; --gold-soft:rgba(217,179,112,.16); --gold-glow:rgba(232,201,134,.38); --gold-faint:rgba(217,179,112,.08); }
html[data-accent="cinnabar"]{ --gold:#cf5b47; --gold-strong:#e07a63; --gold-soft:rgba(207,91,71,.16); --gold-glow:rgba(224,122,99,.38); --gold-faint:rgba(207,91,71,.08); }
html[data-accent="jade"]{ --gold:#5fdcc2; --gold-strong:#8df0dc; --gold-soft:rgba(79,214,188,.18); --gold-glow:rgba(141,240,220,.42); --gold-faint:rgba(79,214,188,.09); }
html[data-accent="blue"]{ --gold:#79b4fb; --gold-strong:#a6cdff; --gold-soft:rgba(111,173,249,.18); --gold-glow:rgba(166,205,255,.42); --gold-faint:rgba(111,173,249,.09); }
html[data-accent="violet"]{ --gold:#b197fa; --gold-strong:#cab3ff; --gold-soft:rgba(169,140,249,.18); --gold-glow:rgba(202,179,255,.42); --gold-faint:rgba(169,140,249,.09); }

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--gold-faint), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
}
#app{max-width:1320px;margin:0 auto;padding:0 16px 40px;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--gold-strong);cursor:pointer}

/* ===== 顶栏 ===== */
.topbar{display:none;align-items:center;justify-content:space-between;padding:14px 2px 12px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:nowrap;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:24px;font-weight:700;color:var(--ink);
  background:linear-gradient(135deg,var(--gold-strong),var(--gold));box-shadow:0 4px 16px var(--gold-glow);
}
.brand-text h1{font-family:var(--serif);font-size:24px;letter-spacing:2px;color:var(--gold-strong)}
.top-right{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);flex-wrap:wrap}
.icon-btn{padding:7px 12px;font-size:15px}

/* ===== 通用 ===== */
.gold{color:var(--gold-strong)}
.dim{color:var(--dim)}
.hint{font-size:12px;margin-top:12px;line-height:1.6}
.view{display:none;flex:1}
.view.active{display:block}
.panel{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:14px;padding:18px;
  box-shadow:0 6px 24px var(--shadow);
}
.panel-title{font-family:var(--serif);font-size:16px;color:var(--gold);margin-bottom:14px;letter-spacing:1px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pt-dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.group-label{font-size:12px;color:var(--dim);letter-spacing:1px;margin:14px 0 8px}
.field{margin-bottom:14px}
.field label{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--dim);margin-bottom:7px;letter-spacing:1px}
.field label em{font-style:normal;font-size:10.5px;letter-spacing:0;color:var(--dim);opacity:.72}
input[type=text],input[type=password]{
  width:100%;padding:12px 14px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-size:15px;outline:none;transition:.2s;
}
input.input-code{text-align:center;font-family:var(--serif);font-size:19px;letter-spacing:.34em;padding-left:calc(14px + .34em)}
input[type=text]:focus,input[type=password]:focus{border-color:var(--gold)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel2);color:var(--text);
  padding:12px 18px;border-radius:10px;font-size:15px;transition:.15s;font-family:var(--sans);
}
.btn:hover{border-color:var(--gold);color:var(--gold-strong)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--gold-strong),var(--gold));border-color:transparent;color:var(--ink);font-weight:700}
.btn-primary:hover{filter:brightness(1.06);color:var(--ink)}
.btn-full{width:100%;margin-top:6px}
.btn-mini{padding:7px 14px;font-size:13px;border-radius:8px}
.btn-gold{background:linear-gradient(135deg,var(--gold-strong),var(--gold));border-color:transparent;color:var(--ink);font-weight:700}
.btn-danger{border-color:#7a2a20;color:#e08a7a}
.btn-danger:hover{border-color:var(--red);color:var(--red-soft)}

/* ===== 登录 ===== */
.login-wrap{display:flex;align-items:center;justify-content:center;padding:40px 0 20px}
.login-card{
  width:100%;max-width:400px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:18px;padding:34px 30px;text-align:center;
  box-shadow:0 12px 40px var(--shadow);
}
.login-mark{width:56px;height:56px;font-size:30px;margin:0 auto 14px;border-radius:14px}
.login-title{font-family:var(--serif);font-size:24px;color:var(--gold-strong);letter-spacing:3px;margin-bottom:22px}
.login-card .field{text-align:left}
.login-switch{font-size:13px;color:var(--dim);margin-top:16px}
.login-switch a{font-weight:600}

/* ===== 首页：入席 ===== */
.home-hero{max-width:1040px;margin:2px auto 18px;padding:2px 0 2px 14px;border-left:3px solid var(--gold)}
.hh-copy h2{font-family:var(--serif);font-size:22px;line-height:1.2;letter-spacing:.18em;color:var(--text)}
.hh-copy p{margin-top:6px;font-size:11.5px;letter-spacing:.2em;color:var(--dim)}

.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:1040px;margin:0 auto 12px}
.mode-tab{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);
  cursor:pointer;text-align:left;transition:.16s;overflow:hidden;font-family:var(--sans);
}
.mode-tab b{font-family:var(--serif);font-size:15.5px;font-weight:700;letter-spacing:.1em;color:var(--text)}
.mode-tab:hover{border-color:var(--gold)}
.mode-tab.on{background:linear-gradient(180deg,var(--gold-faint),transparent 78%);border-color:var(--gold)}
.mode-tab.on b{color:var(--gold-strong)}
.mode-tab.on::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--gold)}

/* 幸运色：色卡一行，圆点 + 名称，选中带描边环与勾 */
.lucky-card{
  max-width:1040px;margin:0 auto 18px;padding:15px 18px 16px;
  display:flex;align-items:center;gap:26px;
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:0 8px 26px var(--shadow);
}
.solo-panel{max-width:1040px;margin:0 auto}
.solo-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.solo-grid .span2{grid-column:1/-1}
.solo-panel #btn-solo-start{display:block;width:100%;max-width:340px;margin:6px auto 2px}
.home-grid{display:grid;grid-template-columns:1.18fr 1fr;gap:16px;max-width:1040px;margin:0 auto;align-items:stretch}
@media(max-width:820px){.home-grid{grid-template-columns:1fr}}
.lucky-head{flex:none;display:flex;flex-direction:column;gap:7px;min-width:150px}
.lucky-title{font-family:var(--serif);font-size:15px;letter-spacing:.14em;color:var(--text)}
.lucky-title::before{content:"◆";color:var(--gold);font-size:8px;margin-right:8px;vertical-align:2px}
.lucky-sub{font-size:11px;letter-spacing:.04em;color:var(--dim);padding-left:16px}
.lucky-picked{
  margin-left:16px;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:3px 10px 3px 6px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);
  font-size:11px;letter-spacing:.08em;color:var(--dim);
}
.lucky-picked i{width:9px;height:9px;border-radius:50%;background:var(--lc,var(--gold));box-shadow:0 0 0 2px var(--lc-soft,rgba(0,0,0,.06))}
.lucky-picked em{font-style:normal;color:var(--text);font-weight:600}
.color-row{flex:1;min-width:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.lc-item{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:10px 2px 9px;border:0;border-radius:13px;background:transparent;cursor:pointer;
  transition:background .18s,transform .18s;font-family:var(--sans);
}
.lc-item:hover{background:var(--bg2)}
.lc-item:active{transform:scale(.95)}
.lc-dot{
  position:relative;width:32px;height:32px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%,rgba(255,255,255,.66),rgba(255,255,255,0) 60%),
    var(--lc);
  box-shadow:0 6px 15px -7px var(--lc),inset 0 0 0 1px rgba(0,0,0,.05);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s;
}
.lc-dot i{display:none}
.lc-item:hover .lc-dot{transform:translateY(-1px) scale(1.06)}
.lc-item.on{background:var(--lc-soft)}
.lc-item.on .lc-dot{transform:scale(1.04);box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--lc),0 8px 18px -8px var(--lc)}
.lc-item.on .lc-dot::after{
  content:"";position:absolute;left:50%;top:46%;width:9px;height:5px;
  border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;
  transform:translate(-50%,-50%) rotate(-45deg);filter:drop-shadow(0 1px 1px rgba(0,0,0,.28));
}
.lc-name{font-size:11px;letter-spacing:.06em;color:var(--dim);white-space:nowrap;transition:color .18s}
.lc-item:hover .lc-name{color:var(--text)}
.lc-item.on .lc-name{color:var(--text);font-weight:700}

@media(max-width:640px){
  .home-hero{margin-bottom:14px}
  .hh-copy h2{font-size:19px}
  .hh-copy p{font-size:10.5px;letter-spacing:.12em}
  .mode-switch{gap:8px}
  .mode-tab{padding:11px 12px}
  .mode-tab b{font-size:14px}
  .mode-tab i{font-size:10.5px}
  .solo-grid{grid-template-columns:1fr;gap:0}
  .solo-grid .span2{grid-column:auto}
  .solo-panel #btn-solo-start{max-width:none;width:100%}
  .lucky-card{flex-direction:column;align-items:stretch;gap:10px;padding:13px 12px 11px}
  .lucky-head{min-width:0;gap:5px}
  .lucky-sub{padding-left:0}
  .lucky-picked{margin-left:0;align-self:flex-start;padding:2px 9px 2px 6px}
  .color-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:4px}
  .lc-item{padding:7px 1px 6px;gap:6px;border-radius:11px}
  .lc-dot{width:25px;height:25px}
  .lc-name{font-size:10px}
}

.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:8px 14px;border:1px solid var(--line);border-radius:20px;cursor:pointer;
  font-size:13px;color:var(--dim);background:var(--bg2);transition:.15s;user-select:none;
}
.chip:hover{border-color:var(--gold)}
.chip.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-strong)}

/* ===== 大厅 ===== */
.lobby-top{display:flex;align-items:center;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.roomcode-card{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 16px}
.roomcode{font-family:var(--serif);font-size:26px;letter-spacing:.3em;color:var(--gold-strong)}
.lobby-status{font-size:13px;color:var(--dim)}
.lobby-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:20px}
.lobby-grid.single{grid-template-columns:minmax(0,1fr);max-width:680px}
@media(max-width:860px){.lobby-grid{grid-template-columns:1fr}}
.lobby-players{display:flex;flex-direction:column;gap:10px}
/* ===== 7.47 等待房间席位卡 ===== */
.lp-item{
  display:flex;align-items:center;gap:10px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--panel2),var(--bg2));
  border:1px solid var(--line);border-radius:12px;padding:9px 11px 9px 13px;
}
.lp-item:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pc);opacity:.9;
}
.lp-item.is-ready{border-color:rgba(127,208,180,.34);background:linear-gradient(180deg,rgba(127,208,180,.09),var(--panel2) 66%)}
.lp-ava{
  position:relative;flex:none;width:42px;height:42px;border-radius:11px;overflow:hidden;
  display:grid;place-items:center;background:var(--pc);color:var(--pc-ink,#fff);
  font-family:var(--serif);font-weight:700;font-size:17px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 1px 4px rgba(0,0,0,.16);
}
.lp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.lp-r1{display:flex;align-items:center;gap:6px;min-width:0}
.lp-r2{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.lp-name{
  font-weight:600;font-size:13px;color:var(--text);max-width:112px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lp-char{font-size:11px;color:var(--dim);white-space:nowrap}
.lp-skin{
  display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--gold);
  border:1px solid rgba(217,179,112,.36);border-radius:5px;padding:1px 5px;
  background:var(--gold-faint);white-space:nowrap;
}
.lp-skin i{font-style:normal;font-size:9px;opacity:.72;letter-spacing:.3px}
.lp-skin.is-def{color:var(--dim);border-color:var(--line);background:var(--cell-bg)}
.lp-state{
  margin-left:auto;flex:none;font-size:10px;padding:2px 8px;border-radius:999px;letter-spacing:.5px;
}
.lp-state.on{color:var(--log-gain);border:1px solid rgba(127,208,180,.42);background:rgba(127,208,180,.12)}
.lp-state.off{color:var(--dim);border:1px solid var(--line);background:var(--cell-bg)}
.lp-fig{
  flex:none;width:44px;height:54px;border-radius:9px;overflow:hidden;position:relative;
  background:radial-gradient(circle at 50% 26%,rgba(217,179,112,.18),rgba(0,0,0,0) 72%),var(--bg2);
  border:1px solid var(--line);display:flex;align-items:flex-end;justify-content:center;
}
.lp-fig img{height:100%;width:auto;max-width:none;display:block}
.lp-fig svg.fig{width:100%;height:100%;display:block;overflow:visible}
.lp-fig.q-R{border-color:rgba(100,145,195,.55)}
.lp-fig.q-SR{border-color:rgba(155,105,205,.6);box-shadow:0 0 8px rgba(160,110,215,.22)}
.lp-fig.q-SSR{border-color:rgba(200,158,60,.72);box-shadow:0 0 9px rgba(215,175,80,.34)}
.lp-fig.q-UR{
  background:linear-gradient(165deg,rgba(217,179,112,.18),rgba(176,138,208,.16)),var(--bg2);
  border-color:rgba(217,179,112,.7);
}
.lp-bot,.lp-tag{margin-left:0}
.rules-view{font-size:13px;line-height:1.9}
.lobby-foot{display:flex;justify-content:space-between;margin-top:18px;gap:12px;flex-wrap:wrap}

/* 角色卡 */
.char-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.char-card{
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;transition:.15s;
}
.char-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.char-card.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 6px 20px var(--gold-glow)}
.char-card.locked{opacity:.5;cursor:not-allowed}
.char-name{font-family:var(--serif);font-size:18px;color:var(--gold-strong)}
.char-title{font-size:11px;color:var(--dim);margin:2px 0 8px}
.char-faction{font-size:11px;padding:2px 8px;border-radius:8px;display:inline-block;margin-bottom:8px}
.fac-魏{background:rgba(77,132,196,.2);color:var(--fac-wei)}
.fac-蜀{background:rgba(192,57,43,.2);color:var(--fac-shu)}
.fac-吴{background:rgba(74,163,138,.2);color:var(--fac-wu)}
.fac-群{background:rgba(217,179,112,.2);color:var(--fac-qun)}
.char-skill{font-size:12px;line-height:1.5;color:var(--text)}
.char-skill b{color:var(--gold)}
.char-skill span{color:var(--dim)}

/* ===== 对局 · 绢本行军图 ===== */
.game-wrap{display:flex;flex-direction:column;gap:12px;position:relative}
/* 房号 / 玩家资产 / 最新动态：下滑时吸附页面顶端 */
.game-sticky{
  position:sticky;top:0;z-index:34;display:flex;flex-direction:column;gap:9px;
  padding:10px 0 11px;margin:-10px 0 -3px;
  background:var(--bg);
  border-bottom:1px solid transparent;border-radius:0 0 14px 14px;
  transition:box-shadow .22s,border-color .22s;
}
.game-sticky.stuck{border-bottom-color:var(--line);box-shadow:0 16px 24px -22px rgba(0,0,0,.55)}
.game-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gh-room{font-size:13px;color:var(--dim)}
.gh-room b{color:var(--gold-strong);font-family:var(--serif);font-size:16px;letter-spacing:.15em}

/* 玩家条：当前回合、行动与银两变化都有独立状态 */
.players-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ps-item{
  position:relative;display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:8px 10px;font-size:13px;min-width:0;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.ps-item.turn{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold),0 4px 18px var(--gold-faint)}
/* 角标悬在卡片上沿之外，父级不能再裁切 */
.ps-item.turn::after{
  content:"回合";position:absolute;right:8px;top:-8px;padding:0 7px;border-radius:7px;
  background:var(--gold);color:var(--ink);font-size:9px;line-height:15px;letter-spacing:.08em;
  font-weight:700;white-space:nowrap;box-shadow:0 3px 8px -3px rgba(0,0,0,.5);
}
.ps-item.acting{animation:playerAct .7s ease-in-out}
.ps-item.dead{opacity:.38;filter:grayscale(.7)}
.ps-avatar{position:relative;width:27px;height:27px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--pc);color:#fff;font-family:var(--serif);font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.ps-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.ps-line1{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden}
.ps-line2{display:flex;align-items:center;gap:3px;min-width:0;overflow:hidden}
.ps-line2:empty{display:none}
.ps-name{flex:0 1 auto;font-weight:600;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:0}
.ps-char{flex:none;font-size:11px;color:var(--dim);white-space:nowrap}
.ps-bot{flex:none;font-size:9px;line-height:13px;color:var(--dim);border:1px solid var(--line);padding:0 4px;border-radius:5px;white-space:nowrap}
.ps-item-tag{font-style:normal;flex:none;font-size:9px;line-height:12px;padding:0 4px;border-radius:4px;white-space:nowrap}

.ps-item-tag.atk{color:var(--red-soft);border:1px solid var(--red-soft);background:rgba(224,90,69,.12)}
.ps-item-tag.def{color:var(--gold);border:1px solid var(--gold);background:var(--gold-faint)}
.ps-item-tag.jail{color:#b06a5b;border:1px solid currentColor;background:rgba(176,106,91,.12)}
.ps-gold{margin-left:auto;flex:0 0 auto;padding-left:8px;color:var(--gold-strong);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ps-lap{font-size:10px;color:var(--dim);margin-left:2px;white-space:nowrap}
.ps-item.gold-gain{border-color:#4aa38a;transform:translateY(-2px)}
.ps-item.gold-loss{border-color:var(--red-soft);animation:cardLoss .25s linear}
.gold-delta{position:absolute;right:10px;top:50%;z-index:9;font-family:var(--lishu);font-weight:700;font-size:15px;line-height:1;letter-spacing:.04em;pointer-events:none;transform:translateY(-50%);animation:goldFloat 1.05s ease-out forwards;text-shadow:0 1px 4px var(--bg),0 0 2px var(--bg)}
.gold-delta.plus{color:#a8801f}.gold-delta.minus{color:#c0452f}
@keyframes playerAct{0%,100%{transform:translateX(0)}35%{transform:translateX(3px)}70%{transform:translateX(-2px)}}
@keyframes cardLoss{0%,100%{transform:translateX(0)}33%{transform:translateX(-3px)}66%{transform:translateX(3px)}}
@keyframes goldFloat{
  0%{opacity:0;transform:translateY(calc(-50% + 7px))}
  22%{opacity:1;transform:translateY(calc(-50% + 1px))}
  100%{opacity:0;transform:translateY(calc(-50% - 17px))}
}

/* 棋盘：路线、序号、归属旗帜，信息不只靠颜色区分 */
.board-frame{
  position:relative;border:1px solid var(--line);border-radius:18px;padding:14px 14px 168px;
  overflow:auto;max-height:none;
  background:
    linear-gradient(rgba(217,179,112,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(217,179,112,.025) 1px,transparent 1px),
    radial-gradient(ellipse at 50% 20%,var(--panel2),var(--panel));
  background-size:28px 28px,28px 28px,auto;
  box-shadow:inset 0 0 52px rgba(0,0,0,.22),0 12px 32px var(--shadow);
}
#board{display:grid;gap:10px;margin:0 auto;max-width:1080px;position:relative;isolation:isolate}
.cell{
  position:relative;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:11px;color:var(--cell-text);text-align:center;line-height:1.15;padding:9px 4px 19px;cursor:pointer;
  background:var(--cell-bg);border:1px solid var(--cell-line);aspect-ratio:1/1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 5px rgba(0,0,0,.12);
  transition:transform .16s,filter .16s,box-shadow .16s;overflow:visible;
}
.cell:hover{filter:brightness(1.16);transform:translateY(-3px);z-index:8;box-shadow:0 7px 18px rgba(0,0,0,.28)}
.cell .c-step{position:absolute;left:5px;top:4px;font-size:8px;line-height:1;color:var(--dim);font-variant-numeric:tabular-nums;z-index:1}
.cell .c-icon{font-family:var(--serif);font-size:23px;font-weight:700;line-height:1;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.12)}
.cell .c-name{font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:.04em;margin-top:3px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;z-index:1}
.cell .c-cost{display:flex;gap:3px;align-items:center;font-size:10px;color:var(--gold-strong);line-height:1.2;margin-top:3px;font-variant-numeric:tabular-nums;z-index:1}
.cell .c-cost i{font-style:normal;font-size:8px;color:var(--dim)}
.cell .c-own{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0}
.cell .c-own.has{background:linear-gradient(155deg,var(--own-tint,transparent),transparent 64%);box-shadow:inset 0 0 0 1.5px var(--own-color,#fff)}
.cell .c-flag{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;height:15px;display:flex;align-items:center;justify-content:center;padding:0 4px;background:var(--own-color);color:#fff;font-family:var(--serif);font-size:9px;font-weight:600;letter-spacing:.05em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:0 0 inherit inherit;box-shadow:0 -3px 8px -5px rgba(0,0,0,.45)}
.cell .c-lv{position:absolute;top:4px;right:5px;display:flex;gap:1px;z-index:3}
.cell .c-lv .bar{display:inline-block;width:4px;height:8px;background:var(--gold-strong);border-radius:1px;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.cell .tokens{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;gap:2px;pointer-events:none;z-index:7;width:max-content}
.c-tok{
  position:relative;width:26px;height:34px;display:block;flex:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.4));
}
.c-tok svg.fig{width:100%;height:100%;display:block;overflow:visible}
.c-tok .fig-body{transform-box:fill-box;transform-origin:50% 100%;animation:figBreath 3.6s ease-in-out infinite}
.c-tok .fig-hem,.c-tok .fig-sleeve-l,.c-tok .fig-sleeve-r{transform-box:fill-box;transform-origin:50% 0;animation:hemSway 3.6s ease-in-out infinite alternate}
.c-tok .fig-sleeve-r{animation-delay:-1.8s}
.c-tok.hopping .fig-hem,.c-tok.hopping .fig-sleeve-l,.c-tok.hopping .fig-sleeve-r{animation:hemRun .3s ease-in-out infinite alternate}
.c-tok.hopping .fig-body{animation:figRun .3s ease-in-out infinite alternate}

/* ===== 7.29 羡羡专属棋子：立绘原图（去底去水印、调光调色） ===== */
.c-tok .fig-xian{position:relative;display:block;width:100%;height:100%;
  transform-origin:50% 100%;animation:figBreath 3.6s ease-in-out infinite}
.c-tok .fig-xian img{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;
  transform:translateX(-50%);transform-origin:50% 100%;display:block;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55));user-select:none;-webkit-user-drag:none}
.c-tok.hopping .fig-xian{animation:figRun .32s ease-in-out infinite alternate}
@keyframes figBreath{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.03)}}
@keyframes hemSway{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
@keyframes hemRun{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@keyframes figRun{from{transform:rotate(-3deg) translateY(0)}to{transform:rotate(3deg) translateY(-2px)}}
.c-tok.falling{transform-origin:50% 92%;animation:tokFall 1.5s cubic-bezier(.45,0,.75,.6) forwards}
@keyframes tokFall{0%{transform:rotate(0);opacity:1;filter:none}52%{transform:rotate(-84deg);opacity:1}78%{transform:rotate(-86deg);opacity:.8;filter:blur(1.5px)}100%{transform:rotate(-88deg) scale(.72);opacity:0;filter:blur(5px)}}
.ink-blot{position:absolute;left:50%;bottom:-4px;width:36px;height:17px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(30,24,16,.82),rgba(30,24,16,0) 72%);animation:blotIn 1.25s ease-out forwards;pointer-events:none;z-index:6}
@keyframes blotIn{0%{transform:translateX(-50%) scale(.25);opacity:0}22%{opacity:.92}100%{transform:translateX(-50%) scale(1.55);opacity:0}}
.c-tok.cur{filter:drop-shadow(0 0 5px var(--gold-strong));animation:tokPulse 1.5s ease-in-out infinite}
.c-tok.hopping{animation:tokenHop .14s ease-out}
@keyframes tokPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes tokenHop{0%{transform:translateY(0) scale(1)}55%{transform:translateY(-12px) scale(1.08)}100%{transform:translateY(0) scale(1)}}
.route-link{position:absolute;display:block;background:var(--gold);opacity:.34;z-index:0;pointer-events:none;box-shadow:0 0 5px var(--gold-faint)}
.route-link.dir-r{right:-11px;top:50%;width:11px;height:2px}
.route-link.dir-l{left:-11px;top:50%;width:11px;height:2px}
.route-link.dir-d{left:50%;bottom:-11px;width:2px;height:11px}

/* 城市属性底色：低饱和，不让格子盖过棋子与文字 */
.cell.tier-foreign{background:linear-gradient(155deg,rgba(212,160,23,.30),rgba(212,160,23,.10))}
.cell.tier-capital{background:linear-gradient(155deg,rgba(196,84,58,.32),rgba(212,160,23,.12))}
.cell.tier-state{background:linear-gradient(155deg,rgba(190,105,50,.27),rgba(190,105,50,.09))}
.cell.tier-commandery{background:linear-gradient(155deg,rgba(128,102,175,.25),rgba(128,102,175,.08))}
.cell.tier-county{background:linear-gradient(155deg,rgba(70,121,169,.24),rgba(70,121,169,.08))}
.cell.tier-town{background:linear-gradient(155deg,rgba(65,145,122,.22),rgba(65,145,122,.07))}
.cell.tier-island{background:linear-gradient(155deg,rgba(72,164,186,.26),rgba(72,164,186,.08))}
.cell.t-pass{background:linear-gradient(155deg,rgba(150,130,100,.16),rgba(150,130,100,.05))}
.cell.t-blank{background:var(--cell-bg);opacity:.5}
.cell.t-blank .c-icon{color:var(--dim);opacity:.45}
.cell.t-juxiao{background:linear-gradient(155deg,rgba(65,145,122,.25),rgba(65,145,122,.08))}
.cell.t-huangjin{background:linear-gradient(155deg,rgba(175,58,45,.26),rgba(175,58,45,.08))}
.cell.t-jail{background:linear-gradient(155deg,rgba(110,116,126,.22),rgba(110,116,126,.07))}
.cell.t-fate{background:linear-gradient(155deg,rgba(196,154,84,.28),rgba(196,154,84,.09))}
.cell.t-attack{background:linear-gradient(155deg,rgba(196,72,54,.28),rgba(196,72,54,.09))}
.cell.t-defend{background:linear-gradient(155deg,rgba(71,121,175,.25),rgba(71,121,175,.08))}
.cell.t-swap{background:linear-gradient(155deg,rgba(128,102,175,.25),rgba(128,102,175,.08))}
.cell.t-start{background:linear-gradient(145deg,var(--gold-glow),var(--gold-soft));box-shadow:0 0 18px var(--gold-faint)}
.cell.tier-foreign .c-icon{color:#e8b93c}.cell.tier-capital .c-icon{color:#e88a63}
.cell.tier-state .c-icon{color:#e0a05a}.cell.tier-commandery .c-icon{color:#a98de0}
.cell.tier-county .c-icon{color:#6fa3e0}.cell.tier-town .c-icon{color:#6cc9ae}
.cell.tier-island .c-icon{color:#7fd2de}.cell.t-pass .c-icon{color:#b0a48c}
.cell.t-juxiao .c-icon{color:#6cc9ae}.cell.t-huangjin .c-icon{color:#e08a7a}
.cell.t-jail .c-icon{color:#aab0bc}.cell.t-fate .c-icon{color:#e8c986}
.cell.t-attack .c-icon{color:#e07a63}.cell.t-defend .c-icon{color:#6fa3e0}
.cell.t-swap .c-icon{color:#a98de0}.cell.t-start .c-icon{color:var(--gold-strong)}
.cell.current{box-shadow:0 0 0 2px var(--gold-strong),0 0 17px var(--gold-glow);z-index:4}
.cell.action-focus{box-shadow:0 0 0 2px var(--focus,var(--gold)),0 0 18px var(--gold-glow);z-index:6}
.cell.fx-hit{animation:cellHit .3s ease-out}
.is-animating .cell{cursor:default}
@keyframes cellHit{0%{transform:scale(1)}45%{transform:scale(1.06) translateY(-3px)}100%{transform:scale(1)}}

/* 最新动态：常驻一行，静默时是一行淡字，有动作时亮成提示条 */
.action-banner{
  display:flex;align-items:center;min-height:30px;padding:5px 12px 5px 10px;
  border:1px solid transparent;border-left:3px solid var(--actor,var(--gold));border-radius:9px;
  background:transparent;color:var(--text);opacity:.6;font-size:12.5px;letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .22s,color .22s,box-shadow .22s,border-color .22s,opacity .22s;
}
.action-banner:not(.show){border-left-color:transparent}
.action-banner:not(.show):not(:empty)::before{
  content:"最新 · ";font-size:11px;letter-spacing:.1em;opacity:.72;margin-right:2px;
}
.action-banner.show{
  background:var(--toast-bg);color:var(--text);opacity:1;border-color:var(--line);
  box-shadow:0 8px 20px -14px rgba(0,0,0,.6);
}
.action-banner.rent,.action-banner.lose{border-left-color:var(--red-soft)}
.action-banner.gain,.action-banner.buy,.action-banner.turn{border-left-color:#4aa38a}

/* 棋盘内 HUD：操作与回合状态共用一块 compact command deck */
.hud{
  position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;
  width:min(560px,calc(100% - 34px));
  background:linear-gradient(145deg,rgba(34,27,18,.96),rgba(23,19,13,.96));
  border:1px solid var(--gold);border-radius:17px;padding:11px 16px 13px;text-align:center;
  box-shadow:0 16px 44px rgba(0,0,0,.48);backdrop-filter:blur(12px);
}
/* 7.46 皮肤卡浅色模式：浅色系底 + 品质色边框光效 */
html[data-theme="light"] .gp-card,html[data-theme="light"] .sk-card,html[data-theme="light"] .gx-card{
  background:linear-gradient(165deg,#fdfaf2,#f2ebd9);border-color:#d8cdb4}
html[data-theme="light"] .gp-card.r-N,html[data-theme="light"] .sk-card.r-N,html[data-theme="light"] .gx-card.is-skin.r-N{
  background:linear-gradient(165deg,#f6f6ef,#e9e9d8);border-color:rgba(140,148,120,.55)}
html[data-theme="light"] .gp-card.r-R,html[data-theme="light"] .sk-card.r-R,html[data-theme="light"] .gx-card.is-skin.r-R{
  background:linear-gradient(165deg,#eef4fb,#dae7f4);border-color:rgba(100,145,195,.6);
  box-shadow:0 0 12px rgba(110,150,200,.18)}
html[data-theme="light"] .gp-card.r-SR,html[data-theme="light"] .sk-card.r-SR,html[data-theme="light"] .gx-card.is-skin.r-SR{
  background:linear-gradient(165deg,#f5effc,#e6d7f5);border-color:rgba(155,105,205,.62);
  box-shadow:0 0 15px rgba(160,110,215,.24)}
html[data-theme="light"] .gp-card.r-SSR,html[data-theme="light"] .sk-card.r-SSR,html[data-theme="light"] .gx-card.is-skin.r-SSR{
  background:linear-gradient(165deg,#fdf6dd,#f5e5ba);border-color:rgba(200,158,60,.8);
  box-shadow:0 0 18px rgba(215,175,80,.38)}
html[data-theme="light"] .gp-card.r-UR,html[data-theme="light"] .sk-card.r-UR,html[data-theme="light"] .gx-card.is-skin.r-UR{
  background:linear-gradient(165deg,#fdf8ec,#f2ecf8) padding-box,
             linear-gradient(130deg,#d9b370,#b08ad0,#6fbfa0,#d9b370) border-box;
  box-shadow:0 0 22px rgba(190,150,220,.4)}
html[data-theme="light"] .gp-card:after{background:linear-gradient(180deg,transparent 52%,rgba(250,244,228,.94))}
html[data-theme="light"] .gp-n{color:#4a3c22}
html[data-theme="light"] .gp-own{background:rgba(255,250,235,.88);color:#8a6416}
html[data-theme="light"] .gx-card.is-skin .gxc-m{
  background:linear-gradient(180deg,transparent,rgba(250,244,228,.96) 34%)}
html[data-theme="light"] .hud{background:linear-gradient(145deg,rgba(253,249,240,.97),rgba(241,232,211,.97))}
.hud.turn-mine{border-color:var(--gold-strong);box-shadow:0 0 0 1px var(--gold),0 16px 44px rgba(0,0,0,.5)}
.turn-line{display:flex;justify-content:center;align-items:center;gap:7px;font-size:12.5px;color:var(--dim);min-height:18px;margin-bottom:5px;letter-spacing:.02em;line-height:1.4}
.turn-line b{color:var(--gold-strong)}
.stage-actor{display:inline-flex;align-items:center;gap:5px;color:var(--actor,var(--gold));font-weight:700;flex:none}
.stage-actor::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--actor,var(--gold));box-shadow:0 0 6px var(--actor,var(--gold))}
.stage-text{letter-spacing:.04em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-main{display:flex;align-items:center;justify-content:center;gap:18px;min-height:74px}
.hud-command{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.action-btns{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.action-btns .btn{padding:10px 16px;min-height:42px}
.pending-box{margin-top:7px;font-size:12px;color:var(--dim);min-height:17px;line-height:1.5;letter-spacing:.02em}
.pending-box b{color:var(--gold-strong);font-weight:700}
.acting-dots{display:inline-flex;align-items:center;gap:4px}
.acting-dots i{width:4px;height:4px;border-radius:50%;background:var(--gold);animation:dotBlink 1s infinite}
.acting-dots i:nth-child(2){animation-delay:.16s}.acting-dots i:nth-child(3){animation-delay:.32s}
@keyframes dotBlink{0%,70%,100%{opacity:.25;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}

/* 真实六面骰：六张独立点阵面 + 空间翻滚 + 落地阴影 */
.dice-stage{--dice-scale:1;position:relative;width:68px;height:76px;flex:none;perspective:520px;perspective-origin:50% 42%}
.dice-cube{position:absolute;left:4px;top:3px;width:60px;height:60px;transform-style:preserve-3d;will-change:transform;transition:opacity .2s ease}
/* 待掷态：不显示点数，避免旧点数干扰视线 */
.dice-idle{
  position:absolute;left:4px;top:3px;width:60px;height:60px;border-radius:13px;display:none;
  align-items:center;justify-content:center;
  border:1px dashed rgba(200,180,140,.40);background:linear-gradient(145deg,rgba(255,253,247,.06),rgba(120,100,70,.10));
  color:rgba(232,216,182,.82);font-family:var(--serif);font-size:13px;letter-spacing:3px;padding-left:3px;
  pointer-events:none;animation:idleBreath 3.2s ease-in-out infinite;
}
.dice-stage.idle .dice-idle{display:flex}
.dice-stage.idle .dice-cube{opacity:0;visibility:hidden;transition:none;filter:grayscale(1)}
.dice-stage.idle .dice-shadow{opacity:.18}
@keyframes idleBreath{0%,100%{opacity:.72}50%{opacity:1}}
.die-face{
  position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:13%;border-radius:12px;border:1px solid #d3c5a8;backface-visibility:hidden;
  background:linear-gradient(145deg,#fffdf7,#e5dbc5);box-shadow:inset 0 2px 5px rgba(255,255,255,.8),inset 0 -3px 6px rgba(90,65,25,.13);
}
.die-face.face-1{transform:translateZ(30px)}
.die-face.face-2{transform:rotateY(90deg) translateZ(30px)}
.die-face.face-3{transform:rotateX(90deg) translateZ(30px)}
.die-face.face-4{transform:rotateX(-90deg) translateZ(30px)}
.die-face.face-5{transform:rotateY(-90deg) translateZ(30px)}
.die-face.face-6{transform:rotateY(180deg) translateZ(30px)}
.pip{width:100%;height:100%;max-width:11px;max-height:11px;border-radius:50%;background:#2b2419;box-shadow:inset 0 2px 2px rgba(0,0,0,.45);align-self:center;justify-self:center}
.face-1 .pip,.face-4 .pip{background:#a83b2d}
.dice-shadow{position:absolute;left:12px;bottom:2px;width:44px;height:9px;border-radius:50%;background:rgba(0,0,0,.32);filter:blur(4px);transform:scale(1)}
.dice-stage.rolling{animation:diceBounce .9s cubic-bezier(.2,.7,.25,1)}
.dice-stage.rolling .dice-shadow{animation:shadowBounce .9s ease-out}
.dice-stage.six .dice-cube{filter:drop-shadow(0 0 7px var(--gold-glow))}
.dice-stage.land-six{animation:sixLand .45s ease-out}
@keyframes diceBounce{0%,100%{transform:translateY(0) scale(var(--dice-scale,1))}35%{transform:translateY(-15px) rotate(-4deg) scale(var(--dice-scale,1))}70%{transform:translateY(-4px) rotate(2deg) scale(var(--dice-scale,1))}}
@keyframes shadowBounce{0%,100%{transform:scale(1);opacity:.5}35%{transform:scale(.62);opacity:.25}70%{transform:scale(.85);opacity:.4}}
@keyframes sixLand{0%{transform:scale(var(--dice-scale,1))}45%{transform:scale(calc(var(--dice-scale,1) * 1.12))}100%{transform:scale(var(--dice-scale,1))}}

/* 落格反馈：印章 + 8 粒子，生命周期 0.9 秒，不遮整格 */
.cell-fx{position:absolute;inset:-12px;z-index:12;display:grid;place-items:center;pointer-events:none;--fx:var(--gold-strong)}
.fx-stamp{display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--fx);border-radius:50%;background:var(--toast-bg);color:var(--fx);font-family:var(--serif);font-size:21px;font-weight:700;box-shadow:0 3px 15px rgba(0,0,0,.35);animation:stampIn .65s ease-out forwards}
.cell-fx .spark{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:1px;background:var(--fx);animation:sparkFly .7s ease-out forwards}
.fx-capture{--fx:#e8c986}.fx-battle,.fx-bad{--fx:#e06a54}.fx-upgrade,.fx-good{--fx:#6cc9ae}
.fx-rent{--fx:#e8b96a}.fx-shield{--fx:#6fa3e0}.fx-swap,.fx-event{--fx:#a98de0}
@keyframes stampIn{0%{opacity:0;transform:scale(1.8) rotate(-12deg)}25%{opacity:1;transform:scale(.92) rotate(3deg)}55%{transform:scale(1) rotate(0)}100%{opacity:0;transform:translateY(-13px) scale(.9)}}
@keyframes sparkFly{0%{opacity:1;transform:rotate(var(--a)) translateX(9px)}100%{opacity:0;transform:rotate(var(--a)) translateX(43px)}}
.silver-fly{position:fixed;z-index:70;pointer-events:none;width:24px;height:16px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.silver-fly svg{width:100%;height:100%;display:block}

/* 地块详情浮层：贴近被点格子，配色跟随格子属性 */
.cell-pop{
  position:absolute;z-index:35;width:min(268px,80vw);display:none;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--pop-line,var(--gold));border-radius:14px;padding:12px 14px 13px;
  box-shadow:0 18px 44px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;
}
.cell-pop::before{content:"";position:absolute;inset:0;background:var(--pop-tint,transparent);pointer-events:none}
.cell-pop>*{position:relative;z-index:1}
.cell-pop.show{display:block;animation:popIn .16s ease-out}
.pop-tier-foreign{--pop-tint:linear-gradient(155deg,rgba(212,160,23,.30),rgba(212,160,23,.08));--pop-line:#d4a017}
.pop-tier-capital{--pop-tint:linear-gradient(155deg,rgba(196,84,58,.30),rgba(212,160,23,.10));--pop-line:#d4734c}
.pop-tier-state{--pop-tint:linear-gradient(155deg,rgba(190,105,50,.26),rgba(190,105,50,.07));--pop-line:#c97e3f}
.pop-tier-commandery{--pop-tint:linear-gradient(155deg,rgba(128,102,175,.24),rgba(128,102,175,.06));--pop-line:#8f76c2}
.pop-tier-county{--pop-tint:linear-gradient(155deg,rgba(70,121,169,.23),rgba(70,121,169,.06));--pop-line:#5b85bd}
.pop-tier-town{--pop-tint:linear-gradient(155deg,rgba(65,145,122,.22),rgba(65,145,122,.06));--pop-line:#539e85}
.pop-tier-island{--pop-tint:linear-gradient(155deg,rgba(72,164,186,.25),rgba(72,164,186,.07));--pop-line:#58a8ba}
.pop-pass{--pop-tint:linear-gradient(155deg,rgba(150,130,100,.20),rgba(150,130,100,.06));--pop-line:#a5947a}
.pop-start{--pop-tint:linear-gradient(145deg,var(--gold-glow),var(--gold-soft));--pop-line:var(--gold-strong)}
.pop-juxiao,.pop-fate{--pop-tint:linear-gradient(155deg,rgba(196,154,84,.24),rgba(196,154,84,.07));--pop-line:#c49a54}
.pop-huangjin{--pop-tint:linear-gradient(155deg,rgba(175,58,45,.26),rgba(175,58,45,.07));--pop-line:#b8533c}
.pop-jail{--pop-tint:linear-gradient(155deg,rgba(110,116,126,.22),rgba(110,116,126,.06));--pop-line:#7d838e}
.pop-attack{--pop-tint:linear-gradient(155deg,rgba(196,72,54,.28),rgba(196,72,54,.08));--pop-line:#c44836}
.pop-defend{--pop-tint:linear-gradient(155deg,rgba(71,121,175,.25),rgba(71,121,175,.07));--pop-line:#4779af}
.pop-swap{--pop-tint:linear-gradient(155deg,rgba(128,102,175,.25),rgba(128,102,175,.07));--pop-line:#8066af}
.pop-close{position:absolute;top:5px;right:5px;width:30px;height:30px;border-radius:8px;background:none;border:none;color:var(--dim);font-size:18px;line-height:1;cursor:pointer;z-index:2;transition:.15s}
.pop-close:hover{background:rgba(255,255,255,.06);color:var(--gold-strong)}
/* 献地：封地选择（两列紧凑按钮，地多时在弹窗内滚动） */
.give-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0 12px}
.give-btn{position:relative;min-width:0;margin:0;padding:9px 8px;font-size:13px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.give-fort{position:absolute;right:5px;top:4px;font-size:9px;line-height:1;padding:2px 3px;border-radius:4px;
  background:var(--gold-soft);color:var(--ink);font-style:normal;letter-spacing:0}

/* 详情内容：标题行 + 键值对齐行，数值统一右对齐、等宽数字 */
.detail-body{padding-right:0}
.detail-head{display:flex;align-items:center;gap:8px;padding:1px 22px 9px 0;margin-bottom:12px;border-bottom:1px solid var(--line)}
.detail-name{flex:1;min-width:0;font-family:var(--serif);font-size:17px;line-height:1.25;color:var(--gold-strong);letter-spacing:.06em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.detail-tier{flex:none;font-size:10.5px;line-height:1.5;padding:1px 7px;border-radius:6px;background:var(--tier-chip-bg);color:var(--pop-line,var(--gold-strong));letter-spacing:.08em;border:1px solid transparent}
.detail-rows{display:grid;gap:5px}
.drow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px;line-height:1.55}
.drow .dk{flex:none;color:var(--dim);letter-spacing:.06em}
.drow .dv{min-width:0;text-align:right;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.drow .dv.is-gold,.drow .dv.is-gold b{color:var(--gold-strong)}
.drow .dv b{font-weight:700;font-variant-numeric:tabular-nums}
.drow .is-dim{color:var(--dim);font-weight:400}
.detail-note{font-size:12.5px;line-height:1.7;color:var(--dim);letter-spacing:.02em}
.num{font-variant-numeric:tabular-nums}
@keyframes popIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

/* 胜利彩纸：24 枚、2.6 秒，无全屏闪光 */
.victory-confetti{position:fixed;inset:0;z-index:55;pointer-events:none;overflow:hidden}
.victory-confetti i{position:absolute;top:-18px;width:7px;height:13px;background:var(--hue);border-radius:2px;animation:confettiFall 2.1s var(--delay) cubic-bezier(.2,.65,.35,1) forwards}
@keyframes confettiFall{0%{opacity:0;transform:translate(0,-10px) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate(var(--drift),105vh) rotate(620deg)}}

@media(max-width:980px){
  .players-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board-frame{max-height:none;padding-bottom:14px}
  .game-wrap{padding-bottom:154px}
  .hud{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));transform:none;width:auto;z-index:40;border-radius:16px}
}
@media(max-width:640px){
  #board{gap:8px}
  .board-frame{padding:10px;border-radius:14px}
  .cell{padding:8px 3px 16px;border-radius:9px}
  .cell .c-icon{font-size:20px}.cell .c-name{font-size:12px}.cell .c-cost{font-size:9px}
  .cell .c-cost i{display:none}.cell .c-step{font-size:7px;left:4px}.cell .c-flag{font-size:8px;height:12px}
  .c-tok{width:22px;height:29px}.cell .tokens{bottom:-7px;gap:1px}
  .route-link.dir-r{right:-9px;width:9px}.route-link.dir-l{left:-9px;width:9px}.route-link.dir-d{bottom:-9px;height:9px}
  .game-sticky{padding:6px 0 8px;gap:7px}
  .action-banner{min-height:26px;font-size:11.5px;padding:4px 9px}
  .hud{padding:9px 12px 10px}.hud-main{gap:12px;min-height:66px}.dice-stage{--dice-scale:.88;transform:scale(.88);margin:-4px}
  .action-btns .btn{padding:9px 12px;font-size:13px;min-height:40px}.pending-box{font-size:11px}
  .ps-item{padding:7px 8px;gap:5px}
  .ps-avatar{width:23px;height:23px;font-size:12px;border-radius:7px}
  .ps-char{display:none}.ps-lap{display:none}
  .ps-main{gap:1px}
  .ps-line1{gap:4px}
  .ps-name{font-size:12.5px}
  .ps-bot{font-size:8px;line-height:12px;padding:0 3px}
  .ps-gold{font-size:12.5px;padding-left:6px}
  .ps-item.turn::after{top:-7px;right:6px;font-size:8px;line-height:13px;padding:0 5px}
  .gold-delta{font-size:13.5px;right:8px}
  /* 窄屏再让一点位置给名字，避免四个字被省略号吃掉 */
  @media(max-width:400px){
    .ps-item{padding:6px 7px;gap:4px}
    .ps-avatar{width:22px;height:22px;font-size:11.5px;border-radius:6px}
    .ps-name{font-size:12px}
    .ps-bot{font-size:7px;line-height:11px;padding:0 2px;border-radius:4px}
    .ps-gold{font-size:12px;padding-left:5px}
  }
  .modal{border-radius:14px;max-height:88vh}
  .m-head{padding:14px 12px 11px 16px}
  .m-head h2{font-size:16.5px}
  .m-content{padding:12px 16px 0}
  .m-actions{padding:12px 16px 15px;gap:8px}
  .m-actions .btn{flex:1;min-width:0}
  .cell-pop{width:min(238px,84vw);padding:10px 12px 11px}
  .detail-name{font-size:16px}
  .drow{font-size:12px;gap:9px}
}
@media(prefers-reduced-motion:reduce){
  .c-tok.cur,.dice-stage.rolling,.dice-stage.rolling .dice-shadow{animation:none}
  .c-tok .fig-body,.c-tok .fig-hem,.c-tok .fig-sleeve-l,.c-tok .fig-sleeve-r,.c-tok .fig-xian{animation:none}
  .c-tok.falling{animation:none;opacity:0}
  .eg-fx{display:none}
  .cell-fx .spark{display:none}.victory-confetti{display:none}
}

/* ===== 弹窗 ===== */
.modal-mask{
  position:fixed;inset:0;z-index:50;padding:20px;display:none;align-items:center;justify-content:center;
  background:rgba(6,5,3,.62);backdrop-filter:blur(3px);
}
.modal-mask.show{display:flex}
.modal-mask.show .modal{animation:modalIn .22s cubic-bezier(.2,.75,.25,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:16px;padding:0;
  max-width:432px;width:100%;max-height:86vh;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.58);
}
.modal::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.85;z-index:2}
.m-head{display:flex;align-items:center;gap:10px;padding:17px 18px 13px 20px;border-bottom:1px solid var(--line)}
.m-head h2{flex:1;min-width:0;margin:0;font-family:var(--serif);font-size:18px;line-height:1.35;color:var(--gold-strong);letter-spacing:.08em}
.m-x{
  flex:none;width:30px;height:30px;display:grid;place-items:center;border:none;border-radius:9px;
  background:none;color:var(--dim);font-size:19px;line-height:1;cursor:pointer;transition:.15s;
}
.m-x:hover{background:var(--gold-faint);color:var(--gold-strong)}
.m-content{flex:1;min-height:0;overflow:auto;padding:14px 20px 2px}
.m-sub{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);letter-spacing:.04em;margin-bottom:10px}
.ev-name{color:var(--gold-strong);font-size:12.5px;font-weight:700;letter-spacing:.06em}
.m-body{font-size:13.5px;line-height:1.85;color:var(--text);letter-spacing:.01em}
.m-body b{color:var(--gold-strong)}
.m-note{font-size:12px;line-height:1.7;color:var(--dim);margin-top:8px}
.m-actions{display:flex;gap:9px;justify-content:flex-end;padding:15px 20px 17px}
.m-actions .btn{min-width:92px}
.modal .kind{font-size:11px;font-weight:700;letter-spacing:.1em;padding:2px 8px;border-radius:6px}
.modal .kind.good{background:rgba(74,163,138,.18);color:var(--log-gain)}
.modal .kind.bad{background:rgba(192,57,43,.18);color:var(--log-lose)}
.modal .kind.neutral{background:rgba(217,179,112,.18);color:var(--gold-strong)}

/* 事件卡 */
.event-card{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:11px;padding:12px 14px;background:var(--bg2)}
.event-card.good{border-left-color:var(--log-gain)}
.event-card.bad{border-left-color:var(--log-lose)}
.ec-desc{font-size:13.5px;line-height:1.85;color:var(--text);margin-top:0}

/* 目标选择列表 */
.pick-list{display:grid;gap:8px}
.pick-list .btn{flex-direction:column;align-items:flex-start;gap:1px;padding:10px 14px;text-align:left;line-height:1.45}
.pick-list .btn:hover{border-color:var(--gold)}
.pick-name{font-weight:700;font-size:14px}
.pick-meta{font-size:11px;color:var(--dim);font-weight:400;font-variant-numeric:tabular-nums}

/* 终局榜 */
.result-hero{text-align:center;padding:4px 0 14px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.rh-label{font-size:10.5px;letter-spacing:.34em;color:var(--dim);padding-left:.34em}
.rh-name{font-family:var(--serif);font-size:26px;line-height:1.3;margin:5px 0 2px;letter-spacing:.06em}
.rh-reason{font-size:12px;color:var(--dim);line-height:1.6}
.rank-rows{display:grid;gap:6px}
.rank-row{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;border:1px solid transparent;font-size:13px;background:var(--bg2)}
.rank-row.is-top{background:var(--gold-faint);border-color:var(--gold-soft)}
.rank-row .rk{flex:none;width:16px;text-align:center;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.rank-row.is-top .rk{color:var(--gold-strong);font-weight:700}
.rank-row .rn{flex:1;min-width:0;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rank-row .rv{flex:none;color:var(--gold-strong);font-weight:700;font-variant-numeric:tabular-nums}

/* 设置 */
.settings-sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.settings-sec .sec-title{font-size:13px;color:var(--dim);margin-bottom:10px;letter-spacing:1px}
.swatch-row{display:flex;gap:12px;flex-wrap:wrap}
.swatch{width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.15s;position:relative}
.swatch:hover{transform:scale(1.08)}
.swatch.on{border-color:var(--text);box-shadow:0 0 0 2px var(--gold)}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;font-size:13px;margin-top:4px}
.profile-grid .k,.profile-grid .v{padding:7px 0;border-bottom:1px solid var(--line)}
.profile-grid .k{color:var(--dim);letter-spacing:.04em}
.profile-grid .v{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.fav-char{margin-top:10px;font-size:13px}

/* toast */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,14px);opacity:0;
  background:var(--toast-bg);border:1px solid var(--line);border-left:3px solid var(--gold);
  color:var(--text);padding:11px 18px;border-radius:11px;font-size:13px;line-height:1.5;letter-spacing:.02em;
  box-shadow:0 14px 34px var(--shadow);transition:opacity .22s,transform .22s;z-index:60;pointer-events:none;
  max-width:min(84vw,420px);text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* 滚动条 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ============================================================
   dfw-6.4 新增：统计 / 道具背包 / 送花丢蛋 / 暂停
   ============================================================ */

/* 顶栏右侧动作组 */
.gh-actions{display:flex;align-items:center;gap:8px}
.gh-actions .btn{white-space:nowrap}

/* ---- 本局统计 ---- */
.stats-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.stats-tab{flex:1;min-width:74px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;background:var(--bg2);border:1px solid var(--line);color:var(--dim);transition:.15s}
.stats-tab.on{background:var(--gold-faint);border-color:var(--gold-soft);color:var(--text);box-shadow:inset 0 0 0 1px var(--pc,var(--gold))}
.stats-panels{max-height:52vh;overflow:auto}
.stats-panel{display:none}
.stats-panel.on{display:block}
.stats-empty{padding:16px;text-align:center}
.stat-row{padding:7px 10px;border-radius:8px;font-size:12.5px;line-height:1.6;margin-bottom:4px;background:var(--bg2);border-left:3px solid var(--line);color:var(--text)}
.stat-row.k-dice{border-left-color:var(--gold)}
.stat-row.k-buy,.stat-row.k-up,.stat-row.k-gain,.stat-row.k-item{border-left-color:#4aa38a}
.stat-row.k-lose,.stat-row.k-rent{border-left-color:var(--red-soft)}
.stat-row.k-event,.stat-row.k-skill{border-left-color:#8f76c2}
.stat-row.k-gift{border-left-color:#e08bb0}
.stat-row .stat-txt{word-break:break-all}
.stat-who{font-weight:600;margin-right:2px}

/* 玩家面板：资产 + 城市列表 */
.ps-summary{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;background:var(--gold-faint);border:1px solid var(--gold-soft);margin-bottom:10px}
.ps-asset{font-size:13px;color:var(--dim)}
.ps-asset .gold{font-family:var(--serif);font-size:20px;color:var(--gold-strong)}
.ps-meta{font-size:12px;color:var(--dim)}
.ps-meta b{color:var(--text)}
.city-list{display:grid;gap:4px}
.city-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);font-size:12.5px}
.c-rank{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:var(--line);color:var(--dim)}
.city-row:nth-child(1) .c-rank{background:var(--gold);color:#3a2c10}
.c-name{font-family:var(--serif);font-size:14px;color:var(--text);flex:1}
.c-cost{flex:none;color:var(--gold-strong);font-variant-numeric:tabular-nums;font-weight:600}

/* ---- 道具背包（骰子旁） ---- */
.item-bag{display:none;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;max-width:150px}
.item-bag.has{display:flex}
.bag-chip{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;width:44px;height:46px;padding:3px 0;border-radius:10px;cursor:default;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);transition:.15s}
.bag-chip.usable{cursor:pointer;border-color:var(--gold-soft)}
.bag-chip.usable:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 6px 14px var(--shadow)}
.bag-chip:disabled{opacity:.55}
.bag-ico{font-size:17px;line-height:1.1;font-family:var(--serif);color:var(--gold-strong)}
.bag-n{font-size:10.5px;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums}
.bag-chip.usable .bag-n{color:var(--gold-strong)}

/* ---- 送花 / 丢蛋 选择泡 ---- */
.gift-pop{position:fixed;z-index:70;width:246px;display:none;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--gold);border-radius:13px;padding:11px 12px;box-shadow:0 16px 42px rgba(0,0,0,.5)}
.gift-pop.show{display:block;animation:popIn .16s ease-out}
.gift-head{font-size:12.5px;color:var(--dim);margin-bottom:9px;text-align:center}
.gift-head b{font-size:14px}
.gift-btns{display:grid;gap:8px}
.gift-btn{display:flex;align-items:center;gap:7px;padding:8px 9px;border-radius:10px;cursor:pointer;text-align:left;background:var(--bg2);border:1px solid var(--line);transition:.15s}
.gift-btn:hover{transform:translateY(-1px)}
.gift-btn.flower:hover{border-color:#e08bb0;box-shadow:0 0 0 1px rgba(224,139,176,.4)}
.gift-btn.egg:hover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-faint)}
.gift-ico{font-size:22px;line-height:1;flex:none}
.gift-nm{font-weight:700;font-size:13px;color:var(--text);white-space:nowrap;flex:none}
.gift-cost{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;line-height:1.35}
.gc-line{white-space:nowrap;font-size:10.5px;color:var(--dim)}
.gc-line:first-child{font-weight:700;color:var(--text)}

/* ===== 7.29 送礼 ×1/×50/×100 倍率按钮 ===== */
.gift-mult{margin-left:auto;display:flex;gap:3px;flex:none;min-width:0}
.gift-mult button{font:inherit;font-size:10.5px;font-weight:700;padding:2px 5px;border-radius:6px;
  border:1px solid var(--line);background:var(--bg2);color:var(--text);cursor:pointer;transition:.15s;line-height:1.4}
.gift-mult button:hover{transform:translateY(-1px)}
.gift-mult button:active{transform:translateY(0)}
.gift-btn.flower .gift-mult button:hover{border-color:#e08bb0;color:#e08bb0;box-shadow:0 0 0 1px rgba(224,139,176,.35)}
.gift-btn.egg .gift-mult button:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 1px var(--gold-faint)}
.gift-tip{margin-top:8px;font-size:10.5px;color:var(--dim);text-align:center;line-height:1.55}

/* 送花/丢蛋动画层：轨迹在头像之外展开，落点绕目标散开，避免糊成一团 */
.gift-fx{position:fixed;inset:0;z-index:80;pointer-events:none}
.fx-petal,.fx-egg,.fx-splat,.fx-halo,.fx-drip{position:absolute;transform:translate(-50%,-50%);pointer-events:none;will-change:transform,opacity}
.fx-petal{
  font-size:var(--s,18px);line-height:1;opacity:0;
  filter:drop-shadow(0 2px 3px rgba(150,50,90,.28));
  animation:petalFly var(--dur,1s) var(--delay,0s) cubic-bezier(.22,.62,.36,1) forwards;
}
@keyframes petalFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(-24deg)}
  10%{opacity:1;transform:translate(calc(-50% + var(--dx,0px) * .07),calc(-50% + var(--dy,0px) * .07)) scale(1) rotate(24deg)}
  58%{transform:translate(calc(-50% + var(--dx,0px) * .6),calc(-50% + var(--dy,0px) * .6 + var(--arc,-18px))) scale(1.04) rotate(150deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(.92) rotate(330deg)}
}
.fx-egg{
  font-size:var(--s,30px);line-height:1;opacity:1;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.3));
  animation:eggFly .8s cubic-bezier(.32,.06,.5,1) forwards;
}
@keyframes eggFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(0)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(.92) rotate(50deg)}
  55%{transform:translate(calc(-50% + var(--dx,0px) * .52),calc(-50% + var(--dy,0px) * .52 - 26px)) scale(1.06) rotate(250deg)}
  100%{opacity:1;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(1) rotate(430deg)}
}
.fx-splat{font-size:var(--s,46px);line-height:1;animation:splatPop .66s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes splatPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
  28%{opacity:1;transform:translate(-50%,-50%) scale(1.16)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
}
/* 落点光圈：明确告诉玩家「花落在这里」 */
.fx-halo{
  width:var(--d,56px);height:var(--d,56px);border-radius:50%;
  border:2px solid var(--hc,#e08bb0);opacity:0;
  animation:haloOut .62s ease-out forwards;
}
@keyframes haloOut{
  0%{opacity:.9;transform:translate(-50%,-50%) scale(.28)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}
}
.fx-drip{font-size:var(--s,13px);line-height:1;opacity:0;animation:dripFly .58s ease-out forwards}
@keyframes dripFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  22%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px) + 26px)) scale(.85)}
}
/* 被打中的卡片会抖一下 */
.ps-item.fx-hit{animation:fxHit .5s ease-out}
@keyframes fxHit{
  0%,100%{transform:translateX(0) rotate(0)}
  22%{transform:translateX(-4px) rotate(-1.2deg)}
  48%{transform:translateX(4px) rotate(1.2deg)}
  74%{transform:translateX(-2px) rotate(0)}
}

/* 头像可点（其他玩家） */
.ps-item{cursor:pointer}

/* ---- 暂停遮罩 ---- */
.pause-mask{position:fixed;inset:0;z-index:65;display:none;align-items:center;justify-content:center;background:rgba(8,6,4,.55);backdrop-filter:blur(3px);padding:20px}
.pause-mask.show{display:flex}
.pause-mask.show .pause-card{animation:modalIn .24s cubic-bezier(.2,.75,.25,1)}
.pause-card{text-align:center;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--gold);border-radius:18px;padding:30px 36px;max-width:340px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.6)}
.pause-icon{font-size:34px;color:var(--gold-strong);margin-bottom:8px}
.pause-title{font-family:var(--serif);font-size:22px;color:var(--gold-strong);letter-spacing:.1em;margin-bottom:8px}
.pause-sub{font-size:13px;color:var(--dim);line-height:1.7;margin-bottom:16px}
.pause-card .btn{width:100%}


/* ===== dfw-6.7 顶部玩家头像 + 玩家详情 + 统计卡片 ===== */

.top-players{display:none;align-items:center;gap:6px}
.top-players.has{display:flex}
.top-avatar{
  position:relative;display:flex;align-items:center;gap:6px;padding:4px 9px 4px 4px;
  border-radius:22px;flex:none;border:1.5px solid var(--line);background:var(--panel2);cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.top-avatar:hover{transform:translateY(-2px);border-color:var(--gold-strong)}
.top-avatar.turn{border-color:var(--pc);box-shadow:0 0 0 2px var(--gold-faint)}
.top-avatar.dead{opacity:.4;filter:grayscale(.6)}
.top-avatar.me{border-color:var(--pc)}
.ta-badge{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--pc);color:#fff;font-family:var(--serif);font-weight:700;font-size:13px;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.ta-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
.ta-name{font-size:11px;color:var(--text);font-weight:600;max-width:60px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ta-rank{font-size:9px;color:var(--gold-strong);letter-spacing:.03em;white-space:nowrap}
.ta-rank.bot{color:var(--dim)}
.ta-dot{
  position:absolute;right:-5px;top:-6px;padding:0 4px;border-radius:8px;
  background:var(--gold);color:var(--ink);font-size:8px;line-height:14px;font-weight:700;
}

.pd-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pd-avatar{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--pc);color:#fff;font-family:var(--serif);font-size:22px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.pd-id{min-width:0}
.pd-name{font-family:var(--serif);font-size:17px;color:var(--text);display:flex;align-items:center;gap:6px}
.pd-sub{font-size:12px;color:var(--dim);margin-top:2px}
.pd-tag{font-size:10px;padding:1px 6px;border-radius:6px;line-height:1.5;flex:none}
.pd-tag.ai{color:#fff;background:#5b7ea8}
.pd-tag.me{color:var(--ink);background:var(--gold)}
.pd-tag.dead{color:#fff;background:var(--red-soft)}
.pd-sec{font-size:12px;color:var(--dim);letter-spacing:1px;margin:14px 0 8px}
.pd-sec:first-of-type{margin-top:0}

.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px 6px;border-radius:10px;text-align:center;
  background:var(--bg2);border:1px solid var(--line);
}
.sc-num{font-size:16px;font-weight:700;color:var(--gold-strong);font-variant-numeric:tabular-nums;line-height:1.2}
.sc-label{font-size:10.5px;color:var(--dim);margin-top:3px;letter-spacing:.05em}
.sc-sub{font-size:9.5px;color:var(--dim);margin-top:2px;opacity:.85}


.theme-seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.theme-seg-item{flex:1;padding:9px 0;border:none;background:var(--bg2);color:var(--dim);font-size:13px;cursor:pointer;transition:.15s}
.theme-seg-item + .theme-seg-item{border-left:1px solid var(--line)}
.theme-seg-item.on{background:var(--gold-faint);color:var(--gold-strong);font-weight:600}

.accent-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.accent-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px 8px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);cursor:pointer;transition:.15s}
.accent-item:hover{border-color:var(--gold-soft)}
.accent-item.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-soft);background:var(--gold-faint)}
.ac-swatch{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.ac-name{font-size:10.5px;color:var(--dim);letter-spacing:.05em}
.accent-item.on .ac-name{color:var(--text);font-weight:600}

/* ===== 首页 · 游戏存档 ===== */
.archive-panel{max-width:1040px;margin:2px auto 0}
.archive-panel .panel-title{margin-bottom:12px}
.arc-count{margin-left:auto;font-family:var(--sans);font-size:11.5px;letter-spacing:0;color:var(--dim);font-weight:400}
.arc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.arc-empty{grid-column:1/-1;padding:16px 6px;text-align:center;font-size:12.5px;color:var(--dim);letter-spacing:.04em}
.arc-card{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
  border:1px solid var(--line);border-radius:11px;background:var(--bg2);
  cursor:pointer;text-align:left;transition:.15s;font-family:var(--sans);
}
.arc-card:hover{border-color:var(--gold);transform:translateY(-1px)}
.arc-res{
  flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--serif);font-size:15px;font-weight:700;
}
.arc-card.win .arc-res{background:var(--gold-soft);color:var(--gold-strong);box-shadow:inset 0 0 0 1px var(--gold-soft)}
.arc-card.lose .arc-res{background:var(--tier-chip-bg);color:var(--dim)}
.arc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.arc-l1{display:flex;align-items:baseline;gap:7px;font-size:12.5px;min-width:0}
.arc-l1 b{flex:none;font-weight:700;color:var(--text)}
.arc-l1 i{flex:1;min-width:0;font-style:normal;font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arc-l1 em{flex:none;font-style:normal;font-size:10.5px;color:var(--dim);opacity:.8;font-variant-numeric:tabular-nums}
.arc-l2{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arc-delta{flex:none;font-size:11px;color:var(--dim);padding:2px 8px;border-radius:20px;background:var(--tier-chip-bg);font-variant-numeric:tabular-nums}
.arc-delta.up{color:var(--log-gain)}
.arc-delta.down{color:var(--log-lose)}
@media(max-width:720px){.arc-list{grid-template-columns:1fr}}

/* ===== 存档详情 ===== */
.mt-hero{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);margin-bottom:12px}
.mt-hero.win{border-color:var(--gold-soft);background:linear-gradient(180deg,var(--gold-faint),transparent)}
.mt-badge{flex:none;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;font-family:var(--serif);font-size:19px;font-weight:700;transform:rotate(-4deg)}
.mt-hero.win .mt-badge{background:#a8362a;color:#fdf6e3;box-shadow:0 3px 10px rgba(120,30,20,.28)}
.mt-hero.lose .mt-badge{background:var(--tier-chip-bg);color:var(--dim)}
.mt-head{display:flex;flex-direction:column;gap:3px;min-width:0}
.mt-head b{font-size:13.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-head i{font-style:normal;font-size:11.5px;color:var(--dim)}
.mt-grid{margin-bottom:12px}
.mt-line{font-size:12.5px;color:var(--dim);margin-bottom:2px}
.mt-line b{color:var(--text);font-weight:700}
.mt-line .up{color:var(--log-gain)}
.mt-line .down{color:var(--log-lose)}
.mt-rows{display:flex;flex-direction:column;gap:5px}
.mt-row{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:8px;background:var(--bg2);font-size:12.5px}
.mt-row.me{background:var(--gold-faint);box-shadow:inset 0 0 0 1px var(--gold-soft)}
.mr-no{flex:none;width:14px;text-align:center;font-size:11px;color:var(--dim)}
.mr-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-bot{font-style:normal;font-size:9.5px;margin-left:4px;padding:0 4px;border-radius:4px;background:var(--tier-chip-bg);color:var(--dim)}
.mr-char{flex:none;font-size:11px;color:var(--dim)}
.mr-val{flex:none;min-width:64px;text-align:right;font-size:12px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.mt-tags{display:flex;flex-wrap:wrap;gap:6px}
.mt-tag{font-size:11.5px;padding:3px 8px;border-radius:7px;background:var(--bg2);border:1px solid var(--line);color:var(--cell-text)}
.mt-tag .mt-lv{margin-left:4px;font-style:normal;font-size:10.5px;opacity:.72}
.mt-tag.fort{color:var(--gold-strong);border-color:var(--gold-soft);background:var(--gold-faint)}
.mt-none{font-size:12px;color:var(--dim)}


.panel-note{margin-top:12px;font-size:11.5px;line-height:1.6;color:var(--dim);letter-spacing:.03em;text-align:center}
.rent-body{text-align:center;padding:6px 2px}
.rent-line{font-size:14px;color:var(--text)}
.rent-line b{color:var(--gold-strong)}
.rent-amt{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--red,#c64b3c);margin:12px 0 4px;font-variant-numeric:tabular-nums}

.fav-char{margin-top:10px;font-size:12.5px;color:var(--dim)}
.fav-char b{color:var(--gold-strong)}

@media(max-width:640px){
  .stats-tab{min-width:60px;font-size:12px}
  .item-bag{max-width:118px}
  .bag-chip{width:40px;height:43px}
  .gift-pop{width:226px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .top-avatar{padding:3px 7px 3px 3px;border-radius:18px}.ta-badge{width:22px;height:22px;font-size:11px}.ta-name{max-width:44px}
}

/* ===== 设置 · 音声开关与音量 ===== */
.au-row{display:flex;align-items:center;gap:10px;padding:7px 2px}
.au-label{width:38px;flex:none;font-size:12.5px;color:var(--text)}
.sw{position:relative;width:38px;height:20px;padding:0;flex:none;border-radius:11px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;transition:background .18s,border-color .18s}
.sw i{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .18s}
.sw.on{background:var(--gold-strong);border-color:var(--gold-strong)}
.sw.on i{left:20px}
.au-vol{flex:1;min-width:0;height:20px;accent-color:var(--gold-strong);cursor:pointer}

/* ===== 终局演出覆盖层 ===== */
.eg-fx{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(24,19,12,0) 26%,rgba(24,19,12,.38));animation:egIn .4s ease-out;transition:opacity .45s}
.eg-fx.eg-lose,.eg-fx.eg-bankrupt,.eg-fx.eg-surrender{background:radial-gradient(ellipse at center,rgba(24,20,14,.08) 20%,rgba(20,17,12,.5))}
.eg-fx.out{opacity:0}
@keyframes egIn{from{opacity:0}to{opacity:1}}
.eg-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.eg-center{position:relative;z-index:3;text-align:center}
.eg-title{
  font-family:var(--serif);font-weight:900;font-size:min(108px,17vw);letter-spacing:.2em;padding-left:.2em;line-height:1.1;
  background:linear-gradient(165deg,#543f1a,#8a6d2f 42%,#33291a 82%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 10px rgba(20,14,6,.45));
  animation:egTitleIn .8s cubic-bezier(.2,.9,.3,1.2) both;
}
.eg-fx.eg-lose .eg-title,.eg-fx.eg-bankrupt .eg-title,.eg-fx.eg-surrender .eg-title{
  background:linear-gradient(165deg,#4a4238,#6b5f4c 45%,#2e2820 85%);
  -webkit-background-clip:text;background-clip:text;
}
@keyframes egTitleIn{0%{opacity:0;transform:scale(1.35);filter:blur(10px) drop-shadow(0 3px 10px rgba(20,14,6,.45))}60%{filter:blur(0) drop-shadow(0 3px 10px rgba(20,14,6,.45))}100%{opacity:1;transform:scale(1)}}
.eg-inkout{animation:egTitleIn .8s cubic-bezier(.2,.9,.3,1.2) both,inkOut 1.1s ease-in 1.5s forwards}
@keyframes inkOut{to{opacity:0;filter:blur(12px)}}
.eg-seal{
  display:inline-grid;place-items:center;width:46px;height:46px;margin-top:14px;
  background:#a8362a;color:#fdf6e3;font-family:var(--serif);font-size:26px;font-weight:700;
  border-radius:7px;transform:rotate(-6deg);box-shadow:0 3px 12px rgba(120,30,20,.4);
  animation:sealStamp .5s cubic-bezier(.3,1.4,.5,1) .55s both;
}
@keyframes sealStamp{0%{opacity:0;transform:rotate(-6deg) scale(2.1)}70%{transform:rotate(-6deg) scale(.94)}100%{opacity:1;transform:rotate(-6deg) scale(1)}}
.eg-sub{margin-top:12px;font-family:var(--serif);font-size:15px;letter-spacing:.42em;padding-left:.42em;color:#8a7d63;animation:egSubIn .8s ease-out .5s both}
@keyframes egSubIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.eg-ribbon{position:absolute;top:-24vh;width:24px;height:38vh;z-index:2;opacity:0;animation:ribbonFall var(--dur,3s) var(--delay,0s) cubic-bezier(.3,.4,.6,1) forwards}
@keyframes ribbonFall{0%{transform:translateY(0) rotate(7deg);opacity:0}8%{opacity:.95}72%{opacity:.9}100%{transform:translateY(150vh) rotate(-17deg);opacity:.55}}
.eg-leaf{position:absolute;top:-7vh;width:20px;z-index:2;opacity:0;animation:leafFall var(--dur,4.2s) var(--delay,0s) linear forwards}
@keyframes leafFall{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.9}55%{transform:translate(38px,58vh) rotate(190deg)}100%{transform:translate(-12px,112vh) rotate(345deg);opacity:.5}}
.eg-sword{position:absolute;right:13%;bottom:12%;width:52px;height:174px;z-index:2;opacity:.92}
.eg-sword .blade{transform-box:fill-box;animation:sheathe 1.7s cubic-bezier(.35,.6,.3,1) .35s both}
@keyframes sheathe{0%{transform:translateY(-76px);opacity:0}12%{opacity:1}100%{transform:translateY(-3px);opacity:1}}
@media(max-width:640px){
  .eg-title{font-size:23vw}
  .eg-sword{right:6%;bottom:9%;width:42px;height:141px}
}

/* ===== 7.6 交易行 / 欠款拍卖 / 成就 / 续局条 ===== */

/* 首页续局条 */
.resume-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border-radius:12px;
  background:linear-gradient(100deg,var(--gold-faint),transparent 72%);border:1px solid var(--gold-soft);font-size:13px;color:var(--text)}
.rb-tag{font-size:10px;letter-spacing:.12em;padding:2px 7px;border-radius:5px;background:var(--gold);color:var(--ink);font-weight:700}
.rb-txt{flex:1 1 auto;min-width:0;color:var(--dim)}
.rb-acts{display:flex;gap:8px;flex:none;margin-left:auto}
.rb-txt b{color:var(--gold-strong);font-family:var(--serif);letter-spacing:.08em}

/* 欠款：封地选择 */
.debt-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%}
.debt-btn{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px;min-width:0;line-height:1.25}
.db-name{position:relative;font-size:13px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-sub{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.db-fort{font-size:8px;font-style:normal;line-height:1;padding:1px 3px;border-radius:3px;margin-left:4px;vertical-align:1px;background:var(--gold);color:var(--ink)}

/* 拍卖：密封报价 */
.bid-row{display:flex;gap:7px;width:100%}
.bid-row input{flex:1;min-width:0;padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:14px;font-variant-numeric:tabular-nums}
.bid-row input:focus{outline:none;border-color:var(--gold)}
.bid-row .btn{padding:9px 13px;font-size:13px;min-height:40px;flex:none}
.bid-note{width:100%;margin-top:6px;font-size:11px;line-height:1.6;color:var(--dim);text-align:left}
.bid-board{display:grid;gap:6px;margin:10px 0 4px}
.bid-line{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);font-size:13px}
.bid-line.win{border-color:var(--gold);background:var(--gold-faint)}
.bl-rank{width:16px;text-align:center;color:var(--dim);font-size:11px}
.bl-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.bl-amt{display:flex;align-items:center;gap:6px;color:var(--gold-strong);font-weight:700;font-variant-numeric:tabular-nums}
.bl-crown{font-style:normal;font-size:9px;padding:1px 4px;border-radius:4px;background:var(--gold);color:var(--ink)}
.auc-tag{font-size:10px;letter-spacing:.1em;padding:2px 7px;border-radius:5px;background:var(--gold-soft);color:var(--gold-strong)}

/* 交易行 */
.mkt-form{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;align-items:center}
.mkt-form select,.mkt-form input{padding:9px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:13px;min-width:0;width:100%}
.mkt-form input{font-variant-numeric:tabular-nums}
.mkt-form select:focus,.mkt-form input:focus{outline:none;border-color:var(--gold)}
.mkt-form .btn{padding:9px 14px;font-size:13px;min-height:38px}
.mkt-note{margin-top:7px;font-size:11px;line-height:1.6;color:var(--dim)}
.mkt-list{display:grid;gap:7px}
.mkt-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.mkt-ico{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--gold-soft);color:var(--gold-strong);font-size:13px;flex:none}
.mkt-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.mkt-info b{font-size:13px;font-weight:600}
.mkt-info i{font-size:10.5px;font-style:normal;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt-price{font-size:13px;font-weight:700;color:var(--gold-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.mkt-row .btn-mini{padding:6px 10px;font-size:12px;flex:none}
.mkt-none{padding:10px 2px;font-size:12.5px;color:var(--dim)}

/* 背包：在售锁定 */
.bag-chip.locked{opacity:.6}
.bag-sale{position:absolute;top:-5px;right:-4px;font-size:8px;font-style:normal;line-height:1;padding:2px 3px;border-radius:4px;background:var(--gold);color:var(--ink);font-weight:700}

/* 称号 */
.pd-titles{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.pd-title{font-size:11px;padding:3px 9px;border-radius:20px;background:var(--gold-soft);color:var(--gold-strong);border:1px solid var(--gold-soft);letter-spacing:.05em}

/* 成就 */
.ach-hero{display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;background:linear-gradient(120deg,var(--gold-faint),transparent 75%);border:1px solid var(--gold-soft)}
.ach-seal{display:grid;place-items:center;width:52px;height:52px;border-radius:9px;background:#a8362a;color:#fdf6e3;font-family:var(--serif);font-size:28px;font-weight:700;transform:rotate(-5deg);box-shadow:0 4px 14px rgba(120,30,20,.3);flex:none}
.ach-main{flex:1;min-width:0}
.ach-title{font-family:var(--serif);font-size:22px;letter-spacing:.1em;color:var(--gold-strong);line-height:1.2}
.ach-sub{font-size:12px;color:var(--dim);margin-top:3px}
.ach-who{margin-top:12px;font-size:13px;line-height:1.8}
.ach-who b{color:var(--gold-strong)}

@media(max-width:430px){
  .mkt-form{grid-template-columns:1fr 1fr;gap:6px}
  .mkt-form .btn{grid-column:1/-1}
}
@media(max-width:352px){
  .debt-grid{grid-template-columns:1fr}
}


/* ============================================================
   帝都皮肤（长安 / 洛阳）：上城堞、下宫影、中间一方朱印
   —— 装饰全部落在 z-index:0 的边缘与衬底层，
      序号 / 城名 / 地价 / 等级条 / 归属旗 / 棋子 一律不遮不压。
   剪影用 mask 着色，随明暗主题与 accent 主色自动换色，不突兀。
   ============================================================ */
.cell.capital{
  --cap-seal:#b8432c;              /* 朱印底色：实物朱砂，两主题通用 */
  --cap-seal-hi:#cf5b3f;
  --cap-ink:var(--gold);           /* 剪影/城堞着色：随主题主色走 */
  --cap-name:var(--gold-strong);   /* 城名着色：浅色主题另用深朱砂，保证可读 */
  border-color:rgba(196,84,58,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 5px rgba(0,0,0,.12),0 0 14px var(--gold-faint);
}
/* 顶部城堞：左右各让开 20px，避开左上序号与右上等级条 */
.cell.capital::before{
  content:"";position:absolute;left:20px;right:20px;top:0;height:6px;
  z-index:0;pointer-events:none;opacity:.55;
  background:
    repeating-linear-gradient(90deg,var(--cap-ink) 0 4px,transparent 4px 8px) 0 0/100% 4px no-repeat,
    linear-gradient(var(--cap-ink),var(--cap-ink)) 0 100%/100% 1.4px no-repeat;
}
/* 宫阙剪影：衬在文字之下（文字 z-index:1），低透明度只做氛围 */
.cell.capital::after{
  content:"";position:absolute;left:8%;right:8%;bottom:15px;height:42%;
  z-index:0;pointer-events:none;background:var(--cap-ink);opacity:.24;
  -webkit-mask:var(--cap-art) center bottom/contain no-repeat;
          mask:var(--cap-art) center bottom/contain no-repeat;
}
.cell.cap-changan{--cap-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20d%3D%22M6%2028%2020%2024%2060%205%20100%2024%20114%2028%20104%2031%2060%2015%2016%2031Z%22%2F%3E%0A%3Cpath%20d%3D%22M28%2030h64v9H28z%22%2F%3E%0A%3Cpath%20d%3D%22M14%2051%2026%2047%2060%2033%2094%2047%20106%2051%2096%2054%2060%2042%2024%2054Z%22%2F%3E%0A%3Cpath%20d%3D%22M33%2053h54v9H33z%22%2F%3E%0A%3Cpath%20d%3D%22M23%2071%2034%2067%2060%2056%2086%2067%2097%2071%2088%2074%2060%2065%2032%2074Z%22%2F%3E%0A%3Cpath%20d%3D%22M28%2073h64v7H28z%22%2F%3E%0A%3Cpath%20d%3D%22M20%2080h80v5H20z%22%2F%3E%0A%3Cpath%20d%3D%22M12%2086h96v5H12z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E");}
.cell.cap-luoyang{--cap-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20d%3D%22M22%2025%2034%2021%2060%206%2086%2021%2098%2025%2088%2029%2060%2016%2032%2029Z%22%2F%3E%0A%3Cpath%20d%3D%22M34%2028h52v12H34z%22%2F%3E%0A%3Cpath%20d%3D%22M20%2036h9v6h-9zM36%2036h9v6h-9zM56%2036h9v6h-9zM76%2036h9v6h-9zM92%2036h9v6h-9z%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M18%2041h84v33H18zM52%2074V58q8-10%2016%200v16z%22%2F%3E%0A%3Cpath%20d%3D%22M8%2079q12-6%2024%200t24%200%2024%200%2024%200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%2F%3E%0A%3Cpath%20d%3D%22M22%2086q12-5%2024%200t24%200%2024%200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E");}

/* 「都」字化作一方朱印：不占额外空间，只替换原图标的外观 */
.cell.capital .c-icon{
  font-size:17px;line-height:1;padding:4px 5px 5px;margin-top:4px;
  color:#f8ecdc;letter-spacing:0;border-radius:5px;
  background:linear-gradient(155deg,var(--cap-seal-hi),var(--cap-seal));
  box-shadow:inset 0 0 0 1px rgba(248,236,220,.42),0 2px 5px rgba(120,40,20,.28);
  text-shadow:0 1px 1px rgba(90,25,12,.35);
}
.cell.capital .c-name{
  color:var(--cap-name);letter-spacing:.14em;text-indent:.14em;margin-top:5px;
  text-shadow:0 1px 6px var(--gold-faint);
}
.cell.capital .c-cost{margin-top:2px}
.cell.capital:hover{box-shadow:0 7px 18px rgba(0,0,0,.28),0 0 20px var(--gold-soft)}

/* 浅色主题：米白底上浅金会看不清，剪影换深赭、城名换深朱砂，保证字永远清晰 */
html[data-theme="light"] .cell.capital{--cap-ink:#8a5a2a;--cap-name:#8a3a24}
html[data-theme="light"] .cell.capital::after{opacity:.20}
html[data-theme="light"] .cell.capital::before{opacity:.5}
html[data-theme="light"] .cell.capital .c-name{text-shadow:none}
html[data-theme="light"] .cell.capital .c-cost{color:#9c6a1c}

@media(max-width:640px){
  .cell.capital::before{left:16px;right:16px;height:5px;
    background:
      repeating-linear-gradient(90deg,var(--cap-ink) 0 3px,transparent 3px 6px) 0 0/100% 3px no-repeat,
      linear-gradient(var(--cap-ink),var(--cap-ink)) 0 100%/100% 1.2px no-repeat;}
  .cell.capital::after{left:9%;right:9%;bottom:14px;height:40%}
  .cell.capital .c-icon{font-size:14px;padding:3px 4px 4px;margin-top:3px;border-radius:4px}
  .cell.capital .c-name{margin-top:4px;letter-spacing:.1em;text-indent:.1em}
}


/* ============================================================
   城 / 郡 皮肤（与帝都同一套「檐线 + 剪影」语言，但降一档）
   城 = 青蓝瓦檐 + 城墙民居；郡 = 紫玉重檐 + 府衙门楼。
   数量多，装饰刻意比帝都淡，避免整盘花哨。
   装饰一律 z-index:0，文字 / 归属旗 / 棋子层级不变，绝不遮字。
   ============================================================ */
.cell.tier-county, .cell.tier-commandery{ --tier-art:none; --tier-ink:currentColor; }
.cell.tier-county{ --cty-ink:#6fa3e0; --cty-chip:rgba(70,121,169,.20); }
.cell.tier-commandery{ --cmd-ink:#a98de0; --cmd-chip:rgba(128,102,175,.20); }

/* 顶部檐线：城 = 单檐瓦垄；郡 = 重檐（多一道下檐线） */
.cell.tier-county::before, .cell.tier-commandery::before{
  content:"";position:absolute;left:18px;right:18px;top:0;height:6px;
  z-index:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(90deg,var(--tier-line) 0 3px,transparent 3px 7px) 0 0/100% 3px no-repeat,
    linear-gradient(var(--tier-line),var(--tier-line)) 0 100%/100% 1px no-repeat;
}
.cell.tier-county{ --tier-line:var(--cty-ink); }
.cell.tier-commandery{ --tier-line:var(--cmd-ink); }
.cell.tier-commandery::before{
  height:8px;opacity:.55;
  background:
    repeating-linear-gradient(90deg,var(--tier-line) 0 3px,transparent 3px 7px) 0 0/100% 3px no-repeat,
    linear-gradient(var(--tier-line),var(--tier-line)) 0 4px/100% 1px no-repeat,
    linear-gradient(var(--tier-line),var(--tier-line)) 12% 100%/76% 1px no-repeat;
}

/* 底部剪影：衬在文字之下，保持比例、底对齐 */
.cell.tier-county::after, .cell.tier-commandery::after{
  content:"";position:absolute;left:6%;right:6%;bottom:12px;height:32%;
  z-index:0;pointer-events:none;opacity:.20;
  -webkit-mask:var(--tier-art) center bottom/contain no-repeat;
          mask:var(--tier-art) center bottom/contain no-repeat;
}
.cell.tier-county::after{ background:var(--cty-ink); opacity:.34; }
.cell.tier-commandery::after{ background:var(--cmd-ink); opacity:.38; }
.cell.tier-county{ --tier-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20d%3D%22M6%2058h8v6H6zM18%2058h8v6h-8zM30%2058h8v6h-8zM42%2058h8v6h-8zM54%2058h8v6h-8zM66%2058h8v6h-8zM78%2058h8v6h-8zM90%2058h8v6h-8zM102%2058h8v6h-8z%22%2F%3E%0A%3Cpath%20d%3D%22M6%2064h108v10H6z%22%2F%3E%0A%3Cpath%20d%3D%22M38%2050%2060%2032%2082%2050%2076%2053%2060%2040%2044%2053Z%22%2F%3E%0A%3Cpath%20d%3D%22M45%2052h30v12H45z%22%2F%3E%0A%3Cpath%20d%3D%22M14%2060%2026%2048%2038%2060%2034%2062%2026%2054%2018%2062Z%22%2F%3E%0A%3Cpath%20d%3D%22M19%2062h14v2H19z%22%2F%3E%0A%3Cpath%20d%3D%22M82%2060%2094%2048%20106%2060%20102%2062%2094%2054%2086%2062Z%22%2F%3E%0A%3Cpath%20d%3D%22M87%2062h14v2H87z%22%2F%3E%0A%3Cpath%20d%3D%22M0%2080h120v4H0z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E"); }
.cell.tier-commandery{ --tier-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20d%3D%22M28%2032%2040%2028%2060%2015%2080%2028%2092%2032%2084%2036%2060%2024%2036%2036Z%22%2F%3E%0A%3Cpath%20d%3D%22M40%2036h40v13H40z%22%2F%3E%0A%3Cpath%20d%3D%22M37%2049h5v18h-5zM78%2049h5v18h-5z%22%2F%3E%0A%3Cpath%20d%3D%22M52%2049h16v18H52z%22%2F%3E%0A%3Cpath%20d%3D%22M33%2067h54v5H33z%22%2F%3E%0A%3Cpath%20d%3D%22M27%2073h66v5H27z%22%2F%3E%0A%3Cpath%20d%3D%22M15%2038h3v29h-3z%22%2F%3E%0A%3Cpath%20d%3D%22M18%2038%2032%2042%2018%2047Z%22%2F%3E%0A%3Cpath%20d%3D%22M102%2038h3v29h-3z%22%2F%3E%0A%3Cpath%20d%3D%22M102%2038%2088%2042%20102%2047Z%22%2F%3E%0A%3Cpath%20d%3D%22M8%2083h104v4H8z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E"); }

/* 「城」「郡」字做成淡底匾额（不反白、不抢帝都朱印的风头） */
.cell.tier-county .c-icon, .cell.tier-commandery .c-icon{
  font-size:20px;line-height:1;padding:4px 6px;margin-top:4px;border-radius:6px;
}
.cell.tier-county .c-icon{ background:var(--cty-chip);box-shadow:inset 0 0 0 1px rgba(111,163,224,.30); }
.cell.tier-commandery .c-icon{ background:var(--cmd-chip);box-shadow:inset 0 0 0 1px rgba(169,141,224,.34); }
.cell.tier-county .c-name, .cell.tier-commandery .c-name{ margin-top:4px; }

/* 浅色主题：图标字与剪影都加深，保证米白底上依然清楚 */
html[data-theme="light"] .cell.tier-county{ --cty-ink:#3f6a94;--cty-chip:rgba(70,121,169,.13); }
html[data-theme="light"] .cell.tier-commandery{ --cmd-ink:#6a4f9a;--cmd-chip:rgba(128,102,175,.13); }
html[data-theme="light"] .cell.tier-county .c-icon{ color:#2f5a85;box-shadow:inset 0 0 0 1px rgba(70,121,169,.30); }
html[data-theme="light"] .cell.tier-commandery .c-icon{ color:#5a4088;box-shadow:inset 0 0 0 1px rgba(128,102,175,.32); }
html[data-theme="light"] .cell.tier-county::after{ opacity:.28; }
html[data-theme="light"] .cell.tier-commandery::after{ opacity:.32; }
html[data-theme="light"] .cell.tier-county .c-cost,
html[data-theme="light"] .cell.tier-commandery .c-cost{ color:#9c6a1c; }

@media(max-width:640px){
  .cell.tier-county::before, .cell.tier-commandery::before{ left:15px;right:15px; }
  .cell.tier-county::after, .cell.tier-commandery::after{ left:7%;right:7%;bottom:12px;height:30%; }
  .cell.tier-county .c-icon, .cell.tier-commandery .c-icon{ font-size:17px;padding:3px 5px;margin-top:3px; }
  /* 小屏格子更挤，剪影再淡一档，保证地价数字清爽 */
  .cell.tier-county::after{ opacity:.26; }
  .cell.tier-commandery::after{ opacity:.30; }
  html[data-theme="light"] .cell.tier-county::after{ opacity:.22; }
  html[data-theme="light"] .cell.tier-commandery::after{ opacity:.26; }
}


/* ============================================================
   州 / 县 皮肤：补齐「都 → 州 → 郡 → 城 → 县」的皇城层级
   州 = 暖金高台双阙；县 = 青绿瓦檐县衙小院。
   装饰只落在 z-index:0，文字、等级条、归属旗和棋子不受影响。
   ============================================================ */
.cell.tier-state{ --state-ink:#e0a05a;--state-chip:rgba(190,105,50,.20); }
.cell.tier-town{ --town-ink:#6cc9ae;--town-chip:rgba(65,145,122,.18); }

/* 州：双重檐线，左右让开序号与等级条 */
.cell.tier-state::before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:8px;
  z-index:0;pointer-events:none;opacity:.58;
  background:
    repeating-linear-gradient(90deg,var(--state-ink) 0 3px,transparent 3px 7px) 0 0/100% 3px no-repeat,
    linear-gradient(var(--state-ink),var(--state-ink)) 0 4px/100% 1px no-repeat,
    linear-gradient(var(--state-ink),var(--state-ink)) 10% 100%/80% 1px no-repeat;
}
.cell.tier-state::after{
  content:"";position:absolute;left:5%;right:5%;bottom:12px;height:34%;
  z-index:0;pointer-events:none;background:var(--state-ink);opacity:.38;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20d%3D%22M5%2037%2013%2033%2022%2025%2031%2033%2039%2037%2033%2040%2022%2032%2011%2040Z%22%2F%3E%0A%3Cpath%20d%3D%22M14%2040h16v21H14zM10%2061h24v5H10z%22%2F%3E%0A%3Cpath%20d%3D%22M81%2037%2089%2033%2098%2025%20107%2033%20115%2037%20109%2040%2098%2032%2087%2040Z%22%2F%3E%0A%3Cpath%20d%3D%22M90%2040h16v21H90zM86%2061h24v5H86z%22%2F%3E%0A%3Cpath%20d%3D%22M37%2050%2045%2046%2060%2034%2075%2046%2083%2050%2077%2054%2060%2042%2043%2054Z%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M45%2054h30v16H45zM56%2070V61q4-6%208%200v9z%22%2F%3E%0A%3Cpath%20d%3D%22M35%2070h50v6H35zM29%2077h62v5H29zM19%2084h82v4H19z%22%2F%3E%0A%3Cpath%20d%3D%22M7%2018h2v35H7zM9%2019%2022%2023%209%2028Z%22%2F%3E%0A%3Cpath%20d%3D%22M111%2018h2v35h-2zM111%2019%2098%2023%20111%2028Z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E") center bottom/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20d%3D%22M5%2037%2013%2033%2022%2025%2031%2033%2039%2037%2033%2040%2022%2032%2011%2040Z%22%2F%3E%0A%3Cpath%20d%3D%22M14%2040h16v21H14zM10%2061h24v5H10z%22%2F%3E%0A%3Cpath%20d%3D%22M81%2037%2089%2033%2098%2025%20107%2033%20115%2037%20109%2040%2098%2032%2087%2040Z%22%2F%3E%0A%3Cpath%20d%3D%22M90%2040h16v21H90zM86%2061h24v5H86z%22%2F%3E%0A%3Cpath%20d%3D%22M37%2050%2045%2046%2060%2034%2075%2046%2083%2050%2077%2054%2060%2042%2043%2054Z%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M45%2054h30v16H45zM56%2070V61q4-6%208%200v9z%22%2F%3E%0A%3Cpath%20d%3D%22M35%2070h50v6H35zM29%2077h62v5H29zM19%2084h82v4H19z%22%2F%3E%0A%3Cpath%20d%3D%22M7%2018h2v35H7zM9%2019%2022%2023%209%2028Z%22%2F%3E%0A%3Cpath%20d%3D%22M111%2018h2v35h-2zM111%2019%2098%2023%20111%2028Z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E") center bottom/contain no-repeat;
}
.cell.tier-state .c-icon{
  font-size:20px;line-height:1;padding:4px 6px;margin-top:4px;border-radius:6px;
  background:var(--state-chip);box-shadow:inset 0 0 0 1px rgba(224,160,90,.36);
}
.cell.tier-state .c-name{margin-top:4px;letter-spacing:.08em;text-indent:.08em}

/* 县：单层短瓦檐 + 更低矮的县衙剪影，规格低于城 */
.cell.tier-town::before{
  content:"";position:absolute;left:20px;right:20px;top:0;height:5px;
  z-index:0;pointer-events:none;opacity:.46;
  background:
    repeating-linear-gradient(90deg,var(--town-ink) 0 3px,transparent 3px 7px) 0 0/100% 3px no-repeat,
    linear-gradient(var(--town-ink),var(--town-ink)) 0 100%/100% 1px no-repeat;
}
.cell.tier-town::after{
  content:"";position:absolute;left:8%;right:8%;bottom:12px;height:30%;
  z-index:0;pointer-events:none;background:var(--town-ink);opacity:.30;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20d%3D%22M35%2052%2043%2048%2060%2035%2077%2048%2085%2052%2078%2056%2060%2043%2042%2056Z%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M44%2056h32v22H44zM55%2078V65q5-7%2010%200v13z%22%2F%3E%0A%3Cpath%20d%3D%22M8%2065%2015%2062%2025%2053%2035%2062%2042%2065%2037%2068%2025%2060%2013%2068Z%22%2F%3E%0A%3Cpath%20d%3D%22M15%2068h20v10H15z%22%2F%3E%0A%3Cpath%20d%3D%22M78%2065%2085%2062%2095%2053%20105%2062%20112%2065%20107%2068%2095%2060%2083%2068Z%22%2F%3E%0A%3Cpath%20d%3D%22M85%2068h20v10H85z%22%2F%3E%0A%3Cpath%20d%3D%22M5%2079h40v6H5zM75%2079h40v6H75zM0%2086h120v3H0z%22%2F%3E%0A%3Cpath%20d%3D%22M103%2041h3v20h-3z%22%2F%3E%0A%3Cpath%20d%3D%22M94%2045q0-8%208-8%202-9%2010-4%208%201%206%209%205%206-2%2010H99q-6-2-5-7Z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E") center bottom/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20d%3D%22M35%2052%2043%2048%2060%2035%2077%2048%2085%2052%2078%2056%2060%2043%2042%2056Z%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M44%2056h32v22H44zM55%2078V65q5-7%2010%200v13z%22%2F%3E%0A%3Cpath%20d%3D%22M8%2065%2015%2062%2025%2053%2035%2062%2042%2065%2037%2068%2025%2060%2013%2068Z%22%2F%3E%0A%3Cpath%20d%3D%22M15%2068h20v10H15z%22%2F%3E%0A%3Cpath%20d%3D%22M78%2065%2085%2062%2095%2053%20105%2062%20112%2065%20107%2068%2095%2060%2083%2068Z%22%2F%3E%0A%3Cpath%20d%3D%22M85%2068h20v10H85z%22%2F%3E%0A%3Cpath%20d%3D%22M5%2079h40v6H5zM75%2079h40v6H75zM0%2086h120v3H0z%22%2F%3E%0A%3Cpath%20d%3D%22M103%2041h3v20h-3z%22%2F%3E%0A%3Cpath%20d%3D%22M94%2045q0-8%208-8%202-9%2010-4%208%201%206%209%205%206-2%2010H99q-6-2-5-7Z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E") center bottom/contain no-repeat;
}
.cell.tier-town .c-icon{
  font-size:19px;line-height:1;padding:4px 6px;margin-top:4px;border-radius:6px;
  background:var(--town-chip);box-shadow:inset 0 0 0 1px rgba(108,201,174,.30);
}
.cell.tier-town .c-name{margin-top:4px}

/* 浅色主题用深铜/深青，米白底上也保持清晰 */
html[data-theme="light"] .cell.tier-state{--state-ink:#9a5a24;--state-chip:rgba(190,105,50,.12)}
html[data-theme="light"] .cell.tier-town{--town-ink:#367a68;--town-chip:rgba(65,145,122,.12)}
html[data-theme="light"] .cell.tier-state .c-icon{color:#854719;box-shadow:inset 0 0 0 1px rgba(154,90,36,.32)}
html[data-theme="light"] .cell.tier-town .c-icon{color:#2f6f60;box-shadow:inset 0 0 0 1px rgba(54,122,104,.30)}
html[data-theme="light"] .cell.tier-state::after{opacity:.32}
html[data-theme="light"] .cell.tier-town::after{opacity:.24}
html[data-theme="light"] .cell.tier-state .c-cost,
html[data-theme="light"] .cell.tier-town .c-cost{color:#9c6a1c}

@media(max-width:640px){
  .cell.tier-state::before{left:14px;right:14px}
  .cell.tier-town::before{left:17px;right:17px}
  .cell.tier-state::after{left:6%;right:6%;height:32%;opacity:.30}
  .cell.tier-town::after{left:9%;right:9%;height:28%;opacity:.24}
  .cell.tier-state .c-icon,.cell.tier-town .c-icon{font-size:17px;padding:3px 5px;margin-top:3px}
  html[data-theme="light"] .cell.tier-state::after{opacity:.26}
  html[data-theme="light"] .cell.tier-town::after{opacity:.20}
}


/* ============================================================
   蛮 / 黄巾乱 / 举孝廉 / 奇遇：统一的轻量事件纹章
   同一套顶部细纹 + 底部剪影 + 淡底字章，题材各自辨识。
   装饰 z-index:0，不遮名称、地价、序号、等级与归属旗。
   ============================================================ */
.cell.tier-foreign,.cell.t-huangjin,.cell.t-juxiao,.cell.t-fate{--sig-art:none}
.cell.tier-foreign{--sig-ink:#e8b93c;--sig-chip:rgba(212,160,23,.18);--sig-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20d%3D%22M0%2070%2020%2048%2034%2062%2052%2039%2076%2066%2094%2050%20120%2073V80H0Z%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M35%2073Q60%2038%2085%2073ZM56%2073V62q4-7%208%200v11Z%22%2F%3E%0A%3Cpath%20d%3D%22M32%2073h56v6H32z%22%2F%3E%0A%3Cpath%20d%3D%22M4%2076Q19%2054%2034%2076ZM7%2076h24v5H7z%22%2F%3E%0A%3Cpath%20d%3D%22M96%2035h3v40h-3zM99%2036%20114%2041%2099%2047Z%22%2F%3E%0A%3Cpath%20d%3D%22M0%2084h120v4H0z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E")}
.cell.t-huangjin{--sig-ink:#e08a7a;--sig-chip:rgba(175,58,45,.18);--sig-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20d%3D%22M60%2018C65%2034%2079%2038%2077%2053%2075%2066%2065%2071%2058%2068%2043%2064%2042%2049%2051%2036%2051%2046%2057%2048%2058%2040%2059%2032%2057%2026%2060%2018Z%22%2F%3E%0A%3Cpath%20d%3D%22M54%2049Q63%2054%2061%2064%2072%2058%2069%2049%2078%2062%2066%2070H54Q43%2061%2054%2049Z%22%2F%3E%0A%3Cpath%20d%3D%22M36%2066h48l-7%2010H43Z%22%2F%3E%0A%3Cpath%20d%3D%22M43%2077h34l9%209H34Z%22%2F%3E%0A%3Cpath%20d%3D%22M17%2038h3v40h-3zM20%2039%2036%2044%2020%2051Z%22%2F%3E%0A%3Cpath%20d%3D%22M100%2038h3v40h-3zM100%2039%2084%2044%20100%2051Z%22%2F%3E%0A%3Cpath%20d%3D%22M25%2088h70v3H25z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E")}
.cell.t-juxiao{--sig-ink:#6cc9ae;--sig-chip:rgba(65,145,122,.17);--sig-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20d%3D%22M27%2029h10v48H27zM41%2025h10v52H41zM55%2028h10v49H55zM69%2024h10v53H69zM83%2030h10v47H83z%22%2F%3E%0A%3Cpath%20d%3D%22M22%2041h76v5H22zM22%2062h76v5H22z%22%2F%3E%0A%3Cpath%20d%3D%22M31%2077h58v5H31zM24%2084h72v4H24z%22%2F%3E%0A%3Cpath%20d%3D%22M96%2052h4v27h-4zM92%2050h12l-6-10Z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E")}
.cell.t-fate{--sig-ink:#e8c986;--sig-chip:rgba(196,154,84,.18);--sig-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20d%3D%22M18%2072Q4%2068%209%2056%2013%2046%2027%2049%2029%2033%2046%2034%2055%2020%2070%2030%2086%2026%2091%2043%20108%2040%20112%2053%20117%2068%2099%2073Z%22%2F%3E%0A%3Cpath%20d%3D%22M60%2013%2064%2024%2075%2028%2064%2032%2060%2043%2056%2032%2045%2028%2056%2024Z%22%2F%3E%0A%3Cpath%20d%3D%22M92%2014%2094%2020%20100%2022%2094%2024%2092%2030%2090%2024%2084%2022%2090%2020Z%22%2F%3E%0A%3Cpath%20d%3D%22M28%2024%2030%2029%2035%2031%2030%2033%2028%2038%2026%2033%2021%2031%2026%2029Z%22%2F%3E%0A%3Cpath%20d%3D%22M25%2079h70v4H25z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E")}

.cell.tier-foreign::before,.cell.t-huangjin::before,.cell.t-juxiao::before,.cell.t-fate::before{
  content:"";position:absolute;left:18px;right:18px;top:0;height:5px;
  z-index:0;pointer-events:none;opacity:.46;
  background:
    repeating-linear-gradient(90deg,var(--sig-ink) 0 3px,transparent 3px 7px) 0 0/100% 3px no-repeat,
    linear-gradient(var(--sig-ink),var(--sig-ink)) 0 100%/100% 1px no-repeat;
}
.cell.tier-foreign::after,.cell.t-huangjin::after,.cell.t-juxiao::after,.cell.t-fate::after{
  content:"";position:absolute;left:10%;right:10%;bottom:12px;height:29%;
  z-index:0;pointer-events:none;background:var(--sig-ink);opacity:.32;
  -webkit-mask:var(--sig-art) center bottom/contain no-repeat;
          mask:var(--sig-art) center bottom/contain no-repeat;
}
.cell.tier-foreign .c-icon,.cell.t-huangjin .c-icon,.cell.t-juxiao .c-icon,.cell.t-fate .c-icon{
  font-size:20px;line-height:1;padding:4px 6px;margin-top:4px;border-radius:6px;
  background:var(--sig-chip);box-shadow:inset 0 0 0 1px var(--sig-chip);
}
.cell.tier-foreign .c-name,.cell.t-huangjin .c-name,.cell.t-juxiao .c-name,.cell.t-fate .c-name{margin-top:4px}

/* 浅色主题：降低明度、保留色相，避免米白底上发飘 */
html[data-theme="light"] .cell.tier-foreign{--sig-ink:#8a6416;--sig-chip:rgba(212,160,23,.12)}
html[data-theme="light"] .cell.t-huangjin{--sig-ink:#a34735;--sig-chip:rgba(175,58,45,.12)}
html[data-theme="light"] .cell.t-juxiao{--sig-ink:#367a68;--sig-chip:rgba(65,145,122,.12)}
html[data-theme="light"] .cell.t-fate{--sig-ink:#956a20;--sig-chip:rgba(196,154,84,.12)}
html[data-theme="light"] .cell.tier-foreign .c-icon{color:#76530f}
html[data-theme="light"] .cell.t-huangjin .c-icon{color:#913c2e}
html[data-theme="light"] .cell.t-juxiao .c-icon{color:#2f6f60}
html[data-theme="light"] .cell.t-fate .c-icon{color:#815918}
html[data-theme="light"] .cell.tier-foreign::after,
html[data-theme="light"] .cell.t-huangjin::after,
html[data-theme="light"] .cell.t-juxiao::after,
html[data-theme="light"] .cell.t-fate::after{opacity:.26}
html[data-theme="light"] .cell.tier-foreign .c-cost{color:#9c6a1c}

@media(max-width:640px){
  .cell.tier-foreign::before,.cell.t-huangjin::before,.cell.t-juxiao::before,.cell.t-fate::before{left:15px;right:15px}
  .cell.tier-foreign::after,.cell.t-huangjin::after,.cell.t-juxiao::after,.cell.t-fate::after{left:11%;right:11%;height:27%;opacity:.26}
  .cell.tier-foreign .c-icon,.cell.t-huangjin .c-icon,.cell.t-juxiao .c-icon,.cell.t-fate .c-icon{font-size:17px;padding:3px 5px;margin-top:3px}
  html[data-theme="light"] .cell.tier-foreign::after,
  html[data-theme="light"] .cell.t-huangjin::after,
  html[data-theme="light"] .cell.t-juxiao::after,
  html[data-theme="light"] .cell.t-fate::after{opacity:.22}
}


/* ============================================================
   监狱 / 强攻令 / 守城令 / 五关：统一的军旅纹章
   玄铁牢门、朱红双剑、青蓝盾墙、山石关门双塔。
   细节略多于事件格，但仍是低饱和纹样，不抢文字与棋子。
   ============================================================ */
.cell.t-jail,.cell.t-attack,.cell.t-defend,.cell.t-pass{--mil-art:none}
.cell.t-jail{--mil-ink:#aab0bc;--mil-chip:rgba(110,116,126,.18);--mil-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M22%2082V45Q22%2018%2060%2018T98%2045V82H84V45Q84%2031%2060%2031T36%2045V82Z%22%2F%3E%0A%3Cpath%20d%3D%22M43%2043h6v39h-6zM57%2039h6v43h-6zM71%2043h6v39h-6z%22%2F%3E%0A%3Cpath%20d%3D%22M30%2055h60v5H30zM30%2072h60v5H30z%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M52%2058h16v15H52zM57%2058v-4q3-5%206%200v4h-3v-3q-1-2-2%200v3Z%22%2F%3E%0A%3Cpath%20d%3D%22M15%2084h90v4H15z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E")}
.cell.t-attack{--mil-ink:#e07a63;--mil-chip:rgba(196,72,54,.18);--mil-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20d%3D%22M25%2018%2036%2021%2074%2065%2066%2073Z%22%2F%3E%0A%3Cpath%20d%3D%22M95%2018%2084%2021%2046%2065%2054%2073Z%22%2F%3E%0A%3Cpath%20d%3D%22M53%2065%2065%2056%2071%2062%2059%2071Z%22%2F%3E%0A%3Cpath%20d%3D%22M67%2065%2055%2056%2049%2062%2061%2071Z%22%2F%3E%0A%3Cpath%20d%3D%22M57%2070h6v16h-6z%22%2F%3E%0A%3Cpath%20d%3D%22M42%2080%2054%2072%2058%2077%2046%2085Z%22%2F%3E%0A%3Cpath%20d%3D%22M78%2080%2066%2072%2062%2077%2074%2085Z%22%2F%3E%0A%3Cpath%20d%3D%22M12%2035h3v43h-3zM15%2036%2031%2041%2015%2048Z%22%2F%3E%0A%3Cpath%20d%3D%22M105%2035h3v43h-3zM105%2036%2089%2041%20105%2048Z%22%2F%3E%0A%3Cpath%20d%3D%22M20%2087h80v3H20z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E")}
.cell.t-defend{--mil-ink:#6fa3e0;--mil-chip:rgba(71,121,175,.18);--mil-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M60%2015%2091%2028V49Q91%2073%2060%2088%2029%2073%2029%2049V28ZM60%2027%2041%2035V49Q41%2064%2060%2076%2079%2064%2079%2049V35Z%22%2F%3E%0A%3Cpath%20d%3D%22M47%2046h7v-6h7v6h7v-6h7v30H47Z%22%2F%3E%0A%3Cpath%20d%3D%22M54%2060h12v16H54z%22%2F%3E%0A%3Cpath%20d%3D%22M10%2067h25v5H10zM85%2067h25v5H85zM5%2074h35v6H5zM80%2074h35v6H80z%22%2F%3E%0A%3Cpath%20d%3D%22M0%2084h120v4H0z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E")}
.cell.t-pass{--mil-ink:#b0a48c;--mil-chip:rgba(150,130,100,.18);--mil-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%0A%3Cpath%20d%3D%22M4%2029h8v7h8v-7h8v7h8v-7h8v44H4Z%22%2F%3E%0A%3Cpath%20d%3D%22M76%2029h8v7h8v-7h8v7h8v-7h8v44H76Z%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M28%2045h64v35H28zM49%2080V63q11-17%2022%200v17Z%22%2F%3E%0A%3Cpath%20d%3D%22M35%2052h12v6H35zM73%2052h12v6H73z%22%2F%3E%0A%3Cpath%20d%3D%22M11%2012h3v17h-3zM14%2013%2030%2018%2014%2024Z%22%2F%3E%0A%3Cpath%20d%3D%22M106%2012h3v17h-3zM106%2013%2090%2018%20106%2024Z%22%2F%3E%0A%3Cpath%20d%3D%22M0%2081h120v6H0zM12%2088h96v3H12z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E")}

.cell.t-jail::before,.cell.t-attack::before,.cell.t-defend::before,.cell.t-pass::before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:6px;
  z-index:0;pointer-events:none;opacity:.50;
  background:
    repeating-linear-gradient(90deg,var(--mil-ink) 0 4px,transparent 4px 8px) 0 0/100% 4px no-repeat,
    linear-gradient(var(--mil-ink),var(--mil-ink)) 0 100%/100% 1px no-repeat;
}
.cell.t-jail::after,.cell.t-attack::after,.cell.t-defend::after,.cell.t-pass::after{
  content:"";position:absolute;left:8%;right:8%;bottom:12px;height:32%;
  z-index:0;pointer-events:none;background:var(--mil-ink);opacity:.35;
  -webkit-mask:var(--mil-art) center bottom/contain no-repeat;
          mask:var(--mil-art) center bottom/contain no-repeat;
}
.cell.t-pass::after{left:6%;right:6%;height:34%;opacity:.38}
.cell.t-jail .c-icon,.cell.t-attack .c-icon,.cell.t-defend .c-icon,.cell.t-pass .c-icon{
  font-size:20px;line-height:1;padding:4px 6px;margin-top:4px;border-radius:6px;
  background:var(--mil-chip);box-shadow:inset 0 0 0 1px var(--mil-chip);
}
.cell.t-jail .c-name,.cell.t-attack .c-name,.cell.t-defend .c-name,.cell.t-pass .c-name{margin-top:4px}

/* 浅色主题：玄铁、朱红、青蓝、山石四色均降低明度 */
html[data-theme="light"] .cell.t-jail{--mil-ink:#59616e;--mil-chip:rgba(110,116,126,.12)}
html[data-theme="light"] .cell.t-attack{--mil-ink:#a04434;--mil-chip:rgba(196,72,54,.12)}
html[data-theme="light"] .cell.t-defend{--mil-ink:#3f6a94;--mil-chip:rgba(71,121,175,.12)}
html[data-theme="light"] .cell.t-pass{--mil-ink:#756548;--mil-chip:rgba(150,130,100,.13)}
html[data-theme="light"] .cell.t-jail .c-icon{color:#49515e}
html[data-theme="light"] .cell.t-attack .c-icon{color:#913c2e}
html[data-theme="light"] .cell.t-defend .c-icon{color:#2f5a85}
html[data-theme="light"] .cell.t-pass .c-icon{color:#655438}
html[data-theme="light"] .cell.t-jail::after,
html[data-theme="light"] .cell.t-attack::after,
html[data-theme="light"] .cell.t-defend::after,
html[data-theme="light"] .cell.t-pass::after{opacity:.28}
html[data-theme="light"] .cell.t-pass .c-cost{color:#9c6a1c}

@media(max-width:640px){
  .cell.t-jail::before,.cell.t-attack::before,.cell.t-defend::before,.cell.t-pass::before{left:14px;right:14px}
  .cell.t-jail::after,.cell.t-attack::after,.cell.t-defend::after,.cell.t-pass::after{left:9%;right:9%;height:29%;opacity:.28}
  .cell.t-pass::after{left:7%;right:7%;height:31%;opacity:.30}
  .cell.t-jail .c-icon,.cell.t-attack .c-icon,.cell.t-defend .c-icon,.cell.t-pass .c-icon{font-size:17px;padding:3px 5px;margin-top:3px}
  html[data-theme="light"] .cell.t-jail::after,
  html[data-theme="light"] .cell.t-attack::after,
  html[data-theme="light"] .cell.t-defend::after,
  html[data-theme="light"] .cell.t-pass::after{opacity:.23}
}


/* ============================================================
   首页 · 汉末山河入席图
   纸本山河 + 落日 + 行军虚线 + 悬浮富印；
   全部为 CSS / 内联 SVG，装饰层不接收指针事件。
   ============================================================ */
.home-hero{
  --hero-line:rgba(151,118,55,.26);
  --hero-title:#332917;
  --hero-sub:#746040;
  --hero-kicker:#8a6a35;
  --hero-ink:rgba(105,79,36,.20);
  --hero-cloud:rgba(133,104,53,.09);
  --hero-route:rgba(154,95,45,.42);
  --hero-sun:rgba(178,66,44,.16);
  --hero-ring:rgba(160,80,48,.24);
  --hero-bg1:#fbf4e5;
  --hero-bg2:#eeddba;
  position:relative;max-width:1040px;margin:2px auto 18px;padding:34px 38px 31px;
  min-height:224px;display:flex;align-items:center;
  border:1px solid var(--hero-line);border-radius:22px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(66% 126% at 84% 14%,rgba(183,72,45,.14),transparent 62%),
    linear-gradient(116deg,var(--hero-bg1),var(--hero-bg2));
  box-shadow:0 20px 44px -28px rgba(66,46,24,.62),inset 0 1px 0 rgba(255,255,255,.5);
}
html[data-theme="dark"] .home-hero{
  --hero-line:rgba(217,179,112,.20);
  --hero-title:#f4e7c8;
  --hero-sub:#c8b48b;
  --hero-kicker:#c8a364;
  --hero-ink:rgba(217,179,112,.18);
  --hero-cloud:rgba(232,201,134,.07);
  --hero-route:rgba(232,185,112,.38);
  --hero-sun:rgba(201,84,58,.22);
  --hero-ring:rgba(232,150,108,.22);
  --hero-bg1:#181510;
  --hero-bg2:#282118;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);
}
.home-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background:
    linear-gradient(90deg,rgba(125,95,48,.045) 1px,transparent 1px) 0 0/36px 36px,
    linear-gradient(rgba(125,95,48,.045) 1px,transparent 1px) 0 0/36px 36px;
  -webkit-mask:radial-gradient(82% 120% at 30% 40%,#000 10%,transparent 78%);
          mask:radial-gradient(82% 120% at 30% 40%,#000 10%,transparent 78%);
}
.home-hero::after{
  content:"";position:absolute;top:-40%;bottom:-40%;left:-38%;width:36%;z-index:4;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,248,228,.16),transparent);
  transform:rotate(8deg);animation:hhSheen 11s ease-in-out infinite;
}
html[data-theme="dark"] .home-hero::after{background:linear-gradient(100deg,transparent,rgba(255,230,176,.08),transparent)}
.hh-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hh-sun{fill:var(--hero-sun);transform-box:fill-box;transform-origin:center;animation:hhSun 8s ease-in-out infinite}
.hh-sun-ring{fill:none;stroke:var(--hero-ring);stroke-width:1;stroke-dasharray:2 7;transform-box:fill-box;transform-origin:center;animation:hhSpin 46s linear infinite}
.hh-cloud{fill:var(--hero-cloud)}
.hh-cloud.c1{animation:hhCloud 26s ease-in-out infinite alternate}
.hh-cloud.c2{animation:hhCloud 34s ease-in-out -8s infinite alternate-reverse}
.hh-ridge{fill:var(--hero-ink)}
.hh-ridge.far{opacity:.52}
.hh-ridge.near{opacity:.82}
.hh-route{fill:none;stroke:var(--hero-route);stroke-width:1.5;stroke-dasharray:3 6;animation:hhRoute 7s linear infinite}
.hh-node{fill:var(--hero-route);transform-box:fill-box;transform-origin:center;animation:hhNode 3.4s ease-in-out infinite}
.hh-node.n2{animation-delay:-.8s}.hh-node.n3{animation-delay:-1.6s}.hh-node.n4{animation-delay:-2.4s}
.hh-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
  background:
    radial-gradient(circle at 18% 22%,rgba(112,82,40,.10) 0 1px,transparent 1.5px) 0 0/7px 7px,
    radial-gradient(circle at 72% 68%,rgba(112,82,40,.08) 0 1px,transparent 1.5px) 0 0/11px 11px;
}
html[data-theme="dark"] .hh-grain{mix-blend-mode:screen;opacity:.12}
.hh-motes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hh-motes i{
  position:absolute;left:var(--x);bottom:8%;width:3px;height:3px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 7px var(--gold-glow);opacity:0;
  animation:hhMote var(--d) linear var(--delay) infinite;
}
.hh-copy{position:relative;z-index:3;max-width:660px;min-width:0}
.hh-kicker{display:flex;align-items:center;gap:11px;font-size:10.5px;letter-spacing:.28em;color:var(--hero-kicker)}
.hh-kicker span{position:relative;padding-left:22px}
.hh-kicker span::before{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:var(--gold);box-shadow:0 0 7px var(--gold-glow)}
.hh-kicker em{font-style:normal;color:var(--hero-sub);letter-spacing:.2em}
.hh-kicker em::before{content:"◆";font-size:6px;color:var(--gold);margin-right:7px;vertical-align:2px}
.home-hero .hh-title{display:flex;align-items:flex-end;gap:.09em;margin:12px 0 11px;font-family:var(--serif);font-size:58px;line-height:.98;font-weight:700;letter-spacing:.01em;color:var(--hero-title)}
.hh-title span{display:inline-block;position:relative;opacity:1;text-shadow:0 3px 18px rgba(89,63,24,.12)}
.hh-title span:nth-child(3),.hh-title span:nth-child(4){color:var(--gold-strong);text-shadow:0 0 22px var(--gold-glow)}
.hh-title span:last-child::after{
  content:"";position:absolute;left:6%;right:2%;bottom:-9px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.72;
}
.view.active .hh-title span{animation:hhCharIn .72s cubic-bezier(.16,1,.3,1) both}
.view.active .hh-title span:nth-child(1){animation-delay:.08s}
.view.active .hh-title span:nth-child(2){animation-delay:.17s}
.view.active .hh-title span:nth-child(3){animation-delay:.26s}
.view.active .hh-title span:nth-child(4){animation-delay:.35s}
.home-hero .hh-sub{margin:0;font-size:13.5px;line-height:1.7;letter-spacing:.14em;color:var(--hero-sub)}
.hh-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:17px}
.hh-meta span{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--hero-line);background:rgba(255,255,255,.18);backdrop-filter:blur(4px);
  font-size:10.5px;letter-spacing:.08em;color:var(--hero-sub);
}
html[data-theme="dark"] .hh-meta span{background:rgba(255,255,255,.035)}
.hh-meta span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold-glow)}
.hh-emblem{position:absolute;right:44px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:11px;pointer-events:none}
.hh-seal{
  position:relative;width:88px;height:88px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--serif);font-size:42px;font-weight:700;line-height:1;color:#f9eddb;
  background:linear-gradient(145deg,#d06448,#a33829 58%,#8f2c20);
  box-shadow:inset 0 0 0 1px rgba(255,236,214,.5),inset 0 0 20px rgba(91,24,13,.28),0 18px 32px -17px rgba(104,34,20,.8);
  transform:rotate(-4deg);text-shadow:0 2px 3px rgba(75,19,10,.38);
  animation:hhSeal 6.5s ease-in-out infinite;
}
.hh-seal::before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,236,214,.46);border-radius:5px}
.hh-seal::after{content:"";position:absolute;left:-13px;top:-13px;width:22px;height:22px;border-left:1px solid var(--gold-soft);border-top:1px solid var(--gold-soft);opacity:.8}
.hh-ribbon{
  writing-mode:vertical-rl;font-family:var(--serif);font-size:10.5px;letter-spacing:.3em;
  color:var(--hero-kicker);padding:8px 4px 7px;border-top:1px solid var(--hero-line);border-bottom:1px solid var(--hero-line);
}
@keyframes hhCharIn{from{opacity:0;transform:translateY(16px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes hhSeal{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-2.5deg) translateY(-5px)}}
@keyframes hhSun{0%,100%{opacity:.86;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}
@keyframes hhSpin{to{transform:rotate(360deg)}}
@keyframes hhCloud{from{transform:translateX(-8px)}to{transform:translateX(16px)}}
@keyframes hhRoute{to{stroke-dashoffset:-45}}
@keyframes hhNode{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.35)}}
@keyframes hhMote{0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}12%{opacity:.72}72%{opacity:.28}100%{opacity:0;transform:translate3d(14px,-150px,0) scale(1)}}
@keyframes hhSheen{0%,72%{left:-38%}100%{left:118%}}

/* 模式卡：让首页入口与山河主视觉同一质感 */
.mode-switch{grid-template-columns:1fr 1fr;gap:12px;max-width:1040px;margin:0 auto 18px}
.mode-tab{
  padding:13px 16px 14px;border-radius:14px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  box-shadow:0 7px 20px -14px var(--shadow);
}
.mode-tab b{display:flex;align-items:center;gap:9px}
.mt-ico{
  flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:7px;
  border:1px solid var(--gold-soft);background:var(--gold-faint);color:var(--gold-strong);
  font-family:var(--serif);font-size:12px;line-height:1;font-weight:700;
  transition:.18s;
}
.mode-tab.on .mt-ico{background:linear-gradient(145deg,var(--gold-strong),var(--gold));color:var(--ink);border-color:transparent;box-shadow:0 4px 12px -6px var(--gold-glow)}
.mode-tab.on{box-shadow:0 9px 24px -17px var(--shadow),inset 0 1px 0 rgba(255,255,255,.18)}

/* 设置 · 角色主题色：与外观主题色同一尺寸、左对齐 */
.lucky-set-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}
.lucky-set{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 1px 7px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg2);cursor:pointer;
  transition:.15s;font-family:var(--sans);
}
.lucky-set:hover{border-color:var(--gold-soft)}
.lucky-set.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-soft);background:var(--gold-faint)}
.ls-dot{
  position:relative;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.65),transparent 62%),var(--lc);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.lucky-set.on .ls-dot{box-shadow:0 0 0 2px var(--panel2),0 0 0 3.5px var(--lc)}
.lucky-set.on .ls-dot::after{
  content:"";position:absolute;left:50%;top:47%;width:8px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:translate(-50%,-50%) rotate(-45deg);
}
.ls-name{font-size:10px;color:var(--dim);letter-spacing:.02em;line-height:1.2;white-space:nowrap}
.lucky-set.on .ls-name{color:var(--text);font-weight:600}

@media(max-width:820px){
  .hh-emblem{right:28px}
  .hh-seal{width:74px;height:74px;font-size:35px}
}
@media(max-width:640px){
  .home-hero{padding:25px 20px 23px;min-height:196px;border-radius:18px;margin-bottom:14px}
  .hh-kicker{font-size:9px;letter-spacing:.18em;gap:8px}
  .hh-kicker span{padding-left:18px}.hh-kicker span::before{width:11px}
  .home-hero .hh-title{font-size:39px;margin:11px 0 8px}
  .home-hero .hh-sub{font-size:11px;letter-spacing:.08em}
  .hh-meta{margin-top:14px;gap:6px}.hh-meta span{padding:3px 8px;font-size:9.5px}
  .hh-emblem{right:16px;top:46%;gap:7px}
  .hh-seal{width:54px;height:54px;border-radius:7px;font-size:27px;box-shadow:inset 0 0 0 1px rgba(255,236,214,.5),0 12px 22px -13px rgba(104,34,20,.8)}
  .hh-seal::before{inset:3px;border-radius:4px}
  .hh-ribbon{display:none}
  .hh-cloud.c2{display:none}
  .hh-copy{padding-right:53px}
  .mode-switch{gap:8px;margin-bottom:14px}
  .mode-tab{padding:11px 12px;border-radius:12px}
  .mode-tab b{font-size:14px;gap:7px}
  .mt-ico{width:21px;height:21px;font-size:11px}
  .lucky-set-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
}
@media(prefers-reduced-motion:reduce){
  .home-hero::after,.hh-sun,.hh-sun-ring,.hh-cloud,.hh-route,.hh-node,.hh-seal,.hh-motes i{animation:none!important}
  .view.active .hh-title span{animation:none!important}
}

/* ===== 7.13 登录记忆 ===== */
.login-remember{
  display:flex;align-items:center;gap:9px;text-align:left;
  margin:2px 0 14px;padding:2px 0;cursor:pointer;user-select:none;
}
.login-remember input{
  -webkit-appearance:none;appearance:none;flex:none;
  width:16px;height:16px;margin:0;position:relative;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);border-radius:5px;transition:.16s;
}
.login-remember input:hover{border-color:var(--gold)}
.login-remember input:checked{background:var(--gold);border-color:var(--gold)}
.login-remember input:checked::after{
  content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.login-remember .lr-txt{font-size:12.5px;color:var(--dim);letter-spacing:.6px;transition:.16s}
.login-remember:hover .lr-txt{color:var(--gold-strong)}
.login-remember .lr-hint{
  margin-left:auto;font-style:normal;font-size:10.5px;letter-spacing:.3px;
  color:var(--dim);opacity:.6;white-space:nowrap;
}
@media(max-width:480px){
  .login-remember .lr-hint{display:none}
}

/* ===== 7.13 首页三卡 · 对战 AI / 开一间房 / 加入房间 ===== */
.hm-card{
  position:relative;isolation:isolate;overflow:hidden;
  padding:20px 22px 20px;border-radius:16px;
  background:
    radial-gradient(125% 92% at 100% 0%,var(--gold-soft) 0%,transparent 58%),
    linear-gradient(180deg,var(--panel2),var(--panel));
  box-shadow:0 12px 32px -22px var(--shadow),inset 0 1px 0 rgba(255,255,255,.04);
}
.hm-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--gold) 0,var(--gold) 26%,transparent 74%);
  opacity:.85;
}
.hm-card::after{
  content:attr(data-wm);position:absolute;right:10px;bottom:2px;z-index:-1;
  font-family:var(--serif);font-size:96px;line-height:1;letter-spacing:0;
  color:var(--gold);opacity:.042;pointer-events:none;user-select:none;
}

.hm-head{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.hm-seal{
  flex:none;width:34px;height:34px;border-radius:10px;position:relative;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:17px;line-height:1;color:var(--gold-strong);
  background:linear-gradient(180deg,var(--gold-soft),transparent 88%);
  border:1px solid var(--line);
}
.hm-seal::after{
  content:"";position:absolute;inset:3px;border:1px solid var(--gold);border-radius:6px;opacity:.16;
}
.hm-ht{min-width:0}
.hm-title{
  font-family:var(--serif);font-size:17px;font-weight:400;line-height:1.1;
  letter-spacing:.14em;color:var(--text);
}
.hm-tag{
  margin-left:auto;flex:none;padding:4px 10px;border-radius:999px;
  font-size:10.5px;letter-spacing:.08em;color:var(--dim);white-space:nowrap;
  background:var(--bg2);border:1px solid var(--line);
}
.hm-rule{
  height:1px;margin:0 0 15px;
  background:linear-gradient(90deg,var(--line) 0,var(--line) 36%,transparent 90%);
}

/* 令牌式选项 */
.hm-card .chip{
  padding:7px 13px;border-radius:9px;font-size:12.5px;letter-spacing:.02em;
  background:var(--bg2);border:1px solid var(--line);
  transition:transform .14s,border-color .14s,color .14s,background .14s,box-shadow .14s;
}
.hm-card .chip:hover{border-color:var(--gold);color:var(--gold-strong);transform:translateY(-1px)}
.hm-card .chip.on{
  background:linear-gradient(180deg,var(--gold-soft),var(--bg2));
  border-color:var(--gold);color:var(--gold-strong);font-weight:600;
  box-shadow:0 3px 12px -8px var(--gold),inset 0 1px 0 rgba(255,255,255,.16);
}

/* 主按钮 */
.hm-cta{
  position:relative;overflow:hidden;border-radius:11px;
  letter-spacing:.1em;box-shadow:0 8px 20px -18px var(--gold);
}
.hm-cta .hm-arw{
  font-style:normal;font-family:var(--sans);font-size:16px;line-height:1;
  margin-left:3px;opacity:.8;transition:transform .18s;
}
.hm-cta:hover .hm-arw{transform:translateX(4px)}
.hm-cta::after{
  content:"";position:absolute;top:0;bottom:0;left:-45%;width:40%;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  pointer-events:none;
}
.hm-cta:hover::after{animation:hmSheen .72s ease}
@keyframes hmSheen{0%{opacity:1;left:-45%}100%{opacity:0;left:112%}}
.hm-card--solo .solo-grid{grid-template-columns:1.32fr 1fr 1fr;gap:0 22px;align-items:start}
.hm-card--solo .solo-grid .span2{grid-column:1/3}
.solo-panel #btn-solo-start.hm-cta{
  display:flex;align-items:center;justify-content:center;
  grid-column:1/-1;justify-self:center;width:100%;max-width:340px;margin:14px 0 0;
}
@media(max-width:760px){
  .hm-card--solo .solo-grid{grid-template-columns:1fr}
  .hm-card--solo .solo-grid .span2{grid-column:1/-1}
  .solo-panel #btn-solo-start.hm-cta{grid-column:1/-1;margin:10px 0 0}
}

/* 标题单行时收敛头部高度 */
.hm-ht .hm-title{line-height:34px}

/* 房号四格 */
.code-box{position:relative}
.code-box .code-cells{display:grid;grid-template-columns:repeat(4,58px);gap:10px;justify-content:flex-start}
.code-box .cc{
  position:relative;height:54px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:24px;line-height:1;color:var(--text);
  background:var(--bg2);border:1px solid var(--line);
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.code-box .cc{box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.code-box .cc:empty::before{
  content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
  background:var(--line);transform:translate(-50%,-50%);opacity:.9;
}
.code-box .cc.cur{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 3px var(--gold-soft),inset 0 1px 2px rgba(0,0,0,.03)}
.code-box .cc.cur.filled::marker{content:""}
.code-box.js-on input.input-code{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;
  padding:0;margin:0;border:0;border-radius:11px;background:transparent;
  color:transparent;caret-color:transparent;-webkit-text-fill-color:transparent;
  font-size:16px;letter-spacing:0;text-align:center;outline:none;
}
.code-box.js-on input.input-code::placeholder{color:transparent}

@media(max-width:640px){
  .hm-card{padding:16px 16px 18px;border-radius:14px}
  .hm-card::after{display:none}
  .hm-seal{width:31px;height:31px;font-size:15px;border-radius:9px}
  .hm-title{font-size:15.5px;letter-spacing:.12em}
  .hm-tag{padding:3px 8px;font-size:10px}
  .code-box .cc{height:48px;font-size:21px;border-radius:10px}
  .code-box .code-cells{grid-template-columns:repeat(4,1fr);gap:7px}
}

/* ===== 7.14 删繁后就位微调 ===== */
.mode-switch{display:flex;justify-content:center;gap:8px;max-width:1040px;margin:0 auto 14px}
.mode-tab{padding:10px 26px;border-radius:999px;justify-content:center}
.mode-tab.on{background:linear-gradient(180deg,var(--gold-soft),var(--gold-faint));box-shadow:0 8px 20px -16px var(--gold)}
.mode-tab.on::before{content:none}
.code-box .code-cells{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:340px}
.hm-card--join{display:flex;flex-direction:column}
.hm-card--join .field{margin-bottom:20px}
.hm-card--join .join-fields{
  flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;gap:26px;
}
.hm-card--join .join-fields .field{margin-bottom:0}
.hm-card--join #btn-join{margin-top:auto}
.hm-card--join #btn-join{margin-bottom:2px}
@media(max-width:640px){
  .mode-tab{padding:9px 18px}
  .mode-tab b{font-size:14.5px}
}

/* ============================================================
   7.15 乡试格：一卷摊开的试卷（靛青墨色）
   与举孝廉（青绿）/ 奇遇（金）/ 黄巾（朱）同语言、不同题材。
   ============================================================ */
.cell.t-exam{
  --sig-ink:#8b9ad6;--sig-chip:rgba(120,138,200,.18);
  --sig-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2092%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M58%2033C49%2025%2037%2023%2025%2025v38c12-2%2024%200%2033%207z%22%2F%3E%3Cpath%20d%3D%22M62%2033C71%2025%2083%2023%2095%2025v38c-12-2-24%200-33%207z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background:linear-gradient(155deg,rgba(120,138,200,.26),rgba(120,138,200,.08));
}
.cell.t-exam::before{
  content:"";position:absolute;left:18px;right:18px;top:0;height:5px;
  z-index:0;pointer-events:none;opacity:.46;
  background:
    repeating-linear-gradient(90deg,var(--sig-ink) 0 3px,transparent 3px 7px) 0 0/100% 3px no-repeat,
    linear-gradient(var(--sig-ink),var(--sig-ink)) 0 100%/100% 1px no-repeat;
}
.cell.t-exam::after{
  content:"";position:absolute;left:10%;right:10%;bottom:12px;height:29%;
  z-index:0;pointer-events:none;background:var(--sig-ink);opacity:.32;
  -webkit-mask:var(--sig-art) center bottom/contain no-repeat;
          mask:var(--sig-art) center bottom/contain no-repeat;
}
.cell.t-exam .c-icon{
  font-size:20px;line-height:1;padding:4px 6px;margin-top:4px;border-radius:6px;
  color:#a9b6ea;background:var(--sig-chip);box-shadow:inset 0 0 0 1px var(--sig-chip);
}
.cell.t-exam .c-name{margin-top:4px}

html[data-theme="light"] .cell.t-exam{
  --sig-ink:#4c5da3;--sig-chip:rgba(76,93,163,.12);
  background:linear-gradient(155deg,rgba(120,138,200,.20),rgba(120,138,200,.06));
}
html[data-theme="light"] .cell.t-exam .c-icon{color:#3f4e8c}
html[data-theme="light"] .cell.t-exam::after{opacity:.26}

@media(max-width:640px){
  .cell.t-exam::before{left:15px;right:15px}
  .cell.t-exam::after{left:11%;right:11%;height:27%;opacity:.26}
  .cell.t-exam .c-icon{font-size:17px;padding:3px 5px;margin-top:3px}
  html[data-theme="light"] .cell.t-exam::after{opacity:.22}
}

/* ============================================================
   7.15 乡试试卷弹窗
   ============================================================ */
.exam-sheet{padding:2px 0 2px}
.exam-tag{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font-size:11px;letter-spacing:.16em;color:var(--dim);
}
.exam-tag::before{
  content:"";flex:none;width:14px;height:1px;
  background:rgba(139,154,214,.75);
}
html[data-theme="light"] .exam-tag::before{background:rgba(76,93,163,.55)}

.exam-q{
  font-family:var(--serif);font-size:19px;line-height:1.55;letter-spacing:.03em;
  color:var(--text);margin:0 0 16px;padding-left:12px;
  border-left:3px solid rgba(120,138,200,.55);
}
html[data-theme="light"] .exam-q{border-left-color:rgba(76,93,163,.45)}

.exam-opts{display:flex;flex-direction:column;gap:9px}
.exam-opt{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 14px;border-radius:11px;text-align:left;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);
  transition:border-color .14s,background .14s,transform .12s,box-shadow .14s;
  font-family:var(--sans);
}
.exam-opt:hover{
  border-color:var(--gold);background:var(--gold-soft);
  transform:translateY(-1px);box-shadow:0 8px 18px -16px var(--gold);
}
.exam-opt:active{transform:translateY(0)}
.exam-opt .eo-key{
  flex:none;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:14px;line-height:1;
  color:var(--gold-strong);background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px var(--line);
}
.exam-opt:hover .eo-key{background:var(--bg2)}
.exam-opt .eo-txt{font-size:14.5px;line-height:1.4;letter-spacing:.02em;color:var(--text)}
.exam-foot{
  margin-top:14px;padding-top:11px;border-top:1px dashed var(--line);
  font-size:11.5px;letter-spacing:.04em;color:var(--dim);
}
.exam-foot b{color:var(--gold-strong);font-weight:600}

@media(max-width:480px){
  .exam-q{font-size:17px;margin-bottom:13px}
  .exam-opt{padding:11px 12px;gap:10px}
  .exam-opt .eo-txt{font-size:14px}
}

/* ===== 7.17 十圈比资产：圈数进度高亮 ===== */
.ps-lap.is-goal{
  font-family:var(--sans);letter-spacing:.02em;
  padding:1px 6px;border-radius:6px;
  color:var(--gold-strong);background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px var(--line);
}
html[data-theme="light"] .ps-lap.is-goal{color:#8a5a2a;background:rgba(180,120,40,.10)}
@media(max-width:640px){
  .ps-lap.is-goal{padding:0 4px;font-size:9.5px}
}
/* 十圈制：顶部进度短语 + 手机端保留圈数胶囊 */
.tl-lap{color:var(--gold-strong);font-variant-numeric:tabular-nums}
html[data-theme="light"] .tl-lap{color:#8a5a2a}
/* 手机端：圈数挪到玩家卡片第二行，避免挤掉名字；顶部进度也随之收起 */
.ps-lap-m{display:none;font-style:normal;white-space:nowrap}
@media(max-width:640px){
  .ps-lap.is-goal{display:none}
  .ps-lap-m{
    display:inline-block;padding:0 5px;border-radius:5px;margin-top:2px;
    font-size:9.5px;line-height:13px;letter-spacing:.02em;
    color:var(--gold-strong);background:var(--gold-soft);
    box-shadow:inset 0 0 0 1px var(--line);
  }
  html[data-theme="light"] .ps-lap-m{color:#8a5a2a;background:rgba(180,120,40,.10)}
  .tl-lap{display:none}
}

/* ===== 7.18 加入房间卡：房号四格收敛、按钮脱压、上下留白均分 ===== */
/* 四格改正方形：桌面 46×46（手机 44），间距 10，与输入框同一起点 */
.code-box .code-cells{
  grid-template-columns:repeat(4,46px);gap:10px;
  max-width:none;justify-content:flex-start;
}
.code-box .cc{
  height:46px;font-size:19px;border-radius:10px;
}
/* 名号 / 房号两组在卡内均分留白，按钮永远留出安全间距 */
.hm-card--join .join-fields{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  justify-content:space-evenly;gap:16px;
  padding-bottom:22px;
}
.hm-card--join .join-fields .field{margin-bottom:0}
.hm-card--join #btn-join{margin-top:auto;margin-bottom:0}
.hm-card--join #btn-join,#btn-join.hm-cta{font-size:14.5px;letter-spacing:.14em}

@media(max-width:640px){
  .code-box .code-cells{grid-template-columns:repeat(4,44px);gap:9px}
  .code-box .cc{height:44px;font-size:18px;border-radius:9px}
  .hm-card--join .join-fields{padding-bottom:22px}
  .hm-card--join #btn-join,#btn-join.hm-cta{letter-spacing:.12em}
}

/* ===== 7.19 全局锦囊：顶部令条 + 说明弹窗 ===== */
.buff-bar{
  --bf-ink:var(--gold-strong);
  --bf-soft:var(--gold-soft);
  --bf-line:var(--gold);
  display:flex;align-items:center;gap:8px;
  margin:4px 0 8px;padding:6px 10px 6px 7px;border-radius:10px;
  background:linear-gradient(100deg,var(--gold-soft) 0%,transparent 58%),var(--bg2);
  border:1px solid var(--line);position:relative;overflow:hidden;cursor:pointer;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.buff-bar:hover{border-color:var(--gold);box-shadow:0 6px 18px -16px var(--gold)}
.buff-bar .bf-round{
  flex:none;padding:2px 7px;border-radius:999px;font-size:10.5px;letter-spacing:.04em;
  color:var(--dim);background:var(--panel);border:1px solid var(--line);white-space:nowrap;
}
.buff-bar .bf-seal{
  flex:none;width:20px;height:20px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:12px;line-height:1;color:var(--bf-ink);
  background:var(--bf-soft);border:1px solid var(--bf-line);
}
.buff-bar .bf-name{
  flex:none;font-family:var(--serif);font-size:13.5px;font-weight:400;
  letter-spacing:.08em;color:var(--bf-ink);
}
/* 浅色主题：金调压深，保证可读 */
html[data-theme="light"] .buff-bar{--bf-ink:#8a5f14;--bf-soft:rgba(217,179,112,.22);--bf-line:rgba(163,116,26,.5)}
html[data-theme="light"] .buff-info{--bf-ink:#8a5f14;--bf-soft:rgba(217,179,112,.22);--bf-line:rgba(163,116,26,.5)}
.buff-bar .bf-desc{
  flex:1;min-width:0;font-size:11.5px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.buff-bar .bf-more{
  flex:none;padding-left:8px;border-left:1px solid var(--line);
  font-size:10.5px;letter-spacing:.05em;color:var(--dim);opacity:.7;
}
.buff-bar.bf-bad{background:linear-gradient(100deg,rgba(192,57,43,.14) 0%,transparent 58%),var(--bg2)}
.buff-bar.bf-bad .bf-name{color:var(--red-soft)}
.buff-bar.bf-bad .bf-seal{color:var(--red-soft);background:rgba(192,57,43,.12);border-color:rgba(192,57,43,.42)}
.buff-bar.bf-neutral{background:linear-gradient(100deg,rgba(77,132,196,.14) 0%,transparent 58%),var(--bg2)}
.buff-bar.bf-neutral .bf-name{color:var(--log-dice)}
.buff-bar.bf-neutral .bf-seal{color:var(--log-dice);background:rgba(77,132,196,.12);border-color:rgba(77,132,196,.4)}
.buff-bar.is-new{animation:buffIn .9s cubic-bezier(.2,.9,.3,1)}
@keyframes buffIn{
  0%{transform:translateY(-6px);opacity:0;box-shadow:0 0 0 0 var(--gold-glow)}
  45%{transform:translateY(0);opacity:1;box-shadow:0 0 0 4px var(--gold-soft)}
  100%{box-shadow:0 0 0 0 transparent}
}
.action-banner.buff{color:var(--gold-strong)}

.buff-info .bi-now{
  display:flex;gap:11px;align-items:center;padding:12px 14px;border-radius:12px;
  background:linear-gradient(120deg,var(--gold-soft),transparent 72%),var(--bg2);
  border:1px solid var(--line);
}
.buff-info{--bf-ink:var(--gold-strong);--bf-soft:var(--gold-soft);--bf-line:var(--gold)}
.buff-info .bi-seal{
  flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:15px;color:var(--bf-ink);
  background:var(--bf-soft);border:1px solid var(--bf-line);
}
.buff-info .bi-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.buff-info .bi-txt b{font-family:var(--serif);font-size:15px;letter-spacing:.1em;color:var(--bf-ink)}
.buff-info .bi-txt span{font-size:12px;color:var(--dim);line-height:1.5}
.buff-info .bi-tip{margin:9px 2px 12px;font-size:11px;color:var(--dim);opacity:.8}
.buff-info .bi-list{display:flex;flex-direction:column;gap:1px}
.buff-info .buff-row{
  display:flex;align-items:baseline;gap:9px;padding:6px 8px;border-radius:8px;
}
.buff-info .buff-row.on{background:var(--gold-faint)}
.buff-info .br-name{
  flex:none;width:74px;font-family:var(--serif);font-size:12.5px;letter-spacing:.04em;color:var(--text);
}
.buff-info .buff-row.on .br-name{color:var(--bf-ink)}
.buff-info .br-desc{flex:1;min-width:0;font-size:11.5px;color:var(--dim);line-height:1.45}
.buff-info .br-now{
  flex:none;font-style:normal;font-size:10px;padding:1px 6px;border-radius:999px;
  color:var(--bf-ink);background:var(--bf-soft);border:1px solid var(--bf-line);
}
@media(max-width:640px){
  .buff-bar{gap:6px;padding:5px 9px 5px 6px}
  .buff-bar .bf-round{display:none}
  .buff-bar .bf-name{font-size:12.5px;letter-spacing:.04em}
  .buff-bar .bf-desc{font-size:10.5px}
  .buff-bar .bf-more{display:none}
  .buff-info .br-name{width:66px;font-size:12px}
}

/* ============================================================
   7.20 补丁：占领格归属色 / 入狱档位 / 择地弹窗
   ============================================================ */
/* 占领格：整格铺一层归属色（叠在城池底色上，文字仍在最上层，保持可读） */
.cell.owned .c-own.has{
  background:linear-gradient(150deg,
    rgba(var(--own-rgb,136,136,136),.44),
    rgba(var(--own-rgb,136,136,136),.15) 86%);
  box-shadow:inset 0 0 0 1.5px rgba(var(--own-rgb,136,136,136),.70),
             inset 0 -3px 0 -1px rgba(var(--own-rgb,136,136,136),.88);
}
html[data-theme="light"] .cell.owned .c-own.has{
  background:linear-gradient(150deg,
    rgba(var(--own-rgb,136,136,136),.29),
    rgba(var(--own-rgb,136,136,136),.09) 86%);
  box-shadow:inset 0 0 0 1.5px rgba(var(--own-rgb,136,136,136),.60),
             inset 0 -3px 0 -1px rgba(var(--own-rgb,136,136,136),.78);
}
/* 玩家详情：入狱档位 */
.pd-jail{
  margin-top:9px;padding:8px 11px;border-radius:9px;font-size:12px;line-height:1.5;
  color:var(--dim);background:rgba(110,116,126,.12);border-left:2px solid #7d838e;
}
.pd-jail b{color:var(--text);font-variant-numeric:tabular-nums}
.pj-warn{font-style:normal;color:var(--red-soft);font-weight:700}
/* 择地弹窗：城池按钮 + 地价 */
.pick-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:min(56vh,420px);overflow-y:auto;padding-right:4px}
.pick-grid .give-btn{position:relative;padding-right:52px}
.pick-grid .pl-cost{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:10.5px;color:var(--gold-strong);font-variant-numeric:tabular-nums;
}
@media(max-width:640px){.pick-grid{grid-template-columns:1fr}}

.mt-verdict{
  margin-top:9px;padding:9px 11px;border-radius:9px;font-size:12px;line-height:1.6;
  color:var(--gold-strong);background:var(--gold-faint);
  border:1px solid var(--gold-soft);font-family:var(--serif);letter-spacing:.02em;
}
.fin-item .fin-row{cursor:default}

/* ===== 7.21 终局战报 / 处置封地 ===== */
.fin-sheet{display:flex;flex-direction:column}
.fin-hero{
  position:relative;text-align:center;padding:20px 16px 16px;border-radius:14px;overflow:hidden;
  border:1px solid var(--gold-soft);
  background:radial-gradient(120% 92% at 50% 0%,var(--gold-soft),transparent 72%),
             linear-gradient(180deg,var(--panel2),var(--panel));
}
.fin-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,255,255,.012) 6px 7px);
}
.fh-crown{font-size:10.5px;letter-spacing:.3em;color:var(--gold-strong);padding-left:.3em}
.fh-name{
  font-family:var(--serif);font-size:30px;line-height:1.25;margin:6px 0 4px;
  color:var(--gold-strong);text-shadow:0 2px 16px var(--gold-glow);letter-spacing:.04em;
}
.fh-why{font-size:11.5px;color:var(--dim);line-height:1.7;padding:0 6px}
.fh-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:12px;position:relative}
.fh-chips span{
  font-size:11px;padding:3px 9px;border-radius:999px;color:var(--text);
  background:var(--bg2);border:1px solid var(--line);font-variant-numeric:tabular-nums;
}
.fin-sec{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.fs-title{font-size:11px;letter-spacing:.22em;color:var(--gold-strong)}
.fs-hint{font-size:10.5px;color:var(--dim)}
.fin-rows{display:flex;flex-direction:column;gap:7px}
.fin-item{border-radius:11px;background:var(--cell-bg);border:1px solid var(--line);overflow:hidden}
.fin-row{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
  background:none;border:0;color:inherit;text-align:left;cursor:pointer;font:inherit;
}
.fin-row.is-top{background:linear-gradient(90deg,var(--gold-faint),transparent 72%)}
.fin-row:active{background:var(--gold-faint)}
.fr-rank{
  flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  font-size:11.5px;font-family:var(--serif);background:var(--tier-chip-bg);color:var(--dim);
}
.fin-row.is-top .fr-rank{background:var(--gold-strong);color:var(--ink);font-weight:700}
.fr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.fr-l1{display:flex;align-items:baseline;gap:6px;min-width:0}
.fr-l1 b{font-size:13.5px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fr-bot{
  flex:none;font-style:normal;font-size:9px;padding:1px 4px;border-radius:4px;
  background:var(--tier-chip-bg);color:var(--dim);letter-spacing:.06em;
}
.fr-assets{
  margin-left:auto;flex:none;font-style:normal;font-size:13px;font-weight:700;
  color:var(--gold-strong);font-variant-numeric:tabular-nums;
}
.fr-bar{height:3px;border-radius:2px;background:var(--tier-chip-bg);overflow:hidden}
.fr-bar i{display:block;height:100%;border-radius:2px;opacity:.85;transition:width .5s ease}
.fr-vd{
  font-size:11px;color:var(--dim);line-height:1.5;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
}
.fr-more{flex:none;font-size:10.5px;color:var(--dim);letter-spacing:.06em}
.fin-row.open .fr-more{color:var(--gold-strong)}
.fin-detail{padding:0 12px 12px;background:var(--bg2);box-shadow:inset 0 1px 0 var(--line)}
.fd-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border-radius:9px;overflow:hidden;margin-top:10px;
}
.fd-cell{background:var(--panel);padding:8px 9px;display:flex;flex-direction:column;gap:2px;min-width:0}
.fd-cell i{font-style:normal;font-size:10px;color:var(--dim);letter-spacing:.04em}
.fd-cell b{
  font-size:13px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fd-cell em{font-style:normal;font-size:9.5px;color:var(--dim);opacity:.8}
.fd-note{margin-top:9px;font-size:10.5px;color:var(--dim);line-height:1.65}
.fm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.fm-item{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:10px;
  background:var(--cell-bg);border:1px solid var(--line);min-width:0}
.fm-item i{font-style:normal;font-size:10px;color:var(--dim);letter-spacing:.06em}
.fm-item b{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-item .num{font-size:13px;font-weight:700;color:var(--gold-strong);font-variant-numeric:tabular-nums}
.fm-item em{
  font-style:normal;font-size:9.5px;color:var(--dim);opacity:.85;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pre-grid{
  display:flex;flex-direction:column;gap:7px;margin-top:12px;
  max-height:min(52vh,420px);overflow-y:auto;padding-right:2px;
}
.pre-one{border:1px solid var(--line);border-radius:10px;background:var(--cell-bg);padding:9px 10px}
.po-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:600}
.po-head .db-fort{
  margin-left:5px;font-style:normal;font-size:9.5px;padding:1px 4px;border-radius:4px;
  background:var(--gold-faint);color:var(--gold-strong);border:1px solid var(--gold-soft);font-weight:400;
}
.po-val{font-style:normal;font-size:10.5px;font-weight:400;color:var(--dim);font-variant-numeric:tabular-nums}
.po-btns{display:flex;gap:6px;margin-top:8px}
.po-btns .btn{flex:1;font-size:11.5px;padding:7px 6px}
@media(max-width:640px){
  .fh-name{font-size:26px}
  .fd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm-grid{grid-template-columns:1fr}
  .fr-vd{-webkit-line-clamp:2}
  .fr-more{display:none}
  .po-btns .btn{font-size:11px}
}

.fd-cell b.pos{color:var(--log-lose)}
.fd-cell b.neg{color:var(--log-gain)}
.fr-more{margin-left:8px}

/* 浅色主题：战报金色系加深，避免米底上发白 */
html[data-theme="light"] .fh-crown,
html[data-theme="light"] .fs-title,
html[data-theme="light"] .fr-assets,
html[data-theme="light"] .fm-item .num,
html[data-theme="light"] .mt-verdict{color:#8a5f14}
html[data-theme="light"] .fh-name{color:#9c3a24;text-shadow:0 1px 12px rgba(156,58,36,.18)}
html[data-theme="light"] .fin-hero{border-color:rgba(163,116,26,.32)}
html[data-theme="light"] .mt-verdict{
  background:rgba(163,116,26,.07);border-color:rgba(163,116,26,.26);
}
.fd-cell{min-height:50px;justify-content:center}

/* 7.21 补充：浅色主题下战报评语与备注对比度不足，单独加深 */
html[data-theme="light"] .fr-vd,
html[data-theme="light"] .fd-note,
html[data-theme="light"] .fd-cell .k,
html[data-theme="light"] .fh-why{color:#6b5f47}
html[data-theme="light"] .fr-rank{color:#7a6a4c}
html[data-theme="light"] .fin-sheet .fr-l1{color:var(--text)}

/* ===== 7.22 好友 / 玩家资料 / 退出结算 / 管理员删档 ===== */
.pav{
  width:38px;height:38px;border-radius:50%;border:0;flex:none;padding:0;
  color:#fff;font:700 16px/1 inherit;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .12s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.pav:hover{transform:translateY(-1px)}
.pav-bot{
  font-style:normal;font-size:9px;line-height:1;padding:2px 4px;border-radius:4px;
  background:var(--tier-chip-bg);color:var(--dim);margin-left:5px;vertical-align:2px;
  letter-spacing:.04em;
}
/* 好友弹窗 */
.fr-tabs{display:flex;gap:6px;margin:0 0 10px}
.fr-tab{
  flex:1;padding:8px 10px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel2);color:var(--dim);font:600 13px/1 inherit;cursor:pointer;
}
.fr-tab.on{background:var(--gold-soft);color:var(--gold);border-color:transparent}
.frd-pane{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}
.frd{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--line);
}
.frd-main{flex:1;min-width:0}
.frd-n{font-size:13.5px;font-weight:700;color:var(--text);display:flex;align-items:center}
.frd-s{font-size:11px;color:var(--dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frd-tag{font-size:11px;color:var(--dim);padding:3px 6px;border-radius:6px;background:var(--tier-chip-bg)}
.frd-empty{
  padding:18px 12px;text-align:center;font-size:12px;color:var(--dim);
  border:1px dashed var(--line);border-radius:10px;
}
.frd-search{display:flex;gap:8px}
.frd-search input{
  flex:1;min-width:0;padding:8px 10px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);font:13px/1.2 inherit;
}
/* 玩家资料 */
.pc-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.pc-av{
  width:52px;height:52px;border-radius:50%;flex:none;color:#fff;
  display:flex;align-items:center;justify-content:center;font:700 22px/1 inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.pc-id{min-width:0}
.pc-name{font-size:16px;font-weight:700;color:var(--text)}
.pc-sub{font-size:11.5px;color:var(--dim);margin-top:4px}
.pc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 4px}
.pc-cell{
  padding:8px 9px;border-radius:9px;background:var(--panel2);
  border:1px solid var(--line);text-align:center;
}
.pc-cell i{display:block;font-style:normal;font-size:10.5px;color:var(--dim)}
.pc-cell b{display:block;margin-top:3px;font-size:14px;color:var(--gold)}
.pc-list{display:flex;flex-direction:column;gap:6px;max-height:38vh;overflow:auto}
.pc-row{
  display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;
  background:var(--panel2);border:1px solid var(--line);cursor:pointer;text-align:left;
  font:inherit;color:inherit;
}
.pc-row:hover{border-color:var(--gold)}
.pcr-res{
  flex:none;width:22px;height:22px;border-radius:6px;font:700 11px/22px inherit;
  text-align:center;color:#fff;
}
.pcr-res.win{background:var(--log-gain,#2e7d63)}
.pcr-res.lose{background:var(--log-lose,#b04a3a)}
.pcr-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;overflow:hidden}
.pcr-main b{font-size:12.5px;color:var(--text);white-space:nowrap}
.pcr-main i{font-style:normal;font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcr-assets{font-size:12px;color:var(--gold)}
.pcr-ts{font-size:10.5px;color:var(--dim);flex:none}
/* 中途退出结算 */
.fin-hero.is-left{background:linear-gradient(180deg,var(--gold-faint),transparent)}
.arc-card.is-admin::after{
  content:"右键可删";position:absolute;right:8px;top:6px;font-size:9.5px;color:var(--dim);
  opacity:.62;
}
.arc-card{position:relative}
@media (max-width:560px){
  .pc-grid{grid-template-columns:repeat(2,1fr)}
  .frd-pane{max-height:52vh}
  .pav{width:34px;height:34px;font-size:14px}
}

/* 7.22 明细网格改为独立卡片：11 格时最后一行不会出现「假格子」 */
.fd-grid{background:transparent;gap:6px;border-radius:0;overflow:visible}
.fd-cell{background:var(--panel2);border:1px solid var(--line);border-radius:8px}

/* 7.24 对人净额分项：一人一行，正付款绿、净进账红 */
.fd-net{
  margin-top:9px;padding:9px 11px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--line);
}
.fd-net-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:11px;color:var(--dim);letter-spacing:.04em;margin-bottom:4px;
}
.fd-net-h em{font-style:normal;font-size:10px;opacity:.78;white-space:nowrap}
.fd-net-rows{display:flex;flex-direction:column;gap:0}
.fd-net-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:5px 1px;font-size:12px;border-bottom:1px dashed var(--line);
}
.fd-net-row:last-child{border-bottom:0;padding-bottom:2px}
.fd-net-row .fn-n{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;
}
.fd-net-row .num{flex:none;font-variant-numeric:tabular-nums;font-weight:700}
.fd-net-row .num.is-dim{color:var(--dim);font-weight:400}
html[data-theme="light"] .fd-net-h{color:#6b5f47}

/* 7.24b 分项金额涨跌色：净付出=绿，净进账=红（与战报其余格一致） */
.fd-net-row .num.neg{color:var(--log-gain)}
.fd-net-row .num.pos{color:var(--log-lose)}

/* 7.25 设置 · 曲目选择 */
.bgm-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.bgm-chip{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:6px 10px;border-radius:9px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  font-family:inherit;text-align:left;line-height:1.25;
}
.bgm-chip b{font-size:12px;font-weight:600;white-space:nowrap}
.bgm-chip i{font-style:normal;font-size:10px;color:var(--dim);white-space:nowrap}
.bgm-chip:hover{border-color:var(--gold-dim, var(--line))}
.bgm-chip.on{background:var(--gold-soft, rgba(201,169,97,.16));border-color:var(--gold)}
.bgm-chip.on i{color:var(--gold-strong)}
.bgm-note{
  margin-top:8px;font-size:11px;line-height:1.6;color:var(--dim);
}
.bgm-note code{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  padding:1px 4px;border-radius:4px;background:var(--panel2);border:1px solid var(--line);
}
.bgm-note #bgm-reload{
  margin-left:6px;color:var(--gold-strong);cursor:pointer;white-space:nowrap;
  border-bottom:1px dashed currentColor;
}

/* ===== 7.26 应用图标（人物立绘，不再用「富」字） ===== */
.brand-mark{overflow:hidden}
.brand-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.hh-seal.is-portrait{padding:0;overflow:hidden;background:#101725}
.hh-seal.is-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.hh-seal.is-portrait::before{inset:5px;border-color:rgba(255,236,214,.55);z-index:2}

/* ===== 7.26 玩家头像（设置里自传） ===== */
.pav,.pc-av,.ps-avatar,.pd-avatar,.ta-badge{position:relative}
.av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.av-tip{font-size:11px;line-height:1.55;color:var(--dim)}

/* ===== 7.27 头像：直接点设置页最上面的头像即可更换 ===== */
.pd-head{position:relative}
.pd-avatar.is-pick{cursor:pointer;transition:transform .14s ease,box-shadow .14s ease}
.pd-avatar.is-pick:hover,.pd-avatar.is-pick:focus-visible{
  transform:translateY(-1px);outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 0 0 2px var(--gold-glow);
}
.pd-avatar.is-pick::after{
  content:"✎";position:absolute;right:-4px;bottom:-4px;width:17px;height:17px;border-radius:50%;
  display:grid;place-items:center;font-size:10px;font-weight:400;line-height:1;padding-bottom:1px;
  color:#22190a;background:var(--gold);box-shadow:0 1px 3px var(--shadow);
}
.pd-avatar.is-pick.is-busy{opacity:.6}
.pd-avatar.is-pick.is-busy::after{content:"…"}
.pd-sub.acting{display:flex;align-items:center;gap:5px;margin-top:4px}
.pd-sub .av-act{
  font-family:inherit;font-size:11px;line-height:1;padding:5px 9px;border-radius:7px;cursor:pointer;
  color:var(--text);background:var(--panel2);border:1px solid var(--line);white-space:nowrap;
}
.pd-sub .av-act:hover{border-color:var(--gold);color:var(--gold-strong)}
.pd-sub .av-act[data-av="clear"]{color:var(--dim)}

/* ===== 7.26 曲库上传 ===== */
.bgm-chip.has-x{padding-right:24px;position:relative}
.bgm-x{
  position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;line-height:1;font-family:inherit;
  color:var(--dim);background:transparent;border:0;cursor:pointer;padding:0;
}
.bgm-x:hover{background:var(--tier-chip-bg);color:var(--text)}
.bgm-tools{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.bgm-up{
  font-size:12px;padding:5px 11px;border-radius:8px;cursor:pointer;font-family:inherit;
  border:1px dashed var(--line);background:transparent;color:var(--gold-strong);
}
.bgm-up:hover{border-color:var(--gold)}
.bgm-up[disabled]{opacity:.55;cursor:default}

/* ===== 7.28 好友：简笔画图标 / 置顶 / 自己 ===== */
.icon-btn.icon-fr{padding:6px 10px}
.icon-fr svg{
  width:18px;height:18px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.frd-tag{font-style:normal;margin-left:6px}
.frd-tag.is-me,.frd-tag.is-pin{
  color:var(--gold-strong);background:transparent;
  border:1px solid var(--gold-dim,var(--line));font-weight:600;
}
.frd.is-me{background:var(--gold-soft,rgba(201,169,97,.14));border-color:var(--gold-dim,var(--line))}
.frd.is-pin{box-shadow:inset 2px 0 0 var(--gold)}
.frd[data-uid]{cursor:pointer}
.frd-hint{font-size:11px;color:var(--dim);text-align:center;padding:1px 0 2px}
.bgm-empty{
  margin-top:6px;padding:8px 10px;border:1px dashed var(--line);border-radius:9px;
  font-size:11px;line-height:1.5;color:var(--dim);
}

/* 7.28b 好友卡片整块可点（去掉「战绩」按钮）+ 资料页头像定位兜底 */
.frd[data-uid]{transition:border-color .12s ease,background .12s ease}
.frd[data-uid]:hover{border-color:var(--gold-dim,var(--line));background:var(--panel)}
.frd[data-uid]:focus-visible{outline:2px solid var(--gold-glow);outline-offset:1px}
.frd-go{flex:none;font-size:17px;line-height:1;color:var(--dim);padding:0 2px 2px}
.pc-av{overflow:hidden}

/* ===== 7.41 顶栏奖杯 ===== */
.icon-ach{padding:6px 10px}
.icon-ach svg{
  width:18px;height:18px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* ===== 7.41 存档卡片：两段式，指标按固定列对齐 ===== */
.arc-card{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px}
.arc-top{display:flex;align-items:center;gap:8px;width:100%;min-width:0}
.arc-place{flex:none;font-size:12.5px;font-weight:700;color:var(--text)}
.arc-mode{flex:1;min-width:0;font-style:normal;font-size:11px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arc-date{flex:none;font-style:normal;font-size:10.5px;color:var(--dim);opacity:.8;
  font-variant-numeric:tabular-nums}
.arc-kv{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:100%;
  padding-top:8px;border-top:1px dashed var(--line)}
.akv{display:flex;flex-direction:column;gap:2px;min-width:0}
.akv i{font-style:normal;font-size:9.5px;color:var(--dim);letter-spacing:.04em}
.akv b{font-size:11.5px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arc-card.is-admin::after{right:10px;top:auto;bottom:4px;opacity:.5}
@media(max-width:430px){.arc-kv{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:7px}}

/* ===== 7.41 存档详情：指标表对齐 ===== */
.mt-facts{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-bottom:12px}
.mtf{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:6px 0;border-bottom:1px dashed var(--line);font-size:12.5px;min-width:0}
.mtf i{flex:none;font-style:normal;font-size:11.5px;color:var(--dim)}
.mtf b{min-width:0;font-weight:700;color:var(--text);text-align:right;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtf b .up{color:var(--log-gain)}
.mtf b .down{color:var(--log-lose)}
@media(max-width:560px){.mt-facts{grid-template-columns:1fr}}

/* ===== 7.41 成就奖杯 ===== */
.ach-hero{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
  background:var(--bg2);border:1px solid var(--line);margin-bottom:10px}
.ach-total{flex:none;display:flex;align-items:baseline;gap:0;font-family:var(--serif);color:var(--gold-strong)}
.ach-total b{font-size:26px;line-height:1}
.ach-total i{font-size:13px;font-style:normal;color:var(--dim);margin-left:2px}
.ach-hsum{display:flex;flex-direction:column;gap:2px;min-width:0}
.ach-hsum b{font-size:13px;color:var(--text)}
.ach-hsum em{font-style:normal;font-size:11.5px;color:var(--dim)}
.ach-list{display:flex;flex-direction:column;gap:7px}
.ach-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  background:var(--bg2);border:1px solid var(--line)}
.ach-item.on{border-color:var(--gold-soft);background:linear-gradient(180deg,var(--gold-faint),transparent)}
.ach-badge{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--tier-chip-bg);color:var(--dim)}
.ach-item.on .ach-badge{background:var(--gold-soft);color:var(--gold-strong)}
.ach-cup{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ach-cup.sm{width:13px;height:13px;stroke-width:1.9}
.ach-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ach-main b{font-family:var(--serif);font-size:13px;letter-spacing:.5px;color:var(--text)}
.ach-item:not(.on) .ach-main b{color:var(--dim)}
.ach-main i{font-style:normal;font-size:11px;line-height:1.45;color:var(--dim)}
.ach-n{flex:none;font-size:12px;font-weight:700;color:var(--gold-strong);font-variant-numeric:tabular-nums}
.ach-item:not(.on) .ach-n{color:var(--dim);font-weight:400}
.ach-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.ach-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:20px;
  font-size:11.5px;background:var(--gold-faint);border:1px solid var(--gold-soft);color:var(--gold-strong)}
.ach-chip em{font-style:normal;font-size:10.5px;opacity:.85}
.ach-none{font-size:11.5px;color:var(--dim);padding:2px 0 4px}

/* ===== 7.41 选地暂缓条 ===== */
.m-defer{margin:0 0 10px;width:100%;border-style:dashed;color:var(--gold-strong)}
.defer-bar{
  display:none;align-items:center;gap:10px;padding:7px 9px 7px 12px;border-radius:10px;
  background:var(--gold-faint);border:1px dashed var(--gold-soft);
}
.defer-bar.show{display:flex}
.db-txt{flex:1;min-width:0;font-size:11.5px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.defer-bar .btn{flex:none;white-space:nowrap}


/* ===== 7.42 流寇 / 招安 ===== */
.ps-item-tag.rogue { color: #c2412f; border-color: rgba(194, 65, 47, .38); background: rgba(194, 65, 47, .12); }
.ps-item-tag.amnesty { color: #2f7c55; border-color: rgba(47, 124, 85, .38); background: rgba(47, 124, 85, .12); }
.pd-rogue {
  margin-top: 10px; padding: 9px 11px; border-radius: 10px; line-height: 1.6;
  font-size: 12.5px; color: var(--dim);
  background: rgba(47, 124, 85, .08); border: 1px dashed rgba(47, 124, 85, .38);
}
.pd-rogue.is-rogue { color: #8c3a2b; background: rgba(194, 65, 47, .09); border-color: rgba(194, 65, 47, .4); }
.pd-rogue b { color: inherit; }
.gift-detail {
  display: block; width: 100%; margin-top: 6px; padding: 6px 0;
  font: inherit; font-size: 12px; cursor: pointer;
  color: var(--gold, #b8892f); background: none; border: none;
  border-top: 1px dashed var(--line, rgba(0, 0, 0, .12));
}
.gift-detail:hover { text-decoration: underline; }
.rc-tag {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 6px;
  font-size: 11px; color: #fff; background: #c2412f;
}
.rc-opts { display: grid; gap: 9px; margin-top: 10px; }
.rc-opt {
  text-align: left; padding: 11px 13px; border-radius: 12px; cursor: pointer;
  font: inherit; color: var(--text); background: var(--card, rgba(255, 255, 255, .6));
  border: 1px solid var(--line, rgba(0, 0, 0, .12));
}
.rc-opt b { display: block; margin-bottom: 3px; font-size: 13.5px; }
.rc-opt i { font-style: normal; font-size: 12px; color: var(--dim); line-height: 1.55; }
.rc-opt:hover { border-color: var(--gold, #b8892f); }
.rc-opt[data-rc="send"] b { color: #c2412f; }
.rc-opt[data-rc="keep"] b { color: #2f7c55; }
.ach-item.is-hidden .ach-main b { letter-spacing: 2px; color: var(--dim); }
.fr-pen {
  margin-left: 4px; padding: 0 4px; border-radius: 5px; font-style: normal; font-size: 10px;
  color: #c2412f; border: 1px solid rgba(194, 65, 47, .35);
}

/* ===== 7.43 天榜 ===== */
.icon-top{padding:6px 10px}
.icon-top svg{
  width:18px;height:18px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.tb-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.tb-tab{
  border:1px solid var(--line);background:transparent;color:var(--dim);
  padding:6px 2px;border-radius:999px;font-size:11.5px;cursor:pointer;
  font-family:inherit;line-height:1.2;text-align:center;white-space:nowrap;
}
.tb-tab.on{color:var(--gold);border-color:var(--gold);background:rgba(217,179,112,.14)}
.tb-hint{font-size:11px;color:var(--dim);margin:9px 2px 6px}
.tb-list{display:flex;flex-direction:column;gap:4px}
.tb-row{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:7px 9px;border-radius:10px;border:1px solid transparent;
  background:transparent;cursor:pointer;font-family:inherit;color:inherit;
  transition:background .12s ease;
}
.tb-row:hover{background:var(--panel2)}
.tb-row.is-top{background:rgba(217,179,112,.10);border-color:rgba(217,179,112,.32)}
.tb-row.is-me{box-shadow:inset 0 0 0 1px var(--gold)}
.tb-rank{width:20px;flex:none;text-align:center;font-size:13px;font-weight:700;color:var(--dim)}
.tb-row.is-top .tb-rank{color:var(--gold)}
.tb-av{width:28px;height:28px;font-size:12px}
.tb-main{flex:1;min-width:0}
.tb-n{display:block;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-s{display:block;font-size:10.5px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-me{
  font-style:normal;font-size:9px;line-height:1;padding:2px 4px;border-radius:4px;
  background:var(--tier-chip-bg);color:var(--gold);margin-left:5px;vertical-align:2px;
}
.tb-val{flex:none;font-size:13px;color:var(--gold)}

/* ===================== 7.44 局外经济：钱袋 / 信箱 / 商城 / 将星阁 ===================== */
.icon-shop{padding:6px 10px}
.icon-shop svg,.icon-mail svg{
  width:18px;height:18px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.icon-mail{position:relative;padding:6px 10px}
.icon-dot{
  position:absolute;top:-4px;right:-5px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;
  background:var(--red-soft);color:#fff;font-size:10px;font-style:normal;line-height:15px;
  text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.45);
}

/* 钱袋条 */
.wallet-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:10px 0 4px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,var(--gold-faint),transparent);
}
.wb-chip{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel2);color:var(--text);
  font-family:inherit;font-size:12px;cursor:pointer;
}
.wb-chip b{font-size:13px;color:var(--gold-strong);font-weight:600}
.wb-chip span{font-size:11px;color:var(--dim)}
.wb-chip:active{transform:translateY(1px)}
.wb-more{margin-left:auto;background:none;border:0;color:var(--gold);font-family:inherit;font-size:12px;cursor:pointer;padding:4px 2px}
.cur-ico{display:inline-block;width:15px;height:15px;flex:none;vertical-align:-3px;line-height:0}
.cur-ico svg{display:block;width:100%;height:100%;overflow:visible}
.cur-gem,.cur-gold,.cur-silver{background:none;box-shadow:none;border-radius:0;transform:none}
.wb-chip .cur-ico{width:14px;height:14px;vertical-align:-2.5px}
.wc .cur-ico{width:17px;height:17px;vertical-align:-3px}
.gxc-ico{background:none}
.fin-reward .cur-ico{width:14px;height:14px}

.wal-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.wc{
  flex:1;min-width:86px;display:flex;align-items:center;gap:5px;padding:8px 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel2);
}
.wc b{font-size:14px;color:var(--gold-strong)}
.wc em{font-size:10px;color:var(--dim);font-style:normal;margin-left:auto}

/* ===== 7.47 邮件 / 更新日志 ===== */
.mail-head{display:flex;align-items:center;gap:8px;margin:2px 0 10px}
.mail-tabs{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.mail-tab{
  border:0;background:none;color:var(--dim);font-family:inherit;font-size:12.5px;
  padding:5px 13px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;
}
.mail-tab.on{background:var(--gold-soft);color:var(--gold-strong);font-weight:600}
.mt-badge{
  display:inline-block;min-width:15px;height:15px;line-height:15px;margin-left:4px;padding:0 3px;
  border-radius:999px;background:var(--red);color:#fff;font-size:9.5px;font-style:normal;text-align:center;
}
.mt-badge[hidden]{display:none}
.mail-head #mail-all{margin-left:auto;flex:none}
.mail-head #mail-all[hidden]{display:none}
.mail-list{display:flex;flex-direction:column;gap:7px}
.mail-row{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);
  color:inherit;font-family:inherit;cursor:pointer;transition:border-color .12s ease,transform .1s ease;
}
.mail-row:active{transform:translateY(1px)}
.mail-row.is-new{border-color:rgba(217,179,112,.42);background:linear-gradient(180deg,var(--gold-faint),var(--panel2))}
.mail-row.is-log{background:linear-gradient(180deg,var(--panel2),var(--panel))}
.mr-seal{
  flex:none;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:14px;color:#f4e7c6;
  background:linear-gradient(160deg,#8d3b2b,#5c2318);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.mr-seal.k-gift{background:linear-gradient(160deg,#a8813a,#6b4a12)}
.mr-seal.k-notice{background:linear-gradient(160deg,#3f5f6e,#22323a)}
.mr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mr-main b{
  font-size:12.5px;font-weight:600;color:var(--text);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mr-main em{
  font-size:10.5px;font-style:normal;color:var(--dim);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mr-flag{
  flex:none;font-style:normal;font-size:9.5px;color:#fff;background:var(--red);
  border-radius:999px;padding:1px 5px;line-height:1.5;
}
.mr-arw{flex:none;font-style:normal;font-size:16px;color:var(--dim);opacity:.65;margin-left:-2px}

/* 详情页 */
.md-bar{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.md-bar .md-back{padding:3px 9px}
.md-bar-t{font-size:11px;color:var(--dim);letter-spacing:.5px}
.md-card{border:1px solid var(--line);border-radius:13px;background:var(--panel2);padding:13px 13px 15px}
.md-head{display:flex;gap:10px;align-items:flex-start;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.md-ht{flex:1;min-width:0}
.md-ht h3{margin:0;font-family:var(--serif);font-size:15px;line-height:1.45;color:var(--text);font-weight:600}
.md-ht em{display:block;margin-top:3px;font-size:10.5px;color:var(--dim);font-style:normal}
.md-ver{
  flex:none;padding:3px 8px;border-radius:7px;font-size:11px;color:var(--gold-strong);
  border:1px solid rgba(217,179,112,.42);background:var(--gold-faint);font-family:var(--serif);
}
.md-rew{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:11px 0 0;padding:8px 10px;
  border-radius:9px;background:var(--gold-faint);border:1px solid rgba(217,179,112,.3);
}
.md-rew-l{font-size:10.5px;color:var(--dim)}
.md-rw{font-size:13px;color:var(--gold-strong);display:inline-flex;align-items:center;gap:4px}
.md-body{margin-top:11px}
.md-h{
  margin:13px 0 6px;font-family:var(--serif);font-size:12.5px;color:var(--gold);
  display:flex;align-items:center;gap:6px;
}
.md-h:first-child{margin-top:1px}
.md-h:before{content:"";width:3px;height:12px;border-radius:2px;background:var(--gold);opacity:.7}
.md-ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.md-ul li{position:relative;padding-left:12px;font-size:11.8px;line-height:1.68;color:var(--dim)}
.md-ul li:before{
  content:"";position:absolute;left:2px;top:.66em;width:4px;height:4px;border-radius:50%;
  background:var(--gold);opacity:.55;
}
.md-p{margin:0 0 6px;font-size:11.8px;line-height:1.72;color:var(--dim)}
.md-take{width:100%;margin-top:14px}
.md-done{margin-top:12px;text-align:center;font-size:11.5px;color:var(--dim)}

.adm-mail{margin-top:14px;padding:10px;border:1px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.am-h{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.am-h b{font-size:12px;color:var(--gold)}
.am-h em{font-size:10.5px;color:var(--dim);font-style:normal}
.am-in{
  width:100%;box-sizing:border-box;margin-bottom:6px;padding:7px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);color:var(--text);font-family:inherit;font-size:12px;
}
.am-body{resize:vertical}
.am-row{display:flex;gap:6px;align-items:center}
.am-sep{height:1px;margin:11px 0 9px;background:var(--line);opacity:.7}
.am-ann{display:flex;flex-direction:column;gap:6px}
.am-ann-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--dim)}
.am-ann-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-ann-row em{font-style:normal;font-size:10.5px;color:var(--log-gain);flex:none}
.am-ann-row .btn{flex:none;padding:2px 9px}
.am-n{flex:1;margin-bottom:0}

/* 商城 */
.shop-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.shop-tab{
  padding:8px 6px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);
  color:var(--dim);font-family:inherit;font-size:13px;cursor:pointer;
}
.shop-tab.on{
  color:var(--ink);background:linear-gradient(180deg,var(--gold-strong),var(--gold));
  border-color:var(--gold-strong);font-weight:600;
}
.ex-wrap{display:flex;flex-direction:column;gap:9px}
.ex-card{border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:10px}
.ex-h{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.ex-h b{font-size:13px;color:var(--text)}
.ex-arw{color:var(--gold);font-style:normal;font-weight:400}
.ex-h em{font-size:11px;color:var(--dim);font-style:normal;margin-left:auto}
.ex-ops{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ex-in{
  width:86px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);
  color:var(--text);font-family:inherit;font-size:13px;
}
.ex-quick{display:flex;gap:4px}
.ex-quick button{
  padding:6px 7px;border-radius:7px;border:1px solid var(--line);background:var(--panel);
  color:var(--dim);font-family:inherit;font-size:11px;cursor:pointer;
}
.ex-out{margin-top:7px;font-size:11.5px;color:var(--dim)}
.ex-out b{color:var(--gold-strong);font-size:13px}
.ex-tip{margin-top:10px;font-size:11px;line-height:1.6;color:var(--dim)}

/* 将星阁召唤台（7.59：五层浅彩弧环 + 轨道光点 + 中心光核，取代原星芒印） */
.gx-stage{
  position:relative;height:232px;margin:4px auto 14px;border-radius:18px;overflow:hidden;
  /* 五层浅彩：青 / 粉 / 紫 / 金 / 金白。弧段、线宽、转速各不相同，才有层次 */
  --g1:#8fd0d8; --g2:#e6a8c6; --g3:#b49ee4; --g4:#e0bb84; --g5:#f6dfb6;
  background:radial-gradient(120% 92% at 50% 116%,#1b273a 0%,#0d1420 48%,#070a11 100%);
  border:1px solid rgba(217,179,112,.32);
  box-shadow:inset 0 0 46px rgba(0,0,0,.7),0 10px 28px rgba(0,0,0,.3);
}
.gx-stage .gxs-sky{position:absolute;inset:-45%;opacity:.9}
.gxs-sky:before,.gxs-sky:after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 22px 34px,rgba(255,248,226,.95),transparent 60%),
    radial-gradient(1.2px 1.2px at 88px 118px,rgba(200,224,255,.82),transparent 60%),
    radial-gradient(1px 1px at 148px 58px,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.7px 1.7px at 54px 166px,rgba(244,226,182,.88),transparent 60%),
    radial-gradient(1.1px 1.1px at 182px 152px,rgba(255,255,255,.62),transparent 60%);
  background-size:214px 214px;
  animation:gxStarDrift 26s linear infinite;
}
.gxs-sky:after{background-size:320px 320px;opacity:.5;animation-duration:40s;animation-direction:reverse}
@keyframes gxStarDrift{to{transform:translate(-214px,214px)}}

/* 底层柔光雾：冷青在外、暖金在内，给台面一点景深 */
.gxs-aura{
  position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(214,232,255,.2),rgba(233,204,246,.15) 42%,
             rgba(196,236,236,.09) 62%,transparent 76%);
  animation:gxAuraBreath 6.6s ease-in-out infinite;
}
@keyframes gxAuraBreath{0%,100%{opacity:.66;transform:scale(.94)}50%{opacity:1;transform:scale(1.07)}}

/* 同心光环：整圈一条极淡描边拉开层次，上面再叠一段旋转亮弧 */
.gxs-rings{position:absolute;inset:0;pointer-events:none}
.gxs-rings i{
  position:absolute;left:50%;top:50%;display:block;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--c) 17%,transparent);
}
.gxs-rings i:before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb,var(--c) 92%,transparent) 18deg,transparent 40deg,
    transparent 122deg,color-mix(in srgb,var(--c) 56%,transparent) 146deg,transparent 172deg,
    transparent 250deg,color-mix(in srgb,var(--c) 32%,transparent) 272deg,transparent 296deg);
  -webkit-mask-image:radial-gradient(closest-side,
    transparent calc(100% - var(--th,2.2px) - .7px),#000 calc(100% - var(--th,2.2px)));
  mask-image:radial-gradient(closest-side,
    transparent calc(100% - var(--th,2.2px) - .7px),#000 calc(100% - var(--th,2.2px)));
  animation:gxRingSpin var(--sp,24s) linear infinite;
  animation-direction:var(--rv,normal);
}
@keyframes gxRingSpin{to{transform:rotate(360deg)}}
/* 最外圈走虚线：和里面几圈的实线一对比，整组环立刻有「由远及近」的层次 */
.gxl-1{
  width:204px;height:204px;margin:-102px 0 0 -102px;--c:var(--g1);--sp:38s;--th:1.6px;
  border-style:dashed;border-color:color-mix(in srgb,var(--g1) 30%,transparent);
}
.gxl-2{width:176px;height:176px;margin:-88px 0 0 -88px;--c:var(--g2);--sp:23s;--rv:reverse;--th:2px}
.gxl-3{width:148px;height:148px;margin:-74px 0 0 -74px;--c:var(--g3);--sp:15.5s;--th:2.6px}
.gxl-4{
  width:120px;height:120px;margin:-60px 0 0 -60px;--c:var(--g4);--sp:8.4s;--th:3.4px;
  border-color:color-mix(in srgb,var(--g4) 34%,transparent);
}
/* 第四层只放一道长弧，加一点点辉光，做画面里最「亮」的那一圈 */
.gxl-4:before{
  background:conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb,var(--c) 96%,transparent) 56deg,transparent 128deg,
    transparent 206deg,color-mix(in srgb,var(--c) 38%,transparent) 248deg,transparent 288deg);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c) 58%,transparent));
}
/* 第五层不转：一圈细环 + 呼吸，作为光核的「托盘」 */
.gxl-5{
  width:94px;height:94px;margin:-47px 0 0 -47px;--c:var(--g5);
  border-color:color-mix(in srgb,var(--g5) 42%,transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--g5) 20%,transparent),
             inset 0 0 14px color-mix(in srgb,var(--g5) 14%,transparent);
  animation:gxCoreRing 4.3s ease-in-out infinite;
}
.gxl-5:before{display:none}
@keyframes gxCoreRing{
  0%,100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.06);opacity:1}
}

/* 轨道光点：12 颗，青 / 粉 / 紫循环，绕一圈 56 秒 */
.gxs-orbit{
  position:absolute;left:50%;top:50%;width:214px;height:214px;margin:-107px 0 0 -107px;
  pointer-events:none;animation:gxRingSpin 56s linear infinite;
}
.gxs-orbit i{
  position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
  border-radius:50%;background:#fff8ea;
  box-shadow:0 0 6px 1px color-mix(in srgb,var(--g5) 76%,transparent);
  transform:rotate(calc(var(--i) * 30deg)) translateY(-107px);
}
.gxs-orbit i:nth-child(3n+1){
  background:color-mix(in srgb,var(--g1) 86%,#fff);
  box-shadow:0 0 6px 1px color-mix(in srgb,var(--g1) 60%,transparent);
}
.gxs-orbit i:nth-child(3n+2){
  background:color-mix(in srgb,var(--g2) 82%,#fff);
  box-shadow:0 0 6px 1px color-mix(in srgb,var(--g2) 56%,transparent);
}
.gxs-orbit i:nth-child(4n+3){
  width:4px;height:4px;margin:-2px 0 0 -2px;
  background:color-mix(in srgb,var(--g3) 80%,#fff);
}

/* 中心光核：没有黑芯，只有一团柔光 + 一枚细环 + 一点高光 */
.gxs-core{
  position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 41% 35%,rgba(255,253,246,.78),rgba(255,240,214,.4) 28%,
             rgba(236,214,246,.2) 52%,rgba(240,230,250,.06) 70%,transparent 86%);
  animation:gxCoreBreath 3.9s ease-in-out infinite;
}
@keyframes gxCoreBreath{0%,100%{opacity:.85;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}
.gxs-core i{position:absolute;inset:0;margin:auto;border-radius:50%}
.gxo-halo{
  width:44px;height:44px;border:1px solid rgba(255,240,210,.42);
  box-shadow:inset 0 0 10px rgba(255,244,220,.4),0 0 14px rgba(238,208,168,.3);
}
.gxo-hot{
  width:12px;height:12px;background:#fffdf6;
  box-shadow:0 0 10px 3px rgba(255,247,226,.92),0 0 26px 9px rgba(255,232,190,.5),
             0 0 48px 18px rgba(230,196,240,.26);
  animation:gxCorePulse 3.4s ease-in-out infinite;
}
@keyframes gxCorePulse{0%,100%{transform:scale(1);opacity:.94}50%{transform:scale(1.3);opacity:1}}

/* 抽卡瞬间的蓄力：弧环提速、光核弹一下 */
.gx-stage.is-charging .gxs-rings i:before{animation-duration:calc(var(--sp,24s) * .28)}
.gx-stage.is-charging .gxs-core{animation:gxCoreCharge .3s ease-in-out infinite alternate}
.gx-stage.is-charging .gxo-hot{animation-duration:.6s}
@keyframes gxCoreCharge{from{transform:scale(.96)}to{transform:scale(1.16)}}

/* 统计行：累计抽奖 / 收集度 / 保底状态，右侧挂「奖池概率」入口 */
.gx-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:0 2px 12px}
.gx-stat{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;line-height:1.7;color:var(--dim)}
.gx-stat b{color:var(--gold-strong);font-weight:600}
.gxs-on{color:var(--gold)}
.gxs-off{color:var(--dim);text-decoration:line-through}
.gx-prob-btn{
  flex:none;display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px 5px 11px;border-radius:999px;cursor:pointer;
  font-size:11px;letter-spacing:.02em;font-family:inherit;transition:.16s;
  color:var(--gold-strong);background:rgba(217,179,112,.1);
  border:1px solid rgba(217,179,112,.34);
}
.gx-prob-btn:after{content:"›";font-size:13px;line-height:1;opacity:.72;transform:translateY(-.5px)}
.gx-prob-btn:hover{background:rgba(217,179,112,.2);border-color:rgba(217,179,112,.54)}
.gx-prob-btn:active{transform:scale(.97)}

/* 单抽 / 十连：一主一次。十连给金调实底 + 扫光 + 顶部高光 */
.gx-btns{display:grid;grid-template-columns:1fr 1.34fr;gap:10px;align-items:stretch}
.gx-btn{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  height:54px;padding:0 10px;border-radius:14px;overflow:hidden;
  font-size:14px;font-weight:600;letter-spacing:.05em;line-height:1.2;font-family:inherit;
  transition:transform .14s,box-shadow .2s,border-color .2s;
}
.gx-btn .gxb-t{font-size:14.5px;font-weight:700;letter-spacing:.08em}
.gx-btn em{font-size:10px;font-style:normal;font-weight:400;letter-spacing:0;opacity:.78}
.gx-btn .gxb-t,.gx-btn em{position:relative;z-index:1}
.gx-btn:active{transform:translateY(1px) scale(.994)}
.gx-btn.is-one{
  color:#e9dcc0;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  border:1px solid rgba(217,179,112,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.2);
}
.gx-btn.is-one:hover{
  border-color:rgba(228,198,142,.7);
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.04));
}
.gx-btn.is-ten{
  color:#f6e7c6;
  background:linear-gradient(180deg,rgba(240,206,140,.34),rgba(226,192,128,.14) 46%,rgba(198,158,92,.1));
  border:1px solid rgba(230,198,138,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 8px rgba(0,0,0,.22),
             0 8px 20px rgba(0,0,0,.34),0 0 0 3px rgba(232,201,134,.1);
}
/* 扫光：三秒半走一趟，只在 55% 时段内穿过 */
.gx-btn.is-ten:before{
  content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:42%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.9) 48%,transparent);
  transform:translateX(-180%) skewX(-18deg);
  animation:gxTenShine 3.6s cubic-bezier(.35,0,.2,1) infinite;
}
@keyframes gxTenShine{
  0%{transform:translateX(-180%) skewX(-18deg)}
  55%,100%{transform:translateX(340%) skewX(-18deg)}
}
/* 上半圈高光：让它读成一颗有厚度的金锭 */
.gx-btn.is-ten:after{
  content:"";position:absolute;left:2px;right:2px;top:1.5px;height:46%;z-index:0;
  border-radius:12px 12px 50% 50%/12px 12px 26px 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));
  pointer-events:none;
}
.gxb-glow{
  position:absolute;inset:-30%;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 50% 62%,rgba(255,226,164,.78),transparent 64%);
  animation:gxTenGlow 4.2s ease-in-out infinite;
}
@keyframes gxTenGlow{0%,100%{opacity:.26;transform:scale(.9)}50%{opacity:.58;transform:scale(1.06)}}
.gxb-tag{
  position:absolute;top:0;right:0;z-index:2;padding:2px 7px 2px 8px;
  border-bottom-left-radius:9px;font-size:9px;font-weight:700;letter-spacing:.06em;
  color:#fff5e4;background:linear-gradient(135deg,#a4453a,#7c2b2a);
  box-shadow:0 2px 6px rgba(96,40,34,.3);
}

/* 奖池概率抽屉：底部升起，「色点 + 名字 + 品质 + 条 + 百分比」五列 */
.gx-prob{position:fixed;inset:0;z-index:79;display:flex;align-items:flex-end;justify-content:center}
.gxp-mask{
  position:absolute;inset:0;opacity:0;transition:opacity .24s;background:rgba(16,10,20,.34);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.gx-prob.is-on .gxp-mask{opacity:1}
.gxp-sheet{
  position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;max-height:78vh;
  border-radius:20px 20px 0 0;overflow:hidden;
  background:var(--panel);border:1px solid rgba(217,179,112,.26);border-bottom:none;
  box-shadow:0 -10px 40px rgba(0,0,0,.32);
  transform:translateY(102%);transition:transform .28s cubic-bezier(.22,.9,.3,1);
}
.gx-prob.is-on .gxp-sheet{transform:none}
.gxp-grip{flex:none;width:38px;height:4px;border-radius:999px;margin:9px auto 2px;background:rgba(217,179,112,.4)}
.gxp-head{flex:none;display:flex;align-items:baseline;gap:8px;padding:6px 18px 12px}
.gxp-head b{font-size:15px;letter-spacing:.06em;color:var(--text);font-family:var(--serif)}
.gxp-head span{font-size:10.5px;color:var(--dim)}
.gxp-x{
  margin-left:auto;align-self:center;width:26px;height:26px;border:none;border-radius:9px;
  background:rgba(217,179,112,.12);color:var(--dim);font-size:15px;line-height:1;cursor:pointer;
}
.gxp-body{overflow:auto;padding:0 18px 22px}
.gxp-sec{display:flex;align-items:baseline;gap:8px;margin:14px 0 8px}
.gxp-sec:first-child{margin-top:2px}
.gxp-sec b{font-size:11.5px;letter-spacing:.1em;color:var(--gold)}
.gxp-sec em{font-size:10.5px;font-style:normal;color:var(--dim)}
.gxp-sec:after{content:"";flex:1;height:1px;background:var(--line)}
.gxp-row{
  display:grid;grid-template-columns:14px 1fr 30px 74px 46px;align-items:center;gap:8px;
  padding:7px 0;border-bottom:1px solid rgba(217,179,112,.1);
}
.gxp-dot{width:7px;height:7px;border-radius:50%;background:var(--q,#cbb6e0);
  box-shadow:0 0 7px color-mix(in srgb,var(--q) 70%,transparent)}
.gxp-n{display:flex;align-items:baseline;gap:5px;min-width:0;font-size:12px;color:var(--text)}
.gxp-n s{text-decoration:none;font-size:10px;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.gxp-q{
  grid-column:3;
  font-size:9px;font-weight:700;letter-spacing:.04em;padding:1px 5px;border-radius:4px;
  color:#2a1c06;background:var(--q,#cbb6e0);
}
.gxp-bar{grid-column:4;height:5px;border-radius:999px;overflow:hidden;
  background:rgba(140,120,150,.18)}
.gxp-bar b{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--q) 55%,transparent),var(--q))}
.gxp-p{grid-column:5;font-size:11.5px;font-weight:600;text-align:right;color:var(--text);
  font-variant-numeric:tabular-nums}
.gxp-note{margin:14px 0 0;font-size:10.5px;line-height:1.75;color:var(--dim)}
.gxp-row.r-N{--q:#b9c2bb}
.gxp-row.r-R{--q:#7db6e0}
.gxp-row.r-SR{--q:#b294e2}
.gxp-row.r-SSR{--q:#d8ab4e}
.gxp-row.r-UR{--q:#e08cc0}

.gx-sec{margin:16px 0 8px;font-size:12px;color:var(--gold);display:flex;align-items:center;gap:8px}
.gx-sec:after{content:"";flex:1;height:1px;background:var(--line)}
.gx-pool{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
@media (max-width:420px){.gx-pool{grid-template-columns:repeat(3,1fr);gap:8px}}
.gp-card{position:relative;aspect-ratio:3/3.9;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(165deg,#262019,#171310);aspect-ratio:1/1.16}
/* 五级品质：N 素 / R 蓝 / SR 紫 / SSR 金 / UR 虹 */
.gp-card.r-N{border-color:rgba(154,163,138,.5);background:linear-gradient(165deg,#23261e,#15170f)}
.gp-card.r-R{border-color:rgba(110,160,205,.58);background:linear-gradient(165deg,#1d2632,#12161d)}
.gp-card.r-SR{border-color:rgba(175,125,220,.62);background:linear-gradient(165deg,#271b33,#170f1f);
  box-shadow:0 0 14px rgba(165,115,220,.24)}
.gp-card.r-SSR{border-color:rgba(232,201,134,.8);background:linear-gradient(165deg,#322710,#1a1408);
  box-shadow:0 0 18px rgba(232,201,134,.32)}
.gp-card.r-UR{border:1px solid transparent;
  background:linear-gradient(165deg,#2e1c34,#1c1208) padding-box,
             linear-gradient(130deg,#e8c986,#c9a0e0,#7fd0b4,#e8c986) border-box;
  background-size:auto,320% 320%;animation:urFlow 4.5s linear infinite;
  box-shadow:0 0 22px rgba(201,160,224,.38)}
@keyframes urFlow{0%{background-position:0 0,0% 0%}100%{background-position:0 0,300% 300%}}
/* SSR/UR 扫光 */
.gp-card.r-SSR:before,.gp-card.r-UR:before{
  content:"";position:absolute;top:0;bottom:0;width:62%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,242,205,.2) 50%,transparent);
  transform:translateX(-130%) skewX(-12deg);animation:rShine 4s ease-in-out infinite}
@keyframes rShine{0%,50%{transform:translateX(-130%) skewX(-12deg)}88%,100%{transform:translateX(130%) skewX(-12deg)}}
.gp-img{position:absolute;inset:0;background-size:contain;background-position:50% 92%;background-repeat:no-repeat;opacity:.96}
.gp-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 44%,rgba(10,8,6,.92))}
.gp-tag{position:absolute;top:5px;left:5px;z-index:2;font-size:9.5px;padding:1px 5px;border-radius:4px;font-weight:600;letter-spacing:.4px}
.gp-tag.r-N,.gp-card.r-N .gp-tag{background:linear-gradient(180deg,#dcdfcf,#a8b098);color:#2c3024}
.gp-card.r-SR .gp-tag{background:linear-gradient(180deg,#e6ccf8,#a878d0);color:#2a1038}
.gp-card.r-UR .gp-tag{background:linear-gradient(135deg,#f6d98a,#d99ae8 55%,#8ad0c0);color:#2a1a30}
.gp-card.r-SSR .gp-tag{background:linear-gradient(180deg,#ffe9a8,#d3a13c);color:#3a2a08}
.gp-card.r-R .gp-tag{background:linear-gradient(180deg,#b8d8f2,#6f9ec2);color:#10202c}
.gp-n{position:absolute;left:0;right:0;bottom:6px;z-index:2;text-align:center;font-size:11.5px;color:#f2e8d2;font-family:var(--serif)}
.gp-card.r-SSR{border-color:rgba(232,201,134,.66);box-shadow:0 0 14px rgba(232,201,134,.2)}
.gp-own{position:absolute;top:5px;right:5px;z-index:3;padding:1px 5px;border-radius:4px;background:rgba(10,8,6,.72);font-size:9px;color:var(--gold-strong)}
.gx-tip{margin-top:10px;font-size:10.5px;line-height:1.6;color:var(--dim);text-align:center}

/* 开箱结果 */
/* 抽卡演出（7.50）：星幕 → 流星坠落 → 光爆 → 卡片翻入 */
.gx-reveal{position:fixed;inset:0;z-index:70;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:18px}
.gx-reveal.out{opacity:0;transition:opacity .22s}
.gxr-mask{position:absolute;inset:0;background:radial-gradient(126% 96% at 50% 44%,#101a2b 0%,#070b13 54%,#03050a 100%)}
.gxr-sky{position:absolute;inset:-30%;opacity:0;animation:gxSkyIn .5s ease forwards}
@keyframes gxSkyIn{to{opacity:1}}
.gxr-sky:before,.gxr-sky:after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 22px 34px,rgba(255,248,226,.95),transparent 60%),
    radial-gradient(1.2px 1.2px at 88px 118px,rgba(200,224,255,.82),transparent 60%),
    radial-gradient(1px 1px at 148px 58px,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.7px 1.7px at 54px 166px,rgba(244,226,182,.88),transparent 60%),
    radial-gradient(1.1px 1.1px at 182px 152px,rgba(255,255,255,.62),transparent 60%);
  background-size:220px 220px;animation:gxStarDrift 26s linear infinite;
}
.gxr-sky:after{background-size:330px 330px;opacity:.48;animation-duration:42s;animation-direction:reverse}
/* 品质色：流星、光爆、冲击环共用 */
.gx-reveal.t-N{--tc:#d3dae1;--tc2:#8b96a3;--tc-rgb:211,218,225;--tc2-rgb:139,150,163}
.gx-reveal.t-R{--tc:#8ac6f5;--tc2:#3a7cb5;--tc-rgb:138,198,245;--tc2-rgb:58,124,181}
.gx-reveal.t-SR{--tc:#c8a2f8;--tc2:#8557cc;--tc-rgb:200,162,248;--tc2-rgb:133,87,204}
.gx-reveal.t-SSR{--tc:#ffe09a;--tc2:#cf9726;--tc-rgb:255,224,154;--tc2-rgb:207,151,38}
.gx-reveal.t-UR{--tc:#ffd7f0;--tc2:#b284e6;--tc-rgb:255,215,240;--tc2-rgb:178,132,230}
.gxr-meteor{
  position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;z-index:4;
  background:radial-gradient(circle at 38% 34%,#fff,var(--tc) 56%,var(--tc2));
  box-shadow:0 0 10px var(--tc),0 0 30px var(--tc2),0 0 64px var(--tc2);
  opacity:0;
}
.gxr-meteor:after{
  content:"";position:absolute;right:6px;top:50%;width:min(46vw,330px);height:5px;
  transform:translateY(-50%);border-radius:99px;
  background:linear-gradient(270deg,var(--tc),rgba(255,255,255,.08) 84%,transparent);
  filter:blur(.4px);
}
.gx-reveal.is-flight .gxr-meteor{animation:gxMeteor .82s cubic-bezier(.42,.02,.86,.42) forwards}
@keyframes gxMeteor{
  0%{opacity:0;transform:translate(34vw,-28vh) scale(.7)}
  16%{opacity:1}
  70%{opacity:1;transform:translate(0,0) scale(1.06)}
  100%{opacity:1;transform:translate(0,0) scale(1.34)}
}
.gx-reveal.t-UR .gxr-meteor:after{
  background:linear-gradient(270deg,#ffc6ea,#ffd98a 26%,#a8f0d0 56%,rgba(170,200,255,.1));
}
.gxr-flash{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,#fff 0%,var(--tc) 24%,transparent 58%);
}
.gx-reveal.is-hit .gxr-flash{animation:gxFlash .74s ease-out forwards}
@keyframes gxFlash{0%{opacity:0;transform:scale(.22)}14%{opacity:1}100%{opacity:0;transform:scale(1.75)}}
.gxr-ring{
  position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px 0 0 -70px;z-index:5;
  border-radius:50%;border:2px solid var(--tc);opacity:0;pointer-events:none;
  box-shadow:0 0 24px var(--tc),inset 0 0 24px var(--tc);
}
.gx-reveal.is-hit .gxr-ring{animation:gxRing .88s cubic-bezier(.18,.8,.28,1) forwards}
@keyframes gxRing{0%{opacity:.95;transform:scale(.16)}100%{opacity:0;transform:scale(5.2)}}
.gxr-skip{
  position:absolute;top:14px;right:14px;z-index:12;padding:5px 13px;border-radius:999px;cursor:pointer;
  font-size:11px;letter-spacing:.08em;color:#ebdfc4;
  background:rgba(9,13,21,.62);border:1px solid rgba(217,179,112,.42);
}
.gxr-skip:hover{background:rgba(28,38,56,.82)}
.gx-reveal.is-done .gxr-skip,.gx-reveal.no-anim .gxr-skip{display:none}
.gx-reveal.is-done .gxr-meteor,.gx-reveal.no-anim .gxr-meteor{animation:none!important;opacity:0}
.gxr-panel{position:relative;z-index:6;width:100%;max-width:540px;display:flex;flex-direction:column;align-items:center}
.gxr-h{display:flex;flex-direction:column;align-items:center;gap:11px;opacity:0;transition:opacity .22s;margin-bottom:14px}
.gx-reveal.is-done .gxr-h{opacity:1}
.gxr-g{
  font-size:10.5px;font-style:normal;color:#2a1c06;padding:2px 9px;border-radius:999px;
  background:linear-gradient(180deg,#ffe9a8,#d3a13c);
}
.gxr-grid{display:grid;opacity:0;pointer-events:none;transition:opacity .16s}
.gx-reveal.is-done .gxr-grid{opacity:1;pointer-events:auto}
.gxr-grid.n1{grid-template-columns:1fr;width:244px}
.gxr-grid.n10{grid-template-columns:repeat(5,1fr);gap:8px;width:100%}
.gxr-acts{opacity:0;pointer-events:none;transition:opacity .2s .1s;margin-top:16px}
.gx-reveal.is-done .gxr-acts{opacity:1;pointer-events:auto}
.gxr-ok{
  min-width:140px;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(0,0,0,.05)),var(--gold-strong)!important;
  color:var(--on-accent)!important;border-color:rgba(255,255,255,.42)!important;
  box-shadow:0 10px 26px var(--gold-glow);font-weight:600
}
/* 卡片：图为主，字只留名字与一行小注
   用 #gx-reveal 提权，避免被浅色主题那套 .gx-card 规则接管 */
#gx-reveal .gx-card{
  position:relative;border-radius:12px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(217,179,112,.32);background:linear-gradient(168deg,#fbf8f0,#efe7d6);
  opacity:0;transform:translateY(26px) rotateY(74deg) scale(.88);transform-origin:50% 66%;
  backface-visibility:hidden;box-shadow:var(--cs,0 12px 26px rgba(0,0,0,.46));
}
.gx-reveal.is-done .gx-card{animation:gxCardIn .56s cubic-bezier(.2,.9,.3,1.16) var(--d,0ms) both}
@keyframes gxCardIn{60%{opacity:1}100%{opacity:1;transform:none}}
.gx-reveal.no-anim .gx-card{animation:none!important;opacity:1;transform:none}
.gxr-grid.n1 .gx-card{aspect-ratio:3/4.3}
.gxr-grid.n10 .gx-card{aspect-ratio:3/4.1}
#gx-reveal .gx-card.r-N{background:linear-gradient(168deg,#f8f8f1,#e7e7d7);border-color:rgba(140,148,120,.55)}
#gx-reveal .gx-card.r-R{
  background:linear-gradient(168deg,#f0f5fb,#dae7f4);border-color:rgba(100,145,195,.64);
  --cs:0 12px 26px rgba(0,0,0,.46),0 0 16px rgba(110,150,200,.3)}
#gx-reveal .gx-card.r-SR{
  background:linear-gradient(168deg,#f6f0fc,#e6d7f5);border-color:rgba(155,105,205,.72);
  --cs:0 12px 26px rgba(0,0,0,.46),0 0 18px rgba(160,110,215,.34)}
#gx-reveal .gx-card.r-SSR{
  background:linear-gradient(168deg,#fdf6de,#f4e3b8);border-color:rgba(200,158,60,.88);
  --cs:0 12px 26px rgba(0,0,0,.46),0 0 0 1px rgba(215,175,80,.5),0 0 28px rgba(215,175,80,.46)}
#gx-reveal .gx-card.r-UR{
  border:1px solid transparent;
  background:linear-gradient(168deg,#fdf8ee,#f3ecf9) padding-box,
             linear-gradient(130deg,#d9b370,#b08ad0,#6fbfa0,#d9b370) border-box;
  background-size:auto,320% 320%;
  --cs:0 12px 26px rgba(0,0,0,.46),0 0 32px rgba(190,150,220,.5)}
#gx-reveal .gx-card.r-UR:before{
  content:"";position:absolute;inset:-60% -60% auto auto;width:200%;height:200%;z-index:0;
  background:conic-gradient(from 0deg,rgba(232,201,134,.42),rgba(201,160,224,.42) 33%,rgba(127,208,180,.42) 66%,rgba(232,201,134,.42));
  filter:blur(10px);opacity:.55;animation:gxUrGlow 7s linear infinite;
}
@keyframes gxUrGlow{to{transform:rotate(360deg)}}
#gx-reveal .gx-card.r-SSR:after,#gx-reveal .gx-card.r-UR:after{
  content:"";position:absolute;top:0;bottom:0;width:62%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,250,228,.5) 50%,transparent);
  transform:translateX(-140%) skewX(-12deg);animation:rShine 3.4s ease-in-out infinite;
}
.gxc-img{position:absolute;inset:0;z-index:1;display:block}
.gxc-img img{width:100%;height:100%;object-fit:cover;object-position:50% 4%;display:block;filter:contrast(1.07) saturate(1.06)}
.gxc-r{
  position:absolute;top:5px;left:5px;z-index:4;font-size:9.5px;line-height:1;padding:3px 6px;border-radius:5px;
  font-weight:700;letter-spacing:.04em;background:linear-gradient(180deg,#ffe9a8,#d3a13c);color:#3a2a08;
}
#gx-reveal .gx-card.r-N .gxc-r{background:linear-gradient(180deg,#dcdfcf,#a8b098);color:#2c3024}
#gx-reveal .gx-card.r-R .gxc-r{background:linear-gradient(180deg,#b8d8f2,#6f9ec2);color:#10202c}
#gx-reveal .gx-card.r-SR .gxc-r{background:linear-gradient(180deg,#e6ccf8,#a878d0);color:#2a1038}
#gx-reveal .gx-card.r-UR .gxc-r{background:linear-gradient(135deg,#f6d98a,#d99ae8 55%,#8ad0c0);color:#2a1a30}
.gxc-new,.gxc-dup{
  position:absolute;top:5px;right:5px;z-index:4;font-size:9px;line-height:1;padding:3px 6px;border-radius:5px;
  letter-spacing:.05em;
}
.gxc-new{background:linear-gradient(180deg,#ffe9a8,#d3a13c);color:#3a2a08;font-weight:700}
.gxc-dup{background:rgba(28,24,16,.72);color:#f4e7c8}
.gxc-ft{
  position:absolute;left:0;right:0;bottom:0;z-index:3;display:block;padding:20px 4px 7px;text-align:center;
  background:linear-gradient(180deg,rgba(250,246,236,0),rgba(250,246,236,.86) 46%,rgba(248,243,231,.98));
}
.gxc-ft b{display:block;font-family:var(--serif);font-size:13.5px;color:#2b2113;line-height:1.3;letter-spacing:.02em}
.gxc-ft em{display:block;font-size:9px;font-style:normal;color:#8d7c58;margin-top:1px}
.gxr-grid.n10 .gxc-ft{padding:14px 2px 5px}
.gxr-grid.n10 .gxc-ft b{font-size:10.5px}
.gxr-grid.n10 .gxc-ft em{font-size:8px}
/* 货币卡：大图标 + 大数字 + 单位 */
.gxc-ico{
  position:absolute;left:50%;top:37%;transform:translate(-50%,-50%);z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:52%;aspect-ratio:1;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));
}
.gxr-grid.n10 .gxc-ico{width:62%;top:35%}
.gxc-ico .cur-ico{width:100%;height:100%;display:flex}
.gxc-ico .cur-ico svg{width:100%;height:100%}
.gxc-num{
  position:absolute;left:0;right:0;top:60%;z-index:2;text-align:center;
  font-size:19px;font-weight:700;color:#3b2f1b;letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.gxr-grid.n10 .gxc-num{font-size:13px;top:61%}
.gxc-unit{
  position:absolute;left:0;right:0;top:74%;z-index:2;text-align:center;
  font-size:9.5px;color:#8a7955;letter-spacing:.14em;
}
.gxr-grid.n10 .gxc-unit{font-size:8px;top:76%}

/* 终局战报：本局收获 */
.fin-reward{
  margin:0 0 12px;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(217,179,112,.36);background:linear-gradient(180deg,var(--gold-faint),transparent);
}
.frw-h{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--gold)}
.frw-h em{margin-left:auto;font-size:10.5px;color:var(--dim);font-style:normal}
.frw-b{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:13px;color:var(--gold-strong);align-items:center}

/* ===================== 7.44 大厅：上阵皮肤 + 准备/开始 ===================== */
#skin-panel{grid-column:1/-1}
.sp-hint{margin-left:auto;font-size:10.5px;color:var(--dim);font-weight:400}
.skin-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.sk-card{
  position:relative;padding:0 0 20px;border-radius:10px;border:1px solid var(--line);
  background:linear-gradient(165deg,#262019,#171310);overflow:hidden;cursor:pointer;font-family:inherit;
}
.sk-card.r-N{border-color:rgba(154,163,138,.5);background:linear-gradient(165deg,#23261e,#15170f)}
.sk-card.r-R{border-color:rgba(110,160,205,.58);background:linear-gradient(165deg,#1d2632,#12161d)}
.sk-card.r-SR{border-color:rgba(175,125,220,.62);background:linear-gradient(165deg,#271b33,#170f1f);
  box-shadow:0 0 14px rgba(165,115,220,.24)}
.sk-card.r-SSR{border-color:rgba(232,201,134,.8);background:linear-gradient(165deg,#322710,#1a1408);
  box-shadow:0 0 18px rgba(232,201,134,.32)}
.sk-card.r-UR{border:1px solid transparent;
  background:linear-gradient(165deg,#2e1c34,#1c1208) padding-box,
             linear-gradient(130deg,#e8c986,#c9a0e0,#7fd0b4,#e8c986) border-box;
  background-size:auto,320% 320%;animation:urFlow 4.5s linear infinite;
  box-shadow:0 0 22px rgba(201,160,224,.38)}
/* 7.55：扫光从 :after 挪到独立元素 .sk-sh。
   原来 .sk-card.r-SSR:after 与 7.54 的海报底渐变 .sk-card:after 抢同一个伪元素，
   合并后 height 被压成 24px，光带只剩卡片顶部一截。 */
.sk-img{display:block;width:100%;aspect-ratio:1/1.08;background-size:contain;background-position:50% 100%;background-repeat:no-repeat}
.sk-img img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
/* 默认立绘：放小人建模本身，不再是那个大「墨」字 */
.sk-img.is-def{
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
  background:radial-gradient(circle at 50% 34%,#2a2218,#141009);
}
.sk-img.is-def svg.fig,.sk-img.is-def .fig-xian{width:100%;height:100%;display:block}
html[data-theme="light"] .sk-img.is-def{
  background:radial-gradient(circle at 50% 34%,#f7f1e2,#e5dac2);
}
.sk-n{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-size:11px;color:var(--text)}
.sk-r{position:absolute;top:4px;left:4px;font-size:9px;padding:1px 4px;border-radius:4px;font-weight:600}
.sk-card.r-N .sk-r{background:linear-gradient(180deg,#dcdfcf,#a8b098);color:#2c3024}
.sk-card.r-SR .sk-r{background:linear-gradient(180deg,#e6ccf8,#a878d0);color:#2a1038}
.sk-card.r-UR .sk-r{background:linear-gradient(135deg,#f6d98a,#d99ae8 55%,#8ad0c0);color:#2a1a30}
.sk-card.r-SSR .sk-r{background:linear-gradient(180deg,#ffe9a8,#d3a13c);color:#3a2a08}
.sk-card.r-R .sk-r{background:linear-gradient(180deg,#b8d8f2,#6f9ec2);color:#10202c}
.sk-card.sel{border-color:var(--gold-strong);box-shadow:0 0 0 1px var(--gold-strong),0 0 14px rgba(232,201,134,.22)}
.sk-card.is-ex{box-shadow:inset 0 0 0 1px rgba(255,246,214,.55)}
.sk-card.is-ex.sel{box-shadow:inset 0 0 0 1px rgba(255,246,214,.55),0 0 0 1px var(--gold-strong),0 0 14px rgba(232,201,134,.28)}
.sk-card.sel .sk-n{color:var(--gold-strong);font-weight:600}
.sk-card.sel:before{
  content:"✓";position:absolute;top:4px;right:4px;z-index:2;width:15px;height:15px;border-radius:50%;
  background:linear-gradient(180deg,var(--gold-strong),var(--gold));color:#2a1c06;
  font-size:10px;line-height:15px;text-align:center;font-weight:700;
}

/* 准备按钮 */
.btn-ready{
  background:linear-gradient(180deg,rgba(217,179,112,.2),rgba(217,179,112,.05));
  border:1px solid rgba(217,179,112,.5);color:var(--gold-strong);
}
.btn-ready.is-on{
  background:linear-gradient(180deg,var(--gold-strong),var(--gold));
  color:var(--ink);border-color:var(--gold-strong);font-weight:600;
}
.lobby-foot{justify-content:flex-end}
.lobby-foot #btn-leave{margin-right:auto}

/* 皮肤棋子：立绘留白多，放大一点才够显眼 */
.c-tok .fig-skin img{height:121%;bottom:0}


/* ==========================================================================
   7.48 · 登录 / 顶栏 / 大厅抬头 / 席位标识 / 存档卡
   ========================================================================== */

/* ---------- 顶栏：登录后才出现，图标右侧成排 ---------- */
body.is-auth .topbar{display:flex}
.top-right{
  margin-left:auto;display:flex;align-items:center;justify-content:flex-end;
  gap:6px;font-size:12px;color:var(--dim);flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.top-right::-webkit-scrollbar{display:none}
.top-right>#top-status{font-size:11.5px;letter-spacing:.06em;opacity:.8;margin-right:2px}
.icon-btn,
.icon-btn.icon-shop,.icon-btn.icon-ach,.icon-btn.icon-fr,
.icon-btn.icon-top,.icon-btn.icon-mail,.icon-btn.icon-set{
  position:relative;width:36px;height:36px;padding:0;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);color:var(--dim);font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  transition:color .15s,border-color .15s,background .15s,transform .15s,box-shadow .15s;
}
.icon-btn svg,
.icon-btn.icon-fr svg,.icon-btn.icon-top svg,
.icon-btn.icon-shop svg,.icon-btn.icon-mail svg{
  width:18px;height:18px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;
}
.icon-btn:hover{
  color:var(--gold-strong);border-color:var(--gold);background:var(--gold-faint);
  transform:translateY(-1px);box-shadow:0 5px 14px var(--gold-glow);
}
.icon-btn:active{transform:translateY(0) scale(.96)}
.icon-dot{top:-5px;right:-5px}

/* ---------- 登录卡 ---------- */
.login-card{position:relative;overflow:hidden;border-radius:20px;padding:36px 30px 30px}
.login-card:before{
  content:"";position:absolute;left:50%;top:-70px;width:240px;height:150px;transform:translateX(-50%);
  background:radial-gradient(circle,var(--gold-glow),transparent 68%);opacity:.5;pointer-events:none;
}
.login-mark{position:relative}
.login-title{position:relative;margin-bottom:9px}
.login-sub{
  position:relative;font-size:11px;letter-spacing:.2em;color:var(--dim);
  margin:0 0 22px;opacity:.82;
}
.lc-corner{position:absolute;width:16px;height:16px;border:1px solid var(--gold);opacity:.32}
.lc-corner.tl{top:10px;left:10px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.lc-corner.tr{top:10px;right:10px;border-left:0;border-bottom:0;border-radius:0 5px 0 0}
.lc-corner.bl{bottom:10px;left:10px;border-right:0;border-top:0;border-radius:0 0 0 5px}
.lc-corner.br{bottom:10px;right:10px;border-left:0;border-top:0;border-radius:0 0 5px 0}

.btn-login-main{
  position:relative;width:100%;margin-top:10px;padding:14px 18px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--gold-strong),var(--gold));
  border:1px solid rgba(0,0,0,.14);color:var(--ink);
  font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:.32em;text-indent:.32em;
  box-shadow:0 6px 18px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.btn-login-main:hover{
  color:var(--ink);filter:brightness(1.05);transform:translateY(-1px);
  box-shadow:0 10px 26px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.62);
}
.btn-login-main:active{transform:translateY(0) scale(.99)}
.btn-login-main .bl-arw{
  position:absolute;right:15px;top:50%;transform:translateY(-52%);
  font-style:normal;font-size:19px;font-weight:400;opacity:.5;letter-spacing:0;text-indent:0;
}

/* ---------- 大厅抬头 ---------- */
.lobby-top{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.roomcode-card{
  display:inline-flex;align-items:center;gap:9px;padding:5px 7px 5px 13px;border-radius:999px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.rc-k{font-size:10.5px;letter-spacing:.14em;color:var(--dim);white-space:nowrap}
.roomcode{
  font-family:var(--serif);font-size:19px;line-height:1;letter-spacing:.24em;
  padding-left:.24em;color:var(--gold-strong);font-variant-numeric:tabular-nums;
}
.rc-copy{
  width:26px;height:26px;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  border:1px solid var(--line);background:var(--cell-bg);color:var(--dim);
  transition:.15s;
}
.rc-copy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.rc-copy:hover{color:var(--gold-strong);border-color:var(--gold);background:var(--gold-faint)}
.lobby-status{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ls-chip{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;
  font-size:11.5px;line-height:1.3;color:var(--text);white-space:nowrap;
  background:var(--panel2);border:1px solid var(--line);
}
.ls-chip i{font-style:normal;font-size:10px;color:var(--dim);letter-spacing:.05em}
.ls-chip.is-mode{
  background:var(--gold-faint);border-color:var(--gold-soft);
  color:var(--gold-strong);font-weight:600;letter-spacing:.04em;
}
.ls-chip.is-ok{color:var(--log-gain);border-color:rgba(127,208,180,.42);background:rgba(127,208,180,.1)}
html[data-theme="light"] .ls-chip.is-ok{background:rgba(46,125,99,.1)}

/* ---------- 席位标识：房主 / 真人 / AI ---------- */
.lp-tag{
  flex:none;margin-left:0;font-style:normal;font-weight:500;
  font-size:9.5px;line-height:1;padding:2.5px 5px;border-radius:4px;letter-spacing:.04em;
  border:1px solid transparent;vertical-align:1px;
}
.lp-tag.t-host{color:#8a6218;background:rgba(217,179,112,.16);border-color:rgba(217,179,112,.38)}
.lp-tag.t-man{color:var(--dim);background:var(--cell-bg);border-color:var(--line)}
.lp-tag.t-bot{color:#3f6f96;background:rgba(91,143,185,.12);border-color:rgba(91,143,185,.32)}
html[data-theme="light"] .lp-tag.t-host{color:#87591a;background:rgba(217,179,112,.22)}
html[data-theme="light"] .lp-tag.t-bot{color:#315f85;background:rgba(91,143,185,.1)}

/* ---------- 存档卡：两行紧凑，按名次与胜负区分颜色 ---------- */
.arc-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.arc-card{
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;
  padding:8px 10px 8px 13px;border-radius:10px;overflow:hidden;background:var(--bg2);
}
.arc-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.arc-card.win:before{background:linear-gradient(180deg,#c0462f,#8e2b1c)}
.arc-card.lose:before{background:rgba(120,108,88,.28)}
html[data-theme="light"] .arc-card.lose:before{background:rgba(90,80,60,.22)}
.arc-card.p1.win{background:linear-gradient(90deg,rgba(192,70,47,.09),transparent 60%),var(--bg2)}
.arc-card.p1.lose{background:linear-gradient(90deg,rgba(192,70,47,.05),transparent 60%),var(--bg2)}
.arc-card.p2 .arc-place{color:#8b8375}
.arc-card.p3 .arc-place{color:#a8762c}
.arc-card.p1 .arc-place{color:#b8432f}
.arc-top{display:flex;align-items:center;gap:7px;width:100%;min-width:0}
.arc-res{
  flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font-family:var(--serif);font-size:12.5px;font-weight:700;line-height:1;
}
.arc-card.win .arc-res{background:#b8432f;color:#fdf6e3;box-shadow:0 2px 6px rgba(150,40,25,.32)}
.arc-card.lose .arc-res{background:var(--tier-chip-bg);color:var(--dim)}
.arc-place{flex:none;font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap}
.arc-mode{
  flex:1;min-width:0;font-style:normal;font-size:10.5px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.arc-date{flex:none;font-style:normal;font-size:10px;color:var(--dim);opacity:.76;
  font-variant-numeric:tabular-nums}
.arc-delta{
  flex:none;min-width:24px;text-align:right;font-size:10.5px;font-weight:700;
  color:var(--dim);font-variant-numeric:tabular-nums;
}
.arc-delta.up{color:var(--log-gain)}
.arc-delta.down{color:var(--log-lose)}
.arc-meta{display:flex;align-items:center;width:100%;min-width:0;padding-top:5px;
  border-top:1px dashed var(--line);font-size:10.5px;color:var(--dim)}
.am{display:inline-flex;align-items:baseline;gap:3px;min-width:0}
.am+.am{margin-left:9px;padding-left:9px;border-left:1px solid var(--line)}
.am i{font-style:normal;font-size:9.5px;opacity:.76}
.am b{font-size:11px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arc-card.is-admin::after{right:8px;top:auto;bottom:3px;opacity:.45}

@media(max-width:1040px){.arc-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){
  .arc-list{grid-template-columns:1fr}
  .arc-card{padding:8px 9px 8px 12px}
}
@media(max-width:430px){.am.is-wide{display:none}}

@media(max-width:560px){
  .brand-text{display:none}
  .topbar{padding:10px 0 8px}
  .icon-btn,.icon-btn.icon-shop,.icon-btn.icon-ach,.icon-btn.icon-fr,
  .icon-btn.icon-top,.icon-btn.icon-mail,.icon-btn.icon-set{width:32px;height:32px;border-radius:9px}
  .icon-btn svg,.icon-btn.icon-fr svg,.icon-btn.icon-top svg,
  .icon-btn.icon-shop svg,.icon-btn.icon-mail svg{width:16px;height:16px}
  .top-right{gap:5px}
  .top-right>#top-status{display:none}
  .tb-tabs{grid-template-columns:repeat(5,1fr);gap:4px}
  .tb-tab{font-size:10.5px;padding:5px 0}
}

/* ==================================================================
   7.51 典藏光效：UR / SSR 立绘（卡池海报 + 抽卡结果 + 棋盘棋子）
   原则：光色统一取自品质，动画周期长、幅度小，不抢棋盘信息
   ================================================================== */
.gx-reveal .gx-card.r-SSR,.gp-card.r-SSR,.sk-card.r-SSR{--fq:232,201,134}
.gx-reveal .gx-card.r-UR,.gp-card.r-UR,.sk-card.r-UR{--fq:214,168,232}

/* ---------- 一层：金丝框（四角短角标 + 极细内框） ---------- */
.gxc-fr{
  position:absolute;inset:3px;z-index:3;pointer-events:none;border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(255,246,214,.16);
  background:
    linear-gradient(90deg,rgba(255,246,214,.9),transparent) left top/15px 1.5px no-repeat,
    linear-gradient(180deg,rgba(255,246,214,.9),transparent) left top/1.5px 15px no-repeat,
    linear-gradient(270deg,rgba(255,246,214,.9),transparent) right top/15px 1.5px no-repeat,
    linear-gradient(180deg,rgba(255,246,214,.9),transparent) right top/1.5px 15px no-repeat,
    linear-gradient(90deg,rgba(255,246,214,.9),transparent) left bottom/15px 1.5px no-repeat,
    linear-gradient(0deg,rgba(255,246,214,.9),transparent) left bottom/1.5px 15px no-repeat,
    linear-gradient(270deg,rgba(255,246,214,.9),transparent) right bottom/15px 1.5px no-repeat,
    linear-gradient(0deg,rgba(255,246,214,.9),transparent) right bottom/1.5px 15px no-repeat;
}
.gx-reveal .gx-card.r-UR .gxc-fr{
  box-shadow:inset 0 0 0 1px rgba(255,240,214,.24),0 0 10px rgba(214,168,232,.22);
}
.gxr-grid.n10 .gxc-fr{display:none}          /* 十连小卡不加框，避免糊成一团 */
.gp-card .gxc-fr{
  inset:4px;border-radius:7px;background:none;
  box-shadow:inset 0 0 0 1px rgba(255,244,210,.34);
}
.gp-card.r-UR .gxc-fr{box-shadow:inset 0 0 0 1px rgba(255,240,214,.42),0 0 12px rgba(214,168,232,.2)}

/* ---------- 二层：卡内极光（慢转 conic，screen 混合，托底不盖人） ---------- */
.gxc-fx,.gp-fx{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;border-radius:inherit;
  mix-blend-mode:screen;opacity:0;transition:opacity .4s;
}
.gx-reveal .gx-card.r-SSR .gxc-fx,.gp-card.r-SSR .gp-fx{opacity:.24}
.gx-reveal .gx-card.r-UR .gxc-fx,.gp-card.r-UR .gp-fx{opacity:.42}
.gx-reveal .gx-card.r-UR .gxc-fx,.gp-card.r-UR .gp-fx{
  background:
    radial-gradient(circle at 50% 112%,rgba(255,238,200,.5),transparent 56%),
    conic-gradient(from 0deg,
      rgba(232,201,134,.34),rgba(201,160,224,.38) 26%,
      rgba(127,208,180,.26) 52%,rgba(255,214,240,.34) 74%,rgba(232,201,134,.34));
  filter:blur(7px) saturate(1.15);
  animation:gxHolo 12s linear infinite;
}
.gx-reveal .gx-card.r-SSR .gxc-fx,.gp-card.r-SSR .gp-fx{
  background:
    radial-gradient(circle at 50% 116%,rgba(255,232,170,.55),transparent 58%),
    conic-gradient(from 210deg,rgba(232,201,134,.18),rgba(255,246,214,.42) 40%,rgba(214,168,96,.2) 70%,rgba(232,201,134,.18));
  filter:blur(6px);
  animation:gxHolo 16s linear infinite reverse;
}
@keyframes gxHolo{to{transform:rotate(360deg) scale(1.45)}}

/* ---------- 三层：星尘（只有 UR 有，很轻） ---------- */
.gxc-sp{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}
.gx-reveal .gx-card.r-SSR .gxc-sp{opacity:.5;animation:gxcTwinkle 5.2s ease-in-out infinite}
.gx-reveal .gx-card.r-UR .gxc-sp{
  opacity:.9;
  background-image:
    radial-gradient(1.5px 1.5px at 21% 24%,rgba(255,250,232,.95),transparent 60%),
    radial-gradient(1.1px 1.1px at 73% 16%,rgba(255,236,196,.92),transparent 60%),
    radial-gradient(1.7px 1.7px at 63% 58%,rgba(255,255,255,.88),transparent 60%),
    radial-gradient(1.2px 1.2px at 29% 70%,rgba(248,224,255,.92),transparent 60%),
    radial-gradient(1px 1px at 85% 44%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.3px 1.3px at 48% 34%,rgba(255,244,214,.8),transparent 60%);
  animation:gxcTwinkle 3.8s ease-in-out infinite;
}
@keyframes gxcTwinkle{
  0%,100%{opacity:.4;transform:translateY(0)}
  50%{opacity:.95;transform:translateY(-2px)}
}
/* UR 品质底光再压一层，卡片边缘泛光 */
#gx-reveal .gx-card.r-UR{
  box-shadow:0 12px 26px rgba(0,0,0,.46),0 0 34px rgba(190,150,220,.52),0 0 78px rgba(232,201,134,.22);
}
#gx-reveal .gx-card.r-SSR{
  box-shadow:0 12px 26px rgba(0,0,0,.46),0 0 0 1px rgba(215,175,80,.55),0 0 30px rgba(215,175,80,.5);
}

/* ---------- 四层：棋盘棋子上的品质微光 ---------- */
.c-tok .fig-xian.q-SSR img{
  filter:drop-shadow(0 0 2.4px rgba(232,201,134,.55)) drop-shadow(0 1px 1.5px rgba(0,0,0,.55));
}
.c-tok .fig-xian.q-UR img{
  filter:drop-shadow(0 0 2.2px rgba(226,190,250,.5)) drop-shadow(0 1px 1.5px rgba(0,0,0,.55));
}
.c-tok .fig-xian.q-SSR:before,
.c-tok .fig-xian.q-UR:before{
  content:"";position:absolute;left:50%;bottom:-2px;width:28px;height:10px;margin-left:-14px;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(232,201,134,.5),rgba(232,201,134,.1) 62%,transparent 78%);
  filter:blur(.6px);animation:tokAura 4.8s ease-in-out infinite;
}
.c-tok .fig-xian.q-UR:before{
  width:31px;height:11px;margin-left:-15.5px;
  background:radial-gradient(closest-side,rgba(242,214,152,.46),rgba(201,160,224,.3) 50%,transparent 78%);
  animation-duration:4s;
}
/* UR：一颗绕行的星尘，3px，只有走位时也不干扰读盘 */
.c-tok .fig-xian.q-UR:after{
  content:"";position:absolute;left:50%;top:23%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
  border-radius:50%;background:#fff6da;pointer-events:none;
  box-shadow:0 0 5px #ffe9b0,0 0 10px rgba(214,168,232,.85);
  animation:tokStar 6.2s linear infinite;
}
@keyframes tokAura{0%,100%{opacity:.5}50%{opacity:.86}}
@keyframes tokStar{
  0%{transform:rotate(0deg) translateX(9px) scale(.7);opacity:0}
  14%{opacity:.95}
  86%{opacity:.95}
  100%{transform:rotate(360deg) translateX(9px) scale(.7);opacity:0}
}
.c-tok.hopping .fig-xian.q-UR:after{animation-duration:2.2s}

/* ---------- 五层：大厅席位缩略 + 上阵立绘卡 ---------- */
.lp-fig.q-SSR{box-shadow:0 0 0 1px rgba(232,201,134,.45),0 0 10px rgba(232,201,134,.3),inset 0 0 16px rgba(232,201,134,.12)}
.lp-fig.q-UR{box-shadow:0 0 0 1px rgba(232,201,134,.55),0 0 13px rgba(201,160,224,.4),inset 0 0 20px rgba(214,168,232,.2)}
.sk-card.r-SSR{box-shadow:0 0 16px rgba(232,201,134,.3),inset 0 0 20px rgba(232,201,134,.08)}
.sk-card.r-UR{box-shadow:0 0 20px rgba(201,160,224,.36),inset 0 0 24px rgba(214,168,232,.14)}
.sk-card.r-UR.sel,.sk-card.r-SSR.sel{box-shadow:0 0 0 1px var(--gold-strong),0 0 18px rgba(232,201,134,.45)}

@media (prefers-reduced-motion:reduce){
  .gxc-fx,.gp-fx,.gxc-sp,.c-tok .fig-xian.q-UR:after,.c-tok .fig-xian.q-SSR:before,
  .c-tok .fig-xian.q-UR:before{animation:none}
}
/* ---------- 六层：高稀有度卡面改深色丝绒（浅色主题也保留，让金饰和立绘真的发光） ---------- */
/* 7.52 起 SR 回归浅色卡面（只有 UR/SSR 在浅色下保持深色） */
html[data-theme="light"] .gp-card.r-SR,html[data-theme="light"] .sk-card.r-SR{
  background:linear-gradient(165deg,#f7f0fd,#ece0f8);border-color:rgba(165,115,215,.78);
  box-shadow:0 0 16px rgba(165,115,215,.3),inset 0 0 18px rgba(190,150,230,.12);
}
html[data-theme="light"] .gp-card.r-SSR,html[data-theme="light"] .sk-card.r-SSR{
  background:linear-gradient(165deg,#312610,#1a1308);border-color:rgba(232,201,134,.85);
  box-shadow:0 0 18px rgba(215,175,80,.36);
}
html[data-theme="light"] .gp-card.r-UR,html[data-theme="light"] .sk-card.r-UR{
  background:linear-gradient(165deg,#2f1e37,#1b1113) padding-box,
             linear-gradient(130deg,#e8c986,#c9a0e0,#7fd0b4,#e8c986) border-box;
  background-size:auto,320% 320%;
  box-shadow:0 0 22px rgba(190,150,220,.42);
}
html[data-theme="light"] .gp-card.r-SSR .gp-n,
html[data-theme="light"] .gp-card.r-UR .gp-n{color:#f2e8d2}
html[data-theme="light"] .gp-card.r-SSR:after,
html[data-theme="light"] .gp-card.r-UR:after{
  background:linear-gradient(180deg,transparent 44%,rgba(10,8,6,.9))
}
html[data-theme="light"] .gp-card.r-SSR .gp-own,
html[data-theme="light"] .gp-card.r-UR .gp-own{
  background:rgba(10,8,6,.7);color:var(--gold-strong)
}
html[data-theme="light"] .sk-card.r-SSR .sk-n,
html[data-theme="light"] .sk-card.r-UR .sk-n{color:#f2e8d2}

/* 抽卡结果的 UR / SSR：深色卡面 + 金丝框 + 极光星尘 */
#gx-reveal .gx-card.r-SSR{
  background:linear-gradient(168deg,#2c2210,#17100a);
  border-color:rgba(232,201,134,.9);
}
#gx-reveal .gx-card.r-UR{
  background:linear-gradient(168deg,#2c1d34,#160f1a) padding-box,
             linear-gradient(130deg,#f3d79a,#c9a0e0,#7fd0b4,#f3d79a) border-box;
  background-size:auto,300% 300%;
  animation:gxCardIn .56s cubic-bezier(.2,.9,.3,1.16) var(--d,0ms) both,gxUrEdge 7s linear infinite;
}
#gx-reveal .gx-card.r-UR.no-anim{animation:none!important}
@keyframes gxUrEdge{0%{background-position:0 0,0% 50%}100%{background-position:0 0,300% 50%}}
#gx-reveal .gx-card.r-SSR .gxc-ft,#gx-reveal .gx-card.r-UR .gxc-ft{
  background:linear-gradient(180deg,rgba(16,11,6,0),rgba(16,11,6,.82) 46%,rgba(14,9,5,.97));
}
#gx-reveal .gx-card.r-SSR .gxc-ft b,#gx-reveal .gx-card.r-UR .gxc-ft b{color:#f7e6bd}
#gx-reveal .gx-card.r-SSR .gxc-dup,#gx-reveal .gx-card.r-UR .gxc-dup{
  background:rgba(255,240,200,.16);color:#ffe9b8;box-shadow:inset 0 0 0 1px rgba(255,236,190,.22)
}
#gx-reveal .gx-card.r-SSR .gxc-fr,#gx-reveal .gx-card.r-UR .gxc-fr{
  box-shadow:inset 0 0 0 1px rgba(255,240,200,.34)
}
/* 轮到自己：UR 立绘的辉光提一档（只加亮，不改变构图） */
.c-tok.cur .fig-xian.q-UR img{
  filter:drop-shadow(0 0 3.6px rgba(236,206,255,.78)) drop-shadow(0 1px 1.5px rgba(0,0,0,.55));
}
.c-tok.cur .fig-xian.q-UR:before{opacity:.95}
/* 十连小卡：角标缩一号，避免和品质角标挤在一起 */
.gxr-grid.n10 .gxc-new,.gxr-grid.n10 .gxc-dup{
  top:3px;right:3px;font-size:7.5px;padding:1px 3px;letter-spacing:0;
  max-width:calc(100% - 30px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gxr-grid.n10 .gxc-r{font-size:8.5px;padding:2px 4px}

/* ==================================================================
   7.52 品质分层：UR 顶级特效 + 图鉴海报轮播
   N 素 / R 蓝 / SR 紫(浅) / SSR 深金 / UR 深紫虹彩+流动框+呼吸+星尘
   ================================================================== */

/* ---------- UR 立绘呼吸（海报/结果卡的图片本体缓慢起伏） ---------- */
.gp-card.r-UR .gp-img,
#gx-reveal .gx-card.r-UR .gxc-img img{
  animation:gxBreath 5.2s ease-in-out infinite;
}
@keyframes gxBreath{
  0%,100%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.035) translateY(-1.2%)}
}
/* UR 扫光比 SSR 快一档、亮一档（SSR 4s → UR 2.8s） */
.gp-card.r-UR:before,#gx-reveal .gx-card.r-UR:after{
  animation-duration:2.8s;
}
.gp-card.r-UR:before{
  background:linear-gradient(100deg,transparent,rgba(255,246,220,.34) 50%,transparent);
}
/* UR 外发光加大加深，明显压过 SSR */
.gp-card.r-UR{
  box-shadow:0 0 30px rgba(201,160,224,.5),0 0 70px rgba(232,201,134,.22);
}
html[data-theme="light"] .gp-card.r-UR{
  box-shadow:0 0 30px rgba(190,150,220,.55),0 0 72px rgba(232,201,134,.28);
}
#gx-reveal .gx-card.r-UR{
  box-shadow:0 12px 26px rgba(0,0,0,.46),0 0 40px rgba(190,150,220,.6),0 0 90px rgba(232,201,134,.3);
}
/* UR 四角金丝加粗加长（区别于 SSR 的细角标） */
.gp-card.r-UR .gxc-fr,
#gx-reveal .gx-card.r-UR .gxc-fr{
  background:
    linear-gradient(90deg,rgba(255,238,196,.98),transparent) left top/22px 2px no-repeat,
    linear-gradient(180deg,rgba(255,238,196,.98),transparent) left top/2px 22px no-repeat,
    linear-gradient(270deg,rgba(255,238,196,.98),transparent) right top/22px 2px no-repeat,
    linear-gradient(180deg,rgba(255,238,196,.98),transparent) right top/2px 22px no-repeat,
    linear-gradient(90deg,rgba(255,238,196,.98),transparent) left bottom/22px 2px no-repeat,
    linear-gradient(0deg,rgba(255,238,196,.98),transparent) left bottom/2px 22px no-repeat,
    linear-gradient(270deg,rgba(255,238,196,.98),transparent) right bottom/22px 2px no-repeat,
    linear-gradient(0deg,rgba(255,238,196,.98),transparent) right bottom/2px 22px no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,240,214,.3),0 0 14px rgba(214,168,232,.3);
}
.gxr-grid.n10 .gxc-fr{display:none}   /* 十连小卡依旧不画框 */

/* 图鉴 UR 卡补星尘层（与结果卡同一套 .gxc-sp） */
.gp-card.r-UR .gxc-sp{opacity:.85;z-index:2}
.gp-card .gxc-sp{position:absolute;inset:0;pointer-events:none;opacity:0;
  background-image:
    radial-gradient(1.4px 1.4px at 22% 20%,rgba(255,250,232,.95),transparent 60%),
    radial-gradient(1.1px 1.1px at 74% 14%,rgba(255,236,196,.9),transparent 60%),
    radial-gradient(1.6px 1.6px at 64% 56%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(1.1px 1.1px at 30% 68%,rgba(248,224,255,.9),transparent 60%),
    radial-gradient(1px 1px at 86% 42%,rgba(255,255,255,.7),transparent 60%);
  animation:gxcTwinkle 3.8s ease-in-out infinite;
}

/* ---------- 海报轮播：一次 4 款，自动播放 + 手动切页 ---------- */
.gx-car{position:relative;margin:0 -2px}
.gx-car-view{overflow:hidden;border-radius:12px}
.gx-car-track{
  display:flex;gap:8px;
  transition:transform .52s cubic-bezier(.3,.8,.3,1);
  will-change:transform;
}
.gx-car-track .gp-card{flex:0 0 calc((100% - 24px)/4);min-width:0;aspect-ratio:3/4.2}
@media (max-width:420px){
  .gx-car-track .gp-card{flex-basis:calc((100% - 16px)/3)}
}
.gx-car-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:30px;height:44px;border-radius:9px;border:1px solid rgba(217,179,112,.4);
  background:rgba(20,16,10,.72);color:#e8c986;font-size:17px;line-height:1;
  cursor:pointer;backdrop-filter:blur(3px);transition:background .2s,transform .2s;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.gx-car-btn:hover{background:rgba(48,36,16,.88);transform:translateY(-50%) scale(1.06)}
.gx-car-btn.is-prev{left:-4px}
.gx-car-btn.is-next{right:-4px}
html[data-theme="light"] .gx-car-btn{background:rgba(255,250,238,.85);color:#8a6a2a;border-color:rgba(170,140,80,.45)}
html[data-theme="light"] .gx-car-btn:hover{background:#fff8e8}
.gx-car-dots{display:flex;justify-content:center;gap:6px;margin-top:9px}
.gx-car-dot{
  width:14px;height:4px;border-radius:2px;border:0;padding:0;cursor:pointer;
  background:rgba(160,140,100,.32);transition:background .25s,width .25s;
}
.gx-car-dot.on{background:var(--gold-strong,#e8c986);width:22px}
.gx-car-dot:hover{background:rgba(232,201,134,.6)}
@media (prefers-reduced-motion:reduce){
  .gx-car-track{transition:none}
  .gp-card.r-UR .gp-img,#gx-reveal .gx-card.r-UR .gxc-img img{animation:none}
}


/* ===== 7.53 等待房间换位 ===== */
.lp-item.can-swap { cursor: pointer; }
.lp-item.can-swap:hover { border-color: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold-soft) inset; }
.lp-item.can-swap::after {
  content: "换位"; position: absolute; right: 8px; top: 8px;
  font-size: 10px; letter-spacing: .5px; padding: 1px 5px; border-radius: 999px;
  color: var(--gold-strong); border: 1px solid var(--gold-soft); background: var(--card);
  opacity: 0; transition: opacity .16s;
}
.lp-item.can-swap:hover::after { opacity: 1; }
.lswap {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 2px; padding: 8px 10px; border-radius: 10px;
  border: 1px dashed var(--line); background: var(--card2, rgba(0,0,0,.03));
  font-size: 12.5px; color: var(--text);
}
.lswap[hidden] { display: none; }
.lswap .lswap-t { flex: 1 1 auto; min-width: 0; }
.lswap .lswap-l { color: var(--dim); font-variant-numeric: tabular-nums; }
.lswap .lswap-l b { color: var(--gold-strong); }

/* ===== 7.54 GM 系统（顶栏入口 + 面板） ===== */
.icon-gm svg{stroke:var(--gold)}
.gm-panel{margin-top:0}
.gm-sec{margin:10px 0 6px;font-size:11px;color:var(--gold);letter-spacing:.06em}
.gm-scope{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.gm-sb{
  padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--dim);font-family:inherit;font-size:11px;cursor:pointer;
}
.gm-sb.on{border-color:var(--gold);color:var(--gold-strong);background:rgba(216,178,106,.12)}
.gm-pickbox[hidden]{display:none}
.gm-list{
  max-height:190px;overflow:auto;display:flex;flex-direction:column;gap:3px;
  padding:4px;border:1px solid var(--line);border-radius:10px;
}
.gm-row{
  display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:8px;
  border:1px solid transparent;background:transparent;color:var(--text);
  font-family:inherit;font-size:12px;cursor:pointer;text-align:left;
}
.gm-row:hover{background:rgba(255,255,255,.04)}
.gm-row.on{border-color:var(--gold);background:rgba(216,178,106,.12)}
.gm-tick{
  flex:0 0 auto;width:13px;height:13px;border-radius:4px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:9px;color:#2a1c06;font-style:normal;
}
.gm-row.on .gm-tick{background:linear-gradient(180deg,var(--gold-strong),var(--gold));border-color:var(--gold)}
.gm-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-kd{font-size:9.5px;padding:1px 5px;border-radius:5px;border:1px solid var(--line);color:var(--dim);font-style:normal}
.gm-kd.is-bot{color:#8fd3ff;border-color:rgba(120,190,255,.45)}
.gm-foot{margin-top:10px}
.gm-tip{margin-top:8px;font-size:10.5px;color:var(--dim);line-height:1.65}

/* ===== 7.54 上阵立绘卡：默认卡与皮肤卡同一套海报底 ===== */
.sk-card.r-N .sk-img.is-def{background:transparent}
html[data-theme="light"] .sk-card.r-N .sk-img.is-def{background:transparent}
.sk-card:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:24px;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(8,6,4,0),rgba(8,6,4,.66));
}
html[data-theme="light"] .sk-card:after{
  background:linear-gradient(180deg,rgba(252,248,238,0),rgba(252,248,238,.82));
}
.sk-n{z-index:2}
.sk-r{z-index:2}


/* ==================================================================
   7.54 品质视觉重排：SSR 立起来、UR 压过去、UR 与 SR 彻底分家
   N 素 · R 青蓝 · SR 素紫（不再发光） · SSR 赤金火星 · UR 虹彩双星
   ================================================================== */

/* ---------- 品质色单一来源（覆盖 7.51 旧值） ---------- */
.gx-reveal .gx-card.r-SSR,.gp-card.r-SSR,.sk-card.r-SSR,.sms-card.r-SSR{--fq:255,201,96}
.gx-reveal .gx-card.r-UR,.gp-card.r-UR,.sk-card.r-UR{--fq:255,228,170}

/* ============================================================
   一、SSR：赤金 —— 靠「亮、动、粒子」立起价值感
   ============================================================ */
.gp-card.r-SSR,.sk-card.r-SSR{
  border-color:rgba(255,206,110,.88);
  background:linear-gradient(168deg,#3a2c12,#1c1307);
  box-shadow:0 0 0 1px rgba(255,214,130,.3) inset,0 0 20px rgba(255,190,80,.36),0 0 46px rgba(255,168,60,.16);
  animation:ssrGlow 5.6s ease-in-out infinite;
}
@keyframes ssrGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,214,130,.26) inset,0 0 16px rgba(255,190,80,.3),0 0 38px rgba(255,168,60,.12)}
  50%{box-shadow:0 0 0 1px rgba(255,226,160,.42) inset,0 0 24px rgba(255,196,86,.46),0 0 54px rgba(255,168,60,.22)}
}
/* 立绘本体提亮 → 解决「灰扑扑」的根因 */
.gp-card.r-SSR .gp-img,
.sk-card.r-SSR .sk-img img,
#gx-reveal .gx-card.r-SSR .gxc-img img{
  filter:saturate(1.16) contrast(1.04) brightness(1.08)
         drop-shadow(0 0 5px rgba(255,204,110,.5));
  animation:ssrBreath 7.2s ease-in-out infinite;
}
@keyframes ssrBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.016) translateY(-.5%)}}
/* 扫光：比原来更宽更亮、周期略快 */
/* 7.55：这里只留图鉴卡（:before 是扫光）；立绘卡的 :after 是海报底渐变，
   再往它身上写扫光就会把底渐变染成一条浅色横带 */
.gp-card.r-SSR:before,
.sk-card.r-SSR .sk-sh{
  width:72%;
  background:linear-gradient(100deg,transparent,rgba(255,246,214,.42) 50%,transparent);
  animation-duration:4.2s;
}
/* SSR 星尘（此前只有 UR 有） */
.gp-card.r-SSR .gxc-sp,
#gx-reveal .gx-card.r-SSR .gxc-sp{opacity:.62;animation:gxcTwinkle 4.6s ease-in-out infinite}

/* ============================================================
   二、UR：虹彩 —— 粒子密度、速度、色彩全面压过 SSR
   ============================================================ */
.gp-card.r-UR,.sk-card.r-UR{
  animation:urFlow 4.2s linear infinite,urGlow 5.2s ease-in-out infinite;
}
#gx-reveal .gx-card.r-UR{
  animation:gxCardIn .56s cubic-bezier(.2,.9,.3,1.16) var(--d,0ms) both,
             gxUrEdge 6s linear infinite,urGlow 5.2s ease-in-out infinite;
}
@keyframes urGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,240,200,.42) inset,0 0 24px rgba(255,204,120,.4),0 0 58px rgba(255,140,210,.24)}
  50%{box-shadow:0 0 0 1px rgba(255,252,236,.72) inset,0 0 40px rgba(255,222,150,.62),0 0 96px rgba(120,240,210,.32)}
}
/* UR 立绘：三色投影（金 / 品红 / 青碧），这是与 SR 拉开的第二道差 */
.gp-card.r-UR .gp-img,
#gx-reveal .gx-card.r-UR .gxc-img img{
  filter:saturate(1.18) contrast(1.05) brightness(1.06)
         drop-shadow(0 0 6px rgba(255,222,150,.55))
         drop-shadow(0 0 14px rgba(255,148,214,.32));
}
.gp-card.r-UR:before,#gx-reveal .gx-card.r-UR:after{
  width:78%;
  background:linear-gradient(100deg,transparent,rgba(255,252,236,.5) 46%,rgba(255,180,230,.28) 62%,transparent);
  animation-duration:2.6s;
}
.gp-card.r-UR .gxc-sp,#gx-reveal .gx-card.r-UR .gxc-sp{
  background-image:
    radial-gradient(1.5px 1.5px at 21% 24%,rgba(255,252,238,.98),transparent 60%),
    radial-gradient(1.1px 1.1px at 73% 16%,rgba(255,226,170,.95),transparent 60%),
    radial-gradient(1.7px 1.7px at 63% 58%,rgba(255,255,255,.95),transparent 60%),
    radial-gradient(1.2px 1.2px at 29% 70%,rgba(255,182,226,.95),transparent 60%),
    radial-gradient(1px 1px at 85% 44%,rgba(178,248,226,.9),transparent 60%),
    radial-gradient(1.3px 1.3px at 48% 34%,rgba(255,246,214,.9),transparent 60%);
  animation-duration:3.4s;
}

/* ============================================================
   三、金尘 / 火星层（SSR 与 UR 共用，密度与颜色分级）
   ============================================================ */
.gxc-dust,.sk-dust{
  position:absolute;inset:-8% -2%;z-index:2;pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(1.2px 1.2px at 18% 78%,rgba(255,246,214,.95),transparent 62%),
    radial-gradient(1px 1px at 34% 64%,rgba(255,214,130,.9),transparent 62%),
    radial-gradient(1.5px 1.5px at 52% 86%,rgba(255,250,232,.95),transparent 62%),
    radial-gradient(1px 1px at 68% 60%,rgba(255,224,150,.9),transparent 62%),
    radial-gradient(1.3px 1.3px at 82% 76%,rgba(255,246,214,.9),transparent 62%),
    radial-gradient(.9px .9px at 44% 46%,rgba(255,205,120,.8),transparent 62%),
    radial-gradient(1.1px 1.1px at 24% 38%,rgba(255,240,190,.75),transparent 62%),
    radial-gradient(1px 1px at 72% 34%,rgba(255,232,170,.75),transparent 62%);
  animation:dustRise 6.2s linear infinite;
}
@keyframes dustRise{
  0%{transform:translateY(12px);opacity:0}
  20%{opacity:.92}
  74%{opacity:.7}
  100%{transform:translateY(-20px);opacity:0}
}
/* UR 版本：更密、更快、加品红与青碧，并叠第二层 */
.gp-card.r-UR .gxc-dust,.sk-card.r-UR .sk-dust,#gx-reveal .gx-card.r-UR .gxc-dust{
  background-image:
    radial-gradient(1.4px 1.4px at 14% 82%,rgba(255,250,236,.98),transparent 62%),
    radial-gradient(1px 1px at 27% 66%,rgba(255,170,220,.95),transparent 62%),
    radial-gradient(1.5px 1.5px at 41% 88%,rgba(255,244,214,.98),transparent 62%),
    radial-gradient(1.1px 1.1px at 56% 70%,rgba(178,248,226,.9),transparent 62%),
    radial-gradient(1.3px 1.3px at 69% 86%,rgba(255,200,140,.95),transparent 62%),
    radial-gradient(1px 1px at 81% 62%,rgba(255,236,180,.92),transparent 62%),
    radial-gradient(.9px .9px at 91% 80%,rgba(255,170,220,.85),transparent 62%),
    radial-gradient(1.2px 1.2px at 35% 50%,rgba(255,252,238,.9),transparent 62%),
    radial-gradient(1px 1px at 62% 42%,rgba(178,248,226,.8),transparent 62%),
    radial-gradient(1.1px 1.1px at 88% 36%,rgba(255,214,150,.85),transparent 62%);
  animation-duration:4.4s;
}
.gxc-dust:after,.sk-dust:after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 22% 88%,rgba(255,246,214,.9),transparent 62%),
    radial-gradient(1.2px 1.2px at 47% 72%,rgba(255,255,255,.9),transparent 62%),
    radial-gradient(.9px .9px at 74% 90%,rgba(255,224,150,.85),transparent 62%),
    radial-gradient(1px 1px at 90% 66%,rgba(255,252,236,.8),transparent 62%);
  animation:dustRise 5.4s linear infinite 1.4s;
}

/* ============================================================
   四、上阵立绘卡：光效层（此前 SSR/UR 只有 box-shadow）
   ============================================================ */
.sk-fx{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  mix-blend-mode:screen;opacity:0}
.sk-card.r-SSR .sk-fx{
  opacity:.42;
  background:
    radial-gradient(circle at 50% 108%,rgba(255,214,130,.5),transparent 58%),
    conic-gradient(from 200deg,rgba(255,201,96,.16),rgba(255,246,214,.4) 42%,rgba(214,150,60,.18) 72%,rgba(255,201,96,.16));
  filter:blur(6px);animation:gxHolo 15s linear infinite;
}
.sk-card.r-UR .sk-fx{
  opacity:.6;
  background:
    radial-gradient(circle at 50% 112%,rgba(255,232,170,.56),transparent 58%),
    conic-gradient(from 0deg,rgba(255,214,150,.34),rgba(255,148,214,.34) 28%,rgba(148,240,214,.28) 54%,rgba(255,236,190,.34) 76%,rgba(255,214,150,.34));
  filter:blur(6px) saturate(1.12);animation:gxHolo 9s linear infinite;
}
/* UR 专属：内嵌虹彩细框（SSR 只有外发光，没有框） */
.sk-fr{position:absolute;inset:3px;z-index:3;border-radius:8px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,246,214,.34),0 0 12px rgba(255,148,214,.22);
  animation:urPulse 4.6s ease-in-out infinite}
@keyframes urPulse{0%,100%{opacity:.6}50%{opacity:1}}

/* ============================================================
   五、对局棋子：SSR 一颗火星，UR 双星环 + 更亮的光晕
   ============================================================ */
.c-tok .fig-xian.q-SSR img{
  filter:saturate(1.14) brightness(1.07)
         drop-shadow(0 0 3.2px rgba(255,206,110,.85)) drop-shadow(0 1px 1.5px rgba(0,0,0,.55));
}
.c-tok .fig-xian.q-UR img{
  filter:saturate(1.18) brightness(1.07)
         drop-shadow(0 0 3.4px rgba(255,232,180,.85))
         drop-shadow(0 0 8px rgba(255,148,214,.5)) drop-shadow(0 1px 1.5px rgba(0,0,0,.55));
}
.c-tok .fig-xian.q-SSR:before{
  width:32px;height:12px;margin-left:-16px;
  background:radial-gradient(closest-side,rgba(255,206,110,.66),rgba(255,190,80,.18) 60%,transparent 78%);
  animation-duration:3.8s;
}
.c-tok .fig-xian.q-UR:before{
  width:34px;height:12px;margin-left:-17px;
  background:radial-gradient(closest-side,rgba(255,232,180,.6),rgba(255,148,214,.34) 46%,rgba(148,240,214,.18) 62%,transparent 80%);
  animation-duration:3.2s;
}
.c-tok .fig-xian.q-UR:after{content:none}   /* 旧绕行星已被 .fig-orb 取代 */
.fig-spark{
  position:absolute;left:62%;bottom:16%;width:3px;height:3px;border-radius:50%;
  background:#fff8dc;pointer-events:none;z-index:2;
  box-shadow:0 0 5px #ffe9b0,0 0 10px rgba(255,190,80,.8);
  animation:figSpark 3.4s ease-in-out infinite;
}
@keyframes figSpark{
  0%{transform:translateY(4px) scale(.5);opacity:0}
  30%{opacity:.95}
  70%{opacity:.8}
  100%{transform:translateY(-11px) scale(.9);opacity:0}
}
.fig-orb{
  position:absolute;left:50%;top:30%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;
  background:#fff6da;pointer-events:none;z-index:2;
  box-shadow:0 0 5px #ffe9b0,0 0 10px rgba(255,170,220,.85);
  animation:tokStar 5.6s linear infinite;
}
.fig-orb.is-b{
  width:2.4px;height:2.4px;margin:-1.2px 0 0 -1.2px;background:#dffaf0;
  box-shadow:0 0 5px #dffaf0,0 0 10px rgba(148,240,214,.9);
  animation:tokStarB 7.4s linear infinite;
}
@keyframes tokStarB{
  0%{transform:rotate(180deg) translateX(11px) scale(.6);opacity:0}
  16%{opacity:.9}
  84%{opacity:.9}
  100%{transform:rotate(540deg) translateX(11px) scale(.6);opacity:0}
}
.c-tok.hopping .fig-orb{animation-duration:2s}
.c-tok.hopping .fig-orb.is-b{animation-duration:2.6s}
.c-tok.cur .fig-xian.q-SSR img{
  filter:saturate(1.16) brightness(1.1)
         drop-shadow(0 0 4.2px rgba(255,214,130,.95)) drop-shadow(0 1px 1.5px rgba(0,0,0,.55));
}

/* ============================================================
   六、浅色主题：SSR / UR 保持深色丝绒（金饰与立绘才发得出来）
   ============================================================ */
html[data-theme="light"] .gp-card.r-SSR,html[data-theme="light"] .sk-card.r-SSR{
  background:linear-gradient(168deg,#3a2c12,#1c1307);border-color:rgba(255,206,110,.92);
}
html[data-theme="light"] .gp-card.r-UR,html[data-theme="light"] .sk-card.r-UR{
  background:linear-gradient(168deg,#33203a,#1b1113) padding-box,
             linear-gradient(130deg,#ffd98a,#ff94d6,#94f0d6,#ffd98a) border-box;
  background-size:auto,320% 320%;
}
html[data-theme="light"] .sk-card.r-SSR .sk-n,html[data-theme="light"] .sk-card.r-UR .sk-n{color:#f6ecd8}

/* ============================================================
   七、七星商城：在售立绘卡
   ============================================================ */
.sms-wrap{display:flex;flex-direction:column;gap:8px}
.sms-empty{padding:12px 2px;font-size:11.5px;color:var(--dim)}
.sms-card{
  position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 8px;
  border-radius:12px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(120deg,#262019,#171310);
}
.sms-fx{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  mix-blend-mode:screen;opacity:0}
.sms-card.r-SSR{
  border-color:rgba(255,206,110,.86);
  background:linear-gradient(120deg,#38290f,#1b1207);
  box-shadow:0 0 0 1px rgba(255,214,130,.26) inset,0 0 18px rgba(255,190,80,.3);
  animation:ssrGlow 5.6s ease-in-out infinite;
}
.sms-card.r-SSR .sms-fx{
  opacity:.5;
  background:
    radial-gradient(circle at 16% 62%,rgba(255,206,110,.4),transparent 48%),
    radial-gradient(circle at 84% 34%,rgba(255,170,80,.26),transparent 52%);
  filter:blur(5px);animation:gxHolo 16s linear infinite;
}
.sms-img{
  position:relative;z-index:1;flex:0 0 auto;width:54px;height:78px;border-radius:8px;
  background-size:contain;background-position:50% 0;background-repeat:no-repeat;
}
.sms-card.r-SSR .sms-img{
  filter:brightness(1.06) saturate(1.1) drop-shadow(0 0 5px rgba(255,204,110,.45));
}
.sms-main{position:relative;z-index:1;flex:1;min-width:0}
.sms-top{display:flex;align-items:center;gap:6px}
.sms-n{font-size:14px;font-family:var(--serif);color:var(--gold-strong);letter-spacing:.02em}
.sms-r{font-size:9px;padding:1px 5px;border-radius:4px;font-weight:600;letter-spacing:.4px}
.sms-card.r-SSR .sms-r{background:linear-gradient(180deg,#ffe9a8,#d3a13c);color:#3a2a08}
.sms-own{font-size:9px;padding:1px 5px;border-radius:4px;background:rgba(255,246,214,.16);color:var(--gold-strong)}
.sms-sub{margin-top:1px;font-size:10.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sms-price{margin-top:4px;display:flex;align-items:center;gap:4px;font-size:12px;color:var(--gold-strong)}
.sms-price .cur-ico{width:13px;height:13px}
.sms-price b{font-size:14px;font-family:var(--serif)}
.sms-price s{margin-left:2px;font-size:10px;color:var(--dim);text-decoration:line-through}
.sms-tag{
  margin-left:4px;font-size:9px;padding:1px 5px;border-radius:4px;font-style:normal;
  background:linear-gradient(180deg,rgba(217,69,58,.9),rgba(170,44,36,.95));color:#fff4e2;
  box-shadow:0 0 8px rgba(217,69,58,.35);
}
.sms-buy{position:relative;z-index:1;flex:0 0 auto;min-width:58px}
.sms-buy[disabled]{opacity:.55}
html[data-theme="light"] .sms-card{background:linear-gradient(120deg,#f7f1e2,#e9dfc8);border-color:rgba(180,150,90,.4)}
html[data-theme="light"] .sms-card.r-SSR{background:linear-gradient(120deg,#3a2b11,#1d1408);border-color:rgba(255,206,110,.9)}
html[data-theme="light"] .sms-card.r-SSR .sms-sub{color:#c9b489}
html[data-theme="light"] .sms-card.r-SSR .sms-n{color:#ffe0a0}

/* ============================================================
   八、降级：系统要求减少动效时，只留静态辉光
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .gxc-dust,.sk-dust,.gxc-dust:after,.sk-dust:after,.sk-fx,.sk-fr,
  .fig-spark,.fig-orb,.fig-orb.is-b,
  .gp-card.r-SSR,.sk-card.r-SSR,.sms-card.r-SSR,
  .gp-card.r-UR,.sk-card.r-UR,#gx-reveal .gx-card.r-UR,
  .gp-card.r-SSR .gp-img,.sk-card.r-SSR .sk-img img,
  #gx-reveal .gx-card.r-SSR .gxc-img img{animation:none!important}
}

/* ===== 7.54 视觉微调：商城缩略图、SSR 白裙不糊、UR 立绘提亮 ===== */
.sms-img{width:62px;height:90px}
.sms-own{margin-left:auto}
/* SSR 卡：金色 vignette，避免白裙把深金底压成一块白
   （走 .sk-img / .gp-img 的内阴影，别抢 :before —— 那是选中勾的位置） */
.sk-card.r-SSR .sk-img,.gp-card.r-SSR .gp-img{
  box-shadow:inset 0 0 22px 7px rgba(56,38,8,.5);
}
/* SSR 立绘金边更实一点，白裙也有轮廓 */
.sk-card.r-SSR .sk-img img,
.gp-card.r-SSR .gp-img,
#gx-reveal .gx-card.r-SSR .gxc-img img{
  filter:saturate(1.18) contrast(1.045) brightness(1.13)
         drop-shadow(0 0 7px rgba(255,196,86,.8))
         drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
/* UR 立绘：亮一点、饱和度再高一点，叠双色光边 */
.sk-card.r-UR .sk-img img,
.gp-card.r-UR .gp-img,
#gx-reveal .gx-card.r-UR .gxc-img img{
  filter:saturate(1.2) contrast(1.05) brightness(1.1)
         drop-shadow(0 0 7px rgba(255,226,180,.7))
         drop-shadow(0 0 16px rgba(255,148,214,.4));
}
/* 商城 SSR 卡缩略图同样加金边 */
.sms-card.r-SSR .sms-img{
  filter:brightness(1.1) saturate(1.14) drop-shadow(0 0 6px rgba(255,196,86,.6));
}

/* ===== 7.54 UR 卡面压深：虹彩要压在深底上才亮得出来 ===== */
.gp-card.r-UR,.sk-card.r-UR{
  background:linear-gradient(165deg,#241833,#0e0912) padding-box,
             linear-gradient(130deg,#ffd98a,#ff8fd8,#8ff0d8,#ffd98a) border-box;
  background-size:auto,340% 340%;
}
html[data-theme="light"] .gp-card.r-UR,html[data-theme="light"] .sk-card.r-UR{
  background:linear-gradient(165deg,#241833,#0e0912) padding-box,
             linear-gradient(130deg,#ffd98a,#ff8fd8,#8ff0d8,#ffd98a) border-box;
  background-size:auto,340% 340%;
}
.gp-card.r-UR .gp-fx{opacity:.55}


/* ==================================================================
   7.55 · 上阵立绘：光带补全 / SR 冷紫档 / 写实立绘落位
   ================================================================== */

/* ---------- 一、扫光带：铺满整张卡，不再只是顶部一截 ---------- */
.sk-sh{
  position:absolute;top:0;bottom:0;width:70%;z-index:2;pointer-events:none;
  transform:translateX(-140%) skewX(-12deg);animation:rShine 4.4s ease-in-out infinite;
}
.sk-card.r-SSR .sk-sh{
  background:linear-gradient(100deg,transparent,rgba(255,246,214,.46) 50%,transparent);
}
.sk-card.r-UR .sk-sh{
  width:78%;animation-duration:2.8s;
  background:linear-gradient(100deg,transparent,rgba(255,252,236,.52) 42%,rgba(255,180,230,.3) 62%,transparent);
}

/* ---------- 二、立绘容器通用：卡面 / 席位 / 棋子都能直接塞 <img> ---------- */
.fig-xian{position:relative;display:block;width:100%;height:100%}
.fig-xian img{
  position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;
  transform:translateX(-50%);transform-origin:50% 100%;display:block;
  user-select:none;-webkit-user-drag:none;
}
.sk-img.is-def .fig-xian{height:100%}
.lp-fig .fig-xian{height:100%}

/* ---------- 三、SR 档：冷紫微光（比 SSR 赤金暗一档，和 UR 虹彩彻底不同色） ---------- */
.sk-card.r-SR,.gp-card.r-SR,.sms-card.r-SR{--fq:186,150,236}
.sk-card.r-SR{
  border-color:rgba(186,148,238,.62);
  box-shadow:0 0 0 1px rgba(190,156,240,.14) inset,0 0 13px rgba(168,124,224,.24);
  animation:srGlow 7.6s ease-in-out infinite;
}
@keyframes srGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(190,156,240,.1) inset,0 0 11px rgba(168,124,224,.18)}
  50%{box-shadow:0 0 0 1px rgba(206,178,248,.24) inset,0 0 19px rgba(180,138,236,.3)}
}
.sk-card.r-SR .sk-fx{
  opacity:.2;
  background:
    radial-gradient(circle at 50% 106%,rgba(196,160,246,.4),transparent 60%),
    conic-gradient(from 210deg,rgba(172,132,232,.14),rgba(228,208,255,.3) 44%,rgba(132,96,196,.14) 74%,rgba(172,132,232,.14));
  filter:blur(7px);animation:gxHolo 20s linear infinite;
}
.sk-card.r-SR .sk-dust{
  opacity:.46;animation-duration:9.5s;
  background-image:
    radial-gradient(1.1px 1.1px at 21% 76%,rgba(230,212,255,.9),transparent 62%),
    radial-gradient(.9px .9px at 46% 88%,rgba(200,168,246,.85),transparent 62%),
    radial-gradient(1.2px 1.2px at 71% 68%,rgba(238,226,255,.9),transparent 62%),
    radial-gradient(1px 1px at 84% 84%,rgba(186,150,240,.8),transparent 62%);
}
.sk-card.r-SR .sk-dust:after{display:none}
.sk-card.r-SR .sk-img img{
  filter:saturate(1.05) brightness(1.03)
         drop-shadow(0 2px 4px rgba(58,30,92,.38))
         drop-shadow(0 0 5px rgba(190,150,246,.42));
}
/* 浅色卡面上白衣服会糊成一片，垫一层极淡的紫雾把轮廓托出来 */
html[data-theme="light"] .sk-card.r-SR .sk-img{
  background:radial-gradient(ellipse at 50% 42%,rgba(84,52,132,.15),rgba(84,52,132,.03) 68%,transparent 78%);
}
.sk-card.r-SR .sk-r{background:linear-gradient(180deg,#e6ccf8,#a878d0);color:#2a1038}

/* 图鉴 / 商城 / 商城卡的同档处理 */
.gp-card.r-SR .gp-fx{opacity:.16}
.gp-card.r-SR .gp-img{
  filter:saturate(1.05) brightness(1.03) drop-shadow(0 0 6px rgba(190,150,246,.38));
}
.sms-card.r-SR{
  border-color:rgba(186,148,238,.55);
  box-shadow:0 0 12px rgba(168,124,224,.2);
}
.sms-card.r-SR .sms-fx{
  opacity:.3;
  background:
    radial-gradient(circle at 18% 64%,rgba(196,160,246,.34),transparent 50%),
    radial-gradient(circle at 82% 32%,rgba(226,206,255,.24),transparent 54%);
  filter:blur(5px);animation:srSheen 6.4s ease-in-out infinite;
}
@keyframes srSheen{0%,100%{opacity:.16}50%{opacity:.4}}
.sms-card.r-SR .sms-img{
  filter:brightness(1.04) saturate(1.05)
         drop-shadow(0 2px 5px rgba(58,30,92,.4))
         drop-shadow(0 0 5px rgba(190,150,246,.5));
}
.sms-card.r-SR .sms-r{background:linear-gradient(180deg,#e6ccf8,#a878d0);color:#2a1038}
.sms-card.r-R .sms-r{background:linear-gradient(180deg,#b8d8f2,#6f9ec2);color:#10202c}
.sms-card.r-N .sms-r{background:linear-gradient(180deg,#dcdfcf,#a8b098);color:#2c3024}
html[data-theme="light"] .sms-card.r-SR{
  background:linear-gradient(120deg,#f8f2ff,#ecdefa);
  border-color:rgba(165,115,215,.6);
}
html[data-theme="light"] .sms-card.r-SR .sms-n{color:#5a2f86}

/* ---------- 四、对局棋子：SR 紫微尘 + 地面淡光 ---------- */
.c-tok .fig-xian.q-SR img{
  filter:saturate(1.05) brightness(1.04)
         drop-shadow(0 0 2.8px rgba(196,160,246,.62)) drop-shadow(0 1px 1.5px rgba(0,0,0,.55));
}
.c-tok .fig-xian.q-SR:before{
  width:28px;height:10px;margin-left:-14px;opacity:.5;
  background:radial-gradient(closest-side,rgba(196,160,246,.5),rgba(176,138,232,.14) 62%,transparent 78%);
  animation-duration:5.4s;
}
.fig-mote{
  position:absolute;left:34%;bottom:22%;width:2.6px;height:2.6px;border-radius:50%;
  background:#efe2ff;pointer-events:none;z-index:2;
  box-shadow:0 0 5px #dcc2ff,0 0 9px rgba(170,130,232,.8);
  animation:figMote 5.8s ease-in-out infinite;
}
@keyframes figMote{
  0%{transform:translateY(5px) scale(.5);opacity:0}
  26%{opacity:.85}
  72%{opacity:.6}
  100%{transform:translateY(-12px) scale(.9);opacity:0}
}
/* 席位卡缩略：写实立绘留白少，稍微收一点免得贴边 */
.lp-fig .fig-art img{height:104%}
.sk-img.is-def .fig-art img{height:102%}

/* ============================================================
   7.56 · 新增主题色（粉 / 橘 / 月白 / 深空灰）
   ============================================================ */
html[data-accent="rose"]{
  --gold:#f2679f; --gold-strong:#ff8fba; --gold-soft:rgba(242,103,159,.18);
  --gold-glow:rgba(255,143,186,.42); --gold-faint:rgba(242,103,159,.09);
}
html[data-accent="coral"]{
  --gold:#f8763c; --gold-strong:#ffa06b; --gold-soft:rgba(248,118,60,.18);
  --gold-glow:rgba(255,160,107,.42); --gold-faint:rgba(248,118,60,.09);
}
html[data-accent="frost"]{
  --gold:#e6edf9; --gold-strong:#ffffff; --gold-soft:rgba(230,237,249,.16);
  --gold-glow:rgba(255,255,255,.4); --gold-faint:rgba(230,237,249,.07);
}
html[data-accent="graphite"]{
  --gold:#69758a; --gold-strong:#a7b4c8; --gold-soft:rgba(105,117,138,.2);
  --gold-glow:rgba(167,180,200,.36); --gold-faint:rgba(105,117,138,.09);
}
/* 浅色主题下这两套要收一点，否则白底上看不清金线 */
html[data-theme="light"][data-accent="frost"]{
  --gold:#8194b3; --gold-strong:#5b6f90; --gold-soft:rgba(129,148,179,.2);
  --gold-glow:rgba(91,111,144,.34); --gold-faint:rgba(129,148,179,.1);
}
html[data-theme="light"][data-accent="graphite"]{
  --gold:#4f5a6a; --gold-strong:#333c48; --gold-soft:rgba(79,90,106,.2);
  --gold-glow:rgba(51,60,72,.3); --gold-faint:rgba(79,90,106,.08);
}

/* ============================================================
   7.56 · 存档分栏：小注解
   ============================================================ */
.archive-panel + .archive-panel{margin-top:14px}
.arc-note{
  margin-left:auto;font-size:10.5px;color:var(--dim);letter-spacing:.05em;
  font-weight:400;padding:2px 8px;border-radius:999px;border:1px solid var(--line);
  background:var(--gold-faint);
}

/* ============================================================
   7.56 · 首达圈数播报（3 秒自散，可手动点掉）
   ============================================================ */
.lap-cast{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top, 0px) + 64px);
  z-index:46;display:flex;align-items:center;gap:12px;
  width:min(372px,calc(100vw - 28px));box-sizing:border-box;
  padding:12px 12px 12px 14px;border-radius:16px;
  background:
    linear-gradient(120deg,rgba(255,242,208,.1),rgba(255,242,208,0) 42%),
    linear-gradient(160deg,#2b2118,#14100c);
  border:1px solid rgba(232,201,134,.52);
  box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 26px rgba(232,201,134,.16),
    0 1px 0 rgba(255,255,255,.08) inset;
  color:var(--text);pointer-events:none;overflow:hidden;
  opacity:0;transform:translate(-50%,-16px) scale(.97);
  transition:opacity .3s ease,transform .34s cubic-bezier(.2,.8,.25,1);
}
.lap-cast.show{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
.lap-cast.is-me{border-color:rgba(255,214,130,.85);box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 34px rgba(255,196,90,.28)}
.lc-halo{
  position:absolute;left:-30px;top:-40px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,130,.28),transparent 66%);
  pointer-events:none;
}
.lc-ring{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,246,214,.16) 50%,transparent 64%);
  background-size:280% 100%;animation:lcSheen 1.6s ease-out 1;
}
@keyframes lcSheen{from{background-position:130% 0}to{background-position:-30% 0}}
.lc-seal{
  position:relative;flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  font-family:var(--serif);font-size:19px;font-weight:700;color:#2a1c05;
  background:linear-gradient(165deg,#ffe9b4,#d8a94b 62%,#b8862d);
  box-shadow:0 3px 10px rgba(0,0,0,.38),0 1px 0 rgba(255,255,255,.6) inset;
  letter-spacing:0;
}
.lc-in{position:relative;flex:1;min-width:0}
.lc-tag{
  font-size:10.5px;font-weight:500;letter-spacing:.16em;color:rgba(255,226,168,.86);
  text-transform:uppercase;
}
.lap-cast.is-me .lc-tag{color:#ffe9b8}
.lc-name{
  font-family:var(--serif);font-size:15.5px;color:#fff3d6;line-height:1.35;
  margin:1px 0 2px;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lc-sub{font-size:11.5px;color:rgba(232,220,196,.78);letter-spacing:.02em}
.lc-sub b{color:#ffe3a6;font-size:13px;font-family:var(--serif)}
.lc-sub em{font-style:normal;color:rgba(232,220,196,.5);margin-left:6px}
.lc-x{
  position:relative;flex:0 0 auto;width:26px;height:26px;border-radius:9px;border:none;
  background:rgba(255,255,255,.06);color:rgba(255,240,214,.7);font-size:16px;line-height:1;
  cursor:pointer;transition:.15s;
}
.lc-x:hover{background:rgba(255,255,255,.14);color:#fff3d6}
html[data-theme="light"] .lap-cast{
  background:
    linear-gradient(120deg,rgba(255,255,255,.72),rgba(255,255,255,0) 46%),
    linear-gradient(160deg,#fffdf4,#f4e7cb);
  border-color:rgba(160,116,36,.6);
  box-shadow:0 18px 42px rgba(86,62,24,.28),0 0 0 1px rgba(255,255,255,.9) inset;
}
html[data-theme="light"] .lc-name{color:#3a2c12}
html[data-theme="light"] .lc-tag{color:#8a6118}
html[data-theme="light"] .lap-cast.is-me .lc-tag{color:#7d5510}
html[data-theme="light"] .lc-sub em{color:#7a6234}
html[data-theme="light"] .lc-sub{color:#6d5a3a}
html[data-theme="light"] .lc-sub b{color:#a3761f}
html[data-theme="light"] .lc-x{background:rgba(90,66,20,.08);color:#7a6228}

/* ============================================================
   7.56 · 局内弹窗重做
   ============================================================ */
.modal-mask{
  padding:22px 18px;
  background:
    radial-gradient(ellipse at 50% 12%,rgba(255,226,168,.1),transparent 58%),
    rgba(6,5,3,.66);
  backdrop-filter:blur(7px) saturate(1.06);
}
.modal-mask.show .modal{animation:modalIn .26s cubic-bezier(.18,.82,.24,1)}
@keyframes modalIn{
  from{opacity:0;transform:translateY(14px) scale(.965)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.modal{
  border-radius:20px;border:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 32%),
    linear-gradient(180deg,var(--panel2),var(--panel));
  box-shadow:
    0 30px 80px rgba(0,0,0,.62),
    0 2px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(0,0,0,.25);
  max-width:438px;
}
.modal::before{
  height:3px;
  background:linear-gradient(90deg,transparent 8%,var(--gold) 46%,var(--gold-strong) 54%,transparent 92%);
  opacity:.9;
}
.modal::after{
  content:"";position:absolute;inset:7px;border-radius:15px;pointer-events:none;
  border:1px solid rgba(255,255,255,.05);
}
html[data-theme="light"] .modal{
  background:
    linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 40%),
    linear-gradient(180deg,#fffdf8,var(--panel));
  box-shadow:0 26px 64px rgba(72,52,20,.22),0 1px 0 rgba(255,255,255,.9) inset;
}
html[data-theme="light"] .modal::after{border-color:rgba(120,92,40,.1)}

.m-head{
  padding:19px 18px 14px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--gold-faint),transparent);
  position:relative;
}
.m-head h2{
  font-size:17.5px;letter-spacing:.12em;color:var(--gold-strong);
  display:flex;align-items:center;gap:9px;
}
.m-head h2::before{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:2px;
  background:linear-gradient(140deg,var(--gold-strong),var(--gold));
  transform:rotate(45deg);box-shadow:0 0 8px var(--gold-glow);
}
.m-x{
  width:32px;height:32px;border-radius:11px;font-size:17px;
  border:1px solid transparent;color:var(--dim);
}
.m-x:hover{border-color:var(--line);background:var(--gold-faint);color:var(--gold-strong)}
.m-content{padding:16px 22px 6px}
.m-sub{
  font-size:12px;padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px dashed var(--line);
}
.m-actions{
  padding:14px 20px 18px;gap:10px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,var(--gold-faint));
}
.m-actions .btn{min-width:96px;border-radius:11px}
.m-actions .btn-primary{
  background:linear-gradient(180deg,var(--gold-strong),var(--gold));
  border-color:var(--gold-strong);color:#2a2008;font-weight:600;
  box-shadow:0 8px 18px -8px var(--gold-glow),0 1px 0 rgba(255,255,255,.5) inset;
}
html[data-theme="light"] .m-actions .btn-primary{color:#fff}

/* 自动收起：顶部细进度条 + 底部提示 */
.m-auto{
  display:block;height:2px;margin:0 22px;
  border-radius:2px;transform-origin:left center;
  background:linear-gradient(90deg,var(--gold-strong),var(--gold));
  opacity:.85;animation-name:mAutoCount;animation-timing-function:linear;
  animation-fill-mode:forwards;
}
@keyframes mAutoCount{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.m-auto-hint{
  margin-top:12px;text-align:center;font-size:11px;letter-spacing:.1em;color:var(--dim);
  opacity:.8;
}

/* 事件卡：改成两侧留白的「笺」 */
.event-card{
  border:none;border-radius:14px;padding:16px 16px 15px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 50%),
    var(--bg2);
  box-shadow:0 0 0 1px var(--line) inset,0 6px 18px rgba(0,0,0,.22);
  position:relative;overflow:hidden;
}
.event-card::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--gold-strong),var(--gold));
}
.event-card.good::before{background:linear-gradient(180deg,#8fe0c0,var(--log-gain))}
.event-card.bad::before{background:linear-gradient(180deg,#f09a8e,var(--log-lose))}
.ec-desc{font-size:13.5px;line-height:1.95;letter-spacing:.01em}

/* 过路费弹窗 */
.rent-body{text-align:center;padding:4px 0 8px}
.rent-amt{
  font-family:var(--serif);font-size:32px;line-height:1.25;color:var(--gold-strong);
  margin:6px 0 8px;letter-spacing:.02em;
  text-shadow:0 2px 18px var(--gold-glow);
}
.rent-line{font-size:13px;color:var(--dim);line-height:1.8}
.rent-line b{color:var(--text)}

/* 拍卖开票 */
.bid-board{display:grid;gap:6px;margin:4px 0 2px}

/* 考试卷面 */
.exam-sheet{padding-bottom:4px}
.exam-q{font-size:14.5px;line-height:1.9;margin:10px 0 12px}

/* 称号 */
.ach-hero{gap:14px;padding:6px 2px 12px}

/* ============================================================
   7.56 · 七星商城重做
   ============================================================ */
.shop-tabs{
  gap:4px;padding:4px;border-radius:13px;
  background:var(--bg2);border:1px solid var(--line);
}
.shop-tab{
  border:none;background:none;border-radius:10px;padding:9px 6px;
  font-size:12.5px;letter-spacing:.06em;transition:.18s;
}
.shop-tab:hover{color:var(--text)}
.shop-tab.on{
  background:linear-gradient(180deg,var(--gold-strong),var(--gold));
  color:#2a2008;box-shadow:0 6px 16px -8px var(--gold-glow),0 1px 0 rgba(255,255,255,.45) inset;
}
html[data-theme="light"] .shop-tab.on{color:#fff}

.sms-wrap{display:flex;flex-direction:column;gap:10px}
.sms-card{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px 10px 10px;border-radius:15px;
  background:
    linear-gradient(115deg,rgba(255,255,255,.05),rgba(255,255,255,0) 48%),
    linear-gradient(120deg,#221c15,#151110);
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 8px 22px rgba(0,0,0,.26);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.sms-card:hover{transform:translateY(-1px);border-color:var(--gold-soft);box-shadow:0 12px 26px rgba(0,0,0,.32)}
.sms-card.is-own{opacity:.94}
.sms-img{
  width:72px;height:104px;border-radius:11px;
  box-shadow:0 6px 16px rgba(0,0,0,.36),0 0 0 1px rgba(255,255,255,.06) inset;
  overflow:hidden;
}
.sms-card.is-own .sms-img{filter:saturate(.92) brightness(.98)}
.sms-check{
  position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(165deg,#ffe6ac,#c99a3a);
  box-shadow:0 1px 5px rgba(0,0,0,.45);
}
.sms-check::before{content:"✓";font-size:11px;font-weight:800;color:#33230a;line-height:1}
.sms-n{font-size:15px;letter-spacing:.03em}
.sms-r{font-size:9px;padding:1.5px 6px;border-radius:5px}
.sms-sub{margin-top:2px;font-size:11px}
.sms-price{margin-top:6px;gap:5px}
.sms-price b{font-size:15.5px}
.sms-price.is-own{color:var(--dim)}
.sms-have{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--dim);
  letter-spacing:.05em;
}
.sms-tick{
  width:12px;height:12px;border-radius:50%;border:1px solid var(--gold-soft);
  display:inline-grid;place-items:center;position:relative;
}
.sms-tick::before{content:"";width:5px;height:2.5px;border-left:1.4px solid var(--gold-strong);
  border-bottom:1.4px solid var(--gold-strong);transform:rotate(-45deg) translate(0,-.5px)}
.sms-buy{
  border-radius:999px;padding:7px 15px;min-width:0;letter-spacing:.06em;
  box-shadow:0 8px 18px -10px var(--gold-glow);
}
html[data-theme="light"] .sms-card{
  background:
    linear-gradient(115deg,rgba(255,255,255,.9),rgba(255,255,255,0) 52%),
    linear-gradient(120deg,#fdfaf2,#f2ead8);
  box-shadow:0 8px 20px rgba(88,64,26,.14);
}
html[data-theme="light"] .sms-card.r-SSR{background:linear-gradient(120deg,#3a2b11,#1d1408)}
html[data-theme="light"] .sms-card.is-own{opacity:1}

/* ==================================================================
   7.57 · 主题色：青 / 蓝 / 紫 换成更浅更亮的一档，默认改玫粉
   （三套的深色主题值已就地写在文件开头的主题色区，这里只补浅色主题）
   --gold 负责填充与光晕、--gold-strong 负责文字与描边。
   浅色主题下统一再压深一档，否则白底上的字和线会发飘。
   ================================================================== */
/* ---- 浅色主题：九套统一压深，保证标题与按钮的对比 ---- */
html[data-theme="light"][data-accent="gold"]{
  --gold:#b08434; --gold-strong:#8a6320; --gold-soft:rgba(176,132,52,.14);
  --gold-glow:rgba(138,99,32,.24); --gold-faint:rgba(176,132,52,.07);
}
html[data-theme="light"][data-accent="cinnabar"]{
  --gold:#cf4b34; --gold-strong:#9d2f1c; --gold-soft:rgba(207,75,52,.13);
  --gold-glow:rgba(157,47,28,.24); --gold-faint:rgba(207,75,52,.07);
}
html[data-theme="light"][data-accent="jade"]{
  --gold:#12907b; --gold-strong:#0a6a59; --gold-soft:rgba(18,144,123,.13);
  --gold-glow:rgba(10,106,89,.24); --gold-faint:rgba(18,144,123,.07);
}
html[data-theme="light"][data-accent="blue"]{
  --gold:#3b7fd6; --gold-strong:#1c5aa8; --gold-soft:rgba(59,127,214,.13);
  --gold-glow:rgba(28,90,168,.24); --gold-faint:rgba(59,127,214,.07);
}
html[data-theme="light"][data-accent="violet"]{
  --gold:#7f57dd; --gold-strong:#5a34b8; --gold-soft:rgba(127,87,221,.13);
  --gold-glow:rgba(90,52,184,.24); --gold-faint:rgba(127,87,221,.07);
}
html[data-theme="light"][data-accent="rose"]{
  --gold:#e5407f; --gold-strong:#b81e5e; --gold-soft:rgba(229,64,127,.13);
  --gold-glow:rgba(184,30,94,.26); --gold-faint:rgba(229,64,127,.07);
}
html[data-theme="light"][data-accent="coral"]{
  --gold:#e5601f; --gold-strong:#b04310; --gold-soft:rgba(229,96,31,.13);
  --gold-glow:rgba(176,67,16,.24); --gold-faint:rgba(229,96,31,.07);
}

/* ==================================================================
   7.57 · 七星商城：精品皮肤卡
   右侧留固定宽度的操作位 —— 未拥有是「入手」按钮，已拥有是一枚
   随主题变色的「已拥有」小印，两列永远等宽，不会空一块。
   ================================================================== */
.fin-sec .fs-title{letter-spacing:.06em}
.sms-wrap{gap:9px}
.sms-card{padding:10px 11px 10px 10px}
.sms-card.is-own{opacity:1}                        /* 别再整卡发灰 */
.sms-card.is-own .sms-img{filter:none}
.sms-check{display:none}                            /* 旧金钩下线 */

.sms-main{flex:1 1 auto;min-width:0}
.sms-act{
  flex:0 0 auto;width:64px;align-self:center;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
}
.sms-buy{
  width:64px;min-width:0;padding:7px 0;border-radius:999px;
  font-size:12px;letter-spacing:.1em;text-align:center;
  color:#2a2008;
}
html[data-theme="light"] .sms-buy{color:#fff}

/* 已拥有小印：底与边吃主题色，透明描边勾跟着主题走 */
.sms-own-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  width:64px;height:26px;border-radius:999px;
  box-sizing:border-box;
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 70%),
    var(--gold-soft);
  border:1px solid var(--gold);
  color:var(--gold-strong);
  font-size:10.5px;letter-spacing:.04em;line-height:1;white-space:nowrap;
}
.sob-mark{
  position:relative;flex:0 0 auto;width:11px;height:11px;border-radius:50%;
  border:1px solid currentColor;opacity:.92;
}
.sob-mark::before{
  content:"";position:absolute;left:2.2px;top:3.1px;width:4.6px;height:2.4px;
  border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
}
/* 已拥有的价格：划掉，表示这价对本人已不适用 */
.sms-price.is-own{opacity:.42}
.sms-price.is-own b{text-decoration:line-through;text-decoration-thickness:1px}

/* 品质角标：R / SR / UR 也上色，只有 SSR 有底色会显得半成品 */
.sms-card.r-N .sms-r{background:rgba(255,255,255,.12);color:var(--dim)}
.sms-card.r-R .sms-r{background:linear-gradient(180deg,#a8d8f2,#6fa9cd);color:#0c2431}
.sms-card.r-SR .sms-r{background:linear-gradient(180deg,#d5c0f7,#a487d9);color:#241540}
.sms-card.r-UR .sms-r{
  background:linear-gradient(120deg,#ffd98a,#ff94d6,#94f0d6);color:#33203a;
}
html[data-theme="light"] .sms-card.r-N .sms-r{background:rgba(40,26,8,.07)}

/* ==================================================================
   7.57 · 强调色上的文字：深色系一律白字
   金 / 月白两套底色浅，白字会糊，仍用深字。
   ================================================================== */
/* 深色主题下强调色本身偏亮（浅粉/浅青/浅紫），必须配深字；
   浅色主题下强调色被压深过，才轮到白字。金 / 月白两套例外，始终深字。 */
html{--on-accent:#2a2008}
html[data-theme="light"]{--on-accent:#ffffff}
html[data-theme="light"][data-accent="gold"],
html[data-theme="light"][data-accent="frost"]{--on-accent:#2a2008}

.btn-primary,.btn-gold,.m-actions .btn-primary,.shop-tab.on,.sms-buy,
.btn-primary:hover,.btn-gold:hover{color:var(--on-accent)}
html[data-theme="light"] .m-actions .btn-primary,
html[data-theme="light"] .shop-tab.on,
html[data-theme="light"] .sms-buy{color:var(--on-accent)}

/* 浅色主题：立绘槽位的重阴影会把卡片"挖"出一个亮块，改成柔光托底 */
/* 注意：这里只能写 box-shadow。用 background 简写会顺手把继承来的
   background-size:contain 重置成 auto，立绘就会被裁得只剩一角 */
html[data-theme="light"] .sms-img{box-shadow:none}
.sms-price.is-own{opacity:.5}

/* 7.57 · 深色卡面（SSR / UR）上的已拥有小印：主题色提亮，别沉进深金底 */
.sms-card.r-SSR .sms-own-badge,
.sms-card.r-UR .sms-own-badge{
  color:#ffd0e2;
  border-color:rgba(255,180,212,.7);
  background:rgba(255,150,195,.14);
  color:color-mix(in srgb, var(--gold) 42%, #ffffff);
  border-color:color-mix(in srgb, var(--gold) 58%, transparent);
  background:color-mix(in srgb, var(--gold) 15%, transparent);
}
.sms-card.r-SSR .sms-price.is-own,
.sms-card.r-UR .sms-price.is-own{opacity:.62;color:rgba(255,244,228,.7)}


/* ==================================================================
   7.58 · 将星阁抽卡演出：浅彩粒子天幕
   结构（自下而上）：mask 底色 → sky 柔光斑 → aurora 极光 →
   canvas 粒子 → rays 放射光线 → flash 光爆 → 双层冲击环 → 流星 → 卡片
   深色主题沿用原星幕，只补极光与射线；浅色主题整套换成乳白浅彩。
   ================================================================== */

/* 浅色天幕：乳白 → 浅粉 → 浅紫，四角留一点暖 */
html[data-theme="light"] .gxr-mask{
  background:
    radial-gradient(118% 96% at 50% -8%,#ffffff 0%,#fffaf7 22%,#fdf2f4 46%,
                    #f8eef8 72%,#f0e8f8 100%);
}
html[data-theme="light"] .gxr-mask:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 42% at 50% 46%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%);
}

/* 柔光斑：浅色主题下不再撒星点，改成四团缓慢呼吸的浅彩雾 */
html[data-theme="light"] .gxr-sky:before{
  background-image:
    radial-gradient(34% 26% at 26% 22%,rgba(255,186,214,.55),transparent 72%),
    radial-gradient(30% 24% at 77% 17%,rgba(176,206,255,.5),transparent 72%),
    radial-gradient(37% 28% at 64% 78%,rgba(206,184,255,.44),transparent 72%),
    radial-gradient(26% 22% at 15% 82%,rgba(168,238,218,.42),transparent 72%);
  background-size:100% 100%;
  animation:gxBlobBreath 13s ease-in-out infinite alternate;
}
html[data-theme="light"] .gxr-sky:after{
  background-image:
    radial-gradient(30% 22% at 72% 62%,rgba(255,214,182,.46),transparent 70%),
    radial-gradient(26% 20% at 30% 46%,rgba(186,226,255,.42),transparent 70%);
  background-size:100% 100%;opacity:.72;
  animation:gxBlobBreath 19s ease-in-out infinite alternate-reverse;
}
@keyframes gxBlobBreath{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.16) translate(-3%,2.5%)}
}

/* 极光：一整圈浅彩慢慢转，浅色主题用 multiply 才在白底上出颜色 */
.gxr-aurora{
  position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;
  margin:-80vmax 0 0 -80vmax;border-radius:50%;z-index:1;pointer-events:none;
  background:conic-gradient(from 0deg,
    rgba(255,178,212,.55),rgba(255,226,178,.45) 20%,
    rgba(178,240,220,.42) 42%,rgba(178,208,255,.5) 64%,
    rgba(206,178,255,.46) 84%,rgba(255,178,212,.55));
  filter:blur(52px);mix-blend-mode:screen;opacity:.2;
  animation:gxAuroraSpin 34s linear infinite;
}
html[data-theme="light"] .gxr-aurora{mix-blend-mode:multiply;opacity:.5;filter:blur(58px)}
@keyframes gxAuroraSpin{to{transform:rotate(360deg)}}

/* 粒子画布：压在天幕上、卡片下 */
.gxr-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:3;
  display:block;pointer-events:none;
}

/* 命中放射光线：浅色下用品质色细线，深色下用白光 */
.gxr-rays{
  position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;
  margin:-75vmax 0 0 -75vmax;border-radius:50%;z-index:5;pointer-events:none;
  opacity:0;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.85) 0deg 1deg,transparent 1deg 12deg);
  -webkit-mask-image:radial-gradient(circle,rgba(0,0,0,.9) 2%,rgba(0,0,0,.3) 20%,transparent 47%);
  mask-image:radial-gradient(circle,rgba(0,0,0,.9) 2%,rgba(0,0,0,.3) 20%,transparent 47%);
  mix-blend-mode:screen;
}
html[data-theme="light"] .gxr-rays{
  background:repeating-conic-gradient(from 0deg,
    rgba(var(--tc-rgb),.92) 0deg .9deg,transparent .9deg 13deg);
  mix-blend-mode:normal;
}
.gx-reveal{--ray-o:.85}
html[data-theme="light"] .gx-reveal{--ray-o:.5}
.gx-reveal.is-hit .gxr-rays{animation:gxRays .9s cubic-bezier(.2,.7,.3,1) forwards}
.gx-reveal.no-anim .gxr-rays{animation:none!important;opacity:0}
@keyframes gxRays{
  0%{opacity:0;transform:scale(.16) rotate(0deg)}
  14%{opacity:var(--ray-o)}
  100%{opacity:0;transform:scale(1.55) rotate(28deg)}
}

/* 双层冲击环：外实内虚，错开 70ms */
.gxr-ring.is-b{
  width:96px;height:96px;margin:-48px 0 0 -48px;
  border-width:1px;border-style:dashed;
}
.gx-reveal.is-hit .gxr-ring.is-b{animation:gxRingB 1.04s cubic-bezier(.18,.8,.28,1) .07s forwards}
.gx-reveal.no-anim .gxr-ring.is-b{animation:none!important;opacity:0}
@keyframes gxRingB{
  0%{opacity:.66;transform:scale(.22) rotate(0deg)}
  100%{opacity:0;transform:scale(6.4) rotate(84deg)}
}

/* 光爆：浅色主题不能靠纯白（底本来就白），改成彩色柔光泛开 */
html[data-theme="light"] .gxr-flash{
  background:radial-gradient(circle at 50% 50%,
    #ffffff 0%,rgba(var(--tc-rgb),.95) 14%,rgba(var(--tc-rgb),.4) 34%,transparent 58%);
  filter:blur(1.5px);
}

/* 流星：浅色主题加白芯 + 彩色多层外发光，否则在米白底上看不见 */
html[data-theme="light"] .gxr-meteor{
  background:radial-gradient(circle at 36% 32%,#ffffff 0%,var(--tc) 50%,var(--tc2) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.92),
    0 0 12px rgba(var(--tc-rgb),.8),
    0 0 34px rgba(var(--tc-rgb),.5),
    0 0 70px rgba(var(--tc-rgb),.28);
}
html[data-theme="light"] .gxr-meteor:after{
  height:4px;filter:blur(.6px);
  background:linear-gradient(270deg,
    rgba(var(--tc-rgb),.9),rgba(var(--tc-rgb),.22) 62%,rgba(255,255,255,0));
}
html[data-theme="light"] .gx-reveal.t-UR .gxr-meteor:after{
  background:linear-gradient(270deg,#ff9ecb,#ffd59a 26%,#9fe8d0 56%,rgba(178,200,255,.15));
}

/* 跳过按钮：深色玻璃 → 白色玻璃 */
html[data-theme="light"] .gxr-skip{
  color:#5f4c66;background:rgba(255,255,255,.84);
  border-color:rgba(140,110,150,.26);
  box-shadow:0 4px 14px rgba(120,96,140,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
html[data-theme="light"] .gxr-skip:hover{background:#fff;color:#3d2a44}

html[data-theme="light"] .gxr-g{
  color:#4a3410;background:linear-gradient(180deg,#ffeab4,#e7bc5e);
  box-shadow:0 3px 10px rgba(200,158,60,.28);
}

/* 卡片浮起：浅底 + 浅卡面，只能靠多层柔和投影 + 内白描边分层 */
html[data-theme="light"] #gx-reveal .gx-card{
  --cs:0 20px 44px rgba(96,74,112,.18),0 4px 11px rgba(96,74,112,.13),
       0 0 0 1px rgba(255,255,255,.92) inset;
}
html[data-theme="light"] #gx-reveal .gx-card.r-N{
  --cs:0 18px 38px rgba(84,96,110,.16),0 3px 9px rgba(84,96,110,.11),
       0 0 0 1px rgba(255,255,255,.9) inset;
}
html[data-theme="light"] #gx-reveal .gx-card.r-R{
  --cs:0 20px 44px rgba(60,100,150,.2),0 4px 11px rgba(60,100,150,.13),
       0 0 24px rgba(110,160,210,.28),0 0 0 1px rgba(255,255,255,.9) inset;
}
html[data-theme="light"] #gx-reveal .gx-card.r-SR{
  --cs:0 20px 44px rgba(110,70,160,.22),0 4px 11px rgba(110,70,160,.14),
       0 0 26px rgba(160,110,215,.32),0 0 0 1px rgba(255,255,255,.9) inset;
}
html[data-theme="light"] #gx-reveal .gx-card.r-SSR{
  --cs:0 20px 46px rgba(170,126,40,.24),0 4px 12px rgba(170,126,40,.16),
       0 0 0 1px rgba(220,180,90,.55),0 0 34px rgba(215,175,80,.42),
       0 0 0 1px rgba(255,255,255,.6) inset;
}
html[data-theme="light"] #gx-reveal .gx-card.r-UR{
  --cs:0 20px 46px rgba(140,100,180,.24),0 4px 12px rgba(140,100,180,.16),
       0 0 36px rgba(190,150,220,.46),0 0 0 1px rgba(255,255,255,.6) inset;
}

/* 浅色：召唤台改成暖白天幕 + 深一档的浅彩环（否则米白底上全是灰影） */
html[data-theme="light"] .gx-stage{
  --g1:#63b6c2; --g2:#d886ae; --g3:#9077cc; --g4:#c8933c; --g5:#dfb577;
  background:radial-gradient(126% 96% at 50% 114%,#f7fafd 0%,#fdf8f2 44%,#fffdfa 100%);
  border-color:color-mix(in srgb,var(--gold) 26%,transparent);
  box-shadow:inset 0 0 40px rgba(176,156,190,.13),0 10px 26px rgba(120,96,140,.09);
}
html[data-theme="light"] .gx-stage .gxs-sky:before,
html[data-theme="light"] .gx-stage .gxs-sky:after{
  background-image:
    radial-gradient(1.6px 1.6px at 22px 34px,rgba(196,160,96,.8),transparent 60%),
    radial-gradient(1.3px 1.3px at 88px 118px,rgba(150,170,210,.72),transparent 60%),
    radial-gradient(1.1px 1.1px at 148px 58px,rgba(180,150,200,.7),transparent 60%),
    radial-gradient(1.8px 1.8px at 54px 166px,rgba(210,170,110,.78),transparent 60%),
    radial-gradient(1.2px 1.2px at 182px 152px,rgba(170,186,214,.62),transparent 60%);
}
html[data-theme="light"] .gxs-aura{
  background:radial-gradient(circle,rgba(255,240,214,.6),rgba(236,214,242,.34) 44%,
             rgba(196,226,232,.2) 62%,transparent 76%);
}
html[data-theme="light"] .gxs-core{
  background:radial-gradient(circle at 41% 35%,rgba(255,253,248,.9) 0%,rgba(253,242,226,.6) 30%,
             rgba(250,233,240,.32) 55%,rgba(240,226,246,.1) 74%,transparent 90%);
}
html[data-theme="light"] .gxo-halo{
  border-color:rgba(210,170,110,.44);
  box-shadow:inset 0 0 10px rgba(255,248,236,.7),0 0 14px rgba(232,198,150,.34);
}
html[data-theme="light"] .gxo-hot{
  background:#fffdf8;
  box-shadow:0 0 0 1px rgba(214,170,110,.5),0 0 10px 3px rgba(250,220,176,.9),
             0 0 26px 9px rgba(238,198,152,.48),0 0 46px 16px rgba(214,178,222,.24);
}
html[data-theme="light"] .gx-btn.is-one{
  color:#7a5c1e;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,252,244,.72));
  border:1px solid color-mix(in srgb,var(--gold) 32%,transparent);
  box-shadow:0 4px 12px rgba(150,120,70,.14),inset 0 1px 0 rgba(255,255,255,.92);
}
html[data-theme="light"] .gx-btn.is-one:hover{
  border-color:color-mix(in srgb,var(--gold) 58%,transparent);
  background:linear-gradient(180deg,#fff,#fffaf0);
}
/* 十连：浅色下走奶金实底，别让半透明金在米白上发灰 */
html[data-theme="light"] .gx-btn.is-ten{
  color:#503608;
  background:linear-gradient(180deg,#fff9e8,#fdeece 34%,#f7dba8 68%,#efc98a);
  border-color:rgba(176,134,64,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),inset 0 -2px 7px rgba(166,120,42,.2),
             0 2px 0 rgba(158,118,48,.3),0 9px 20px rgba(184,144,72,.3);
}
html[data-theme="light"] .gx-btn.is-ten:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -2px 7px rgba(166,120,42,.2),
             0 2px 0 rgba(158,118,48,.3),0 12px 26px rgba(184,144,72,.4);
}
html[data-theme="light"] .gxp-row{border-bottom-color:rgba(176,140,72,.16)}

/* ------------------------------------------------------------------
   7.58 · 浅色主题收紧：天幕回到暖白，彩色只做边缘晕染；
   光效改走 --tc2 中深档，否则在米白底上等于没画。
   ------------------------------------------------------------------ */
html[data-theme="light"] .gx-reveal.t-N{--tc:#aab6c2;--tc2:#6d7a88;
  --tc-rgb:170,182,194;--tc2-rgb:109,122,136}
html[data-theme="light"] .gx-reveal.t-R{--tc:#8fc0e8;--tc2:#2f6fa8;
  --tc-rgb:143,192,232;--tc2-rgb:47,111,168}
html[data-theme="light"] .gx-reveal.t-SR{--tc:#b79ae8;--tc2:#6b48b4;
  --tc-rgb:183,154,232;--tc2-rgb:107,72,180}
html[data-theme="light"] .gx-reveal.t-SSR{--tc:#e9c06a;--tc2:#a97a12;
  --tc-rgb:233,192,106;--tc2-rgb:169,122,18}
html[data-theme="light"] .gx-reveal.t-UR{--tc:#f592c6;--tc2:#a45fc0;
  --tc-rgb:245,146,198;--tc2-rgb:164,95,192}

/* 天幕：暖白打底，粉紫只在四角轻轻透出来 */
html[data-theme="light"] .gxr-mask{
  background:
    radial-gradient(124% 104% at 50% -8%,#ffffff 0%,#fffdfa 22%,#fffaf6 42%,
                    #fdf5f4 62%,#f9f0f8 82%,#f4edf9 100%);
}
html[data-theme="light"] .gxr-mask:after{
  background:radial-gradient(58% 38% at 50% 44%,rgba(255,255,255,.94),
                             rgba(255,255,255,0) 74%);
}

/* 极光：改用柔边径向叠加，去掉 conic 那圈硬圆边 */
html[data-theme="light"] .gxr-aurora{
  background:
    radial-gradient(52% 42% at 26% 20%,rgba(255,198,220,.3),transparent 70%),
    radial-gradient(48% 40% at 77% 16%,rgba(184,212,255,.28),transparent 70%),
    radial-gradient(54% 44% at 66% 84%,rgba(210,190,255,.24),transparent 70%),
    radial-gradient(42% 34% at 18% 80%,rgba(176,232,216,.2),transparent 70%);
  filter:blur(46px);mix-blend-mode:normal;opacity:.9;
  animation:gxBlobBreath 24s ease-in-out infinite alternate;
}

/* 柔光斑：降一档，别和极光叠加成糖纸 */
html[data-theme="light"] .gxr-sky:before{
  background-image:
    radial-gradient(32% 24% at 26% 22%,rgba(255,190,216,.4),transparent 72%),
    radial-gradient(28% 22% at 77% 17%,rgba(180,208,255,.36),transparent 72%),
    radial-gradient(35% 26% at 64% 78%,rgba(208,186,255,.3),transparent 72%),
    radial-gradient(24% 20% at 15% 82%,rgba(172,236,218,.28),transparent 72%);
}
html[data-theme="light"] .gxr-sky:after{opacity:.5}

/* 放射线：中深品质色，够浓才看得出「爆」 */
html[data-theme="light"] .gxr-rays{
  background:repeating-conic-gradient(from 0deg,
    rgba(var(--tc2-rgb),.9) 0deg 1.1deg,transparent 1.1deg 12deg);
}
html[data-theme="light"] .gx-reveal{--ray-o:.62}

/* 光爆：白芯 → 中深彩环，靠彩色环取得对比 */
html[data-theme="light"] .gxr-flash{
  background:radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.98) 0%,
    rgba(var(--tc-rgb),.92) 10%,
    rgba(var(--tc2-rgb),.62) 24%,
    rgba(var(--tc2-rgb),.22) 40%,
    transparent 60%);
  filter:blur(1.2px);
}

/* 冲击环：实心环用中深彩 + 明显外晕 */
html[data-theme="light"] .gxr-ring{
  border:2.5px solid var(--tc2);
  box-shadow:0 0 22px rgba(var(--tc2-rgb),.55),
             inset 0 0 14px rgba(var(--tc2-rgb),.3);
}
html[data-theme="light"] .gxr-ring.is-b{
  border-width:1.5px;border-style:dashed;
  box-shadow:0 0 16px rgba(var(--tc2-rgb),.35);
}

/* 卡片：拉开间距、圆角统一，避免十连挤成一片白 */
.gxr-grid.n10{gap:9px}
#gx-reveal .gx-card{border-radius:13px}
.gxr-grid.n10 .gx-card{border-radius:11px}


/* ------------------------------------------------------------------
   7.58 · 第三轮：光效收敛成「光针」而非太阳芒，卡面加深出实体感
   ------------------------------------------------------------------ */

/* 柔光集中到演出主体，四角收回近白 —— 均匀染色会显廉价 */
html[data-theme="light"] .gxr-aurora{
  background:
    radial-gradient(46% 34% at 50% 30%,rgba(255,206,226,.3),transparent 72%),
    radial-gradient(40% 30% at 34% 56%,rgba(196,216,255,.24),transparent 72%),
    radial-gradient(40% 30% at 68% 58%,rgba(214,198,255,.22),transparent 72%);
  filter:blur(54px);opacity:.85;
}
html[data-theme="light"] .gxr-sky:before{
  background-image:
    radial-gradient(26% 19% at 46% 30%,rgba(255,196,220,.3),transparent 74%),
    radial-gradient(24% 18% at 62% 44%,rgba(190,214,255,.26),transparent 74%),
    radial-gradient(26% 19% at 40% 62%,rgba(212,196,255,.22),transparent 74%);
}
html[data-theme="light"] .gxr-sky:after{opacity:.3}

/* 放射光针：收短、加粗、少量，只当氛围 */
html[data-theme="light"] .gxr-rays{
  background:repeating-conic-gradient(from 0deg,
    rgba(var(--tc2-rgb),.8) 0deg 2.2deg,transparent 2.2deg 22deg);
  -webkit-mask-image:radial-gradient(circle,
    rgba(0,0,0,.9) 1%,rgba(0,0,0,.42) 10%,rgba(0,0,0,.1) 19%,transparent 28%);
  mask-image:radial-gradient(circle,
    rgba(0,0,0,.9) 1%,rgba(0,0,0,.42) 10%,rgba(0,0,0,.1) 19%,transparent 28%);
}
html[data-theme="light"] .gx-reveal{--ray-o:.5}

/* 光爆压在卡片上层：命中那一下该盖住画面，0.7s 后自散，不挡读卡 */
.gxr-flash{z-index:7}
.gxr-rays{z-index:7}
.gx-reveal.is-hit .gxr-ring{animation:gxRingLight .74s cubic-bezier(.16,.82,.26,1) forwards}
@keyframes gxRingLight{
  0%{opacity:.85;transform:scale(.14)}
  100%{opacity:0;transform:scale(3.2)}
}
.gxr-ring{border-color:rgba(255,255,255,.75)}
html[data-theme="light"] .gxr-ring{border-width:2px}
html[data-theme="light"] .gxr-ring.is-b{border-width:1px}

/* 卡面加深一档：浅底上要能看出是「卡」而不是一片白 */
html[data-theme="light"] #gx-reveal .gx-card.r-N{
  background:linear-gradient(168deg,#f2f3eb,#e2e3d3);
  border-color:rgba(140,148,120,.5);
}
html[data-theme="light"] #gx-reveal .gx-card.r-R{
  background:linear-gradient(168deg,#e8f2fc,#cfe1f3);
  border-color:rgba(96,142,192,.6);
}
html[data-theme="light"] #gx-reveal .gx-card.r-SR{
  background:linear-gradient(168deg,#f0e9fb,#ddcaf2);
  border-color:rgba(146,98,198,.65);
}
/* SSR / UR 不跟着变浅 —— 仍用 7.52 的深色丝绒（见 .gx-card.r-SSR/.r-UR 基规则）。
   白裙白发的立绘一旦落在浅卡上会整片消失，浅色主题下只有 N/R/SR 走浅底。 */

/* 货币卡的文字在稍深的卡面上再压一点，保证对比 */
html[data-theme="light"] #gx-reveal .gxc-num{color:#2f2517}
html[data-theme="light"] #gx-reveal .gxc-unit{color:#6f5f42}


/* ------------------------------------------------------------------
   7.58 · 第四轮
   ------------------------------------------------------------------ */

/* 极光的圆角 + blur 会在 72% 透明点上留下一条可见的弧线：
   去掉圆角、把透明点收到 58% 以内，边界就彻底化开了 */
html[data-theme="light"] .gxr-aurora{
  border-radius:0;
  background:
    radial-gradient(52% 40% at 50% 30%,rgba(255,206,226,.3),rgba(255,206,226,0) 58%),
    radial-gradient(46% 36% at 34% 56%,rgba(196,216,255,.24),rgba(196,216,255,0) 58%),
    radial-gradient(46% 36% at 68% 58%,rgba(214,198,255,.22),rgba(214,198,255,0) 58%);
  filter:blur(58px);opacity:.9;
}
.gxr-aurora{border-radius:0}

/* 卡片组背后的光池：整组卡有依托，不再浮在纯背景上 */
.gxr-grid{position:relative;isolation:isolate}
.gxr-grid:before{
  content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:132%;height:172%;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(var(--tc-rgb),.34),rgba(var(--tc-rgb),.1) 52%,rgba(var(--tc-rgb),0) 74%);
  filter:blur(18px);
}
html[data-theme="light"] .gxr-grid:before{
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(var(--tc-rgb),.26),rgba(var(--tc-rgb),.07) 50%,rgba(var(--tc-rgb),0) 72%);
}

/* 单抽大卡：货币卡原来只有一个图标一个数字，中间空得发慌 */
.gxr-grid.n1 .gxc-ico{width:56%;top:38%}
.gxr-grid.n1 .gxc-num{font-size:30px;top:60%;letter-spacing:.01em}
.gxr-grid.n1 .gxc-unit{font-size:11px;top:73%;letter-spacing:.32em;padding-left:.32em}
.gxr-grid.n1 .gxc-r{top:8px;left:8px;font-size:10.5px;padding:4px 8px;border-radius:6px}
.gxr-grid.n1 .gxc-new,
.gxr-grid.n1 .gxc-dup{top:8px;right:8px;font-size:10px;padding:4px 8px}

.gxr-grid.n1 .gxc-img img{object-position:50% 6%}


/* ------------------------------------------------------------------
   7.58 · 第五轮：浅色底上「光」不能靠深色线条堆，要白芯 + 柔彩晕
   放射线收成少而短的一圈；粒子走「大晕 + 小芯」双层。
   ------------------------------------------------------------------ */

/* CSS 放射线与 canvas 光针重复，浅色下只留 canvas 那一层 */
html[data-theme="light"] .gxr-rays{display:none}

/* 光爆：纯白芯（比米白底更亮）+ 极淡彩晕，短促扩散 */
html[data-theme="light"] .gxr-flash{
  background:radial-gradient(circle at 50% 50%,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.96) 8%,
    rgba(var(--tc-rgb),.5) 20%,
    rgba(var(--tc-rgb),.18) 34%,
    rgba(var(--tc-rgb),0) 54%);
  filter:blur(3px);
}

/* 冲击环：浅彩细线 + 柔光，不要深紫硬圈 */
html[data-theme="light"] .gxr-ring{
  border:1.5px solid rgba(var(--tc-rgb),.85);
  box-shadow:0 0 14px rgba(var(--tc-rgb),.5),
             inset 0 0 10px rgba(var(--tc-rgb),.22);
}
html[data-theme="light"] .gxr-ring.is-b{
  border-width:1px;border-color:rgba(var(--tc-rgb),.55);
  border-style:solid;
  box-shadow:0 0 10px rgba(var(--tc-rgb),.26);
}

/* 命中那一下，整个天幕跟着亮一下 —— 比只在中心爆更有空间感 */
.gx-reveal.is-hit .gxr-aurora{animation:gxAuroraPulse .92s ease-out}
html[data-theme="light"] .gx-reveal.is-hit .gxr-aurora{animation:gxAuroraPulseL .92s ease-out}
@keyframes gxAuroraPulse{
  0%{opacity:.2;transform:scale(1)}
  22%{opacity:.5;transform:scale(1.16)}
  100%{opacity:.2;transform:scale(1)}
}
@keyframes gxAuroraPulseL{
  0%{opacity:.9;transform:scale(1)}
  22%{opacity:1;transform:scale(1.14)}
  100%{opacity:.9;transform:scale(1)}
}


/* 7.58 · 冲击环柔化：描边感太重会像"圈住了"，改成淡彩 + 微模糊 */
html[data-theme="light"] .gxr-ring{border-color:rgba(var(--tc-rgb),.62);filter:blur(.3px)}
html[data-theme="light"] .gxr-ring.is-b{border-color:rgba(var(--tc-rgb),.34)}
html[data-theme="light"] .gxr-flash{filter:blur(4px)}


/* 7.58 · 浅色下冲击环交给 canvas 画（能带柔边），CSS 那两圈只留给深色 */
html[data-theme="light"] .gxr-ring{display:none}


/* ------------------------------------------------------------------
   7.58 · 第九轮：整屏泛色闪光
   米白底上做不出「更亮」，那就让整个画面在命中瞬间泛一层品质色，
   0.8s 内退回 —— 这个比中心一个点更有冲击力。
   ------------------------------------------------------------------ */
html[data-theme="light"] .gxr-mask:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  mix-blend-mode:normal;
  background:
    radial-gradient(76% 58% at 50% 46%,
      rgba(var(--tc-rgb),.52),rgba(var(--tc-rgb),.2) 42%,
      rgba(var(--tc-rgb),.04) 66%,transparent 82%);
}
html[data-theme="light"] .gx-reveal.is-hit .gxr-mask:before{
  animation:gxScreenFlash .82s ease-out forwards;
}
@keyframes gxScreenFlash{
  0%{opacity:0}
  10%{opacity:1}
  42%{opacity:.58}
  100%{opacity:0}
}
/* 深色主题同样来一层，但走 screen 才亮 */
.gxr-mask:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(70% 52% at 50% 46%,
    rgba(var(--tc-rgb),.4),transparent 70%);
  mix-blend-mode:screen;
}
.gx-reveal.is-hit .gxr-mask:before{animation:gxScreenFlash .82s ease-out forwards}


/* 7.58 · 流星：尾迹收短收柔，头加大 —— 浅色下长条会像一根金针 */
.gxr-meteor:after{width:min(24vw,168px);height:3px;filter:blur(.9px)}
html[data-theme="light"] .gxr-meteor:after{
  width:min(24vw,168px);height:2.5px;filter:blur(1.1px);
}
.gxr-meteor{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
html[data-theme="light"] .gxr-meteor{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.94),
    0 0 10px rgba(var(--tc-rgb),.85),
    0 0 26px rgba(var(--tc-rgb),.55),
    0 0 52px rgba(var(--tc-rgb),.3);
}


/* 7.58 · 单抽大卡：缩一点、比例收紧，底部不再空一大块 */
.gxr-grid.n1{width:222px}
.gxr-grid.n1 .gx-card{aspect-ratio:3/4}
.gxr-grid.n1 .gxc-ico{top:40%}
.gxr-grid.n1 .gxc-num{top:62%}
.gxr-grid.n1 .gxc-unit{top:75%}

/* ============================================================
   7.60 巅峰赛（2v2）
   ============================================================ */

/* —— 首页：五阵营说明 —— */
.rk-intro{margin-top:16px}
.rk-fac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:9px;margin-top:10px}
.rk-fac{
  display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;
  background:var(--bg2);border:1px solid var(--line);
  border-left:3px solid var(--fc);
}
.rk-fac-seal{
  flex:none;width:27px;height:27px;border-radius:8px;display:grid;place-items:center;
  background:var(--fc);color:#fff;font-family:var(--serif);font-weight:700;font-size:13px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.rk-fac-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rk-fac-tx b{font-size:12.5px;letter-spacing:.04em}
.rk-fac-tx span{font-size:10.5px;color:var(--text-dim);line-height:1.35}
.rk-fac-note{
  flex:none;font-style:normal;font-size:9.5px;padding:2px 6px;border-radius:999px;
  color:var(--text-dim);background:color-mix(in srgb,var(--fc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--fc) 28%,transparent);
}
.rk-tip{margin:9px 2px 0;font-size:11px;color:var(--text-dim);line-height:1.5}
.rk-intro-note{margin:10px 2px 0;font-size:11px;color:var(--text-dim);line-height:1.6}

/* —— 房间：五阵营席位板 —— */
.lobby-players.team-board{gap:7px}
.tf-lane{
  border:1px solid var(--line);border-left:3px solid var(--fc);border-radius:12px;
  padding:7px 9px 8px;background:linear-gradient(180deg,var(--panel2),var(--bg2));
}
.tf-head{display:flex;align-items:center;gap:6px;margin-bottom:6px;min-width:0}
.tf-seal{
  flex:none;width:17px;height:17px;border-radius:5px;display:grid;place-items:center;
  background:var(--fc);color:#fff;font-family:var(--serif);font-weight:700;font-size:10px;
}
.tf-name{font-size:11.5px;font-weight:700;letter-spacing:.05em;flex:none}
.tf-buff{
  margin-left:auto;font-size:9.5px;color:var(--text-dim);line-height:1.3;
  text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tf-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tf-slot{min-width:0}
.tf-slot.is-me .lp-item{border-color:var(--gold);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 34%,transparent)}
.tf-empty{
  width:100%;min-height:42px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;border:1px dashed var(--line);border-radius:10px;
  background:transparent;color:var(--text-dim);font-size:10.5px;cursor:pointer;
  transition:border-color .16s,background .16s,color .16s;
}
.tf-empty i{font-style:normal;font-size:14px;line-height:1;opacity:.7}
.tf-empty:hover{border-color:var(--gold);color:var(--gold-strong);
  background:color-mix(in srgb,var(--gold) 8%,transparent)}

/* 阵营格里的席位卡压紧凑（立绘缩略在 150px 宽里放不下） */
.team-board .lp-item{padding:6px 8px;gap:7px;border-radius:10px}
.team-board .lp-ava{width:29px;height:29px;border-radius:8px;font-size:13px}
.team-board .lp-info{gap:2px}
.team-board .lp-name{font-size:12.5px}
.team-board .lp-tag,.team-board .lp-fig,.team-board .lp-skin{display:none}
.team-board .lp-state{font-size:9.5px}
.team-board .lp-char{font-size:10px}
.team-board .lp-r2{min-height:0}

@media (max-width:560px){
  .rk-fac-grid{grid-template-columns:1fr}
  .tf-buff{display:none}
  .team-board .lp-ava{width:26px;height:26px;font-size:12px}
}

/* 7.60 巅峰赛：玩家条上的阵营标 */
.ps-team{
  flex:none;width:15px;height:15px;border-radius:4px;display:grid;place-items:center;
  background:var(--tc,#8b94a3);color:#fff;font-style:normal;
  font-family:var(--serif);font-size:9.5px;font-weight:700;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.ps-avatar{color:var(--pc-ink,#fff)}

/* ===== 7.60 巅峰赛投降双签提示条（复用 .lswap 版式，换成警示色） ===== */
.surbar {
  margin: 6px 0 0; border-style: solid;
  border-color: color-mix(in srgb, var(--red-soft) 46%, transparent);
  background: color-mix(in srgb, var(--red-soft) 10%, transparent);
}
.surbar .lswap-t b { color: var(--red-soft); }
.surbar .btn-danger { flex: 0 0 auto; }

/* ============================================================
   7.61 首页模式页签：三等分等宽一行，文字绝不折行
   旧版 7.14 的 display:flex + 内容自适应宽度，在窄窗口下
   三个页签会互相挤压、按钮内文字折成两行。
   ============================================================ */
.home-mode-switch,
.mode-switch{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;max-width:1040px;margin:0 auto 14px;
}
.mode-switch .mode-tab{
  padding:11px 12px;border-radius:12px;
  justify-content:center;min-width:0;
  white-space:nowrap;overflow:hidden;
}
.mode-switch .mode-tab b{
  display:flex;align-items:center;justify-content:center;
  gap:8px;font-size:15px;letter-spacing:.08em;
  white-space:nowrap;
}
.mode-switch .mt-ico{width:23px;height:23px;font-size:11.5px}

@media(max-width:820px){
  .mode-switch{gap:8px}
  .mode-switch .mode-tab{padding:10px 8px}
  .mode-switch .mode-tab b{font-size:14px;gap:6px;letter-spacing:.05em}
  .mode-switch .mt-ico{width:21px;height:21px;font-size:11px}
}
@media(max-width:520px){
  .mode-switch{gap:6px}
  .mode-switch .mode-tab{padding:9px 4px;border-radius:10px}
  .mode-switch .mode-tab b{font-size:12.8px;gap:5px;letter-spacing:0}
  .mode-switch .mt-ico{width:18px;height:18px;font-size:10px;border-radius:5px}
}

/* ============================================================
   7.62 巅峰赛界面整理
   ① 加入卡按钮与联网对战同位置、同字距（原来只有 #btn-join 有
      margin-top:auto，巅峰赛的 #btn-join-rk 跟着字段跑，显得挤）
   ② 五阵营改浅色系，印章文字改深墨，浅底上更清楚
   ③ 阵营说明卡五列排满，不再 4+1 掉一个
   ============================================================ */
.hm-card--join #btn-join-rk,
.hm-card--join #btn-join-rk.hm-cta{
  margin-top:auto;margin-bottom:0;
  font-size:14.5px;letter-spacing:.14em;
}
.rk-fac-grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.rk-fac-seal,
.tf-seal,
.ps-team{color:#2b2b36;text-shadow:0 1px 0 rgba(255,255,255,.28)}
.rk-fac-tx b{display:flex;align-items:center;gap:6px}
.rk-fac-note{margin-left:auto;color:var(--text-dim);font-weight:600}

@media(max-width:1180px){
  .rk-fac-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media(max-width:900px){
  .rk-fac-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-card--join #btn-join-rk{font-size:14px;letter-spacing:.1em}
}
@media(max-width:560px){
  .rk-fac-grid{grid-template-columns:1fr}
}

/* 巅峰赛等待房间：五道阵营席位板单独占一列，放宽到 780，右侧不留空 */
.lobby-grid.ranked{grid-template-columns:minmax(0,1fr);max-width:780px}
.lobby-grid.ranked .lobby-players{gap:8px}
/* 席位卡与空位统一高度，五道阵营不再一高一矮 */
.team-board .lp-item{height:52px;min-height:52px;overflow:hidden}
.team-board .tf-empty{height:52px;min-height:0}

/* ============================================================
   7.63 · 七星商城改版
   ① 页签变三格：货币兑换 / 七星商城 / 将星阁（兑换在最左）
   ② 精品皮肤从整行列表改成等高等宽的双列竖卡，
      立绘在上，品质角标、折扣签、已拥有印都压在图上，
      价与按钮贴底同一行 —— 六张卡一眼成阵，不再参差
   ③ 兑换独立成页：顶上换算尺，四张卡尾带持有量
   ============================================================ */
.shop-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.shop-tab{font-size:12px;letter-spacing:.04em;padding:9px 4px;white-space:nowrap;min-width:0}

/* ---- 双列卡阵 ---- */
.sms-wrap.sms-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;align-items:stretch;
}
.sms-grid .sms-card{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  padding:9px 9px 10px;border-radius:14px;min-width:0;
}
.sms-grid .sms-art{
  position:relative;border-radius:10px;overflow:hidden;
  aspect-ratio:1 / 1.06;
  background:
    radial-gradient(ellipse at 50% 24%,rgba(255,238,206,.16),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.01));
}
.sms-grid .sms-img{
  position:absolute;inset:0;width:auto;height:auto;border-radius:0;box-shadow:none;
  background-size:contain;background-position:50% 8%;background-repeat:no-repeat;
}
.sms-grid .sms-card.is-own .sms-img{filter:none;opacity:.9}
.sms-grid .sms-r{
  position:absolute;top:6px;left:6px;z-index:3;
  font-size:8.5px;padding:1.5px 5px;border-radius:4px;letter-spacing:.08em;
}
.sms-grid .sms-tag{
  position:absolute;top:6px;right:6px;z-index:3;
  margin:0;font-size:8.5px;padding:2px 5px;border-radius:4px;letter-spacing:.02em;
}
.sms-grid .sms-own-flag{
  position:absolute;top:6px;right:6px;z-index:3;
  font-size:8.5px;line-height:1;padding:3px 5px;border-radius:4px;
  background:rgba(18,14,8,.66);color:#ffe2a6;border:1px solid rgba(255,214,140,.4);
}
.sms-grid .sms-main{
  padding:8px 1px 0;display:flex;flex-direction:column;
  flex:1 1 auto;min-width:0;position:relative;z-index:1;
}
.sms-grid .sms-n{
  font-size:13px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sms-grid .sms-sub{
  margin-top:2px;font-size:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sms-grid .sms-foot{
  margin-top:auto;padding-top:8px;
  display:flex;align-items:center;gap:6px;
}
.sms-grid .sms-price{margin:0;flex:1 1 auto;min-width:0;gap:3px}
.sms-grid .sms-price b{font-size:14px}
.sms-grid .sms-price s{font-size:9px;margin-left:0}
.sms-grid .sms-buy{
  width:auto;min-width:0;flex:0 0 auto;
  padding:6px 11px;border-radius:999px;
  font-size:11.5px;letter-spacing:.08em;
}
.sms-own-note{
  flex:0 0 auto;font-size:9.5px;letter-spacing:.02em;color:var(--dim);
  white-space:nowrap;
}
html[data-theme="light"] .sms-grid .sms-card{
  background:linear-gradient(160deg,#fffdf6,#f1e7d3);
}
html[data-theme="light"] .sms-grid .sms-art{
  background:
    radial-gradient(ellipse at 50% 24%,rgba(255,236,196,.95),rgba(240,230,209,.3) 64%),
    linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));
}
html[data-theme="light"] .sms-grid .sms-own-flag{
  background:rgba(255,252,244,.92);color:#8a6a26;border-color:rgba(180,150,90,.5);
}

/* ---- 兑换页 ---- */
.ex-rail{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:9px 10px;margin-bottom:11px;border-radius:11px;
  border:1px dashed var(--line);background:var(--gold-faint);
  font-size:11.5px;color:var(--dim);letter-spacing:.03em;
}
.ex-rail b{
  color:var(--gold-strong);font-family:var(--serif);
  font-size:13.5px;margin-right:2px;
}
.ex-rail i{color:var(--gold);font-style:normal;opacity:.6}
.ex-wrap{gap:10px}
.ex-card{padding:11px 12px;border-radius:13px}
.ex-out{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.ex-have{margin-left:auto;font-size:10.5px;color:var(--dim);white-space:nowrap}
.ex-have b{
  color:var(--text);font-size:11.5px;font-family:var(--serif);
  text-decoration:none;font-weight:600;
}

@media(max-width:520px){
  .shop-tab{font-size:11.5px;padding:8px 2px}
  .sms-wrap.sms-grid{gap:9px}
  .sms-grid .sms-n{font-size:12.5px}
  .sms-grid .sms-buy{padding:5px 9px;font-size:11px}
}

/* 钱包三枚在窄屏曾被挤成竖排（钻石 → 钻/石），这里锁死不换行并收一档尺寸 */
.wc em{white-space:nowrap}
@media(max-width:560px){
  .wal-chips{gap:6px}
  .wc{min-width:0;padding:7px 8px;gap:4px}
  .wc b{font-size:12.5px}
  .wc em{font-size:9px}
  .wc .cur-ico{width:13px;height:13px}
}

/* ============================================================
   7.64 巅峰赛：同队同色 + 长按拖动 AI 席位
   席位卡的颜色条与棋子同色（阵营色），拖动时给一个跟随的浮影，
   落点阵营整条泛光、落点格子亮边。
   ============================================================ */
.team-board .lp-item{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.team-board .lp-item.is-bot{cursor:grab;touch-action:none}
.seat-ghost{
  position:fixed;z-index:9000;pointer-events:none;margin:0;
  background:var(--panel2,#fffdf7);
  transform:rotate(-1.2deg) scale(1.04);
  box-shadow:0 18px 38px -12px rgba(0,0,0,.55),0 0 0 1px var(--gold) inset;
  opacity:.97;
}
/* 浮影脱离了 .team-board，得自己收成席位卡的紧凑样式 */
.seat-ghost{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:10px}
.seat-ghost .lp-fig,.seat-ghost .lp-skin,.seat-ghost .lp-tag{display:none}
.seat-ghost .lp-ava{width:29px;height:29px;border-radius:8px;font-size:13px}
.seat-ghost .lp-name{font-size:12.5px}
.seat-ghost .lp-state{font-size:9.5px}
.seat-ghost .lp-char{font-size:10px}
.seat-ghost .lp-r2{min-height:0}
.seat-ghost{height:52px;overflow:hidden}
.team-board .lp-item.drag-src{opacity:.32;filter:saturate(.6)}
body.seat-dragging{cursor:grabbing}
body.seat-dragging *{cursor:grabbing !important}
.tf-lane.drop-on{box-shadow:0 0 0 1px var(--fc) inset,0 10px 24px -14px var(--fc)}
.tf-lane.drop-on .tf-seal{transform:scale(1.08)}
.tf-slot.drop-at{outline:2px dashed var(--fc);outline-offset:2px;border-radius:11px}
.lobby-grid.ranked{margin-left:auto;margin-right:auto}
.tf-hint{
  grid-column:1 / -1;margin-top:2px;text-align:center;
  font-size:11px;letter-spacing:.08em;color:var(--dim);opacity:.75;
}
@media(max-width:560px){
  .tf-hint{font-size:10.5px}
}

/* ============================================================
   7.65 巅峰赛：统计阵营视图 / 席位卡换位标签 / 同队棋子区分
   ============================================================ */

/* ---- ① 席位卡：「换位」不再用绝对定位压在「已备」上 ----
   旧版 .lp-item.can-swap::after 是 right:8px/top:8px 的胶囊，
   和右端 margin-left:auto 的「已备」正好同一块地方 —— hover 就重叠。
   改成叠在头像上的一枚 ⇄ 角标，文字区彻底留给名字与状态。 */
.lp-item.can-swap::after { content: none; display: none; }
.lp-ava::after {
  content: "⇄";
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(18,14,10,.62); color: #ffe2a6;
  font-size: 13px; font-weight: 700; line-height: 1;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.lp-item.can-swap:hover .lp-ava::after { opacity: 1; }
.lp-r1 { gap: 5px; }
.lp-name { flex: 1 1 auto; min-width: 0; }
.lp-state { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }

.team-board .lp-r1 { gap: 4px; }
.team-board .lp-name { max-width: none; font-size: 12.5px; }
.team-board .lp-state { padding: 1px 6px; letter-spacing: 0; }
.team-board .lp-ava::after { font-size: 11px; }

/* ---- ② 同队棋子区分：只靠袍色深浅（在 js 里按席位算），棋盘上不再挂角标 ---- */

/* ---- ③ 统计弹窗：两阵营对比小卡（动作 / 四个角色按钮正下方） ---- */
.fv {
  --ca: #999; --cb: #999;
  margin: 0 0 12px; padding: 9px 12px 5px;
  border-radius: 12px; border: 1px solid var(--line);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--ca) 16%, transparent), transparent 44%),
    linear-gradient(260deg, color-mix(in srgb, var(--cb) 16%, transparent), transparent 44%),
    var(--bg2);
}
.fv-h {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: 6px;
  padding-bottom: 7px; border-bottom: 1px dashed var(--line);
}
.fv-t { display: flex; align-items: center; gap: 5px; min-width: 0; }
.fv-t.r { justify-content: flex-end; }
.fv-seal {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--fc); color: #2b2b36;
  font-family: var(--serif); font-size: 11px; font-weight: 700;
}
.fv-nm {
  min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fv-win {
  flex: 0 0 auto; font-style: normal; font-size: 9px; line-height: 1.5;
  padding: 0 4px; border-radius: 4px;
  background: var(--gold); color: #3a2c10; font-weight: 700;
}
.fv-vs {
  font-family: var(--serif); font-size: 10px; letter-spacing: .08em;
  color: var(--dim); opacity: .78; white-space: nowrap;
}
.fv-r {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: baseline; gap: 6px; padding: 4px 0;
}
.fv-r + .fv-r { border-top: 1px dashed var(--line); }
.fv-r em {
  font-style: normal; font-size: 10px; color: var(--dim);
  letter-spacing: .02em; white-space: nowrap; text-align: center;
}
.fv-v {
  font-family: var(--serif); font-size: 13px; font-weight: 600;
  color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.fv-r .fv-v:last-child { text-align: right; }
.fv-v.is-low { color: var(--dim); font-weight: 500; }
.fv-v.is-lead { color: var(--text); font-weight: 700; }
.fv-v i {
  font-style: normal; font-size: 9.5px; font-weight: 500;
  opacity: .58; margin-left: 2px; letter-spacing: 0;
}
@media (max-width: 520px) {
  .fv { padding: 8px 9px 4px; }
  .fv-v { font-size: 12px; }
  .fv-nm { font-size: 12px; }
}

.casual-tip {
  display: inline-block; font-style: normal; font-size: 11.5px;
  line-height: 1.6; color: var(--dim);
  padding: 4px 10px; border-radius: 8px;
  border: 1px dashed var(--line); background: var(--gold-faint);
}