/* =====================================================================
   水墨象棋 · 宣纸主题（Ink Theme）
   ---------------------------------------------------------------------
   视觉基准：SCPZ24/ink-chess（MIT）的「宣纸 + 木纹棋枰 + 朱砂 + 书法字」
   布局基准：三栏（对弈信息 / 棋盘 / 棋谱），桌面三栏 · 移动单栏
   交互基准：xiangqiground（GPL-3.0，仅借鉴思路未复制代码）的拖拽/动画/预移动

   设计约定：
   · 类名与旧版 app.css 完全一致 → ink.js 只换几何，不改变 DOM 契约
   · 全部零图片：宣纸纹理 / 木纹棋枰 / 棋子立体感均为纯 CSS 或内联 SVG
   · 明暗双主题：html[data-theme="ink"]（宣纸）/ html[data-theme="ink-dark"]（墨夜）
   ⚠️ 本文件不覆盖旧 app.css 的路径；旧路径保持原样以兼容被缓存的老页面。
   ===================================================================== */

/* ---------- 字体：马善政毛笔楷书（OFL，已子集化 5.86MB → 245KB） ----------
   ⚠️ 必须走 font.php：IIS 8.5 未配置 .woff2 MIME，静态访问该文件直接 404
      （@font-face 只会 status=error 并静默回退到宋体，页面不报错，极难发现）。 */
@font-face{
  font-family:MaShan;
  src:url("../font.php?f=MaShanZheng-subset.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ===================== 主题变量 ===================== */
:root{
  --font-brush:MaShan,"STKaiti","KaiTi","Songti SC","SimSun",serif;
  --font-serif:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
  --font-ui:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[data-theme="ink"]{
  --paper:#f4efe5; --paper-2:#faf6ec; --paper-3:#ece4d4;
  --ink:#33362e; --ink-2:#5f6151; --muted:#8b8b7a; --faint:#a9a191;
  --rule:#d9cfbd; --rule-2:#c6ba9f;
  --wood-line:#735f42; --wood-num:#927952; --wood-river:#75603f;
  --red:#a13e32; --red-2:#963b30; --red-3:#c05a49;
  --green:#5b785c;
  --disc:#fdf5e0; --disc-ring-r:#a8493a; --disc-ring-b:#6f6a58;
  --glyph-r:#9a3226; --glyph-b:#2e332c;
  --soft:rgba(99,85,59,.08);
  --shadow:0 10px 26px rgba(99,85,59,.13);
  --shadow-sm:0 3px 10px rgba(99,85,59,.10);
  --veil:rgba(58,50,36,.42);
}
html[data-theme="ink-dark"]{
  --paper:#16130f; --paper-2:#1e1a14; --paper-3:#251f18;
  --ink:#e9e0cb; --ink-2:#c3b79c; --muted:#8e8674; --faint:#6b6455;
  --rule:#3b3327; --rule-2:#544733;
  --wood-line:#9c8258; --wood-num:#9c8258; --wood-river:#a98d5e;
  --red:#d9705f; --red-2:#b4503f; --red-3:#e08b78;
  --green:#87a686;
  --disc:#2c2419; --disc-ring-r:#8a4b3d; --disc-ring-b:#7a7460;
  --glyph-r:#e0867a; --glyph-b:#d8cfb6;
  --soft:rgba(255,240,205,.05);
  --shadow:0 12px 30px rgba(0,0,0,.45);
  --shadow-sm:0 3px 10px rgba(0,0,0,.35);
  --veil:rgba(0,0,0,.62);
}

/* ===================== 基础 ===================== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  color:var(--ink);
  font-family:var(--font-serif);
  min-height:100vh;overscroll-behavior:none;-webkit-font-smoothing:antialiased;
  background:var(--paper);
}
/* 宣纸纹理：径向微光 + 斜向纤维纹（纯 CSS，无图片） */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 14% 34%,rgba(197,185,146,.13),transparent 60%),
    radial-gradient(ellipse 60% 50% at 88% 78%,rgba(170,142,102,.10),transparent 62%),
    repeating-linear-gradient(4deg,rgba(170,142,102,.035) 0 1px,transparent 1px 5px);
}
html[data-theme="ink-dark"] body::before{
  background:
    radial-gradient(ellipse 70% 55% at 14% 30%,rgba(255,228,170,.045),transparent 60%),
    radial-gradient(ellipse 60% 50% at 88% 80%,rgba(255,228,170,.03),transparent 62%),
    repeating-linear-gradient(4deg,rgba(255,228,170,.016) 0 1px,transparent 1px 5px);
}
.hide{display:none !important;}
.view{display:none;}
.view.active{display:block;}
h1,h2,h3,p,ul{margin:0;}
ul{padding-left:1.15em;}

/* ===================== 顶栏（款识 + 印章） ===================== */
.masthead{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 22px;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0;cursor:default;}
.seal{
  flex:0 0 auto;width:42px;height:46px;display:grid;place-items:center;
  font-family:var(--font-brush);font-size:32px;line-height:1;
  background:#983f32;color:#fff5e2;border-radius:3px;
  box-shadow:inset 0 0 0 3px #a9594c,inset 0 0 0 4px #eedccc;
  transform:rotate(-3deg);
}
.brand-txt{display:flex;flex-direction:column;min-width:0;}
.brand h1{
  font-family:var(--font-brush);font-size:31px;font-weight:400;line-height:1.05;
  letter-spacing:5px;color:var(--ink);white-space:nowrap;
}
.brand small{
  color:var(--muted);font-family:var(--font-ui);font-size:10px;letter-spacing:1.6px;
  margin-top:2px;white-space:nowrap;
}
.top-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto;}
.mode-tag{
  font-size:11.5px;color:var(--muted);letter-spacing:3px;padding-left:13px;
  border-left:1px solid var(--rule-2);
}
.me-box{display:flex;align-items:center;gap:7px;}
.me-face{
  flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-brush);color:var(--glyph-r) !important;
  background:var(--disc) !important;
  border:1.5px solid var(--red);
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.10);font-weight:400;
}
.nick-input{
  width:112px;background:var(--paper-2);border:1px solid var(--rule);color:var(--ink);
  border-radius:3px;padding:7px 10px;font-size:13px;font-family:var(--font-ui);
  outline:none;transition:border-color .16s,box-shadow .16s;
}
.nick-input::placeholder{color:var(--faint);}
.nick-input:focus{border-color:var(--red-3);box-shadow:0 0 0 3px rgba(161,62,50,.10);}
.icon-button{
  border:1px solid var(--rule);background:var(--paper-2);color:var(--ink-2);
  width:34px;height:34px;border-radius:3px;cursor:pointer;font-size:15px;line-height:1;
  display:grid;place-items:center;transition:border-color .16s,background .16s;
}
.icon-button:hover{border-color:var(--red-3);background:var(--paper-3);}

/* ===================== 按钮 ===================== */
.btn{
  border:1px solid var(--rule);border-radius:3px;cursor:pointer;
  font-family:var(--font-serif);font-size:13.5px;font-weight:400;
  padding:9px 15px;background:var(--paper-2);color:var(--ink-2);
  transition:background .16s,border-color .16s,color .16s,transform .07s;
}
.btn:hover:not([disabled]){background:var(--paper-3);border-color:var(--rule-2);}
.btn:active{transform:translateY(1px);}
.btn-main{width:100%;padding:14px;font-size:16px;letter-spacing:5px;font-family:var(--font-brush);}
.btn-gold{
  background:var(--red-2);border-color:var(--red-2);color:#fff7e4;
  box-shadow:0 3px 10px rgba(105,62,40,.18);
}
.btn-gold:hover:not([disabled]){background:#7e3028;border-color:#7e3028;color:#fff;}
.btn-ghost{background:transparent;}
.btn-mini{padding:6px 12px;font-size:12px;}
.btn-danger{color:var(--red);border-color:var(--rule-2);}
.btn-danger:hover:not([disabled]){background:rgba(161,62,50,.07);border-color:var(--red);color:var(--red-2);}
.btn[disabled]{opacity:.38;cursor:not-allowed;}

/* ===================== 大厅 ===================== */
.hall-wrap{max-width:720px;margin:0 auto;padding:22px 20px 56px;display:flex;flex-direction:column;gap:15px;}
.hero{
  position:relative;overflow:hidden;border-radius:4px;padding:26px 24px 22px;
  background:var(--paper-2);border:1px solid var(--rule);box-shadow:var(--shadow);
}
.hero::before{
  content:"";position:absolute;inset:12px;border:1px solid var(--soft);border-radius:2px;
  pointer-events:none;
}
.hero .hero-eyebrow{
  font-family:var(--font-ui);font-size:10px;letter-spacing:3px;color:var(--faint);
  margin:0 0 10px;
}
.hero h2{
  font-family:var(--font-brush);font-size:29px;font-weight:400;letter-spacing:6px;
  color:var(--ink);margin:0 0 12px;position:relative;
}
.hero p{margin:0 0 16px;font-size:13.5px;color:var(--ink-2);line-height:2;position:relative;}
.hero p b{color:var(--red-2);font-weight:400;border-bottom:1px solid var(--rule-2);}
.mystat{display:flex;gap:9px;margin-top:15px;position:relative;}
.mystat span{
  flex:1;text-align:center;background:var(--paper);border:1px solid var(--rule);
  border-radius:3px;padding:10px 4px;font-size:11.5px;color:var(--muted);letter-spacing:1px;
}
.mystat span b{
  display:block;font-family:var(--font-brush);font-size:23px;font-weight:400;
  margin-bottom:3px;color:var(--red-2);line-height:1.1;
}
.panel{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:4px;
  padding:18px;box-shadow:var(--shadow-sm);
}
.panel-title{
  margin:0 0 12px;font-family:var(--font-serif);font-size:14px;font-weight:400;
  color:var(--ink);display:flex;align-items:center;gap:9px;letter-spacing:3px;
  padding-bottom:9px;border-bottom:1px solid var(--soft);
}
.panel-title .dot-live{
  width:6px;height:6px;border-radius:50%;background:var(--red);flex:0 0 auto;
  animation:breath 1.8s ease-in-out infinite;
}
@keyframes breath{0%,100%{opacity:1;}50%{opacity:.25;}}
.panel-desc{margin:0 0 12px;font-size:12.5px;color:var(--muted);line-height:1.95;}
.row-gap{height:10px;}
.split{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.join-row{display:flex;gap:7px;flex:1;min-width:190px;}
.code-input{
  flex:1;min-width:0;background:var(--paper);border:1px solid var(--rule);color:var(--ink);
  border-radius:3px;padding:10px 12px;font-size:15px;outline:none;letter-spacing:4px;
  font-family:var(--font-ui);text-align:center;transition:border-color .16s,box-shadow .16s;
}
.code-input::placeholder{color:var(--faint);letter-spacing:1px;}
.code-input:focus{border-color:var(--red-3);box-shadow:0 0 0 3px rgba(161,62,50,.10);}
.room-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px;
  max-height:264px;overflow:auto;}
.room-list li{
  display:flex;align-items:center;justify-content:space-between;gap:9px;
  background:var(--paper);border:1px solid var(--rule);border-radius:3px;
  padding:11px 13px;font-size:13px;transition:border-color .16s,transform .12s;
}
.room-list li:hover{border-color:var(--rule-2);transform:translateX(3px);}
.room-list li.empty{justify-content:center;color:var(--faint);border-style:dashed;font-size:12.5px;}
.room-list li.empty:hover{transform:none;border-color:var(--rule);}
.r-left{display:flex;align-items:center;gap:10px;min-width:0;}
.r-face{
  flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-brush);color:var(--glyph-r) !important;
  background:var(--disc) !important;border:1.5px solid var(--red);
}
.r-host{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.r-meta{display:block;color:var(--muted);font-size:11px;margin-top:2px;font-family:var(--font-ui);}
.r-join{
  border:1px solid var(--red-2);background:transparent;color:var(--red-2);
  border-radius:3px;padding:6px 14px;font-size:12.5px;cursor:pointer;flex:0 0 auto;
  font-family:var(--font-serif);transition:background .16s,color .16s;
}
.r-join:hover{background:var(--red-2);color:#fff7e4;}
.rules{margin:0;padding-left:1.2em;color:var(--ink-2);font-size:13px;line-height:2.1;}
.rules li{margin-bottom:3px;}
.rules b{color:var(--red-2);font-weight:400;}

/* ===================== 对局：三栏 ===================== */
.game-grid{
  /* 整栏宽度随视口高度伸缩：让棋盘「刚好铺满可用的竖向空间」，
     既不会把棋盘挤到需要滚动，也不会在宽屏上留下一大片空白。
     656px = 左右栏(272+284) + 栏间距(28×2)。 */
  display:grid;
  grid-template-columns:272px minmax(300px,1fr) 284px;
  gap:24px 28px;align-items:start;
  max-width:min(1340px,calc((100vh - 200px) * 620 / 684 + 656px));
  margin:0 auto;padding:20px 22px 34px;
}
.col-left{display:flex;flex-direction:column;gap:11px;min-width:0;}
.col-center{display:flex;flex-direction:column;gap:9px;min-width:0;}
.col-right{display:flex;flex-direction:column;gap:12px;min-width:0;}
.col-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding-bottom:8px;border-bottom:1px solid var(--rule);
}
.col-head .eyebrow{font-family:var(--font-ui);font-size:10px;letter-spacing:3px;color:var(--faint);}
.col-head b{font-family:var(--font-brush);font-size:16px;font-weight:400;letter-spacing:1px;color:var(--ink-2);}
.records-title{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding-bottom:8px;border-bottom:1px solid var(--rule);
}
.records-title h2{font-family:var(--font-brush);font-size:21px;font-weight:400;letter-spacing:4px;}
.rec-count{font-family:var(--font-ui);font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;}

/* ---- 弈者卡片 ---- */
.playerbar{
  position:relative;display:flex;align-items:center;gap:10px;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;
  padding:10px 12px 10px 15px;transition:border-color .3s,box-shadow .3s;
}
.playerbar::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;
  background:var(--rule-2);transition:background .3s;
}
#barTop::before{background:var(--glyph-b);}
#barBottom::before{background:var(--red);}
.playerbar.active-turn{border-color:var(--red-3);box-shadow:0 0 0 1px rgba(161,62,50,.16),0 3px 14px rgba(161,62,50,.12);}
.playerbar.in-check{border-color:var(--red);animation:checkPulse 1.05s ease-in-out infinite;}
@keyframes checkPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(161,62,50,.20),0 3px 12px rgba(161,62,50,.10);}
  50%{box-shadow:0 0 0 2px rgba(161,62,50,.55),0 3px 20px rgba(161,62,50,.28);}
}
.avatar{
  flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-brush);border:1.5px solid var(--rule-2);
  background:var(--disc) !important;box-shadow:inset 0 -2px 4px rgba(0,0,0,.10);
}
.avatar-r{color:var(--glyph-r) !important;}
.avatar-b{color:var(--glyph-b) !important;}
.pinfo{flex:1;min-width:0;}
.pname{
  display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink);
}
.pmsg{
  display:block;font-size:11.5px;color:var(--muted);font-style:normal;height:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-ui);
}
.pmsg.warn{color:var(--red-2);}
.pmsg.good{color:var(--green);}
.pclock{
  flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--rule);border-radius:3px;
  padding:6px 10px;min-width:66px;text-align:center;font-family:var(--font-serif);
}
.pclock.low{color:var(--red-2);border-color:var(--red);}
.ptag{
  flex:0 0 auto;font-size:10.5px;color:var(--red-2);border:1px solid var(--rule-2);
  border-radius:2px;padding:2px 6px;letter-spacing:1px;
}
.captured{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px;min-height:14px;}
.captured span{
  font-size:10.5px;color:var(--muted);background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;padding:0 4px;line-height:15px;
}
.captured span.r{color:var(--red-3);}
.captured span.b{color:var(--ink-2);}
.turn-line{
  display:flex;align-items:center;gap:8px;padding:2px 3px;
  font-size:12px;color:var(--muted);letter-spacing:1.5px;
}
.turn-line::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 3px rgba(161,62,50,.12);flex:0 0 auto;
}

/* ---- 棋盘（SVG 木纹棋枰） ---- */
.board-outer{width:100%;max-width:100%;margin:0 auto;}
.board{position:relative;width:100%;border-radius:4px;}
.board svg{display:block;width:100%;height:auto;}
.board-inner{position:relative;line-height:0;}
/* 棋子层与网格区像素级重合：
   SVG viewBox 620×684，棋枰四周留白 54 → 网格区 512×576
   left/right 以「宽度」为基准（54/620=8.7097%），top/bottom 以「高度」为基准（54/684=7.8947%） */
.board-layer{
  position:absolute;left:8.7097%;right:8.7097%;top:7.8947%;bottom:7.8947%;
  pointer-events:none;
}
/* SVG 棋枰：木纹底 + 内框 + 网格 + 楚河汉界 + 路数 */
.bd-outer{fill:url(#bdWood);stroke:#bda47b;stroke-width:1;}
.bd-inner{fill:none;stroke:#bba584;stroke-width:.8;}
.bd-lines{fill:none;stroke:var(--wood-line);stroke-width:1.2;stroke-linecap:round;}
.bd-marks{fill:none;stroke:var(--wood-line);stroke-width:1.1;stroke-linecap:round;opacity:.85;}
.bd-river text{
  text-anchor:middle;fill:var(--wood-river);font-family:var(--font-brush);
  font-size:33px;letter-spacing:6px;
}
.bd-num text{
  text-anchor:middle;fill:var(--wood-num);font-family:var(--font-serif);font-size:10px;
}
html[data-theme="ink"] .bd-outer{stroke:#bda47b;}
html[data-theme="ink-dark"] .bd-outer{fill:url(#bdWoodDark);stroke:#4b3d2b;}

/* ---- 棋子（宣纸木片：外圈 + 内圈 + 书法字，纯 CSS 立体感） ---- */
.piece{
  position:absolute;width:11.111%;height:10%;transform:translate(-50%,-50%);
  display:grid;place-items:center;pointer-events:auto;touch-action:none;z-index:3;
  font-family:var(--font-brush);font-weight:400;line-height:1;
  font-size:clamp(13px,calc(var(--bw,40vw) * .075),48px);
  transition:transform .16s cubic-bezier(.2,1.3,.4,1),filter .2s;
  user-select:none;-webkit-user-select:none;
}
.piece i{
  position:absolute;inset:7.5%;border-radius:50%;
  display:grid;place-items:center;font-style:normal;
  background:radial-gradient(circle at 36% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 62%),var(--disc);
  box-shadow:0 2px 4px rgba(73,52,34,.20),inset 0 -2px 4px rgba(120,92,58,.16);
}
html[data-theme="ink-dark"] .piece i{
  background:radial-gradient(circle at 36% 28%,rgba(255,235,190,.10),rgba(255,255,255,0) 62%),var(--disc);
  box-shadow:0 2px 5px rgba(0,0,0,.5),inset 0 -2px 4px rgba(0,0,0,.35);
}
/* 内圈细线（对应 ink 的 r=21.5 细描边）——压低存在感，避免与字抢视觉 */
.piece i::after{
  content:"";position:absolute;inset:5.5%;border-radius:50%;
  border:1px solid var(--disc-ring-b);opacity:.5;pointer-events:none;
}
.piece.r i{border:1.5px solid var(--disc-ring-r);color:var(--glyph-r);}
.piece.b i{border:1.5px solid var(--disc-ring-b);color:var(--glyph-b);}
.piece.r i::after{border-color:var(--disc-ring-r);opacity:.75;}
/* 选中环：对应 ink 的 r=29 朱砂圈 */
.piece::after{
  content:"";position:absolute;inset:1.5%;border-radius:50%;
  border:2.5px solid transparent;pointer-events:none;transition:border-color .14s;
}
.piece.mine{cursor:pointer;}
.piece:hover{transform:translate(-50%,-50%) scale(1.05);}
.piece:hover::after{border-color:var(--rule-2);}
.piece.sel{transform:translate(-50%,-50%) scale(1.07);z-index:8;}
.piece.sel::after{border-color:var(--red);}
.piece.dead{opacity:.28;filter:grayscale(1);}
.piece.enter{animation:pieceIn .26s cubic-bezier(.2,1.4,.4,1);}
@keyframes pieceIn{
  0%{transform:translate(-50%,-50%) scale(.5);opacity:.15;}
  62%{transform:translate(-50%,-50%) scale(1.09);opacity:1;}
  100%{transform:translate(-50%,-50%) scale(1);}
}
.piece.captured{animation:capturedOut .3s ease-in forwards;pointer-events:none;}
@keyframes capturedOut{to{transform:translate(-50%,-50%) scale(.22) rotate(26deg);opacity:0;}}
.piece.checkme::after{
  border-color:var(--red);border-width:3px;
  animation:kingCheck .9s ease-in-out infinite;
}
@keyframes kingCheck{
  0%,100%{box-shadow:0 0 0 0 rgba(161,62,50,.35);}
  50%{box-shadow:0 0 0 7px rgba(161,62,50,.14);}
}

/* ---- 上一步标记 / 可走点（取 ink 的绿点 + 环） ---- */
.mk{
  position:absolute;width:11%;height:9.8%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;z-index:5;
  background:rgba(173,73,60,.10);
}
.mk.from{border:1.5px dashed #ae6550;}
.mk.to{border:1.5px solid #ad493c;animation:toMark 1.8s ease-in-out infinite;}
@keyframes toMark{0%,100%{opacity:.95;}50%{opacity:.35;}}
.dot{
  position:absolute;width:2.8%;height:2.5%;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--green);opacity:.75;cursor:pointer;pointer-events:auto;
  z-index:6;transition:transform .12s,opacity .12s;
}
.dot:hover{transform:translate(-50%,-50%) scale(1.5);opacity:1;}
.dot.cap{
  width:11%;height:9.8%;background:transparent;opacity:1;
  border:2.5px solid var(--green);
}
.bubble{
  position:absolute;z-index:9;pointer-events:none;font-size:10.5px;white-space:nowrap;
  font-family:var(--font-ui);
  background:var(--red-2);color:#fff7e4;border-radius:2px;padding:2px 7px;
  transform:translate(-50%,-160%);box-shadow:0 3px 10px rgba(73,52,34,.28);
  animation:bubbleIn .3s cubic-bezier(.2,1.4,.4,1);
}
@keyframes bubbleIn{from{transform:translate(-50%,-125%) scale(.6);opacity:0;}to{transform:translate(-50%,-160%) scale(1);opacity:1;}}
.board-caption,.board-foot{
  display:flex;justify-content:space-between;gap:10px;
  font-family:var(--font-ui);font-size:10.5px;color:var(--faint);letter-spacing:2.6px;
  padding:0 4px;
}
.board-foot{letter-spacing:.8px;color:var(--faint);}
.board-foot .sig{font-family:var(--font-brush);font-size:12px;letter-spacing:2px;}

/* ---- 操作区 ---- */
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.roomcode{
  margin-left:auto;font-size:11.5px;color:var(--muted);font-family:var(--font-ui);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;padding:6px 11px;
}
.roomcode b{color:var(--red-2);letter-spacing:2.5px;font-variant-numeric:tabular-nums;}

/* ===================== 页签（棋谱 / 聊天 / 战况） ===================== */
.bottom-tabs{background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;overflow:hidden;}
.tab-head{display:flex;border-bottom:1px solid var(--rule);background:var(--paper);}
.tab{
  flex:1;text-align:center;padding:10px 4px;font-size:12.5px;color:var(--muted);
  cursor:pointer;position:relative;letter-spacing:2px;
  transition:color .16s,background .16s;
}
.tab:hover{color:var(--ink-2);}
.tab.active{color:var(--red-2);background:rgba(161,62,50,.05);}
.tab.active::after{
  content:"";position:absolute;left:26%;right:26%;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--red-3),transparent);
}
.tab-body{padding:11px 13px;}
.log-list{max-height:230px;overflow:auto;font-size:12.5px;line-height:2.05;color:var(--ink-2);}
.log-list .lg{display:flex;gap:8px;}
.log-list .lg:nth-child(odd){background:var(--soft);}
.log-list .lg i{
  color:var(--faint);font-style:normal;min-width:26px;text-align:right;
  font-variant-numeric:tabular-nums;font-family:var(--font-ui);font-size:11.5px;
}
.log-list .lg b.r{color:var(--red-3);font-weight:400;}
.log-list .lg b.b{color:var(--ink-2);font-weight:400;}
.log-list .cur{color:var(--red-2);}
.chat-list{
  max-height:230px;overflow:auto;display:flex;flex-direction:column;gap:7px;
  font-size:12.5px;margin-bottom:10px;
}
.chat-list .c{max-width:84%;padding:7px 11px;border-radius:3px;line-height:1.7;word-break:break-word;font-family:var(--font-ui);}
.chat-list .c-other{align-self:flex-start;background:var(--paper);border:1px solid var(--rule);}
.chat-list .c-me{align-self:flex-end;background:var(--paper-3);border:1px solid var(--rule-2);}
.chat-send{display:flex;gap:7px;}
.chat-input{letter-spacing:0;text-align:left;font-size:13px;padding:8px 11px;}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;font-size:12.5px;}
.status-grid div{background:var(--paper);border:1px solid var(--rule);border-radius:3px;padding:10px 11px;}
.status-grid span{color:var(--muted);display:block;font-size:10.5px;margin-bottom:4px;letter-spacing:1px;font-family:var(--font-ui);}
.status-grid b{color:var(--red-2);font-size:15px;font-variant-numeric:tabular-nums;}

/* ===================== 结果 / 复盘 ===================== */
.mask{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:var(--veil);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  animation:maskIn .25s ease-out;
}
@keyframes maskIn{from{opacity:0;}to{opacity:1;}}
.result-card{
  width:100%;max-width:350px;border-radius:4px;padding:28px 22px 22px;text-align:center;
  background:var(--paper-2);border:1px solid var(--rule);box-shadow:0 22px 56px rgba(40,32,20,.36);
  animation:cardIn .34s cubic-bezier(.2,1.25,.4,1);position:relative;
}
.result-card::before{
  content:"";position:absolute;inset:10px;border:1px solid var(--soft);border-radius:2px;pointer-events:none;
}
@keyframes cardIn{from{transform:translateY(20px) scale(.95);opacity:0;}to{transform:none;opacity:1;}}
.result-title{
  font-family:var(--font-brush);font-size:33px;font-weight:400;letter-spacing:8px;
  color:var(--red-2);margin-bottom:10px;
}
.result-title.win{color:var(--red-2);}
.result-title.lose{color:var(--ink-2);}
.result-title.draw{color:var(--muted);}
.result-sub{font-size:12.5px;color:var(--muted);margin-bottom:20px;line-height:1.9;}
.result-btns{display:flex;flex-direction:column;gap:9px;}
.result-btns .row{display:flex;gap:9px;}
.result-btns .row .btn{flex:1;}

.replay-card{
  width:100%;max-width:460px;border-radius:4px;padding:18px;
  background:var(--paper-2);border:1px solid var(--rule);
  box-shadow:0 22px 56px rgba(40,32,20,.36);animation:cardIn .3s cubic-bezier(.2,1.25,.4,1);
}
.replay-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:11px;}
.replay-head b{font-family:var(--font-brush);font-size:17px;font-weight:400;letter-spacing:3px;color:var(--ink);}
.replay-step{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;font-family:var(--font-ui);}
.replay-board{position:relative;border-radius:4px;}
.replay-ctrl{display:flex;gap:8px;margin-top:13px;}
.replay-ctrl .btn{flex:1;}

/* ===================== Toast ===================== */
.toast{
  position:fixed;left:50%;bottom:38px;transform:translateX(-50%);z-index:300;
  background:var(--paper-2);border:1px solid var(--rule-2);color:var(--ink);
  border-radius:3px;padding:11px 22px;font-size:13.5px;letter-spacing:1px;
  box-shadow:0 14px 36px rgba(40,32,20,.30);
  animation:toastIn .26s cubic-bezier(.2,1.3,.4,1);max-width:86vw;text-align:center;
}
@keyframes toastIn{from{transform:translate(-50%,14px) scale(.95);opacity:0;}to{transform:translate(-50%,0) scale(1);opacity:1;}}
.toast.hide{display:none;}

/* ===================== 响应式 ===================== */
/* 棋盘受视口高度约束：始终保持整盘可见（桌面） */
@media (min-width:1000px){
  .board-outer{max-width:min(100%,calc((100vh - 200px) * 620 / 684));}
}
@media (max-width:1099px){
  .game-grid{grid-template-columns:232px minmax(280px,1fr) 244px;gap:20px 20px;padding:16px 16px 30px;
    max-width:min(1180px,calc((100vh - 190px) * 620 / 684 + 536px));}
}
/* 移动端：单栏，顺序「回合 → 对手 → 行棋方 → 棋盘 → 我 → 操作 → 棋谱」
   ⚠️ 三个 .col-* 用 display:contents 拆开容器后，它们自身不再是盒子，
      给容器设的 order 会失效 —— 必须逐个下发给真正成为网格项的子元素。 */
@media (max-width:899px){
  .game-grid{grid-template-columns:1fr;gap:12px;padding:12px 12px 28px;max-width:100%;}
  .col-left,.col-center,.col-right{display:contents;}

  .col-head{order:0;}
  #barTop{order:1;}
  .turn-line{order:2;}
  .board-caption{order:3;}
  .board-outer{order:4;}
  .board-foot{order:5;}
  #barBottom{order:6;}
  .actions{order:7;}
  .records-title{order:8;}
  .bottom-tabs{order:9;}

  /* 顶栏：窄屏允许换行，避免标题被挤成竖排单字 */
  .masthead{flex-wrap:wrap;padding:9px 12px;gap:8px;}
  .brand{flex:1 1 auto;}
  .top-actions{flex:0 1 auto;}
  .hall-wrap{padding:16px 13px 40px;}
  .hero{padding:20px 17px 18px;}
  .hero h2{font-size:24px;letter-spacing:4px;}
  .brand h1{font-size:24px;letter-spacing:3px;}
  .seal{width:34px;height:38px;font-size:26px;}
  .brand small,.mode-tag{display:none;}
  .nick-input{width:80px;}
  .icon-button{width:31px;height:31px;}
  .avatar{width:36px;height:36px;font-size:15px;}
  .pclock{font-size:13px;min-width:58px;padding:5px 8px;}
  .actions .btn{flex:1;text-align:center;}
  .roomcode{margin-left:0;width:100%;text-align:center;}
  .log-list,.chat-list{max-height:180px;}
  .result-title{font-size:28px;letter-spacing:6px;}
}
/* 旧内核兜底：不支持 display:contents 时退回「左栏整块 → 棋盘 → 右栏」的堆叠顺序 */
@supports not (display:contents){
  @media (max-width:899px){
    .col-left{display:flex;order:1;}
    .col-center{display:flex;order:2;}
    .col-right{display:flex;order:3;}
    .board-caption,.board-outer,.board-foot,.records-title,.bottom-tabs,#barTop,#barBottom,.turn-line,.actions,.col-head{order:0;}
  }
}
@media (max-width:380px){
  .brand h1{font-size:21px;}
  .hero h2{font-size:21px;}
  .result-title{font-size:25px;}
}
/* =====================================================================
   开局设置 · 双倒计时 · 声音开关（2026-10-05 新增）
   ---------------------------------------------------------------------
   追加在文件末尾（不动既有规则）→ 旧页面即使命中旧 CSS 也只会缺这几条
   新样式，不会错位；新页面则拿到完整效果。
   ===================================================================== */

/* ---------- 开局设置（难度 / 局时） ---------- */
.setup{
  position:relative;margin:0 0 15px;padding:12px 13px;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;
}
.setup-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap;}
.setup-row:last-of-type{margin-bottom:0;}
.setup-label{
  flex:0 0 auto;font-size:12px;color:var(--muted);letter-spacing:2px;
  font-family:var(--font-ui);min-width:52px;
}
/* 分段控件（与六爻页同款交互语言） */
.seg{
  display:flex;flex:1;min-width:0;border:1px solid var(--rule-2);border-radius:2px;
  overflow:hidden;background:var(--paper);
}
.seg button{
  flex:1;min-width:0;padding:7px 4px;border:0;background:transparent;cursor:pointer;
  font-size:12.5px;color:var(--ink-2);font-family:var(--font-ui);
  transition:background .16s ease,color .16s ease;white-space:nowrap;
}
.seg button + button{border-left:1px solid var(--rule);}
.seg button:hover{background:var(--soft);}
.seg button.on{background:var(--red);color:#fdf7ec;}
.setup-hint{
  margin:9px 0 0;font-size:11.5px;line-height:1.7;color:var(--muted);
  font-family:var(--font-ui);position:relative;
}
.setup-hint b{color:var(--red-2);font-weight:400;}

/* ---------- 每步读秒（对局页 · 行棋方提示旁） ---------- */
.step-clock{
  margin-left:auto;flex:0 0 auto;
  font-family:var(--font-serif);font-size:12px;font-variant-numeric:tabular-nums;
  color:var(--ink-2);background:var(--paper);border:1px solid var(--rule);
  border-radius:2px;padding:2px 8px;letter-spacing:.5px;
}
.step-clock.hide{display:none;}
/* 最后 10 秒：转朱砂 + 呼吸（提示"该出手了"） */
.step-clock.danger{
  color:#fdf7ec;background:var(--red);border-color:var(--red);
  animation:stepPulse 1s ease-in-out infinite;
}
@keyframes stepPulse{0%,100%{opacity:1;}50%{opacity:.62;}}

/* ---------- 时钟：运行中 / 告警 ---------- */
.pclock.run{
  color:var(--ink);border-color:var(--rule-2);
  box-shadow:inset 0 0 0 1px var(--soft);
}
.pclock.low{
  color:#fdf7ec;background:var(--red);border-color:var(--red);
  animation:stepPulse 1s ease-in-out infinite;
}
/* 双方剩余时间都是「倒计时」，数字必须等宽，否则每秒跳动时宽度抖动 */
.pclock{font-variant-numeric:tabular-nums;}

/* ---------- 声音开关按钮（激活态） ---------- */
#soundBtn.on{color:var(--red-2);border-color:var(--rule-2);}
#soundBtn.muted{opacity:.55;text-decoration:line-through;}

/* ---------- 战况：设置项占满整行 ---------- */
.status-grid .wide{grid-column:1 / -1;}
.status-grid .wide b{font-family:var(--font-ui);font-size:12.5px;}

@media (max-width:899px){
  .setup-row{gap:8px;}
  .setup-label{min-width:46px;font-size:11.5px;letter-spacing:1px;}
  .seg button{font-size:12px;padding:6px 3px;}
}
@media (max-width:380px){
  .setup{padding:10px;}
  .setup-label{width:100%;min-width:0;}
  .seg{flex:0 0 100%;}
}

/* 降低动效（无障碍 + 弱机省电） */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}