/* ==========================================================================
   棋域 Chess Arena — 设计系统（扁平 / 密集 / 信息优先）
   参考 Chess.com · Lichess 的视觉语言：
   · 中性深灰面 + 单一强调色（棋绿），不使用装饰性渐变与光晕
   · 8pt 间距节奏；圆角 4 / 6 / 8 / 10 / 12px（不再使用 24-28px 大圆角）
   · 阴影只用于浮层（弹窗/结算），卡片靠 1px 描边区分层级
   ========================================================================== */

:root{
  /* 浅色（唯一主题，已移除深色） */
  --bg:#f4f6f8; --bg-2:#ffffff;
  --panel:#ffffff; --panel2:#f7f8fa; --panel3:#eef1f4;
  --line:#e3e6ea; --line2:#d3d7dd;
  /* 文字三级 + 禁用 */
  --text:#1b1e23;        /* 一级：标题 / 数字 */
  --text-2:#3c4149;      /* 二级：正文 */
  --muted:#6b7280;       /* 三级：辅助 / 时间 */
  --dim:#98a0aa;         /* 禁用 */
  /* 8px 间距节奏 */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;
  /* 字号层级 */
  --fs-display:28px; --fs-h1:20px; --fs-h2:16px;
  --fs-body:14px; --fs-sm:12.5px; --fs-xs:11px;
  /* 行高 */
  --lh-title:1.3; --lh-body:1.55; --lh-aux:1.4;
  --accent:#5f8f36; --accent-2:#6da33f; --accent-ink:#ffffff;
  --gold:#a9791a; --gold-soft:rgba(169,121,26,.12);
  --green:#5f8f36; --red:#c0392b; --warn:#a9791a;
  --r:16px; --r-sm:6px; --r-xs:4px;   /* 面板统一 16px（棋盘框单独用 10px） */
  --shadow:0 1px 3px rgba(16,24,40,.10);
  --elev:0 14px 34px rgba(16,24,40,.16);
  --ease:cubic-bezier(.2,.8,.3,1);
  --light:#ebecd0; --dark:#779556; --light2:#f3f4e0; --dark2:#6b8749;
  --pw:#ffffff; --pws:#33383d; --pb:#2f3338; --pbs:#0d0f11;
  --md-bg:var(--bg); --md-surface:var(--panel); --md-surface-2:var(--panel2); --md-surface-3:var(--panel3);
  --md-primary:var(--accent); --md-on-primary:var(--accent-ink); --md-secondary:var(--green);
  --md-outline:var(--line); --md-disabled:#262626;
  --md-on-surface:var(--text); --md-on-surface-variant:var(--muted);
  --md-radius-xl:var(--r); --md-radius-sm:var(--r-sm); --md-radius-pill:999px;
  --md-elev1:0 1px 2px rgba(0,0,0,.3); --md-elev2:var(--shadow); --md-elev3:var(--elev);
  --md-ease:var(--ease); --md-spring:cubic-bezier(.34,1.56,.64,1);
}
body.theme-green{--light:#ebecd0;--dark:#779556;--light2:#f3f4e0;--dark2:#6b8749}
body.theme-wood{--light:#f0d9b5;--dark:#b58863;--light2:#f6e3c5;--dark2:#a3764f}
body.theme-night{--light:#dee3e6;--dark:#7b8b9a;--light2:#e9edef;--dark2:#6e7d8b}
body.theme-blue{--light:#dee3e6;--dark:#6d8cb0;--light2:#eaeef1;--dark2:#61809f}
body.theme-slate{--light:#cfd4da;--dark:#5f6b7a;--light2:#dde1e6;--dark2:#556170}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font:400 14px/1.5 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
b,s,em{font-style:normal;text-decoration:none}
code{font-family:ui-monospace,Menlo,Consolas,monospace}
/* 关键修复：显式指定按钮/表单文字颜色。
   否则在系统深色模式下，浏览器默认按钮文字是白色 → 浅色主题里看不见 */
button{font-family:inherit;color:var(--text)}
button:disabled{color:var(--dim)}
button *{color:inherit}
input,select,textarea{font-family:inherit;color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--dim);opacity:1}
select option{color:var(--text);background:var(--panel)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c9ced6;border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#b3b9c2}

.aurora,.grid-veil{display:none !important}

/* ---------------------------------------------------------------- 顶栏 */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;
  height:52px;padding:0 16px;background:var(--bg-2);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.logo{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto}
.logo svg{width:28px;height:28px;display:block}
.brand-text{display:flex;flex-direction:column;justify-content:center;min-width:0}
.brand-text h1{font-size:15px;font-weight:700;letter-spacing:.2px;display:flex;align-items:baseline;gap:6px}
.brand-text h1 span{font-size:9.5px;font-weight:600;letter-spacing:1.4px;color:var(--dim)}
.brand-text p{display:none}
.netbar{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);min-width:0}
.netbar .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.netbar .dot.warn{background:var(--gold)}
.netlabel{display:none}
.netbar code{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.topstats{display:flex;align-items:center;gap:18px;margin-left:auto}
.stat-pill{display:flex;align-items:baseline;gap:6px;background:none;border:0;padding:0;min-width:0}
.stat-pill s{font-size:11px;color:var(--dim);text-decoration:none}
.stat-pill b{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.stat-pill.gold b{color:var(--gold)}
.userbox{display:flex;align-items:center;gap:8px}
.user-chip{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 4px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
}
.user-chip:hover{border-color:var(--line2)}
.user-chip.guest{border-style:dashed}
.tier{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:16px;padding:0 5px;border-radius:3px;font-size:10px;font-weight:700;background:var(--panel3);color:var(--muted);border:1px solid var(--line2)}
.tier-lg{height:auto;min-width:44px;padding:5px 12px;font-size:14px;border-radius:var(--r-sm)}
.tier-C{color:#a8b0bb}
.tier-Cp{color:#c9a06a}
.tier-B{color:#cbd5e1}
.tier-Bp{color:#d9b264}
.tier-A{color:#7fc9c2}
.tier-Ap{color:#8fb0e8}
.tier-S{color:#b79cf0}
.tier-Sp{color:#e8886b;border-color:rgba(232,136,107,.4);background:rgba(232,136,107,.12)}
.tier-unrated{color:var(--dim)}
.tag{font-size:10px;padding:1px 5px;border-radius:3px;background:var(--panel3);color:var(--muted);border:1px solid var(--line2);white-space:nowrap}
.tag.gold{color:var(--gold);border-color:rgba(217,169,79,.35);background:var(--gold-soft)}
.tag.red{color:#e79393;border-color:rgba(207,91,91,.35);background:rgba(207,91,91,.12)}
.token-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums}
.coin{width:9px;height:9px;border-radius:50%;background:var(--gold);display:inline-block;flex:0 0 auto}
.shop-entry{height:30px;padding:0 12px}
.invite-banner{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:12.5px;background:var(--panel);border-bottom:1px solid var(--line)}
.invite-banner b{color:var(--gold);font-family:ui-monospace,monospace;letter-spacing:1.5px}
.invite-banner .btn:first-of-type{margin-left:auto}

/* ---------------------------------------------------------------- 布局 */
.app{display:grid;grid-template-columns:240px minmax(0,1fr) 336px;gap:16px;max-width:1600px;margin:0 auto;padding:16px;align-items:start}
.chatcol{grid-column:1;grid-row:1;position:sticky;top:68px;min-width:0}
.boardcol{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:8px;width:100%;max-width:820px;justify-self:center;min-width:0}
.side{grid-column:3;grid-row:1;display:flex;flex-direction:column;gap:10px;position:sticky;top:68px;min-width:0}
.site-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 20px;margin-top:8px;border-top:1px solid var(--line);font-size:11px;color:var(--dim)}
.site-foot .foot-brand b{color:var(--muted);letter-spacing:1px;font-weight:600}
.site-foot .foot-dot{opacity:.5}
.site-foot .foot-right{margin-left:auto;display:flex;gap:14px}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot a:hover{color:var(--text)}

/* ---------------------------------------------------------------- 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 18px;overflow:hidden;
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-sm);
  color:var(--text);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,transform .06s;
}
.btn:hover{background:var(--panel3);border-color:#4c4c4c}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn .ic{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--panel2);color:var(--text)}
.btn.danger{background:transparent;border-color:#5a3232;color:#e79393}
.btn.danger:hover{background:rgba(207,91,91,.12);border-color:#6b3a3a}
.btn[disabled]{background:#262626;border-color:#333;color:#5f5f5f;cursor:not-allowed;transform:none}
.btn.wide{width:100%}
.btn.small{height:32px;padding:0 14px;font-size:var(--fs-sm)}
.btn.tiny{height:28px;padding:0 12px;font-size:var(--fs-xs);border-radius:5px}
.mini{height:24px;padding:0 8px;border-radius:5px;background:var(--panel3);border:1px solid var(--line2);color:var(--muted);font-size:11px;cursor:pointer}
.mini:hover{color:var(--text)}

/* ---------------------------------------------------------------- 棋盘 */
.boardrow{display:flex;gap:8px;align-items:stretch}
.evalcol{width:22px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.evalbar{position:relative;width:10px;height:100%;min-height:220px;background:var(--panel3);border-radius:3px;overflow:hidden}
.evalfill{position:absolute;left:0;right:0;bottom:0;height:50%;background:#e4e4e4;transition:height .3s var(--ease)}
.evalnum{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.boardwrap{position:relative;flex:1;min-width:0;padding:var(--space-2);background:var(--panel);border:1px solid var(--line);border-radius:10px}
.boardwrap::after{content:none}
.board{
  position:relative;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  width:100%;aspect-ratio:1/1;border-radius:var(--r-xs);overflow:hidden;
  touch-action:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.sq{position:relative;display:grid;place-items:center}
.sq.l{background:var(--light)}
.sq.d{background:var(--dark)}
.sq .coord{position:absolute;font-size:10px;font-weight:600;pointer-events:none;font-variant-numeric:tabular-nums}
.sq .coord.f{bottom:2px;right:4px}
.sq .coord.r{top:2px;left:4px}
.sq.l .coord{color:var(--dark2)}
.sq.d .coord{color:var(--light2)}
.sq.last::after{content:'';position:absolute;inset:0;background:rgba(255,205,80,.32);pointer-events:none}
.sq.sel::after{content:'';position:absolute;inset:0;background:rgba(255,205,80,.45);pointer-events:none}
.sq.check::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(214,60,60,.95),rgba(214,60,60,.3) 58%,transparent 74%);animation:checkPulse 1s ease-in-out 3}
.sq.drop::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 4px rgba(130,180,255,.9)}
@keyframes checkPulse{0%,100%{opacity:.55}50%{opacity:1}}
.dot{position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(0,0,0,.22);pointer-events:none}
.ring{position:absolute;inset:4%;border-radius:50%;border:4px solid rgba(0,0,0,.2);pointer-events:none}
.piece{position:absolute;inset:3%;display:grid;place-items:center;cursor:grab;transition:transform .2s var(--ease);will-change:transform;touch-action:none}
.piece svg{width:100%;height:100%;display:block;pointer-events:none}
/* 高级棋子套装（Staunton）：2D 绘制 + 3D 光影，外发光让棋子从棋盘上"立起来" */
/* 高级棋子套装：背景图渲染 + 3D 落影（2D 素材做出立体感） */
.piece.premium{background-position:center;background-size:88% 88%;background-repeat:no-repeat;
  filter:drop-shadow(0 3px 2.5px rgba(16,24,40,.34))}
.piece.premium.dragging{filter:drop-shadow(0 12px 14px rgba(16,24,40,.42))}
.piece.cascade{animation:cascadeIn .3s var(--ease) backwards}
@keyframes cascadeIn{from{opacity:0;transform:translateY(-10px) scale(.9)}to{opacity:1;transform:none}}
@media (hover:hover){ .piece:hover svg{filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))} }
.pc-svg.is-w .pm{fill:var(--pw);stroke:var(--pws);stroke-width:3;stroke-linejoin:round}
.pc-svg.is-b .pm{fill:var(--pb);stroke:var(--pbs);stroke-width:3;stroke-linejoin:round}
.pc-svg .pd{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pc-svg.is-w .pd{stroke:var(--pws)}
.pc-svg.is-b .pd{stroke:#c9cfe0}
.pc-svg .pe{stroke:none}
.pc-svg.is-w .pe{fill:var(--pws)}
.pc-svg.is-b .pe{fill:#c9cfe0}
.pc-svg.is-w{filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.pc-svg.is-b{filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.drag-clone{position:fixed;z-index:90;pointer-events:none;display:grid;place-items:center;transform:translate(-50%,-50%) scale(1.05)}
.piece.fade{position:fixed;z-index:88;pointer-events:none;transition:opacity .25s ease,transform .25s var(--ease)}
.arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.arrows line{stroke:rgba(255,190,60,.92);stroke-width:.09;stroke-linecap:round}
.arrows polygon{fill:rgba(255,190,60,.95)}
.impact{position:absolute;inset:-6%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,200,80,.6),rgba(255,200,80,0) 68%);animation:impactOut .4s ease-out forwards}
@keyframes impactOut{from{transform:scale(.5);opacity:.9}to{transform:scale(1.5);opacity:0}}

/* ---------------------------------------------------------------- 玩家条 */
.strip{
  display:flex;align-items:center;gap:10px;height:54px;padding:0 10px;position:relative;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
}
.strip.active{border-color:#4a4a4a;background:var(--panel2)}
.strip.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;background:var(--accent)}
.avatar{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;flex:0 0 auto;font-size:14px;font-weight:700;background:var(--panel3);color:var(--text)}
.avatar.b{background:#3a3550;color:#ded7ff}
.avatar.ai{background:#3b382a;color:var(--gold)}
.avatar.guest-av{background:#333;color:var(--muted)}
.pinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.prow1{display:flex;align-items:center;gap:7px;min-width:0}
.pname{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prating{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.prow2{display:flex;align-items:center;gap:6px;min-height:14px;font-size:11px;color:var(--dim)}
.captured{display:flex;align-items:center}
.captured svg{width:14px;height:14px;margin-right:-4px;opacity:.9}
.captured .adv,.adv{font-size:11px;font-weight:600;color:var(--accent-2);margin-left:6px}
.advbar{display:none !important}
.clock{
  font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px;
  min-width:72px;padding:5px 10px;text-align:center;border-radius:var(--r-sm);
  background:var(--bg);border:1px solid var(--line);color:var(--text);
}
.clock.turn{background:var(--panel3);border-color:#4a4a4a}
.clock.low{color:#ff9a9a;border-color:#6b3535}
.clock.dead{opacity:.45}

/* ---------------------------------------------------------------- 状态栏 / 控制条 */
.statusbar{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;font-size:12px;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
}
.statusbar b{color:var(--text);font-weight:600}
.sb-right{margin-left:auto;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.mode-chip{display:none !important}
.controls{display:flex;gap:6px}
.controls .btn{flex:1;min-width:0;padding:0 6px}

/* ---------------------------------------------------------------- 右侧面板 */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}
.tabs button{
  flex:1;height:36px;border:0;background:none;color:var(--muted);font-size:12.5px;font-weight:600;
  cursor:pointer;border-bottom:2px solid transparent;transition:color .12s,border-color .12s;
}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--text);border-bottom-color:var(--accent)}
.panel{
  display:none;flex-direction:column;gap:var(--space-4);padding:var(--space-5);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);max-height:calc(100vh - 150px);overflow:auto;
}
.panel.on{display:flex;animation:panelIn .18s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:0}
.panel-head h2{font-size:11.5px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.8px}
.panel-head h2::before{content:none}
.panel-head.sub{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.head-right{display:flex;gap:6px}
.empty{color:var(--dim);font-size:12px;text-align:center;padding:14px 6px}
.empty::before{content:none}
.hint{font-size:11.5px;color:var(--dim);line-height:1.6}
.mono{font-variant-numeric:tabular-nums}

/* 分段控件 / 字段 */
.seg{display:flex;gap:4px;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
.seg button{flex:1;height:28px;border:0;border-radius:5px;background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap}
/* 对局模式选择器（5 项）：网格排列、文字不折行 */
#modeSeg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
#modeSeg button{height:30px;font-size:12px;padding:0 6px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--panel3);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.seg.small{margin-bottom:0}
.mode-body{border-top:1px solid var(--line);padding-top:12px}
.mode-body>div{margin-top:0}
.field-row{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.field-row.col{flex-direction:column;align-items:stretch;gap:6px}
.field-row label{font-size:11.5px;color:var(--muted);min-width:56px;display:flex;justify-content:space-between;gap:8px}
.field-row label em{color:var(--accent-2);font-size:11px}
.field-row .seg{flex:1}
.input,.select{
  width:100%;height:34px;padding:0 10px;background:var(--bg);border:1px solid var(--line2);
  border-radius:var(--r-sm);color:var(--text);font-size:13px;outline:none;
}
.input:focus,.select:focus{border-color:var(--accent)}
.input::placeholder{color:#5f5f5f}
.input.code{text-align:center;text-transform:uppercase;letter-spacing:3px;font-weight:700;font-family:ui-monospace,Menlo,monospace;font-size:14px}
.join-row{display:flex;gap:6px;margin-top:8px}
.join-row .input{flex:1}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.level{
  position:relative;padding:8px 6px;text-align:center;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  transition:border-color .12s,background .12s;
}
.level:hover{border-color:#4a4a4a}
.level b{display:block;font-size:12px;font-weight:600}
.level s{display:block;font-size:10px;color:var(--dim);text-decoration:none;margin-top:2px}
.level.on{border-color:var(--accent);background:rgba(127,166,80,.1)}
.level.on s{color:var(--accent-2)}
#speedHint{color:var(--accent-2);font-weight:600}

/* 棋谱 */
.movelist-wrap{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg)}
.moves-head{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 10px;font-size:11.5px;color:var(--dim);border-bottom:1px solid var(--line)}
.moves-head em{color:var(--muted)}
.navbtns{display:flex;gap:2px}
.navbtns button{width:24px;height:22px;border:0;border-radius:4px;background:transparent;color:var(--muted);font-size:9px;cursor:pointer}
.navbtns button:hover{background:var(--panel2);color:var(--text)}
.movelist{max-height:172px;min-height:56px;overflow:auto;padding:2px 0;font-size:13px}
.mvrow{display:grid;grid-template-columns:34px 1fr 1fr;align-items:center;height:26px}
.mvrow:nth-child(odd){background:rgba(16,24,40,.02)}
.mvrow .no{color:var(--dim);font-size:11px;text-align:right;padding-right:8px;font-variant-numeric:tabular-nums}
.mv{padding:2px 8px;border-radius:4px;font-weight:600;cursor:pointer}
.mv:hover{background:var(--panel2)}
.mv.cur{background:var(--accent);color:var(--accent-ink)}

/* ---------------------------------------------------------------- 排行榜 */
.lb-meta{display:flex;gap:10px;font-size:11px;color:var(--dim)}
.lb-meta span{background:none;border:0;padding:0}
.lb-head,.lb-row{display:grid;grid-template-columns:24px 1fr 52px 78px 46px;gap:8px;align-items:center}
.lb-head{padding:0 8px 6px;font-size:10.5px;color:var(--dim);letter-spacing:.6px;text-transform:uppercase;border-bottom:1px solid var(--line)}
.lb-head span:last-child{text-align:right}
.lb{display:flex;flex-direction:column;gap:1px}
.lb-row{padding:var(--space-3) 14px;border-radius:var(--r-sm)}
.lb-row:hover{background:var(--panel2)}
.lb-row.me{background:rgba(127,166,80,.1);box-shadow:inset 0 0 0 1px rgba(127,166,80,.3)}
.rank{text-align:center;font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.medal-svg{width:18px;height:18px;display:block;margin:0 auto}
.lb-name{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-sub{font-size:10.5px;color:var(--dim)}
.lb-mid{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.4}
.lb-elo{text-align:right;font-size:14px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- 房间 / 对局 */
.rooms,.matchlist{display:flex;flex-direction:column;gap:6px}
.room-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm)}
.room-card:hover{border-color:#4a4a4a}
.rc-main{flex:1;min-width:0}
.rc-id{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;letter-spacing:2px;color:var(--text)}
.rc-sub{font-size:11px;color:var(--dim);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roomcard{margin-top:10px;padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
.rc-label{font-size:11px;color:var(--dim)}
.rc-code{font-family:ui-monospace,Menlo,monospace;font-size:22px;font-weight:700;letter-spacing:5px;color:var(--text);margin:2px 0 8px}
.rc-actions{display:flex;gap:6px;flex-wrap:wrap}
.rc-link{margin-top:8px;font-size:11px;color:var(--dim);word-break:break-all;font-family:ui-monospace,monospace}
.rc-state{margin-top:8px;font-size:11px;line-height:1.6;color:var(--muted)}
.match-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) 14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-sm)}
.match-row .res{width:3px;height:20px;border-radius:2px;flex:0 0 auto}
.res.win{background:var(--accent)}
.res.loss{background:var(--red)}
.res.draw{background:#7a7a7a}
.match-row .mtxt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.match-row .mtxt b{color:var(--text);font-weight:600}
.match-row .mdelta{font-weight:600;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- 段位 / 测试 */
.tier-hero{padding:12px;text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.tier-hero .big{font-size:22px;font-weight:700;margin:6px 0 2px}
.tier-hero .sub{font-size:11.5px;color:var(--muted)}
.ladder{display:flex;flex-direction:column;gap:4px}
.ladder-row{display:flex;align-items:center;gap:10px;padding:8px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
.ladder-row.owned{border-color:rgba(127,166,80,.35);background:rgba(127,166,80,.06)}
.ladder-row.locked{opacity:.65}
.ladder-main{flex:1;min-width:0}
.ladder-name{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.ladder-req{font-size:11px;color:var(--dim);margin-top:3px;line-height:1.5}
.ladder-req b{color:var(--muted)}
.reqbar{height:3px;margin-top:6px;background:var(--panel3);border-radius:2px;overflow:hidden}
.reqbar i{display:block;height:100%;background:var(--accent)}
.promo-note{padding:10px;font-size:11.5px;line-height:1.7;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:8px}
.promo-banner{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;margin-right:6px;border-radius:4px;font-size:11px;font-weight:600;color:var(--gold);background:var(--gold-soft);border:1px solid rgba(217,169,79,.3)}
.test-card,.test-cta{padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.test-card{border-color:rgba(127,166,80,.3)}
.test-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:8px}
.test-head b{font-size:13px}
.test-head .mono{color:var(--muted)}
.dots{display:flex;gap:4px;margin-bottom:8px}
.dotres{flex:1;text-align:center;padding:4px 0;border-radius:5px;font-size:11px;font-weight:600;color:var(--dim);background:var(--panel);border:1px solid var(--line)}
.dotres.win{color:var(--accent-2);background:rgba(127,166,80,.18);border-color:rgba(127,166,80,.4)}
.dotres.loss{color:#e79393;background:rgba(207,91,91,.16);border-color:rgba(207,91,91,.35)}
.dotres.draw{color:var(--muted);background:var(--panel3)}
.test-actions{display:flex;gap:6px;align-items:center}
.test-actions .btn{flex:1}
.test-cta-title{font-size:13px;font-weight:600;margin-bottom:4px}
.test-cta-desc{font-size:11.5px;line-height:1.6;color:var(--muted);margin-bottom:8px}
.need-list{margin:0 0 8px;padding-left:16px;font-size:11.5px;line-height:1.8;color:var(--gold)}
.ready{font-size:11.5px;color:var(--accent-2);margin-bottom:8px}
.tier-table{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tier-th,.tier-tr{display:grid;grid-template-columns:42px minmax(0,1fr) 62px 54px;gap:6px;align-items:center;padding:6px 8px;font-size:11.5px}
.tier-th{font-size:10.5px;color:var(--dim);letter-spacing:.5px;text-transform:uppercase;background:var(--bg);border-bottom:1px solid var(--line)}
.tier-tr{color:var(--muted);border-bottom:1px solid rgba(16,24,40,.05)}
.tier-tr:last-child{border-bottom:0}
.tier-tr.owned{background:rgba(127,166,80,.05)}
.tier-tr.cur{color:var(--text);background:rgba(127,166,80,.1);box-shadow:inset 3px 0 0 var(--accent)}
.tier-tr .mono{font-size:11px;white-space:nowrap}
.tier-tr .tt-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tier-tr .st{justify-self:end;white-space:nowrap;overflow:hidden}
.tier-th span:last-child{text-align:right}
.st{padding:2px 6px;border-radius:3px;text-align:center;font-size:10.5px;color:var(--muted);background:var(--panel);border:1px solid var(--line2)}
.st.owned{color:var(--accent-2);background:rgba(127,166,80,.12);border-color:rgba(127,166,80,.4)}
.st.open{color:#e6c07a;background:var(--gold-soft);border-color:rgba(217,169,79,.4)}

/* ---------------------------------------------------------------- 个人资料 */
.me-card{padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.me-top{display:flex;align-items:center;gap:10px}
.me-top .avatar{width:44px;height:44px;font-size:18px}
.me-name{font-size:16px;font-weight:700}
.me-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.me-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.stat{padding:8px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.stat b{display:block;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.stat s{font-size:10px;color:var(--dim);text-decoration:none}
.stat.gold b{color:var(--gold)}
.stat.green b{color:var(--accent-2)}
.stat.red b{color:#e79393}
.spark{margin-top:10px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.spark svg{display:block;width:100%;height:52px}
.spark-title{font-size:10.5px;color:var(--dim);margin-bottom:4px}
.hist-title{margin:12px 0 6px;font-size:11.5px;color:var(--muted)}
.guest-hint{margin-top:10px;padding:10px;font-size:11.5px;line-height:1.8;color:var(--muted);background:var(--panel3);border:1px solid var(--line);border-radius:8px}

/* ---------------------------------------------------------------- 聊天 */
.chat-card{display:flex;flex-direction:column;max-height:calc(100vh - 100px);overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.chat-head{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;background:var(--panel2);border-bottom:1px solid var(--line)}
.chat-title{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-title em{margin-left:4px;font-size:11px;color:var(--accent-2)}
.chat-head .mini{margin-left:auto}
.chat-badge{margin-left:auto;min-width:16px;height:16px;line-height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;font-weight:700;text-align:center}
.chat-list{flex:1;min-height:170px;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:4px;scroll-behavior:auto}
.chat-msg{display:flex;gap:6px;font-size:12.5px;line-height:1.5}
.chat-msg .who{flex:0 0 auto;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--accent-2);cursor:pointer}
.chat-msg .who:hover{text-decoration:underline}
.chat-msg .txt{flex:1;min-width:0;word-break:break-word;color:var(--text)}
.chat-msg .tm{flex:0 0 auto;font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums}
.chat-msg.mine .who{color:var(--gold)}
.chat-msg.system .txt{font-size:11px;color:#e6c07a;background:var(--gold-soft);border:1px solid rgba(217,169,79,.25);border-radius:5px;padding:4px 8px}
.chat-report{flex:0 0 auto;opacity:0;border:0;background:none;color:var(--dim);font-size:10px;cursor:pointer;padding:1px 5px;border-radius:4px}
.chat-msg:hover .chat-report{opacity:1}
.chat-report:hover{color:#e79393;background:rgba(207,91,91,.12)}
.chat-input{display:flex;gap:6px;padding:8px;background:var(--panel2);border-top:1px solid var(--line)}
.chat-input .input{height:32px;font-size:13px}
.chat-input .btn{height:32px;padding:0 12px}
.chat-muted{padding:8px 10px;font-size:11px;line-height:1.6;color:#e79393;background:rgba(207,91,91,.1);border-top:1px solid rgba(207,91,91,.3)}
.chat-rules{padding:7px 10px;font-size:10.5px;line-height:1.6;color:var(--dim);background:var(--bg);border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- 商店 */
.shop-view{position:fixed;inset:0;z-index:9200;overflow:auto;padding:24px;background:var(--bg);animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
body.shop-open{overflow:hidden}
.shop-inner{max-width:1100px;margin:0 auto}
.shop-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.shop-title h2{font-size:20px;font-weight:700}
.shop-title p{margin-top:3px;font-size:12px;color:var(--muted)}
.shop-balance{display:flex;align-items:center;gap:7px;height:38px;margin-left:auto;padding:0 14px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.shop-balance b{font-size:18px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.shop-balance s{font-size:11px;color:var(--muted);text-decoration:none}
.shop-tip{margin-bottom:16px;padding:10px 12px;font-size:12px;line-height:1.7;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:8px}
.shop-tip strong{color:var(--text)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.shop-item{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.shop-item:hover{border-color:#4a4a4a}
.shop-item.active{border-color:var(--accent)}
.shop-item.ghost{opacity:.75}
.shop-preview{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:8px;background:linear-gradient(160deg,var(--light),var(--dark))}
.skin-pc{width:48px;height:48px;display:block}
.skin-pc svg{width:100%;height:100%;display:block}
.shop-name{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.shop-desc{flex:1;font-size:11.5px;line-height:1.6;color:var(--muted)}
.shop-price{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--gold)}
.shop-actions .btn{width:100%}
.shop-foot{margin-top:18px;text-align:center;font-size:11.5px;line-height:1.8;color:var(--dim)}
.shop-foot strong{color:var(--text)}

/* ---------------------------------------------------------------- 浮层 */
.board-overlay{position:absolute;inset:8px;z-index:20;display:grid;place-items:center;background:rgba(255,255,255,.88);border-radius:6px;animation:fadeIn .15s ease}
.ov-card{width:100%;max-width:400px;padding:20px;text-align:center;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--elev);animation:pop .18s var(--ease)}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.ov-title{margin-bottom:6px;font-size:22px;font-weight:700}
.ov-title.win{color:var(--accent-2)}
.ov-title.lose{color:#e79393}
.ov-title.draw{color:var(--gold)}
.ov-sub{margin-bottom:14px;font-size:12px;line-height:1.6;color:var(--muted)}
.ov-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.ov-actions .btn{flex:1;min-width:110px}
.roomcode{margin:4px 0 10px;font-family:ui-monospace,Menlo,monospace;font-size:34px;font-weight:700;letter-spacing:7px;color:var(--text)}
.ov-link{margin-top:10px;font-size:11px;color:var(--dim);word-break:break-all;font-family:ui-monospace,monospace}
#endOverlay{align-items:end;padding:0}
#endOverlay .ov-card{width:min(480px,100%);max-width:none;border-radius:12px 12px 0 0;animation:sheetUp .28s var(--ease)}
@keyframes sheetUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.deltarow,.elo-roll{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:14px;font-variant-numeric:tabular-nums}
.elo-label{font-size:11px;letter-spacing:1px;color:var(--dim)}
.elo-from{font-size:14px;color:var(--muted)}
.elo-arrow{color:var(--dim)}
#eloRoll{font-size:20px;font-weight:700}
.delta{font-size:18px;font-weight:700}
.delta.up{color:var(--accent-2)}
.delta.down{color:#e79393}
.promo{background:rgba(10,10,10,.72)}
.promo-grid{display:flex;gap:8px;padding:12px;background:var(--panel);border:1px solid var(--line2);border-radius:12px}
.promo-opt{width:60px;height:60px;padding:6px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;cursor:pointer}
.promo-opt:hover{border-color:var(--accent);background:var(--panel3)}
.thinking{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:15;
  display:flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:14px;
  font-size:11.5px;color:var(--muted);background:rgba(255,255,255,.96);border:1px solid var(--line2);
}
.spinner{width:12px;height:12px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--accent);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spectate-tag{
  position:absolute;left:16px;top:16px;z-index:16;display:flex;align-items:center;gap:8px;
  height:26px;padding:0 4px 0 10px;font-size:11.5px;color:var(--text);
  background:rgba(255,255,255,.96);border:1px solid var(--line2);border-radius:var(--r-sm);
}
.spectate-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.watch-exit{height:22px;padding:0 8px;border:0;border-radius:4px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;cursor:pointer}

/* 弹窗 / 提示 */
.modal-root{position:fixed;inset:0;z-index:9500;display:none;place-items:center;background:rgba(8,8,8,.72)}
.modal-root.on{display:grid}
.modal{width:min(420px,92vw);padding:20px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--elev);animation:pop .18s var(--ease)}
.modal h3{margin-bottom:6px;font-size:17px;font-weight:700}
.modal p{margin-bottom:14px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.modal .field-row{flex-direction:column;align-items:stretch;gap:6px}
.modal .field-row label{min-width:0}
.modal-actions{display:flex;gap:8px;margin-top:16px}
.modal-actions .btn{flex:1}
.profile-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.profile-skin{margin-bottom:10px;font-size:11.5px;color:var(--gold)}
.profile-modal .me-stats{grid-template-columns:repeat(4,1fr)}
.toasts{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.toast{
  max-width:340px;padding:9px 14px;font-size:12.5px;background:#fff;border:1px solid var(--line2);
  border-radius:8px;box-shadow:var(--shadow);animation:toastIn .18s ease-out;
}
.toast.err{border-left:3px solid var(--red)}
.toast.ok{border-left:3px solid var(--accent)}
.toast.gold{border-left:3px solid var(--gold)}
@keyframes toastIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- 开场 / 登录 */
.splash{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#f7f8fa;transition:opacity .4s ease,visibility .4s ease}
.splash.hide{opacity:0;visibility:hidden}
.splash-glow{display:none}
.splash-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.splash-crest svg{width:104px;height:104px;display:block;animation:crestIn 1s var(--ease) both}
.splash-word{margin-top:16px;font-size:14px;font-weight:700;letter-spacing:4px;animation:wordIn .6s .35s var(--ease) both}
.splash-tag{margin-top:6px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);animation:wordIn .6s .5s var(--ease) both}
.splash-bar{margin-top:22px;width:120px;height:2px;background:var(--panel3);border-radius:2px;overflow:hidden;animation:wordIn .6s .65s var(--ease) both}
.splash-bar i{display:block;height:100%;width:0;background:var(--accent);animation:barIn 1.6s .5s linear both}
@keyframes crestIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes wordIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes barIn{to{width:100%}}
.auth-gate{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:20px;background:rgba(10,10,10,.82);animation:fadeIn .2s ease}
.auth-gate.hide{animation:gateOut .25s ease both}
@keyframes gateOut{to{opacity:0;visibility:hidden}}
body.auth-gate{overflow:hidden}
body.auth-gate .topbar,body.auth-gate .app,body.auth-gate .site-foot,body.auth-gate .invite-banner{filter:blur(3px) brightness(.6);pointer-events:none;user-select:none}
.gate-card{
  width:min(400px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:26px 24px;
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--elev);
  animation:pop .2s var(--ease);
}
.gate-crest svg{width:52px;height:52px;display:block;margin:0 auto 12px}
.gate-title{font-size:20px;font-weight:700;text-align:center}
.gate-sub{margin:6px 0 18px;font-size:12px;line-height:1.6;text-align:center;color:var(--muted)}
.gate-go{width:100%}
.gate-foot{margin-top:14px;font-size:10.5px;line-height:1.6;text-align:center;color:var(--dim)}
.md-field{margin-bottom:var(--space-4)}
.md-field label{display:block;margin-bottom:5px;font-size:11px;color:var(--muted)}
.md-field input{width:100%;height:38px;padding:0 10px;font-size:14px;color:var(--text);background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-sm);outline:none;transition:border-color .15s}
.md-field input:focus{border-color:var(--accent)}
.md-field input::placeholder{color:#5f5f5f}
.auth-tabs{display:flex;gap:4px;margin:0 0 18px;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
.auth-tabs button{flex:1;height:30px;border:0;border-radius:5px;background:none;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer}
.auth-tabs button.on{background:var(--panel3);color:var(--text)}
.auth-err{margin:-8px 0 14px;padding:8px 10px;font-size:11.5px;color:#e79393;background:rgba(207,91,91,.12);border:1px solid rgba(207,91,91,.3);border-radius:var(--r-sm)}
.guest-intro{padding:0 0 6px}
.guest-badge{display:inline-block;margin-bottom:10px;padding:3px 10px;font-size:11px;font-weight:700;color:var(--gold);background:var(--gold-soft);border:1px solid rgba(217,169,79,.3);border-radius:var(--r-xs)}
.guest-list{list-style:none;margin:0;padding:0;font-size:12px;line-height:1.9;color:var(--muted)}
.guest-list li{display:flex;gap:8px}
.guest-list li::before{content:'';flex:0 0 auto;width:4px;height:4px;margin-top:9px;border-radius:50%;background:var(--muted)}
.guest-list b{color:var(--text)}

/* ---------------------------------------------------------------- 响应式 */
@media(max-width:1420px){
  .app{grid-template-columns:minmax(0,1fr) 336px;padding:14px}
  .boardcol{grid-column:1;grid-row:1}
  .side{grid-column:2;grid-row:1}
  .chatcol{grid-column:1 / -1;grid-row:2;position:static}
  .chat-card{height:480px;max-height:none}
  .chat-card .chat-list{min-height:200px;max-height:none}
}
@media(max-width:900px){
  .app{display:flex;flex-direction:column;gap:10px;padding:10px;max-width:none}
  .boardcol{order:1;max-width:none;width:100%}
  .chatcol{order:2;width:100%}
  .side{order:3;width:100%}
  .panel{max-height:none}
  .topbar{height:auto;flex-wrap:wrap;gap:10px;padding:10px 12px;position:static}
  .brand-text h1 span{display:none}
  .brand-text h1{font-size:15px}
  .netbar{order:3;width:100%}
  .netbar code{max-width:none;flex:1}
  .topstats{order:4;width:100%;margin-left:0;gap:14px;justify-content:space-between}
  .userbox{order:2;margin-left:auto}
  .shop-entry{order:2}
  .boardwrap{padding:6px}
  .evalcol{display:none}
  .strip{height:50px;padding:0 8px}
  .prow2 .lb-sub{display:none}
  .clock{min-width:62px;font-size:15px;padding:4px 8px}
  .controls{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
  .controls .btn{padding:0 4px;font-size:11.5px}
  .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto;min-width:80px}
  .lb-head,.lb-row{grid-template-columns:20px 1fr 46px 64px 42px;gap:5px}
  .tier-th,.tier-tr{grid-template-columns:38px minmax(0,1fr) 56px 50px;gap:4px;padding:6px 7px;font-size:10.5px}
  .chat-report{opacity:1}
  .chat-list-wrap{min-height:0}
  .chat-more{padding:6px 0}
  .toasts{left:10px;right:10px;bottom:10px;align-items:stretch}
  .toast{max-width:none}
  .shop-view{padding:14px}
  .shop-grid{grid-template-columns:1fr}
  .shop-balance{margin-left:0}
  .auth-gate{padding:0}
  .gate-card{width:100%;height:100%;max-height:none;border-radius:0;display:flex;flex-direction:column;justify-content:center}
  .site-foot{padding:12px 14px}
  .site-foot .foot-right{width:100%;margin-left:0}
}
@media(max-width:420px){
  .controls{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion: reduce){
  .piece.cascade,.splash-crest svg,.splash-word,.splash-tag,.splash-bar,.splash-bar i,.gate-card,.panel.on,#endOverlay .ov-card,.impact,.sq.check::after{animation:none !important}
  .piece,.evalfill{transition:none !important}
}

/* ==========================================================================
   精修层：空状态 / 微交互 / 邮箱登录 / 资料元信息
   ========================================================================== */

/* ---- 空状态：半透明棋子图标 + 一行小字，上下留白 32px ---- */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);
  padding:var(--space-6) var(--space-3);text-align:center;
  color:var(--dim);font-size:var(--fs-sm);line-height:var(--lh-aux);
}
.empty-ic{line-height:0}
.empty-ic svg{width:48px;height:48px;display:block;opacity:.4;filter:grayscale(1)}
.empty-tx{max-width:26ch}

/* ---- 水波纹（Material 3 state layer 简化版） ---- */
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(16,24,40,.10);transform:scale(0);
  animation:rippleOut .55s ease-out forwards;
}
@keyframes rippleOut{to{transform:scale(1);opacity:0}}
.btn.primary .ripple{background:rgba(255,255,255,.34)}
.btn[disabled] .ripple{display:none}

/* ---- 聊天新消息：淡入 + 从下往上 8px ---- */
.chat-msg.is-new{animation:msgIn .28s var(--ease) both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- 顶部统计数字：模糊 → 清晰 + 轻微放大 ---- */
.stat-bump{animation:statBump .5s ease-out}
@keyframes statBump{
  0%{filter:blur(3px);opacity:.45;transform:translateY(-2px)}
  60%{filter:blur(0);opacity:1;transform:translateY(0) scale(1.06)}
  100%{transform:scale(1)}
}

/* ---- 代币数字滚动弹跳 ---- */
.token-chip b{font-variant-numeric:tabular-nums;font-weight:700;display:inline-block}
.token-chip b.bump{animation:tokenBump .6s var(--ease)}
@keyframes tokenBump{
  0%{transform:scale(1)}
  35%{transform:scale(1.22);color:#fff}
  100%{transform:scale(1)}
}

/* ---- 段位徽章 hover 微弱发光 ---- */
.tier.transition,.tier{transition:box-shadow .18s var(--ease),filter .18s var(--ease)}
.tier:hover{box-shadow:0 0 0 1px rgba(226,178,92,.35),0 0 10px rgba(226,178,92,.28);filter:brightness(1.08)}
.tier-lg:hover{box-shadow:0 0 0 1px rgba(226,178,92,.4),0 0 18px rgba(226,178,92,.3)}

/* ---- 邮箱登录 / 注册 / 找回密码 ---- */
.auth-tabs{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.auth-tabs button{flex:1 0 auto;min-width:62px;padding:0 var(--space-2);font-size:12px}
.sendcode-row{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-4)}
.sendcode-row .btn{flex:0 0 auto}
.sendcode-tip{font-size:var(--fs-xs);color:var(--dim);line-height:var(--lh-aux)}
.gate-tip{margin:0 0 var(--space-4);font-size:var(--fs-xs);color:var(--dim);line-height:var(--lh-aux)}
.gate-link{display:flex;justify-content:flex-end;margin:-4px 0 var(--space-4)}
.gate-link.centered{justify-content:center;margin-top:var(--space-3)}
.gate-link a{font-size:var(--fs-sm);color:var(--accent-2);cursor:pointer;text-decoration:none}
.gate-link a:hover{text-decoration:underline}
.auth-note{
  margin:0 0 var(--space-4);padding:var(--space-2) var(--space-3);border-radius:var(--r-sm);
  font-size:var(--fs-sm);line-height:var(--lh-aux);color:var(--accent-2);
  background:rgba(127,166,80,.12);border:1px solid rgba(127,166,80,.32);
}
.md-field input[readonly]{color:var(--muted);background:var(--panel2)}

/* ---- 个人资料元信息（注册时间 / 最后登录 / 邮箱） ---- */
.me-meta{
  display:flex;flex-direction:column;gap:var(--space-1);
  margin-top:var(--space-4);padding:var(--space-3) 14px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-aux);
}
.me-meta .muted{color:var(--dim)}
.muted{color:var(--muted)}

/* ---- 面板内标题与内容之间 16px 呼吸感 ---- */
.panel>.panel-head+.mode-body,.panel>.panel-head+.rooms,.panel>.panel-head+.lb{margin-top:0}
.panel h2+*{margin-top:0}
.chat-rules{font-size:var(--fs-xs);line-height:var(--lh-aux)}

/* ================================ 房间邀请（聊天栏按钮 + 大厅邀请卡片） */
#inviteRoomBtn{margin:0 var(--space-2) var(--space-2)}
.chat-invite{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  margin:var(--space-1) 0;padding:var(--space-3);
  background:var(--md-surface-2);border:1px solid var(--gold-soft);border-radius:var(--r);
}
.chat-invite .ci-top{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text)}
.chat-invite .ci-top b{font-weight:700;color:var(--gold)}
.chat-invite .ci-meta{font-size:var(--fs-xs);color:var(--muted)}
.chat-invite .ci-join{margin-top:2px}
.chat-invite .ci-join[disabled]{opacity:.6}
@media(max-width:900px){
  .chat-invite{padding:var(--space-2) var(--space-3)}
}

/* ================================ 聊天频道切换（大厅 / 房间）+ 邀请发送对象 */
.chat-scope{display:flex;gap:2px;padding:2px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm)}
.chat-scope button{
  height:22px;padding:0 10px;border:0;border-radius:4px;background:none;
  color:var(--muted);font-size:var(--fs-xs);font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .12s,color .12s;
}
.chat-scope button:hover{color:var(--text)}
.chat-scope button.on{background:var(--panel3);color:var(--text)}
.chat-scope button[disabled]{color:var(--dim);cursor:not-allowed;opacity:.7}
.chat-invite-box{display:flex;flex-direction:column;gap:6px;padding:0 var(--space-2) var(--space-2)}
.chat-invite-box .chat-scope{align-self:flex-start}
.chat-invite-box .btn{width:100%}

/* ================================ 聊天面板：固定高度 + 分页 + 消息密度 */
.chat-card{height:480px;max-height:none}
.chat-list-wrap{position:relative;flex:1;min-height:0;display:flex}
.chat-list{flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
.chat-more{
  display:block;width:100%;margin:0 0 var(--space-2);padding:7px 0;border:1px dashed var(--line2);border-radius:var(--r-sm);
  background:none;color:var(--muted);font-size:var(--fs-xs);font-weight:600;cursor:pointer;
}
.chat-more:hover{color:var(--text);border-color:var(--gold-soft)}
.chat-more.done{border-style:solid;border-color:var(--line);color:var(--dim);cursor:default}
.chat-more[disabled]{opacity:.7;cursor:progress}
.chat-jump{
  position:absolute;right:10px;bottom:10px;z-index:3;
  height:26px;padding:0 12px;border:1px solid var(--accent);border-radius:999px;
  background:var(--accent);color:#fff;font-size:var(--fs-xs);font-weight:700;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
}
.chat-jump:hover{background:var(--accent-2);border-color:var(--accent-2)}
/* 连续同一人的消息：缩进对齐，不重复昵称与时间 */
.chat-msg.cont .txt{padding-left:0}
.chat-msg.cont{margin-top:-2px}
.chat-msg.cont .txt::before{content:'';display:inline-block;width:4px}
.chat-msg .who+.txt{flex:1}
.chat-msg+.chat-msg{margin-top:2px}
.chat-msg.cont+.chat-msg:not(.cont),.chat-msg:not(.cont)+.chat-msg:not(.cont){margin-top:var(--space-2)}
.chat-msg.system,.chat-invite{margin:var(--space-2) 0}
.chat-list .empty{margin:auto}
.chat-list .empty-ic svg{width:40px;height:40px}

/* 移动端聊天高度必须在最后声明（否则会被上面的桌面 480px 覆盖） */
@media(max-width:900px){
  .chat-card{height:360px;max-height:360px}
}

/* ================================ 在线匹配状态 */
.match-status{
  margin-top:var(--space-2);padding:10px 12px;border:1px dashed var(--gold-soft);border-radius:var(--r-sm);
  background:var(--md-surface-2);color:var(--gold);font-size:var(--fs-sm);font-weight:600;text-align:center;
}
#matchKindSeg{margin-bottom:var(--space-2)}
#matchStartBtn,#matchCancelBtn{margin-bottom:var(--space-2)}

/* ================================ 段位称号（国际象棋等级名） */
.tier-hero .tier-name{margin-top:2px;font-size:14px;font-weight:700;color:var(--gold);letter-spacing:.3px}
.tt-name em{font-style:normal;font-size:10px;color:var(--dim);font-weight:600;margin-left:2px}

/* ==================================================================
   主界面重构：三栏 + 首页方块仪表盘 + 视图切换动画
   ================================================================== */
.app{display:grid;grid-template-columns:280px minmax(0,1fr) 320px;gap:16px;max-width:1600px;margin:0 auto;padding:16px;align-items:start}
.chatcol{order:1;grid-column:1;position:sticky;top:68px;min-width:0}
.maincol{order:2;grid-column:2;min-width:0}
.side{order:3;grid-column:3;position:sticky;top:68px;min-width:0;display:flex;flex-direction:column;gap:10px}

/* ---- 视图容器与切换动画 ---- */
.view{display:flex;flex-direction:column;gap:var(--space-3)}
.view[hidden]{display:none !important}
.view.in{animation:viewIn .3s var(--ease)}
.view.out{opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view-mount{display:flex;flex-direction:column;gap:var(--space-3)}
.view-mount .panel{display:flex;max-height:none;padding:var(--space-4)}
.view-mount .panel:not(.on){display:flex}
.view-title{font-size:var(--fs-h1);font-weight:700;letter-spacing:.2px}
.view-sub{margin-top:4px;font-size:var(--fs-sm);color:var(--muted)}

/* ---- 首页方块 ---- */
.home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-2)}
.hcard{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:18px 16px 16px;text-align:left;cursor:pointer;overflow:hidden;
  background:var(--md-surface-2);border:1px solid var(--line);border-radius:var(--r);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.hcard::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .2s;
  background:radial-gradient(130px 70px at 82% -10%,rgba(226,178,92,.14),transparent 72%)}
.hcard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.5);border-color:var(--gold)}
.hcard:hover::after{opacity:1}
.hcard:active{transform:translateY(-2px) scale(.99)}
.hcard.tap{transform:scale(1.05);box-shadow:0 18px 44px rgba(0,0,0,.55);border-color:var(--gold)}
.hcard-ic{display:block;width:48px;height:48px;color:var(--gold)}
.hcard-ic svg{display:block;width:48px;height:48px}
.hcard-title{font-size:16px;font-weight:700;color:var(--text)}
.hcard-sub{font-size:12.5px;color:var(--muted)}
@keyframes icCross{0%,100%{transform:none}50%{transform:translate(1.6px,1.6px) rotate(7deg)}}
@keyframes icBounce{0%,100%{transform:none}40%{transform:translateY(-3.5px)}70%{transform:translateY(1px)}}
@keyframes icShine{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.14)}}
@keyframes icSwing{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}
@keyframes icBlink{0%,90%,100%{opacity:1}93%{opacity:.12}}
@keyframes icFloat{0%,100%{transform:none}50%{transform:translateY(-2.5px)}}
.hcard:hover .ic-match .sword-a{animation:icCross .5s var(--ease)}
.hcard:hover .ic-match .sword-b{animation:icCross .5s .09s var(--ease)}
.hcard:hover .ic-room{animation:icBounce .55s var(--ease)}
.hcard:hover .ic-tier .spark{animation:icShine .85s ease-in-out infinite}
.hcard:hover .ic-shop .bag,.hcard:hover .ic-shop .handle{animation:icSwing .6s var(--ease);transform-origin:24px 42px}
.hcard:hover .ic-ai .eye{animation:icBlink .8s steps(1,end) infinite}
.hcard:hover .ic-me .head,.hcard:hover .ic-me .body{animation:icFloat .9s ease-in-out infinite}
.hcard.cascade{animation:cardIn .42s var(--ease) backwards}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.home-tip{margin-top:var(--space-2);text-align:center;font-size:var(--fs-xs);color:var(--dim)}

/* ---- 右栏公共块 ---- */
.side-block{display:flex;flex-direction:column;gap:10px;padding:var(--space-4);background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.side-block .lb-row,.side-block .match-row{padding:6px 8px}
.side-block .panel-head h2{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px}

/* ---- 顶栏导航（把 tabs 搬到顶栏） ---- */
.topbar .tabs{flex:1;min-width:0;display:flex;gap:2px;border-bottom:0;overflow-x:auto;scrollbar-width:none}
.topbar .tabs::-webkit-scrollbar{display:none}
.topbar .tabs button{flex:0 0 auto;min-width:62px;height:32px;border-bottom:0;border-radius:var(--r-sm)}
.topbar .tabs button.on{background:var(--panel3);color:var(--text);border-bottom-color:transparent}

/* ---- 响应式 ---- */
@media(max-width:1279px){
  .app{grid-template-columns:minmax(0,1fr) 320px;padding:12px}
  .maincol{grid-column:1;grid-row:1;order:1}
  .side{grid-column:2;grid-row:1;order:2}
  .chatcol{grid-column:1 / -1;grid-row:2;order:3;position:static}
  .chat-card{height:360px;max-height:360px}
}
@media(max-width:767px){
  .app{display:flex;flex-direction:column;gap:10px;padding:10px;max-width:none}
  .maincol{order:1;width:100%}
  .side{order:2;width:100%;position:static}
  .chatcol{order:3;width:100%;position:static}
  .home-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hcard{padding:14px 12px}
  .hcard-ic,.hcard-ic svg{width:40px;height:40px}
  .hcard-title{font-size:14.5px}
  .topbar .tabs{order:6;flex:1 1 100%;width:100%}
  .chat-card{height:320px;max-height:320px}
}
.chat-msg.system .txt{color:#8a6a12;background:rgba(169,121,26,.10);border-color:rgba(169,121,26,.28)}
.hcard{background:#fff}
.hcard:hover{box-shadow:0 12px 28px rgba(16,24,40,.14)}
.hcard::after{background:radial-gradient(130px 70px at 82% -10%,rgba(169,121,26,.10),transparent 72%)}
.topbar{background:#fff;border-bottom-color:var(--line)}
.side-block,.panel,.chat-card,.strip,.boardwrap{background:#fff}
.chat-msg.system .txt{color:#8a6a12;background:rgba(169,121,26,.10);border-color:rgba(169,121,26,.28)}
.hcard{background:#fff}
.hcard:hover{box-shadow:0 12px 28px rgba(16,24,40,.14)}
.hcard::after{background:radial-gradient(130px 70px at 82% -10%,rgba(169,121,26,.10),transparent 72%)}
.topbar{background:#fff;border-bottom-color:var(--line)}
.side-block,.panel,.chat-card,.strip,.boardwrap{background:#fff}
/* ---- 首页不显示聊天时的两列布局 ---- */
.app.no-chat{grid-template-columns:minmax(0,1fr) 340px}
.app.no-chat .chatcol{display:none !important}
.app.no-chat .maincol{grid-column:1;grid-row:1}
.app.no-chat .side{grid-column:2;grid-row:1}
@media(max-width:1279px){ .app.no-chat{grid-template-columns:minmax(0,1fr) 320px} }
@media(max-width:767px){ .app.no-chat{display:flex} }
.home-block{margin-top:var(--space-4);padding:var(--space-4);background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.home-block .matchlist{gap:6px}
/* ---- 右栏 Top10：三列对齐（修 ELO 错位） ---- */
.side-block .lb-head{display:none}
.side-lb{grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center}
.side-lb .rank{font-size:12px;color:var(--muted)}
.side-lb .sl-name{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-lb .sl-elo{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--gold);font-size:13.5px}
/* ---- 语言提示条 ---- */
.lang-banner{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:12.5px;
  background:#fff8e6;border-bottom:1px solid #f0dca8;color:#7a5b13}
.lang-banner a{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--r-sm);
  background:var(--accent);color:#fff !important;text-decoration:none;font-weight:600}
.lang-banner #langClose{margin-left:auto;border:0;background:none;color:#a08a52;font-size:16px;line-height:1;padding:0 6px;cursor:pointer}
/* 手机端顶栏统计：不要被裁掉 */
@media(max-width:767px){
  .topstats{gap:8px 12px;flex-wrap:wrap}
  .stat-pill s{font-size:10.5px}
  .stat-pill b{font-size:12.5px}
}

/* ==================================================================
   细节修正：右栏与首页对齐 / 英文卡片等高 / Q 弹下棋手感
   ================================================================== */
/* ① 右栏与中栏首行对齐（首页两列布局时） */
@media(min-width:1280px){
  .app.no-chat .side>.side-block:first-child{margin-top:61px}
}
/* ② 卡片等高：标题最多两行也不挤歪副标题（英文版尤其明显） */
.hcard-title{min-height:2.6em;display:flex;align-items:flex-start;line-height:1.3}
.hcard-ic{margin-bottom:2px}
/* ③ Q 弹手感 */
.piece{transition:transform .26s cubic-bezier(.34,1.56,.64,1),filter .18s ease}
@keyframes pieceLand{
  0%{transform:scale(1.16) translateY(-5%)}
  55%{transform:scale(.95) translateY(0)}
  78%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
.piece.drop{animation:pieceLand .34s cubic-bezier(.22,1.3,.4,1) both}
@keyframes capturedOut{
  0%{transform:scale(1) rotate(0);opacity:1}
  100%{transform:scale(1.38) rotate(12deg);opacity:0}
}
.piece.fade{animation:capturedOut .26s ease-in forwards}
.drag-clone{transform:translate(-50%,-50%) scale(1.14);filter:drop-shadow(0 12px 18px rgba(16,24,40,.32))}
@keyframes selPop{from{transform:scale(.86);opacity:.55}to{transform:scale(1);opacity:1}}
.sq.sel::after{animation:selPop .18s cubic-bezier(.34,1.56,.64,1)}
@keyframes lastGlow{0%{box-shadow:inset 0 0 0 0 rgba(169,121,26,.45)}100%{box-shadow:inset 0 0 0 4px rgba(169,121,26,0)}}
.sq.last::after{animation:lastGlow .5s ease-out}
@media (hover:hover){ .piece:hover svg{filter:drop-shadow(0 4px 8px rgba(16,24,40,.3))} }
@media (prefers-reduced-motion: reduce){
  .piece{transition:none !important}
  .piece.drop,.piece.fade,.sq.sel::after,.sq.last::after{animation:none !important}
}

/* ==================================================================
   全屏登录页 + 棋子入场动画 + 文字对比度修正
   ================================================================== */
/* ① 对比度：整体压暗辅助文字，杜绝“白字看不见” */
:root{--dim:#7c848f}
.level s{color:var(--muted)}
.empty{color:var(--muted)}
.lb-sub,.hint,.rc-link,.spark-title,.chat-rules,.chat-msg .tm,.mvrow .no,
.sendcode-tip,.gate-foot,.gate-tip,.home-tip,.profile-skin,.guest-list,.rc-state,
.ov-sub,.match-row .mtxt,.lb-mid,.coord{color:var(--muted)}
.mvrow .no{font-weight:600}
/* ② 全屏登录页（默认游戏登录，下方其他方式） */
body.auth-gate{overflow:hidden}
body.auth-gate .topbar,body.auth-gate .app,body.auth-gate .invite-banner,body.auth-gate .lang-banner{display:none !important}
.auth-gate{position:fixed;inset:0;z-index:9000;display:block;overflow:auto;padding:0;background:var(--bg);animation:none}
.gate-card{width:min(440px,100%);margin:0 auto;padding:20px 20px 48px;background:none;border:0;border-radius:0;box-shadow:none;max-height:none;display:block;animation:none}
.gate-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;padding:16px 20px}
.gate-brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800}
.gate-brand svg{width:26px;height:26px;display:block}
.gate-brand i{font-style:normal;font-size:10px;letter-spacing:1.6px;color:var(--dim);font-weight:600}
.gate-hero{position:relative;display:flex;flex-direction:column;align-items:center;margin:40px 0 8px}
.gate-hero::after{content:'';width:74px;height:11px;border-radius:50%;background:rgba(16,24,40,1);opacity:.16;filter:blur(6px);margin-top:-8px;animation:gateShadow .9s .1s ease-out both}
.gate-piece{display:block}
.gate-piece svg{width:118px;height:118px;display:block;filter:drop-shadow(0 14px 20px rgba(16,24,40,.22));animation:pieceDropIn .85s cubic-bezier(.22,1.35,.36,1) both}
@keyframes pieceDropIn{
  0%{transform:translateY(-54px) scale(.6) rotate(-9deg);opacity:0}
  58%{transform:translateY(0) scale(1.07) rotate(0);opacity:1}
  76%{transform:translateY(-7px) scale(.98)}
  100%{transform:none}
}
@keyframes gateShadow{0%{opacity:0;transform:scale(.5)}70%{opacity:.16;transform:scale(1.05)}100%{opacity:.16;transform:scale(1)}}
.gate-title{font-size:25px;font-weight:800;text-align:center;margin-top:8px;letter-spacing:.2px}
.gate-sub{margin:6px 0 18px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.7}
.gate-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:11.5px}
.gate-or::before,.gate-or::after{content:'';flex:1;height:1px;background:var(--line)}
.gate-others{display:flex;flex-direction:column;gap:9px}
.gate-others .btn{height:42px;font-size:13.5px}
.gate-go{height:48px;font-size:15.5px;font-weight:700;border-radius:10px}
.gate-card .md-field input{height:44px;font-size:14.5px}
.gate-link{justify-content:center;gap:16px;margin-top:2px}
.gate-foot{margin-top:16px}
/* ③ 棋子：默认用渐变（更立体），皮肤开启时由 JS 覆盖 */
.pc-svg.is-w{filter:drop-shadow(0 1.5px 1.5px rgba(16,24,40,.28))}
.pc-svg.is-b{filter:drop-shadow(0 1.5px 1.5px rgba(16,24,40,.32))}
@media(max-width:600px){
  .gate-card{padding:16px 16px 40px}
  .gate-piece svg{width:86px;height:86px}
  .gate-title{font-size:21px}
  .gate-hero{margin:26px 0 6px}
}

/* ==================================================================
   残局挑战 + 等距棋盘图标 + 首页 7 格布局
   ================================================================== */
/* ① 首页：7 张卡片，桌面 4 列 */
@media(min-width:1280px){ .home-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media(min-width:1600px){ .home-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* ② 匹配卡：等距棋盘 + 棋子（悬停走一步） */
.ic-match .iso-piece{transform-origin:19px 24px;transition:transform .3s var(--ease)}
@keyframes isoStep{
  0%{transform:translate(0,0)}
  22%{transform:translate(2.2px,-2.6px)}
  46%{transform:translate(4.5px,0)}
  70%{transform:translate(6.8px,-2.6px)}
  100%{transform:translate(9px,0)}
}
.hcard:hover .ic-match .iso-piece{animation:isoStep .95s cubic-bezier(.3,1.2,.4,1) forwards}
.hcard:hover .ic-match .iso-board{animation:isoGlow .95s ease}
@keyframes isoGlow{0%,100%{opacity:1}45%{opacity:.72}}
.hcard:hover .ic-match .iso-shadow{animation:isoShadow .95s cubic-bezier(.3,1.2,.4,1) forwards}
@keyframes isoShadow{0%{transform:translate(0,0)}22%{transform:translate(2.2px,0) scale(.92)}46%{transform:translate(4.5px,0)}
  70%{transform:translate(6.8px,0) scale(.92)}100%{transform:translate(9px,0)}}
.ic-casual .kflag{transform-origin:31px 18px}
.hcard:hover .ic-casual .kflag{animation:kFlag .7s ease-in-out infinite}
@keyframes kFlag{0%,100%{transform:none}50%{transform:translateY(-1.5px) scale(1.04)}}
/* ③ 残局面板 */
.puzzle-head{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-bottom:6px}
.puzzle-no{font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.puzzle-title{font-size:16px;font-weight:700;margin-bottom:4px}
.puzzle-hint{font-size:12.5px;color:var(--muted);line-height:1.6}
.puzzle-state{margin:10px 0;padding:9px 11px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.puzzle-state.good{color:var(--accent);background:rgba(95,143,54,.10);border-color:rgba(95,143,54,.3)}
.puzzle-state.bad{color:var(--red);background:rgba(192,57,43,.08);border-color:rgba(192,57,43,.28)}
.puzzle-actions{display:flex;gap:8px}
.puzzle-actions .btn{flex:1}
/* ---- 结算：棋力分析 ---- */
#endAnalysis{margin-top:10px;text-align:left}
.an-title{font-size:12px;font-weight:700;color:var(--gold);margin-bottom:8px;letter-spacing:.3px}
.an-row{display:flex;gap:8px;padding:7px 9px;margin-bottom:6px;border-radius:var(--r-sm);background:var(--panel2);border:1px solid var(--line)}
.an-row.bad{border-color:rgba(192,57,43,.3);background:rgba(192,57,43,.06)}
.an-row.warn{border-color:rgba(169,121,26,.3);background:rgba(169,121,26,.06)}
.an-row.good{border-color:rgba(95,143,54,.3);background:rgba(95,143,54,.06)}
.an-dot{flex:0 0 16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--muted)}
.an-row.bad .an-dot{background:var(--red)}
.an-row.warn .an-dot{background:var(--gold)}
.an-row.good .an-dot{background:var(--accent)}
.an-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.an-body b{font-size:12.5px}
.an-body span{font-size:11.5px;color:var(--muted);line-height:1.5}
.an-meta{margin-top:6px;font-size:11px;color:var(--dim)}
/* ---- anime.js 特效层：吃子爆点 ---- */
.piece.fx-anim{transition:none !important;animation:none !important}
/* ---- 将军 / 将死：慢动作 + 大字 ---- */
body.slowmo .piece{transition-duration:.85s !important}
body.slowmo .board::after{content:'';position:absolute;inset:0;z-index:12;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 38%,rgba(16,24,40,.45) 100%);animation:slowmoIn .3s ease both}
@keyframes slowmoIn{from{opacity:0}to{opacity:1}}
.check-flash{position:fixed;inset:0;z-index:80;display:grid;place-items:center;pointer-events:none}
.check-flash span{font-size:min(22vw,190px);font-weight:900;letter-spacing:.06em;color:#fff;
  text-shadow:0 6px 26px rgba(192,57,43,.75),0 0 0 8px rgba(255,255,255,.06);
  animation:checkPop 1.15s cubic-bezier(.2,1.3,.35,1) both}
/* 将死统一走绿色系（配合站点主色） */
.check-flash span{color:#5f8f36;text-shadow:0 6px 26px rgba(95,143,54,.5),0 0 0 8px rgba(95,143,54,.08)}
@keyframes checkPop{
  0%{transform:scale(.5) rotate(-6deg);opacity:0}
  22%{transform:scale(1.16) rotate(0);opacity:1}
  40%{transform:scale(1)}
  75%{opacity:1}
  100%{transform:scale(1.05);opacity:0}
}
/* ---- 开局对阵（对手 VS 你） ---- */
.vs-layer{position:fixed;inset:0;z-index:75;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(180deg,rgba(244,246,248,.97),rgba(244,246,248,.99));pointer-events:none}
.vs-side{display:flex;align-items:center;gap:12px;padding:12px 20px;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);box-shadow:0 10px 28px rgba(16,24,40,.12);min-width:min(320px,80vw)}
.vs-side.top{animation:vsTop .62s cubic-bezier(.22,1.3,.4,1) both}
.vs-side.bottom{animation:vsBottom .62s .1s cubic-bezier(.22,1.3,.4,1) both}
@keyframes vsTop{from{transform:translateY(-70px);opacity:0}to{transform:none;opacity:1}}
@keyframes vsBottom{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:1}}
.vs-av{width:46px;height:46px;display:block;flex:0 0 46px}
.vs-av svg{width:100%;height:100%;display:block}
.vs-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.vs-info b{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-info span{font-size:12px;color:var(--muted)}
.vs-mid{font-size:26px;font-weight:900;color:var(--gold);letter-spacing:.1em;animation:vsMid .75s .18s cubic-bezier(.2,1.4,.35,1) both}
@keyframes vsMid{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:1}}
body.vs-open .maincol{filter:blur(1px)}
.fx-burst{position:fixed;z-index:60;pointer-events:none;color:var(--gold)}
.fx-burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0}
/* ---- 新手教程：迷你棋盘 ---- */
.ob-q{font-size:13px;line-height:1.7;color:var(--text-2)}
.mini-board{display:grid;grid-template-columns:repeat(8,1fr);width:min(260px,72vw);margin:10px auto 2px;
  border-radius:8px;overflow:hidden;border:1px solid var(--line2)}
.mini-sq{position:relative;aspect-ratio:1;display:grid;place-items:center;background:var(--light)}
.mini-sq.d{background:var(--dark)}
.mini-pc{width:100%;height:100%;display:block}
.mini-pc svg{width:100%;height:100%;display:block}
.mini-dot{width:34%;height:34%;border-radius:50%;background:rgba(95,143,54,.72);box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.mini-lb{position:absolute;font-style:normal;font-size:7px;color:rgba(0,0,0,.45)}
.mini-lb:not(.f){top:1px;left:2px}
.mini-lb.f{bottom:1px;right:2px}
/* ---- 商店：加速券 ---- */
.shop-section{grid-column:1/-1;margin:6px 0 2px;font-size:12.5px;font-weight:700;color:var(--gold);letter-spacing:.3px}
.boost-bar{grid-column:1/-1;margin-bottom:6px;padding:9px 12px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;
  color:var(--accent);background:rgba(95,143,54,.10);border:1px solid rgba(95,143,54,.3)}
.boost-preview{display:grid;place-items:center;height:64px}
.boost-preview svg{width:44px;height:44px;color:var(--gold)}
.shop-item.boost.active{border-color:var(--accent);background:rgba(95,143,54,.06)}

/* ==================================================================
   卡片图标「内容预览」悬停动画：每个入口悬停时演出它代表的东西
   ================================================================== */
.hcard .peek{opacity:0;transition:opacity .18s ease}
.hcard:hover .peek{opacity:1}

/* —— 商店：袋子摇摆 + 两枚皮肤棋子滑出（金骑士 / 蓝兵） —— */
.ic-shop .peek{transform-origin:24px 40px}
.ic-shop .pk1{fill:#c9a227}
.ic-shop .pk2{fill:#4a7fb5}
.hcard:hover .ic-shop .peek{animation:peekRail .5s var(--ease)}
@keyframes peekRail{0%{transform:translateY(6px) scale(.8)}100%{transform:none}}

/* —— 创建房间：门打开 + 房间码卡片掉下来 —— */
.ic-room .codecard{fill:none;stroke:currentColor;stroke-width:1.6}
.ic-room .codeline{stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.ic-room .peek{transform-origin:24px 10px}
.hcard:hover .ic-room .peek{animation:codeDrop .55s cubic-bezier(.22,1.35,.4,1)}
@keyframes codeDrop{0%{transform:translateY(-12px) scale(.7);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.hcard:hover .ic-room .door{animation:doorSwing .7s var(--ease);transform-origin:24px 38px}
@keyframes doorSwing{0%,100%{transform:none}45%{transform:perspective(30px) rotateY(-22deg)}}

/* —— 人机对战：机器人眨眼 + 思考中三点 —— */
.ic-ai .dots circle{fill:currentColor}
.hcard:hover .ic-ai .d1{animation:dotPulse .9s .0s ease-in-out infinite}
.hcard:hover .ic-ai .d2{animation:dotPulse .9s .15s ease-in-out infinite}
.hcard:hover .ic-ai .d3{animation:dotPulse .9s .3s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

/* —— 定级赛：奖杯闪光 + 段位阶梯逐级升起 —— */
.ic-tier .bars rect{fill:currentColor;opacity:.85}
.hcard:hover .ic-tier .b1{animation:barUp .7s .0s cubic-bezier(.22,1.3,.4,1) forwards}
.hcard:hover .ic-tier .b2{animation:barUp .7s .08s cubic-bezier(.22,1.3,.4,1) forwards}
.hcard:hover .ic-tier .b3{animation:barUp .7s .16s cubic-bezier(.22,1.3,.4,1) forwards}
.hcard:hover .ic-tier .b4{animation:barUp .7s .24s cubic-bezier(.22,1.3,.4,1) forwards}
@keyframes barUp{from{height:0;y:41}to{height:9;y:32}}

/* —— 残局：旗子飘动 + 王从旁边走出来 —— */
.ic-casual .kingp path{stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.ic-casual .peek{transform-origin:41px 39px}
.hcard:hover .ic-casual .peek{animation:kingWalk .8s var(--ease)}
@keyframes kingWalk{0%{transform:translateY(6px) scale(.7);opacity:0}55%{opacity:1}100%{transform:none;opacity:1}}

/* —— 我的：头像浮动 + 段位徽章弹出 —— */
.ic-me .badge rect{fill:none;stroke:currentColor;stroke-width:2}
.ic-me .badge path{stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ic-me .peek{transform-origin:37px 13px}
.hcard:hover .ic-me .peek{animation:badgePop .6s cubic-bezier(.22,1.4,.4,1) .1s both}
@keyframes badgePop{0%{transform:scale(.4) translateY(4px);opacity:0}70%{transform:scale(1.1);opacity:1}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){ .hcard .peek{animation:none !important;opacity:1} }


/* ==================================================================
   高级棋子（内嵌 Staunton 套装）相关样式 —— 追加块
   ================================================================== */
.piece.premium{background-position:center;background-size:88% 88%;background-repeat:no-repeat;will-change:transform;
  filter:drop-shadow(0 3px 2.5px rgba(16,24,40,.34))}
.piece.premium.dragging{filter:drop-shadow(0 12px 14px rgba(16,24,40,.42))}
.drag-clone.premium{background-position:center;background-size:88% 88%;background-repeat:no-repeat;
  filter:drop-shadow(0 12px 16px rgba(16,24,40,.4))}
/* 登录页主角棋子 / 头像图标（新素材） */
.premium-bg{display:block;width:118px;height:118px;background-position:center;background-size:contain;background-repeat:no-repeat;
  filter:drop-shadow(0 14px 20px rgba(16,24,40,.22));animation:pieceDropIn .85s cubic-bezier(.22,1.35,.36,1) both}
.piece-av{display:inline-block;width:26px;height:26px;background-position:center;background-size:85% 85%;background-repeat:no-repeat}
.avatar .piece-av,.avatar.piece-av{width:100%;height:100%}
.empty-av{width:46px;height:46px;opacity:.5}
.empty-ic .piece-av{display:block;margin:0 auto}
.logo svg image{pointer-events:none}

/* ==================================================================
   足球模式（休闲一组）UI
   ================================================================== */
.fb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.fb-tag{padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;color:#fff;background:var(--accent)}
.fb-score{font-size:15px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.fb-state{margin-bottom:10px;padding:9px 11px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);text-align:center}
.fb-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.fb-bench{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.fb-bench-t{font-size:11px;color:var(--muted);font-weight:700}
.fb-chip{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--panel3);border:1px solid var(--line2);color:var(--text-2)}
.fb-chip.b{background:#3a3f46;color:#fff;border-color:#2a2e33}
/* 球：圆形 + 落影 + 一丝弹跳 */
.sq .ball{position:absolute;inset:6%;z-index:14;pointer-events:none;border-radius:50%;
  background-position:center;background-size:100% 100%;background-repeat:no-repeat;
  filter:drop-shadow(0 4px 4px rgba(16,24,40,.45))}
.ball::after{content:'';position:absolute;left:12%;right:12%;bottom:-6%;height:14%;border-radius:50%;
  background:rgba(16,24,40,.28);filter:blur(3px);z-index:-1}
/* 注意：球的位置由 JS 用 left/top 控制，这里绝不能再放 transform 动画（会互相覆盖） */
/* 足球卡片图标：悬停时球旋转 */
.ic-football circle{transform-origin:24px 24px}
.hcard:hover .ic-football{animation:spinBall 3.2s linear infinite}
@keyframes spinBall{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ==================================================================
   自定义对局（沙盒）：棋子调色板 + 实时评估
   ================================================================== */
.sbx-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sbx-tag{padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;color:#fff;background:var(--gold)}
.sbx-side{font-size:12px;font-weight:700;color:var(--muted)}
.sbx-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}
.sbx-pc{display:grid;place-items:center;height:34px;padding:0;border:1px solid var(--line2);border-radius:6px;
  background:var(--panel2);cursor:pointer;transition:border-color .12s,background .12s}
.sbx-pc:hover{border-color:var(--gold)}
.sbx-pc.on{border-color:var(--accent);background:rgba(95,143,54,.12)}
.sbx-pc .pc-av{width:26px;height:26px;background-position:center;background-size:92% 92%;background-repeat:no-repeat;display:block}
.sbx-tools{display:flex;gap:6px;margin-bottom:8px}
.sbx-tools .btn{flex:1}
.sbx-eval{margin-bottom:8px}
.sbx-eval-bar{height:8px;border-radius:999px;background:#3a3f46;overflow:hidden}
.sbx-eval-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--gold));
  transition:height .25s var(--ease)}
.sbx-eval-txt{margin-top:5px;font-size:11.5px;color:var(--muted);text-align:center}
.sbx-tip{min-height:16px;margin-bottom:8px;font-size:12px;font-weight:600;color:var(--accent);text-align:center}
.sbx-play{display:flex;flex-direction:column;gap:7px}
.ic-sandbox .sand-dot{opacity:.5}
.hcard:hover .ic-sandbox .sand-dot{animation:sandBlink 1.2s steps(1,end) infinite}
@keyframes sandBlink{0%,100%{opacity:.5}50%{opacity:1}}

/* 足球：匹配状态条 + 取消 */
.fb-match{display:flex;align-items:center;gap:8px;margin:8px 0;padding:9px 11px;border-radius:var(--r-sm);
  background:rgba(95,143,54,.10);border:1px solid rgba(95,143,54,.3)}
.fb-match-txt{flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--accent)}
.fb-match-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto;animation:fbPulse 1s ease-in-out infinite}
@keyframes fbPulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.fb-match .btn.tiny{height:26px;flex:0 0 auto}

/* ==================================================================
   首页视图隐藏聊天栏：用 CSS 判定（首帧就不渲染，消除加载闪现）
   ================================================================== */
.app:has(.view[data-view="home"]:not([hidden])){grid-template-columns:minmax(0,1fr) 340px}
.app:has(.view[data-view="home"]:not([hidden])) .chatcol{display:none !important}
.app:has(.view[data-view="home"]:not([hidden])) .maincol{grid-column:1;grid-row:1}
.app:has(.view[data-view="home"]:not([hidden])) .side{grid-column:2;grid-row:1}
@media(max-width:1279px){
  .app:has(.view[data-view="home"]:not([hidden])){grid-template-columns:minmax(0,1fr) 320px}
}
@media(max-width:767px){
  .app:has(.view[data-view="home"]:not([hidden])){display:flex}
}

/* ==================================================================
   新 Logo（圆角渐变瓷砖 + 棋子 + 金点）与开屏动画
   ================================================================== */
.brand-mark{position:relative;width:34px;height:34px;flex:0 0 auto;border-radius:10px;
  background:linear-gradient(150deg,#f9e6b8,#c8933a 60%,#a9791a);
  box-shadow:0 2px 7px rgba(169,121,26,.35),inset 0 1px 0 rgba(255,255,255,.55)}
.brand-mark .bm-piece{position:absolute;inset:13%;background-position:center;background-size:contain;background-repeat:no-repeat}
.brand-mark .bm-dot{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;box-shadow:0 1px 3px rgba(16,24,40,.3)}
.gate-brand .brand-mark{width:26px;height:26px;border-radius:8px}
.gate-brand .brand-mark .bm-dot{width:9px;height:9px}
.splash{background:#f7f8fa}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:16px}
.splash-mark{position:relative;display:block;width:118px;height:118px;border-radius:28px;
  background:linear-gradient(150deg,#fbeccb,#c8933a 62%,#a9791a);
  box-shadow:0 18px 48px rgba(169,121,26,.32),inset 0 2px 0 rgba(255,255,255,.6);
  animation:splashTile .85s cubic-bezier(.2,1.3,.35,1) both}
.splash-mark .bm-piece{position:absolute;inset:15%;background-position:center;background-size:contain;background-repeat:no-repeat;
  animation:splashPiece 1s cubic-bezier(.2,1.35,.35,1) both}
@keyframes splashTile{0%{transform:scale(.6) rotate(-8deg);opacity:0}60%{transform:scale(1.06) rotate(0);opacity:1}100%{transform:none}}
@keyframes splashPiece{0%{transform:translateY(-18px) scale(.85);opacity:0}55%{transform:translateY(0) scale(1.06);opacity:1}100%{transform:none}}
.splash-word{font-size:20px;font-weight:800;color:var(--text);animation:splashUp .7s .25s var(--ease) both}
.splash-word span{margin-left:9px;font-size:11px;letter-spacing:2px;color:var(--dim);font-weight:700}
@keyframes splashUp{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.splash-bar{width:150px;height:3px;border-radius:999px;background:var(--line);overflow:hidden;animation:splashUp .7s .35s var(--ease) both}
.splash-bar i{display:block;height:100%;width:42%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--accent));animation:splashBar 1.1s ease-in-out infinite}
@keyframes splashBar{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
/* 商店卡片：新棋子 + 代币 */
.shop-tile{position:relative;display:block;width:48px;height:48px;border-radius:14px;
  background:linear-gradient(150deg,#f9e6b8,#c8933a 62%,#a9791a);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.shop-tile .bm-shop-piece{position:absolute;inset:12%;background-position:center;background-size:contain;background-repeat:no-repeat}
.shop-coin{position:absolute;left:35px;top:33px;width:14px;height:14px;border-radius:50%;
  background:linear-gradient(160deg,#ffe9a8,#d9a94f);border:2px solid #fff;box-shadow:0 1px 4px rgba(16,24,40,.3)}
.hcard:hover .shop-coin{animation:coinFlip .9s ease-in-out infinite}
@keyframes coinFlip{0%,100%{transform:none}50%{transform:translateY(-3px) scale(1.08)}}

/* 商店：皮肤包预览用新棋子素材（尺寸与立体投影） */
.skin-pc-new{display:block;width:46px;height:46px;background-position:center;background-size:contain;background-repeat:no-repeat;
  filter:drop-shadow(0 2px 2px rgba(16,24,40,.28))}
.shop-item:hover .skin-pc-new{animation:skinPop .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes skinPop{0%{transform:scale(1)}55%{transform:scale(1.1)}100%{transform:scale(1)}}



/* ==================================================================
   棋盘皮肤（一套变量同时作用于棋盘与商店预览）
   ================================================================== */
.board-wood{--light:#f0d9b5;--dark:#b58863}
.board-sea{--light:#eef9ff;--dark:#5aa8de;background:linear-gradient(160deg,#f7fdff,#dcefff)}
.board-night{--light:#cdd6e6;--dark:#39496b;background:linear-gradient(160deg,#e7ecf6,#c3cde0)}
/* 海浪纹：在深色格上加流动的斜纹 */
.board.board-sea,.board-prev.board-sea{position:relative;overflow:hidden}
.board.board-sea::after,.board-prev.board-sea::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.5;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.22) 0 12px,rgba(255,255,255,0) 12px 40px);
  animation:seaWave 8s linear infinite}
@keyframes seaWave{from{background-position:0 0}to{background-position:200px 100px}}
/* 商店预览 */
.ball-prev{display:block;width:46px;height:46px;border-radius:50%;background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.board-prev{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);width:48px;height:48px;
  border-radius:8px;overflow:hidden;border:1px solid var(--line2)}
.board-prev i{display:block;background:var(--light)}
.board-prev i:nth-child(odd){background:var(--dark)}
.shop-item .board-prev{box-shadow:0 2px 5px rgba(16,24,40,.18)}

/* ==================================================================
   棋盘皮肤（每款都有专属小特效，不再只是换色）
   ================================================================== */
.board.board-wood,.board-prev.board-wood{
  --light:#f3e2c4;--dark:#ab7748;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#f9edd6,#e6cca6)}
.board.board-wood::after,.board-prev.board-wood::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.34;mix-blend-mode:multiply;
  background:
    repeating-linear-gradient(94deg,rgba(120,72,36,.22) 0 2px,rgba(120,72,36,0) 2px 8px),
    repeating-linear-gradient(88deg,rgba(150,100,60,.14) 0 1px,rgba(0,0,0,0) 1px 26px),
    radial-gradient(130% 90% at 18% 0%,rgba(255,214,150,.4),rgba(0,0,0,0) 62%);
  animation:woodShift 12s ease-in-out infinite alternate}
@keyframes woodShift{from{transform:translateX(0)}to{transform:translateX(7px)}}
.board.board-night,.board-prev.board-night{
  --light:#dbe4f7;--dark:#54679c;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#2b3a5e,#3a4f7e)}
.board.board-night::after,.board-prev.board-night::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:6;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 16%,rgba(255,255,255,.95),transparent),
    radial-gradient(1.3px 1.3px at 66% 8%,rgba(255,255,255,.85),transparent),
    radial-gradient(1.5px 1.5px at 84% 34%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.2px 1.2px at 34% 46%,rgba(255,255,255,.75),transparent),
    radial-gradient(1.7px 1.7px at 52% 72%,rgba(255,255,255,.9),transparent),
    radial-gradient(1.3px 1.3px at 22% 84%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.2px 1.2px at 76% 88%,rgba(255,255,255,.7),transparent),
    radial-gradient(140% 100% at 80% 6%,rgba(140,180,255,.22),rgba(0,0,0,0) 60%);
  animation:starTwinkle 3.8s ease-in-out infinite}
@keyframes starTwinkle{0%,100%{opacity:.5}50%{opacity:1}}
.board.board-jade,.board-prev.board-jade{
  --light:#e6f6ec;--dark:#3f8f66;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#f2fbf5,#cdebdb)}
.board.board-jade::after,.board-prev.board-jade::after{
  content:'';position:absolute;inset:-40%;pointer-events:none;z-index:6;mix-blend-mode:screen;
  background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 62%);
  animation:jadeShine 5.5s ease-in-out infinite}
@keyframes jadeShine{0%{transform:translate(-38%,-38%)}55%{transform:translate(38%,38%)}100%{transform:translate(38%,38%)}}
.board.board-neon,.board-prev.board-neon{
  --light:#eef1ff;--dark:#6675e0;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#dfe4ff,#c3cbf7)}
.board.board-neon .sq,.board-prev.board-neon i{box-shadow:inset 0 0 0 1px rgba(90,220,255,.16)}
.board.board-neon::after,.board-prev.board-neon::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:6;
  background:
    repeating-linear-gradient(0deg,rgba(90,220,255,.14) 0 1px,rgba(0,0,0,0) 1px 25%),
    repeating-linear-gradient(90deg,rgba(255,80,200,.12) 0 1px,rgba(0,0,0,0) 1px 25%);
  animation:neonPulse 2.8s ease-in-out infinite}
@keyframes neonPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ==================================================================
   通行证（Battle Pass）：商店横幅 + 全屏界面 + 50 档奖励轨道
   ================================================================== */
.pass-banner{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:10px 14px;border-radius:var(--r);
  background:linear-gradient(120deg,#fff7e2,#f7e5b8);border:1px solid #e8d29a}
.pb-ic{position:relative;width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(150deg,#f9e6b8,#c8933a 60%,#a9791a)}
.pb-ic::after{content:'';position:absolute;inset:24%;background:#fff;opacity:.92;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.pb-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pb-txt b{font-size:14px}
.pb-txt span{font-size:11.5px;color:var(--muted)}
.pb-bar{flex:1;min-width:60px;height:6px;border-radius:999px;background:#e9dcb6;overflow:hidden}
.pb-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--accent));transition:width .3s}
.pb-lv{font-size:12px;font-weight:800;color:var(--gold);white-space:nowrap}
.pass-view{position:fixed;inset:0;z-index:9200;overflow:auto;background:var(--bg);padding:20px}
.pass-inner{max-width:1100px;margin:0 auto}
.pass-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pass-title h2{font-size:20px;font-weight:800}
.pass-title p{margin-top:2px;font-size:12px;color:var(--muted)}
.pass-buy{margin-left:auto}
.pass-owned{font-size:12.5px;font-weight:700;color:var(--accent)}
.pass-progress{margin-bottom:14px;padding:14px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.pp-top{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;margin-bottom:8px}
.pp-bar{height:10px;border-radius:999px;background:var(--panel3);overflow:hidden}
.pp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--accent));transition:width .35s}
.pp-actions{margin-top:8px;font-size:12px;color:var(--muted)}
.pass-track-wrap{overflow-x:auto;padding-bottom:8px}
.pass-track{display:flex;gap:10px;min-width:max-content}
.pass-cell{flex:0 0 134px;padding:10px;border-radius:12px;text-align:center;background:#fff;border:1px solid var(--line);
  transition:transform .15s,border-color .15s,box-shadow .2s}
.pass-cell .pc-lv{font-size:10.5px;font-weight:800;color:var(--dim)}
.pass-cell .pc-ic{display:grid;place-items:center;height:52px;margin:6px 0}
.pass-cell .pc-label{min-height:32px;font-size:11.5px;color:var(--text-2);line-height:1.4}
.pass-cell .pc-state{margin-top:6px;font-size:11px;font-weight:700;color:var(--muted)}
.pass-cell.locked{opacity:.55}
.pass-cell.ready{border-color:var(--accent);cursor:pointer;animation:pcReady 1.7s ease-in-out infinite}
.pass-cell.ready .pc-state{color:var(--accent)}
.pass-cell.ready:hover{transform:translateY(-3px)}
@keyframes pcReady{0%,100%{box-shadow:0 6px 18px rgba(95,143,54,.14)}50%{box-shadow:0 9px 26px rgba(95,143,54,.34)}}
.pass-cell.claimed{border-color:var(--line2);background:var(--panel2)}
.pass-cell.claimed .pc-state{color:var(--dim)}
.pi-coin{width:22px;height:22px;border-radius:50%;border:2px solid #fff;
  background:linear-gradient(160deg,#ffe9a8,#d9a94f);box-shadow:0 2px 5px rgba(16,24,40,.25)}
.pi-pc{width:40px;height:40px;background-position:center;background-size:contain;background-repeat:no-repeat}
.pi-title{padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;color:var(--gold);
  background:var(--gold-soft);border:1px solid rgba(169,121,26,.3)}
.pi-bub{width:32px;height:21px;border-radius:11px 11px 11px 3px;border:1px solid #9fb2e0;
  background:linear-gradient(120deg,#e6ecff,#bcccf7)}
.board-prev.mini{width:44px;height:44px}
.pass-cos{margin-top:18px;padding:14px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.cos-title{margin-bottom:6px;font-size:11.5px;font-weight:800;color:var(--dim)}
.cos-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cos-chip{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;
  border:1px solid var(--line2);background:var(--panel2)}
.cos-chip.on{color:var(--gold);background:var(--gold-soft);border-color:var(--gold)}
body.pass-open{overflow:hidden}
/* 聊天里的头衔与气泡（通行证专属外观） */
.chat-msg .msg-title{padding:1px 6px;border-radius:999px;font-size:10px;font-weight:800;color:var(--gold);
  background:var(--gold-soft);border:1px solid rgba(169,121,26,.28);margin-left:5px}
.chat-msg.bub-gold .txt{background:rgba(217,169,79,.14);border-color:rgba(217,169,79,.4)}
.chat-msg.bub-jade .txt{background:rgba(95,143,54,.13);border-color:rgba(95,143,54,.38)}
.chat-msg.bub-neon .txt{background:rgba(120,110,255,.14);border-color:rgba(120,110,255,.4)}

/* 休闲小游戏面板 */
.vr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.vr-tag{padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;color:#fff;background:var(--gold)}
.vr-score{font-size:12px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.vr-title{font-size:16px;font-weight:800;margin-bottom:4px}
.vr-desc{margin-bottom:8px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.vr-state{margin-bottom:10px;padding:9px 11px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);text-align:center}
.vr-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.vr-bench{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}

/* 休闲模式的选项条（比标准模式多，允许换行） */
.seg-casual{flex-wrap:wrap;gap:6px}
.seg-casual button{flex:0 1 auto;padding:6px 10px;font-size:12px}