/* ============================================================
   游戏内界面
   ------------------------------------------------------------
   进了游戏就是独立 APP：没有入口站的顶栏和页脚。
   ============================================================ */

body.in-game .bg-layer{opacity:.5}

/* ---------- 游戏自己的顶栏 ---------- */
.game-bar{
  position:sticky;top:0;z-index:40;
  background:rgba(250,249,247,.92);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.game-bar-in{display:flex;align-items:center;gap:10px;height:56px}

.gb-back{
  display:flex;align-items:center;gap:5px;
  padding:7px 11px 7px 8px;border-radius:9px;
  font-size:12.5px;font-weight:700;color:var(--ink-3);
  transition:.15s;flex-shrink:0;
}
.gb-back:hover{background:var(--surface-3);color:var(--ink)}
.gb-back svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
@media(max-width:420px){.gb-back-txt{display:none}}

.gb-title-wrap{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.gb-title{font-size:15px;font-weight:800;letter-spacing:-.01em}
.gb-sub{font-size:10.5px;color:var(--ink-4)}

.gb-tools{display:flex;gap:3px;margin-left:auto;flex-wrap:wrap}
.gb-btn{
  display:flex;align-items:center;gap:4px;
  padding:6px 9px;border-radius:8px;
  font-size:11.5px;font-weight:600;color:var(--ink-3);
  transition:.15s;
}
.gb-btn:hover{background:var(--primary-soft);color:var(--primary-d)}
.gb-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.gb-btn.icon-only{padding:6px}
@media(max-width:560px){.gb-btn-txt{display:none}}

/* ============================================================
   棋类 APP 主页
   ============================================================ */
.chess-app{min-height:100dvh;display:flex;flex-direction:column}

.chess-bar{border-bottom:1px solid var(--line);background:var(--surface)}
.chess-bar-in{
  display:flex;align-items:center;justify-content:space-between;
  height:56px;
}
.chess-brand-name{font-size:16px;font-weight:800;letter-spacing:-.01em}
.chess-exit{
  padding:6px 14px;border-radius:9px;
  font-size:12.5px;font-weight:700;
  color:var(--ink-3);border:1px solid var(--line-2);
  transition:.15s;
}
.chess-exit:hover{background:var(--surface-3);color:var(--ink)}

.chess-main{flex:1;padding:22px 0 40px}
.chess-intro{
  font-size:13px;color:var(--ink-3);line-height:1.65;
  margin-bottom:18px;max-width:40ch;
}

.chess-grid{display:grid;gap:10px}
@media(min-width:700px){.chess-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.chess-tile{
  display:flex;flex-direction:column;gap:5px;
  padding:18px 18px 20px;
  border-radius:var(--r-l);
  background:var(--surface);
  border:1px solid var(--line);
  text-align:left;
  transition:transform .18s var(--ease-out),box-shadow .18s,border-color .18s;
}
.chess-tile:hover{
  transform:translateY(-2px);
  border-color:var(--line-2);
  box-shadow:var(--sh-2);
}
.chess-tile:active{transform:scale(.99)}
.ct-name{font-size:17px;font-weight:800;letter-spacing:-.01em}
.ct-desc{font-size:12.5px;color:var(--ink-3);line-height:1.6}

/* ============================================================
   胜率卡
   ============================================================ */


.wr-label{font-size:11px;color:var(--ink-4);font-weight:600}



/* ============================================================
   局内实时胜率条
   ============================================================ */
.winrate{
  display:flex;flex-direction:column;gap:6px;
  padding:12px 14px;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--line);
}
.winrate .wr-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.winrate .wr-label{font-size:11.5px;font-weight:700;color:var(--ink-3)}
.winrate .wr-value{
  font-size:20px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1;
}
.winrate .wr-value small{font-size:12px;font-weight:700;color:var(--ink-4);margin-left:1px}

.wr-track{
  height:9px;border-radius:99px;overflow:hidden;
  background:var(--surface-3);display:flex;
}
.wr-fill{height:100%;transition:width .45s var(--ease-out)}
.wr-fill.me{background:var(--mint)}
.wr-fill.opp{background:var(--line-2)}

.winrate .wr-note{font-size:11px;color:var(--ink-4);line-height:1.5}
.winrate .wr-legend{
  display:flex;align-items:center;gap:12px;
  font-size:10.5px;color:var(--ink-4);
}
.wr-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:4px;vertical-align:1px;
}
.wr-dot.me{background:var(--mint)}
.wr-dot.opp{background:var(--line-2)}

/* ============================================================
   棋类 App 主界面的三个小游戏卡
   ============================================================ */
.chess-tile{
  position:relative;
  display:flex;flex-direction:column;gap:5px;
  padding:16px 17px 18px;
  border-radius:var(--r-l);
  background:var(--surface);
  border:1px solid var(--line);
  text-align:left;
  transition:transform .18s var(--ease-out),box-shadow .18s,border-color .18s;
}
.chess-tile:hover{
  transform:translateY(-2px);
  border-color:var(--line-2);
  box-shadow:var(--sh-2);
}
.chess-tile:active{transform:scale(.99)}
.ct-name{font-size:17px;font-weight:800;letter-spacing:-.01em}
.ct-desc{font-size:12.5px;color:var(--ink-3);line-height:1.6}