/* 围达网样式表 —— 按《棋魂》剧中画面复刻：XP 蓝标题栏、卡其色面板、深蓝大厅、橙黄棋盘。 */

@font-face {
  font-family: "WeidaHupo";
  src: url(/fonts/qingke-subset.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "WeidaXingkai";
  /* 修改行楷按钮文案时，同步补齐这个子集的字形，避免混用回退字体。 */
  src: url(/fonts/mashanzheng-subset.woff2) format("woff2");
  font-display: swap;
}

:root {
  --song: "SimSun", "宋体", "NSimSun", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --hei: "SimHei", "黑体", "Heiti SC", "STHeiti", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  /* 要加粗的黑体：苹果的黑体-简没有粗体，跳过它 */
  --hei-b: "SimHei", "黑体", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --hupo: "STHupo", "华文琥珀", "WeidaHupo", "SimHei", sans-serif;
  /* 对局四键统一使用随站字库，避免各系统的本机行楷改变实际字形和粗细。 */
  --xingkai: "WeidaXingkai", "STXingkai", "华文行楷", "Xingkai SC", "STKaiti", "KaiTi", serif;
  --ui: Tahoma, "SimSun", "宋体", "Songti SC", sans-serif;
  --xp-dock-item: 186px; /* 左下角收着的小窗一条的宽度，正好放进状态栏最左边那一格 */

  --tan: #c9a96c;
  --tan-light: #dcc290;
  --tan-pale: #e9d9b3;
  --tan-dark: #8d6a36;
  --tan-line: #a3804a;
  --navy: #13318c;
  --navy-deep: #0d2468;
  --navy-btn: #1c3a6b;
  --blue-text: #1a39a3;
  --cream: #f6f4d8;
  --cream-2: #fcf8e0;
  --side: #eaf2fb;
  --side-line: #8fa9c9;
  --link: #0b33b5;
  --red: #c81e1e;
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 12px/1.5 var(--song);
  color: #111;
  background: #3a6ea5;
  overflow: hidden;
  -webkit-font-smoothing: auto;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--link); }
u { text-decoration: underline; }
[hidden] { display: none !important; }

/* —— 窗口 —— */
/* 铺满都写成 top/right/bottom/left：安卓自带浏览器、旧版微信的内核（Chrome 87 以下）不认 inset */
#desktop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.xp-main {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: var(--tan);
  border: 1px solid #0831d9;
  transform-origin: 0 0;
}
.xp-main.minimized { display: none; }

.titlebar, .xp-win-title {
  flex: none;
  display: flex; align-items: center;
  height: 26px;
  padding: 0 3px 0 5px;
  color: #fff;
  font: bold 13px/1 Tahoma, var(--hei);
  text-shadow: 1px 1px 0 #0b2a7a;
  background: linear-gradient(#0a5fe8 0%, #3d8ef8 7%, #2675f2 22%, #105fe8 55%, #0d58e0 85%, #0a4fd2 100%);
  border-bottom: 1px solid #0a3aa8;
  user-select: none;
}
.titlebar-icon { width: 16px; height: 16px; margin-right: 6px; }
.titlebar-text, .xp-win-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-win-btns { display: flex; gap: 2px; }
.xp-min, .xp-restore, .xp-close {
  position: relative;
  width: 21px; height: 21px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.xp-min, .xp-restore { background: linear-gradient(#73a6ff, #3271e6 55%, #2560d8); }
.xp-close { background: linear-gradient(#ec9a7f, #d55a33 50%, #c2421a); }
.xp-min::after { content: ""; position: absolute; left: 5px; bottom: 4px; width: 8px; height: 3px; background: #fff; }
/* 还原：前后两个小窗框 */
.xp-restore::before, .xp-restore::after { content: ""; position: absolute; width: 8px; height: 7px; border: 1px solid #fff; border-top-width: 2px; }
.xp-restore::before { left: 7px; top: 3px; }
.xp-restore::after { left: 3px; top: 8px; background: #3271e6; }
.xp-close::before, .xp-close::after {
  content: ""; position: absolute; left: 4px; top: 8.5px; width: 11px; height: 2.5px; background: #fff; border-radius: 1px;
  transform: rotate(45deg);
}
.xp-close::after { transform: rotate(-45deg); }
.xp-min:hover, .xp-restore:hover, .xp-close:hover { filter: brightness(1.12); }

.menubar {
  flex: none;
  display: flex; align-items: center;
  height: 22px;
  padding-left: 4px;
  background: linear-gradient(#f9fafc, #e9edf3);
  border-bottom: 1px solid #b7c0cd;
  font: 12px var(--ui);
  user-select: none;
}
.menubar .menu { height: 20px; line-height: 20px; padding: 0 11px; cursor: default; }
.menubar .menu:hover, .menubar .menu.open { background: #316ac5; color: #fff; }

.masthead {
  position: relative;
  flex: none;
  display: flex; align-items: center;
  height: 66px;
  padding: 0 8px 0 14px;
  overflow: hidden;
  background: linear-gradient(#fbfbfa, #eceeed 60%, #e2e5e5);
  border-bottom: 1px solid #a9b0b5;
}
.bamboo-left { position: absolute; left: 70px; top: -10px; width: 260px; height: 90px; background: url(/img/bamboo-left.svg) no-repeat; opacity: .8; pointer-events: none; }
.bamboo-right { position: absolute; right: 330px; top: -8px; width: 170px; height: 90px; background: url(/img/bamboo-right.svg) no-repeat; opacity: .8; pointer-events: none; }
.logo { position: relative; z-index: 1; display: block; text-decoration: none; color: #2a2a2a; width: 140px; }
.logo-cn { display: block; font: 27px/1 "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Heiti SC", sans-serif; letter-spacing: 1px; color: #2b2b2b; }
.logo-url { display: block; margin-top: 4px; font: bold 10.5px/1 Verdana, Tahoma, sans-serif; color: #3e3e3e; letter-spacing: .2px; }
.slogan { position: relative; z-index: 1; display: flex; align-items: center; margin: 0 auto; padding-right: 60px; }
.emblem { width: 70px; height: 50px; margin-right: 4px; }
.slogan-text {
  font: 25px/1 var(--hupo);
  letter-spacing: 3px;
  color: #172a6e;
  transform: scaleX(1.1);
  transform-origin: left center;
  text-shadow: 0 0 1px rgba(23,42,110,.4);
  white-space: nowrap;
}
.mast-buttons { position: relative; z-index: 1; display: flex; gap: 4px; }

.blue-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 96px; height: 27px; padding: 0 12px;
  color: #fff;
  font: 13px var(--hei);
  text-shadow: 0 1px 0 #193f7d;
  background: linear-gradient(#9cc2f1 0%, #6799dc 42%, #3f73c4 54%, #5287d6 100%);
  border: 1px solid #22508f;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.blue-btn:hover { filter: brightness(1.08); }
.blue-btn:active { filter: brightness(.94); }
.ico { display: inline-block; width: 16px; height: 16px; background: no-repeat center / contain; flex: none; }
.ico-help { background-image: url(/img/icons/help.svg); }
.ico-gear { background-image: url(/img/icons/gear.svg); }
.ico-chat { background-image: url(/img/icons/chat.svg); }
.ico-replay { background-image: url(/img/icons/replay.svg); width: 18px; height: 18px; }
.ico-exit { background-image: url(/img/icons/exit.svg); width: 18px; height: 18px; }
.ico-rematch { background-image: url(/img/icons/again.svg); width: 18px; height: 18px; }
.ico-study { background-image: url(/img/icons/study.svg); width: 18px; height: 18px; }
.ico-house { background-image: url(/img/icons/house.svg); width: 15px; height: 15px; }
.ico-report { background-image: url(/img/icons/report.svg); width: 18px; height: 18px; }
.ico-draw { background-image: url(/img/icons/draw.svg); width: 18px; height: 18px; }
.ico-pass { background-image: url(/img/icons/pass.svg); width: 18px; height: 18px; }
.ico-pm { background-image: url(/img/icons/pm.svg); }
.ico-est { background-image: url(/img/icons/est.svg); width: 18px; height: 18px; }
.ico-fight { background-image: url(/img/icons/fight.svg); }
.ico-resign { background-image: url(/img/icons/resign.svg); width: 18px; height: 18px; }
.ico-folder { background-image: url(/img/icons/folder.svg); }
.ico-room { background-image: url(/img/icons/room.svg); width: 14px; height: 14px; }
.ico-mail { background-image: url(/img/icons/mail.svg); width: 26px; height: 26px; }

#view { position: relative; flex: 1; min-height: 0; overflow: hidden; outline: none; }

.statusbar {
  flex: none;
  display: flex;
  height: 21px;
  font: 12px/19px var(--ui);
  background: linear-gradient(#f1efe6, #e4e0d2);
  border-top: 1px solid #a8a395;
  color: #222;
}
.status-cell { padding: 0 10px; border-right: 1px solid #c0bcae; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-label { flex: none; width: 190px; font-weight: bold; } /* 剧中状态栏最左边是「状态提示」 */
/* 左下角收着的小窗盖在这一格上：收起的多了、整个窗口缩小了，这一格跟着加宽，不挡状态文字（--ui-scale 见 app.js 的 fit） */
.status-label { min-width: calc((var(--xp-dock-count, 0) * (var(--xp-dock-item) + 2px) + 2px) / var(--ui-scale, 1)); }
#status-main { font-weight: bold; }
#status-main { flex: 1; }
.status-right { color: #555; }
.conn-ok::before, .conn-bad::before { content: "●"; margin-right: 4px; }
.conn-ok::before { color: #2a9d2a; }
.conn-ok.conn-invisible::before { color: #8c8a82; }
.conn-bad::before { color: #c83030; }

.taskbar-btn {
  position: absolute; left: 6px; bottom: 6px;
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 14px;
  color: #fff; font: bold 13px var(--hei);
  background: linear-gradient(#3c81f3, #1d5dd8);
  border: 1px solid #0b3aa3; border-radius: 3px;
}
.taskbar-btn img { width: 18px; height: 18px; }

/* —— 通用面板与控件 —— */
.paper { background: var(--tan) var(--paper); }
.panel-title {
  height: 26px; padding: 0 12px;
  color: #fff; font: 13px/26px var(--hei); letter-spacing: 1px;
  background: linear-gradient(#ee6d40, #d84b20 55%, #c43c12);
  border-bottom: 1px solid #9a2a08;
}
.panel-title small { font: 12px Tahoma, sans-serif; margin-left: 6px; letter-spacing: 0; }
.side-head {
  height: 23px; padding: 0 8px;
  color: #fff; font: bold 12px/23px var(--hei);
  background: linear-gradient(#a7c6ea, #6f9bd3 50%, #5585c6 51%, #78a3d8);
  border-top: 1px solid #c6dbf3; border-bottom: 1px solid #3d6aa6;
  text-shadow: 0 1px 0 #2d578f;
}
.xp-btn {
  min-width: 96px; height: 28px; padding: 0 14px;
  font: 13px var(--hei);
  color: #111;
  background: linear-gradient(#ffffff, #f2f1ec 70%, #dcd8cd);
  border: 1px solid #003c74;
  border-radius: 3px;
}
.xp-btn:hover { box-shadow: inset 0 0 0 2px #f9bb44; }
.xp-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #7fa7e8; }
.xp-btn:disabled { color: #a3a3a3; border-color: #b9b6aa; cursor: default; box-shadow: none; }
.xp-btn.small { min-width: 0; height: 22px; padding: 0 8px; font-size: 12px; }
.text-input, select.sel {
  height: 26px; padding: 2px 6px;
  font: 13px var(--hei);
  background: #fff;
  border: 1px solid #7f9db9;
  border-radius: 0;
}
.text-input:focus, select.sel:focus { outline: 1px solid #f9bb44; }
.form-error { color: var(--red); min-height: 18px; font: 12px var(--hei); }
.link { color: var(--link); text-decoration: underline; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.muted { color: #777; }
.red { color: var(--red); }
.blue { color: var(--blue-text); }
.green { color: #1d7d1d; }

/* 头像 */
.avatar { display: block; width: 48px; height: 48px; object-fit: cover; background: #fff; border: 1px solid #6f5630; }
.stone-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; }
.stone-dot.b { background: radial-gradient(circle at 35% 30%, #777, #111 50%, #000); }
.stone-dot.w { background: radial-gradient(circle at 35% 30%, #fff, #dcebee 60%, #9fbcc5); border: 1px solid #7f9aa1; }

/* —— 对话框与小窗 —— */
#layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 100; }
#layer > * { pointer-events: auto; }
.modal-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20, 30, 60, .18); display: flex; align-items: center; justify-content: center; }
.xp-win {
  position: relative;
  background: #eef1f7;
  border: 1px solid #0b3bc4;
  border-radius: 7px 7px 2px 2px;
  box-shadow: 3px 4px 10px rgba(0,0,0,.4);
  overflow: hidden;
}
.xp-win .xp-win-title { border-radius: 6px 6px 0 0; cursor: move; }
.xp-win.collapsed .xp-win-body { display: none; }
.xp-win.collapsed .xp-resize-handle { display: none; }
/* 最小化：小窗原地藏起来，左下角留一条标题栏（ui.js 的 addToDock），盖住状态栏最左边那一格 */
.xp-win.minimized { visibility: hidden; }
.xp-dock { position: fixed; left: 2px; bottom: 0; z-index: 60; display: flex; align-items: flex-end; gap: 2px; }
.xp-dock-item {
  width: var(--xp-dock-item);
  border: 1px solid #0b3bc4; border-bottom: 0; border-radius: 7px 7px 0 0;
  box-shadow: 1px -1px 5px rgba(0,0,0,.3);
  cursor: pointer;
}
.xp-dock-open {
  flex: 1; min-width: 0; height: 100%;
  display: flex; align-items: center;
  padding: 0 6px 0 2px;
  color: inherit; font: inherit; text-shadow: inherit; text-align: left;
  background: none; border: 0;
}
.xp-dock-open:focus-visible { outline: 1px dotted #fff; outline-offset: -3px; }
.xp-dock-item.flash {
  background: linear-gradient(#ffc27a 0%, #f7a043 12%, #ee8a24 45%, #dd7212 85%, #cf6609 100%);
  border-color: #a8520a; text-shadow: 1px 1px 0 #7a3800;
  animation: xp-dock-flash 1s steps(1, end) 3;
}
@keyframes xp-dock-flash {
  50% { background: linear-gradient(#0a5fe8 0%, #3d8ef8 7%, #2675f2 22%, #105fe8 55%, #0d58e0 85%, #0a4fd2 100%); border-color: #0b3bc4; text-shadow: 1px 1px 0 #0b2a7a; }
}
.xp-fly { position: fixed; z-index: 300; pointer-events: none; border: 2px solid #0b3bc4; border-radius: 7px 7px 2px 2px; background: rgba(38, 117, 242, .12); }
.win-minimized .xp-dock { display: none; } /* 整个客户端最小化时左下角是「围达网」那个按钮 */
@media (prefers-reduced-motion: reduce) { .xp-dock-item.flash { animation: none; } }
.xp-resize-handle { position: absolute; z-index: 2; touch-action: none; }
.xp-resize-n, .xp-resize-s { left: 8px; right: 8px; height: 4px; cursor: ns-resize; }
.xp-resize-n { top: 0; } .xp-resize-s { bottom: 0; }
.xp-resize-e, .xp-resize-w { top: 8px; bottom: 8px; width: 4px; cursor: ew-resize; }
.xp-resize-e { right: 0; } .xp-resize-w { left: 0; }
.xp-resize-ne, .xp-resize-nw, .xp-resize-se, .xp-resize-sw { width: 8px; height: 8px; }
.xp-resize-ne { top: 0; right: 0; cursor: nesw-resize; }
.xp-resize-nw { top: 0; left: 0; cursor: nwse-resize; }
.xp-resize-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.xp-resize-se { bottom: 0; right: 0; width: 14px; height: 14px; cursor: nwse-resize; background: repeating-linear-gradient(135deg, transparent 0 3px, #8391a8 3px 4px); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.xp-win-body { background: linear-gradient(#f6f7fb, #e9edf5); }
.dlg-content { display: flex; align-items: center; gap: 22px; padding: 22px 26px 18px; min-height: 96px; }
.dlg-icon { width: 58px; height: 58px; flex: none; background: no-repeat center / contain; }
.icon-warn { background-image: url(/img/icons/warn.svg); }
.icon-taiji { background-image: url(/img/icons/taiji.svg); }
.icon-friend { background-image: url(/img/icons/friend.svg); }
.icon-info, .icon-over { background-image: url(/img/icons/info.svg); }
.icon-question { background-image: url(/img/icons/question.svg); }
.icon-mail { background-image: url(/img/icons/mail.svg); }
.icon-mailb { background-image: url(/img/icons/mail-b.svg); }
.icon-report { background-image: url(/img/icons/report.svg); }
.icon-chat { background-image: url(/img/icons/chat.svg); }
.dlg-msg { flex: 1; font: 15px/1.7 var(--hei); color: #111; }
.dlg-msg .who { color: #1630b8; }
.dlg-msg .sub { display: block; margin-top: 4px; font-size: 12.5px; color: #555; }
.dlg-msg .big { display: block; font: bold 22px var(--hei); letter-spacing: 4px; }
.dlg-msg .result { display: block; margin-top: 4px; font: 20px var(--hei); color: #b01818; letter-spacing: 2px; }
.dlg-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 46px; padding: 0 22px 20px; }
.dlg-buttons .xp-btn { min-width: 140px; height: 32px; }
.dlg-buttons:has(> :nth-child(3)) { column-gap: 18px; }
.dlg-buttons:has(> :nth-child(3)) .xp-btn { min-width: 112px; }
.dlg form .row, .dlg .row { display: flex; align-items: center; gap: 8px; margin: 7px 0; font-size: 13px; }
.dlg .row > label:first-child { width: 72px; text-align: right; color: #333; }
.dlg .row .text-input, .dlg .row select.sel { flex: 1; }
.skin-pick { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; }
.skin-opt { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; padding: 3px; background: none; border: 1px solid transparent; border-radius: 2px; font: 12px var(--hei); color: #222; cursor: pointer; }
.skin-opt:hover { border-color: #9ab2d6; background: #eef3fb; }
.skin-opt[aria-checked="true"] { border-color: #316ac5; background: #dbe5f7; }
.skin-opt:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.skin-thumb { display: block; border: 1px solid rgba(0,0,0,.35); }
.skin-thumb svg { display: block; width: 100%; height: auto; }
.skin-name { text-align: center; white-space: nowrap; }
.dlg .help-text { font: 13px/1.8 var(--hei); max-height: 380px; overflow: auto; padding-right: 6px; }
.dlg .help-text h4 { margin: 10px 0 2px; font-size: 14px; color: #0f2f8f; }
.dlg .help-text p { margin: 2px 0; }

/* 右键 / 下拉菜单 */
.menu-pop {
  position: fixed;
  min-width: 150px;
  padding: 2px;
  background: #fff;
  border: 1px solid #8a8a8a;
  box-shadow: 2px 2px 4px rgba(0,0,0,.35);
  font: 12px var(--ui);
  z-index: 120;
}
.menu-item { padding: 4px 26px 4px 24px; white-space: nowrap; cursor: default; }
.menu-item:hover { background: #316ac5; color: #fff; }
.menu-item.disabled { color: #a0a0a0; background: none; }
.menu-item.checked::before { content: "✓"; position: absolute; margin-left: -16px; }
.menu-sep { height: 1px; margin: 3px 2px; background: #c5c5c5; }
/* 管理人员有待处理的举报：菜单「辅助」右上角一个红点，「管理后台」后面是条数 */
.menubar .menu.has-dot { position: relative; }
.menubar .menu.has-dot::after { content: ""; position: absolute; top: 2px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.menu-badge { display: inline-block; min-width: 16px; margin-left: 10px; padding: 0 4px; border-radius: 8px; color: #fff; background: var(--red); font: bold 11px/16px Tahoma, sans-serif; text-align: center; }

/* 气泡提示 */
#toasts { position: fixed; right: 14px; top: 124px; z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast {
  width: 270px;
  padding: 8px 12px 10px;
  background: #ffffe1;
  border: 1px solid #7a7a5a;
  border-radius: 8px;
  box-shadow: 2px 3px 6px rgba(0,0,0,.3);
  font: 13px/1.6 var(--hei);
  transition: opacity .6s;
}
.toast.clickable { cursor: pointer; pointer-events: auto; }
.toast.fade { opacity: 0; }
.toast-title { font-weight: bold; color: #0d3a9a; margin-bottom: 2px; }
.toast-error .toast-title { color: #b01818; }

/* 特别关注上线：不遮罩、不抢焦点的右下角通知。 */
.follow-notice {
  position: fixed; z-index: 90; right: 14px; bottom: 40px;
  width: 320px; max-width: calc(100vw - 16px); padding: 12px;
  display: flex; align-items: flex-start; gap: 10px;
  background: #ffffe1; border: 1px solid #7a7a5a; border-radius: 8px;
  box-shadow: 2px 3px 8px rgba(0,0,0,.3); font: 13px/1.5 var(--hei);
  animation: follow-enter .3s ease-out; transition: opacity .3s, transform .3s;
}
.follow-avatar { width: 44px; height: 44px; flex: none; }
.follow-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.follow-title { color: #0d3a9a; font-weight: bold; }
.follow-message { margin: 2px 0; }
.follow-content .xp-btn { margin-top: 8px; }
.follow-close { border: 0; padding: 0; background: transparent; font: 22px/28px var(--hei); width: 28px; height: 28px; flex: none; }
.follow-notice.special-follow-notice { display: block; padding: 0; overflow: hidden; background: #ece9d8; border: 1px solid #0b3bc4; border-radius: 7px 7px 2px 2px; box-shadow: 3px 4px 8px rgba(0,0,0,.35); }
.special-follow-notice .follow-window-title { border-radius: 6px 6px 0 0; }
.special-follow-notice .follow-window-close { flex: none; }
.special-follow-notice .follow-window-body { display: flex; align-items: center; gap: 12px; padding: 16px 14px 10px; }
.special-follow-notice .follow-avatar { width: 48px; height: 48px; object-fit: cover; border: 1px solid #7f9db9; background: #fff; border-radius: 0; }
.special-follow-notice .follow-message { margin: 0 0 4px; font-size: 14px; }
.special-follow-notice .muted { color: #555; font-size: 12px; }
.special-follow-notice .follow-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 2px 14px 14px; }
.special-follow-notice .follow-actions .xp-btn { min-width: 100px; }
.follow-notice.leaving { opacity: 0; transform: translateY(12px); }
@keyframes follow-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .follow-notice { animation: none; transition: none; } }

/* —— 首页：没登录时的欢迎页，上面弹登录框 —— */
.home-wait { padding: 60px; text-align: center; font: 14px var(--hei); color: #4d3a1a; }
.front { display: flex; align-items: center; justify-content: center; }
/* 首页底部的备案号（服务器写进 index.html；只在首页显示） */
.beian { display: none; }
body.front-page .beian:not(:empty) { flex: none; display: flex; justify-content: center; gap: 22px; padding: 3px 0; font: 12px/18px var(--hei); background: #efe3c3; border-top: 1px solid #c9b483; }
.beian a { display: inline-flex; align-items: center; gap: 4px; color: #4a3a1c; text-decoration: none; }
.beian a:hover { text-decoration: underline; }
.beian img { width: 16px; height: 16px; }
/* 图形验证码 */
.captcha-img { width: 120px; height: 40px; flex: none; border: 1px solid #a9aba8; background: #fff; cursor: pointer; }
.captcha-again { flex: none; font: 12px var(--hei); white-space: nowrap; }
.reg-form .captcha-input { width: 110px !important; text-transform: uppercase; }
.reg-form .form-row > label.reg-agree { width: auto; display: inline-flex; align-items: center; gap: 2px; text-align: left; font: 14px var(--hei); color: #111; cursor: pointer; }
.reg-agree input { margin: 0 6px 0 0; }
.reg-form input[name=code] { width: 110px !important; }
.reg-panel, .acct-panel { background: var(--tan-light) var(--grain); border: 1px solid var(--tan-dark); box-shadow: inset 0 0 0 1px #ecdcb5; }
.form-row { display: flex; align-items: center; gap: 10px; margin: 11px 0; }
.form-row > label { width: 80px; text-align: right; font: 13px var(--hei); color: #222; flex: none; }
.form-row .text-input { width: 220px; }
.form-row .hint { font: 12px var(--hei); color: #6b5530; }

/* —— 登录框：剧中「登陆围达网客户端」—— */
.login-dlg .dlg-content { padding: 0; }
.login-dlg .dlg-msg { flex: 1; margin: 0; }
.login-dlg .dlg-buttons { display: none; }
.login-body { display: flex; align-items: stretch; background: #f4f5f6; }
.login-motto { flex: none; width: 170px; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; letter-spacing: 16px;
  font: 54px var(--kai, "STKaiti", "KaiTi", serif); color: #a9c1e4; padding: 26px 0; }
.login-right { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 30px 22px 0; }
.login-brand { font: 32px/1.2 var(--song, "STSong", "SimSun", serif); color: #333; letter-spacing: 3px; margin: 0 0 16px 56px; }
.login-input { width: 260px; height: 32px; margin: 0 0 12px 18px; padding: 0 10px; border: 1px solid #e1e3e6; border-radius: 2px; background: #fbfbfb; font: 13px var(--hei); color: #222; }
.login-input::placeholder { color: #666; letter-spacing: 2px; }
.login-input:focus { outline: none; border-color: #7fa7e8; background: #fff; }
.login-right .form-error { margin: 0 0 6px 18px; min-height: 16px; }
.login-btn { margin: 4px 0 14px 44px; height: 34px; padding: 0 18px; background: #fff; border: 1px solid #c9ccd0; box-shadow: 1px 1px 0 #9a9ea4; font: 14px var(--hei); color: #222; cursor: pointer; }
.login-btn:hover { background: #f0f4fb; }
.login-btn:disabled { color: #999; cursor: default; }
.login-links { display: flex; align-items: baseline; gap: 20px; margin-left: 18px; }
.login-reg { font: bold 13px var(--hei); color: #1238b8; text-decoration: underline; }
.login-cap { display: flex; align-items: center; gap: 8px; margin: 0 0 12px 18px; }
.login-cap .login-input { width: 120px; margin: 0; text-transform: uppercase; }
.login-cap .captcha-img { height: 34px; width: 102px; }
/* 账号安全：绑定邮箱手机、找回密码 */
.sec-form .row { display: flex; align-items: center; gap: 8px; margin: 9px 0; }
.dlg .sec-form .row > label:first-child { width: 96px; flex: none; text-align: right; font: 13px var(--hei); white-space: nowrap; }
.dlg .sec-form .row .text-input.narrow { flex: none; width: 100px; }
.sec-form .code-btn { min-width: 96px; height: 26px; }
.sec-val { min-width: 160px; font: 14px Tahoma, var(--hei); }

/* —— 注册页（剧中第8集）—— */
/* 剧中：中间一块卡其色面板，上面橙红标题条「用户注册 Register」，两边露出赭黄的绢本山水。
   颜色照 第8集注册页-新.jpg 量（以输入框的白为准换算）；各栏的位置、宽度照截图里占面板宽度的比例 */
.reg-page { height: 100%; overflow: auto; background: #a9803f url(/img/landscape.jpg) repeat-x 0 0 / auto 100%; padding: 0; }
.reg-panel { width: 70%; min-width: 780px; max-width: 1000px; min-height: 100%; margin: 0 auto; background: rgba(218, 189, 127, .95) !important; border: none !important; box-shadow: none !important; }
.reg-panel .panel-title { height: 30px; padding: 0 20px; background: #f2603a; border-bottom: none; color: #fde8dc; font: bold 14px/30px var(--hei-b); letter-spacing: 1px; }
.reg-panel .panel-title small { font: bold 14px Tahoma, sans-serif; letter-spacing: .5px; }
.reg-error { position: sticky; top: 8px; z-index: 3; margin: 12px 4.5% 0; padding: 10px 12px; border: 1px solid #ba2929; background: #fff1ee; color: #a51b1b; font: bold 14px/1.6 var(--hei); }
.reg-panel [aria-invalid="true"] { outline: 2px solid #ba2929; outline-offset: 1px; }
.reg-control { display: flex; flex: 1; min-width: 0; align-items: center; flex-wrap: wrap; gap: 8px; }
.reg-field-status { flex-basis: 100%; color: #225b21; font: 13px/1.5 var(--hei); }
.reg-form .reg-verify-row { align-items: flex-start; }
.reg-form .reg-verify-row > label { padding-top: 8px; }
.reg-body { display: flex; gap: 18px; padding: 40px 4.5% 18px; }
.reg-avatar-col { width: 150px; flex: none; text-align: center; }
.reg-avatar { width: 150px; height: 150px; border: 2px solid #0e1a20; background: #0e1a20; display: block; object-fit: cover; }
.avatar-upload-help { margin-top: 8px; font: 12px/1.5 var(--hei); color: #5c4a28; }
.avatar-crop-dlg { max-width: calc(100vw - 16px); }
.avatar-crop-dlg .dlg-content { padding: 14px; }
.avatar-crop-dlg .dlg-msg { min-width: 0; }
.avatar-crop-help { margin: 0 0 10px; font-size: 13px; }
.avatar-crop-stage { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid #71819b; background: #fff; }
.avatar-crop-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.avatar-crop-stage canvas:active { cursor: grabbing; }
.avatar-crop-stage::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; background: linear-gradient(to right, transparent 33.1%, #fff6 33.1% 33.5%, transparent 33.5% 66.4%, #fff6 66.4% 66.8%, transparent 66.8%), linear-gradient(to bottom, transparent 33.1%, #fff6 33.1% 33.5%, transparent 33.5% 66.4%, #fff6 66.4% 66.8%, transparent 66.8%); }
.avatar-crop-controls { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; }
.avatar-crop-controls input { flex: 1; min-width: 0; }
.avatar-crop-controls output { min-width: 40px; text-align: right; }
.avatar-crop-error { margin-top: 8px; color: #a21919; font-size: 13px; }
.upload-btn {
  margin-top: 14px; width: 144px; height: 38px; font: bold 18px var(--hei-b); color: #111; cursor: pointer;
  background: linear-gradient(#f3f6f8, #dfe6ea); border: 1px solid #c3ccd1; border-right-color: #59646b; border-bottom-color: #59646b; box-shadow: 1px 1px 0 #3c454b;
}
.upload-btn:active { box-shadow: none; transform: translate(1px, 1px); }
.avatar-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 14px; }
.avatar-picks img { width: 32px; height: 32px; border: 1px solid #8d6a36; cursor: pointer; background: #fff; }
.avatar-picks img.on { outline: 2px solid #e04a10; outline-offset: 1px; }
.reg-avatar-col .muted { color: #5c4a28; }
.reg-form { flex: 1; min-width: 0; }
.reg-form .form-row { gap: 18px; margin: 20px 0; }
.reg-form .form-row:first-child { margin-top: 0; }
.reg-form .form-row.top { align-items: flex-start; }
.reg-form .form-row > label { width: 92px; font: bold 15px var(--hei-b); color: #111; }
.reg-form .form-row.top > label { padding-top: 8px; }
.reg-form .form-row .hint { color: #4a3a1c; }
.reg-form .text-input, .reg-form select.sel { height: 38px; font-size: 14px; border: 1px solid #a9aba8; border-right-color: #e2e2e0; border-bottom-color: #e2e2e0; box-shadow: inset 1px 1px 0 #d6d8d6; }
.reg-form .form-row .text-input { width: 236px; }
.reg-form input[name=age] { width: 90px !important; }
.reg-form input[name=constellation] { width: 104px !important; }
/* 剧中的下拉框：白框右边一个窄的灰按钮，里面一个小三角 */
.reg-form select.sel {
  appearance: none; -webkit-appearance: none; padding: 2px 22px 2px 6px; cursor: pointer;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7L3.5 4z' fill='%23222'/%3E%3C/svg%3E") no-repeat right 5px center / 7px 4px,
    linear-gradient(to right, #9a9c9c 0 1px, #eef0f0 1px calc(100% - 1px), #5e6264 calc(100% - 1px)) no-repeat right top / 16px 100%,
    #fff;
}
.reg-form select[name=gender] { width: 72px; }
.reg-form select[name=marital] { width: 90px; }
.reg-form select[name=rank] { width: 140px; }
.reg-form .birth-sel { gap: 0; }
.reg-form .birth-sel select.sel { width: 84px; }
.reg-form .birth-sel select[name=year] { width: 112px; }
.reg-form .reg-sign { width: 540px !important; max-width: calc(100% - 110px); height: 110px; padding: 10px 12px; resize: vertical; font: 14px/1.7 var(--hei); }
.birth-sel { display: flex; gap: 4px; }
.birth-sel select.sel { width: 78px; }
.reg-actions { display: flex; gap: 14px; justify-content: center; padding: 6px 0 22px; }
.reg-actions .xp-btn { min-width: 130px; height: 32px; }

/* —— 对弈大厅 —— */
.lobby { display: grid; height: 100%; grid-template-columns: minmax(0, 1fr) 240px; grid-template-rows: 44px minmax(0, 1fr) 156px; }
.lobby-strip {
  grid-column: 1; grid-row: 1;
  display: flex; align-items: center; gap: 4px;
  padding: 0 14px;
  /* 剧中是一块浅色木板，四周深色边框 */
  background:
    repeating-linear-gradient(90deg, rgba(120, 70, 20, .05) 0 2px, transparent 2px 9px),
    linear-gradient(#ecd3a8, #dcb886 60%, #d2aa74);
  border: 3px solid #b27a3e;
  border-top-color: #c58a48;
  box-shadow: inset 0 0 0 1px #f5e2bf, 0 1px 0 #6b4c22;
  overflow: hidden;
}
.strip-rank { flex: none; width: 150px; font: bold 13px var(--hei); color: #1238b8; text-decoration: underline; white-space: nowrap; }
.strip-top { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; white-space: nowrap; } /* 剧中三位前三名均匀铺开 */
.strip-top .no { font: bold 14px Tahoma, Verdana, sans-serif; color: #2a1a0a; }
.strip-top img { width: 34px; height: 34px; border: 1px solid #6f5630; background: #fff; }
.strip-top .who { display: flex; flex-direction: column; line-height: 1.25; cursor: pointer; }
.strip-top .ttl { font: 11px var(--hei); color: #b4583a; } /* 状元 / 榜眼 / 探花 */
.strip-top .nm { font: bold 12.5px var(--hei); color: #222; }
.strip-top .who:hover .nm { text-decoration: underline; }
.strip-top .empty { font: 12px var(--hei); color: #7a6036; }

.lobby-tables {
  grid-column: 1; grid-row: 2;
  overflow-y: auto;
  padding: 18px 16px 24px;
  background: var(--navy) radial-gradient(ellipse at 50% 0%, rgba(80,120,230,.25), transparent 60%);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
  align-content: start;
  gap: 22px 10px;
}
.gtable { display: grid; grid-template-columns: 70px 92px 70px; grid-template-rows: auto auto; justify-content: center; column-gap: 8px; color: #fff; }
.gtable .seat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 92px; font: 12px var(--hei); }
.gtable .seat .av-wrap { position: relative; }
.gtable .seat img.avatar { display: block; width: 44px; height: 44px; border: 1px solid #c8d8ff; cursor: pointer; }
.gtable .seat .stone-badge { position: absolute; left: -6px; bottom: -5px; width: 15px; height: 15px; border-radius: 50%; }
.gtable .seat .stone-badge.b { background: radial-gradient(circle at 35% 30%, #888, #1a1a1a 48%, #000); }
.gtable .seat .stone-badge.w { background: radial-gradient(circle at 35% 30%, #fff, #e3eef0 55%, #9fb5bb); }
.gtable .seat .nm { max-width: 70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #9fd0ff; font-weight: bold; }
.gtable .seat .rk { color: #a9c4ff; font-size: 11px; }
.gtable .seat.empty { cursor: pointer; }
.gtable .seat.empty .chair { width: 40px; height: 40px; background: url(/img/icons/seat.svg) no-repeat center / contain; opacity: .6; }
.gtable .seat.empty .sit { color: #9fb8f3; font-size: 11.5px; }
.gtable .seat.empty:hover .chair { opacity: 1; }
.gtable .seat.empty:hover .sit { color: #fff; text-decoration: underline; }
.gtable .seat.me .nm { color: #ffe680; }
.gtable .tb { width: 92px; height: 92px; padding: 0; border: 2px solid #0a1a52; background: #efc256; box-shadow: 0 2px 0 rgba(0,0,0,.35); cursor: default; }
.gtable .tb.live { cursor: pointer; }
.gtable .tb.live:hover { outline: 2px solid #ffe680; }
.gtable .tb svg { display: block; width: 100%; height: 100%; }
.gtable .cap { grid-column: 1 / span 3; text-align: center; font: bold 12.5px/1.6 var(--hei); color: #9fd0ff; margin-top: 6px; }
.gtable .cap b { color: #cfdcff; }
.gtable .cap .st-live { color: #9fd0ff; }
.gtable .cap .st-wait { color: #ffe680; }
.gtable .cap .stand { color: #ffb0a0; text-decoration: underline; cursor: pointer; margin-left: 6px; }

.lobby-bottom { grid-column: 1; grid-row: 3; display: flex; min-height: 0; background: var(--cream-2); border-top: 2px solid #b9955a; }
.lobby-mail { width: 230px; flex: none; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 12px; background: #fff; border-right: 1px solid #c9b47c; font: 13px/1.6 var(--hei); }
.lobby-mail .mail-line { display: flex; align-items: center; gap: 8px; }
.lobby-mail .who { color: #1630b8; font-weight: bold; }
.lobby-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-log { flex: 1; overflow-y: auto; padding: 6px 10px; font: 13px/1.75 var(--hei); }
.chat-log .line { word-break: break-all; }
.chat-log .tag { color: var(--red); font-weight: bold; }
.chat-log .sys { color: #1d6b1d; }
.chat-log .nm { color: #0b2c9a; font-weight: bold; cursor: pointer; }
.chat-log .nm.guest { color: #1a8a1a; }
.chat-log .line.say { font-weight: bold; color: #2a2a2a; }
.chat-log .pm { color: #8a1a8a; }
.chat-log .t { color: #2a8f9b; font-size: 11px; margin-left: 6px; }
.chat-log a { color: #0000cc; }
.chat-input { display: flex; gap: 4px; padding: 5px 8px; border-top: 1px solid #d8c890; background: #f3ecc8; }
.chat-input select.sel { width: 110px; height: 24px; font-size: 12px; }
.chat-input .text-input { flex: 1; height: 24px; font-size: 13px; }

.lobby-side { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; min-height: 0; background: var(--side); border-left: 1px solid var(--side-line); }
.me-card { display: flex; gap: 10px; padding: 10px; background: linear-gradient(#ffffff, #eef4fb); }
.me-card img.avatar { width: 58px; height: 58px; }
.me-card .nm { font: 19px/1.3 var(--hei); color: #111; }
.me-card .rec { font: 12.5px var(--hei); color: #444; }
.me-card .mail-count { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 0; border: none; background: none; font: bold 14px Tahoma, sans-serif; color: #222; cursor: pointer; }
.ico-mail-s { width: 19px; height: 14px; background: url(/img/icons/mail-y.svg) no-repeat center / contain; }
.me-links { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 4px; padding: 2px 12px 10px; font: bold 14px var(--hei); background: #eef4fb; }
.me-links .link { color: #1238b8; text-decoration: underline; justify-self: start; white-space: nowrap; }
/* 管理人员标记：名字后面浅朱砂底、朱砂字、细框的「管理员」「巡查员」（public/js/staff.js）。名字过长时省略名字，标记留着 */
.staff-tag { display: inline-block; flex: none; margin: 0 2px 0 4px; padding: 0 4px; border: 1px solid #ecb8b3; border-radius: 2px; background: #fbe7e4; color: #a8242a;
  font: 11px/14px var(--hei); letter-spacing: 0; text-decoration: none; text-shadow: none; white-space: nowrap; vertical-align: 1px; cursor: default; }
.gtable .staff-tag { border-color: rgba(255, 180, 175, .6); background: rgba(255, 255, 255, .14); color: #ffd0cc; } /* 大厅深蓝桌子上 */
.home-name .staff-tag { margin-left: 8px; padding: 0 6px; font-size: 13px; line-height: 20px; vertical-align: middle; }
.with-tag { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; vertical-align: bottom; }
.with-tag > .nm-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-badge { display: inline-block; min-width: 16px; margin-left: 4px; padding: 0 4px; border-radius: 8px; background: #c0272d; color: #fff;
  font: bold 11px/16px Tahoma, sans-serif; text-align: center; vertical-align: 2px; }
.tree { padding: 4px 6px; font: 12.5px/1.9 var(--hei); }
.tree .zone { display: flex; align-items: center; gap: 6px; color: #222; font-weight: bold; cursor: pointer; }
.tree .zone-dot { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9df07a, #22a51e 60%, #157a12); }
.tree .troom { display: flex; align-items: center; gap: 5px; padding-left: 16px; cursor: pointer; border-radius: 2px; }
.tree .troom:hover { background: #d4e4f8; }
.tree .troom.cur { color: #fff; background: #316ac5; }
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.plist { padding: 2px 4px 8px; font: 12.5px var(--hei); }
.plist .p { display: flex; align-items: center; gap: 6px; padding: 3px 4px; cursor: pointer; border-radius: 2px; }
.plist .p:hover { background: #d4e4f8; }
.plist .p img { width: 20px; height: 20px; border: 1px solid #8fa9c9; background: #fff; }
.plist .p .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plist .p .rk { color: #4a5f80; font-size: 11.5px; }
.plist .p .st { font-size: 11px; color: #2a7a2a; }
.plist .p .st.busy { color: #c0392b; }
.plist .p .st.off { color: #999; }
.plist .empty { padding: 6px 8px; color: #7a8aa0; font-size: 12px; }
/* 好友申请：大厅「我的好友」上方的入口和申请列表（补全） */
.freq-link { display: flex; align-items: center; width: 100%; padding: 4px 12px; border-bottom: 1px solid #c6dbf3; background: #eef4fb; font: bold 12.5px var(--hei); color: #1238b8; text-align: left; }
.freq-link:hover { background: #d4e4f8; }
.freq-dlg .dlg-content { padding: 14px 16px 12px; min-height: 0; }
.freq-list { max-height: 320px; overflow: auto; background: #fff; border: 1px solid #cfd3da; }
.freq-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid #eceef2; }
.freq-item:last-child { border-bottom: none; }
.freq-item img { width: 32px; height: 32px; flex: none; border: 1px solid #999; background: #fff; }
.freq-item .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.freq-item .nm { font: bold 14px var(--hei); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.freq-item .sub { font: 12px var(--hei); color: #666; }
.freq-empty { padding: 18px; font: 14px var(--hei); color: #666; text-align: center; }
.resume-bar { grid-column: 1; grid-row: 2; align-self: start; justify-self: center; z-index: 2; margin-top: 8px; padding: 6px 14px; background: #fff3b8; border: 1px solid #c9a227; font: 13px var(--hei); box-shadow: 0 2px 6px rgba(0,0,0,.35); }

/* —— 对局室 —— */
/* 棋盘区按棋盘定宽（脚本算），左右两栏靠着棋盘、整体居中；宽屏多出来的空白留在两边，不夹在中间 */
.room { display: flex; justify-content: center; height: 100%; background: var(--tan) var(--paper); }
/* 左栏和右栏一样宽，两张卡片分在上下两端；矮窗口按高度逐级缩小，每一级在本级最矮时也要放得下（留出字体差异的余量）。
   窗口矮于 660 时整个客户端等比缩小（app.js 的 fit），版面按 660 高排，所以最后一级按 660 高算 */
.room-left { --av: 86px; --nm: 17px; --txt: 14px; --clk: 28px; width: 238px; flex: none; display: flex; flex-direction: column; padding: 8px 4px 8px 8px; min-height: 0; }
@media (max-height: 820px) { .room-left { --av: 72px; --nm: 16px; --txt: 13px; --clk: 24px; } }
@media (max-height: 780px) { .room-left { --av: 60px; --nm: 15px; --txt: 13px; --clk: 21px; } }
@media (max-height: 720px) {
  .room-left { --av: 50px; }
  .room-left .pcard { padding-top: 12px; }
  .room-left .pcard .stone-badge { width: 22px; height: 22px; left: -9px; bottom: -7px; }
}
.pcard {
  position: relative;
  padding: 15px 10px 10px;
  text-align: center;
  background: #dbc08b var(--grain);
  border: 1px solid #7e5d2c;
  box-shadow: inset 0 0 0 4px #cfb07a, inset 0 0 0 5px #8b6a37;
}
.pcard::before, .pcard::after, .pcard .corner-b::before, .pcard .corner-b::after {
  content: ""; position: absolute; width: 9px; height: 9px; border: 1.5px solid #6b4c22;
}
.pcard::before { left: 8px; top: 8px; border-right: 0; border-bottom: 0; }
.pcard::after { right: 8px; top: 8px; border-left: 0; border-bottom: 0; }
.pcard .corner-b::before { left: 8px; bottom: 8px; border-right: 0; border-top: 0; }
.pcard .corner-b::after { right: 8px; bottom: 8px; border-left: 0; border-top: 0; }
.pcard .av-wrap { position: relative; width: var(--av); height: var(--av); margin: 0 auto; }
.pcard .av-wrap img { width: var(--av); height: var(--av); border: 2px solid #f8f4ea; outline: 1px solid #7e5d2c; background: #fff; display: block; object-fit: cover; cursor: pointer; }
.pcard .stone-badge { position: absolute; left: -11px; bottom: -9px; width: 27px; height: 27px; border-radius: 50%; box-shadow: 1px 2px 2px rgba(0,0,0,.35); }
.pcard .stone-badge.b { background: radial-gradient(circle at 35% 30%, #888, #1a1a1a 48%, #000); }
.pcard .stone-badge.w { background: radial-gradient(circle at 35% 30%, #fff, #e3eff2 55%, #a3c0c8); border: 1px solid #86a2aa; }
.pcard .nm { margin-top: 8px; font: bold var(--nm) var(--hei); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .rec { font: var(--txt)/1.5 var(--hei); }
.pcard .rk { font: var(--txt)/1.4 var(--hei); }
.pcard .clk { font: var(--clk)/1.3 Tahoma, Arial, sans-serif; color: #1530a6; letter-spacing: 1px; }
.pcard .byo { font: 12px var(--hei); color: #9b1c1c; min-height: 16px; }
.pcard.to-move { box-shadow: inset 0 0 0 4px #cfb07a, inset 0 0 0 5px #8b6a37, 0 0 0 2px #fff6a6; }
.pcard.low .clk { color: #c81e1e; }
.pcard .caps { font: 12px var(--hei); color: #5b4521; }
.room-info { padding: 12px 4px; font: bold 13px/1.75 var(--hei); color: var(--blue-text); }
/* 对局类型：印章式双线框，升降赛朱红、友谊赛墨绿，不加底色；放在对局室编号前（对局室左栏和编号同一行，几乎不占高度） */
.kind-tag { display: inline-block; padding: 0 5px 0 7px; margin-right: 6px; font: bold 12px/18px var(--hei); letter-spacing: 2px; border: 3px double; vertical-align: 1px; }
.kind-tag.ranked { color: #ad2418; }
.kind-tag.friendly { color: #22622a; }
.room-info > .kind-tag { margin-right: 8px; font-size: 15px; line-height: 22px; padding: 0 6px 0 9px; letter-spacing: 3px; vertical-align: middle; }
.room-info > .room-no { display: inline; vertical-align: middle; }
/* 矮窗口的对局信息要写在 .room-info 基本样式后面才生效 */
@media (max-height: 780px) {
  .room-info { padding: 6px 4px; font-size: 12px; }
  .room-info > .kind-tag { font-size: 14px; line-height: 20px; }
}
/* 最矮一级：观战人数并到「N手进行中」那一行，和观战面板一样 */
@media (max-height: 720px) {
  .room-info { padding: 3px 4px; }
  .room-info > .room-progress { display: inline; }
  .room-info > .watch-count { margin-left: 6px; }
}
.room-left .spacer { flex: 1 1 0; max-height: 40px; } /* 两张卡片和对局信息靠在一起，高窗口的空白留在下面 */
.room-tools { display: flex; gap: 4px; }
.tool-btn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; font: 12px var(--hei); background: linear-gradient(#fff6d6, #e5cf94); border: 1px solid #8d6a36; border-radius: 2px; }
.tool-btn.flash { animation: flash 1s steps(2) infinite; }
@keyframes flash { 50% { background: #ffd24a; } }

.room-board { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 8px 4px; }
.board-holder { position: relative; aspect-ratio: 1 / 1; height: 100%; max-width: 100%; }
.board-holder .board-svg { display: block; width: 100%; height: 100%; box-shadow: 2px 3px 6px rgba(60,40,10,.45); }
.board-holder.my-turn .board-svg { cursor: pointer; }
.board-banner { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 5px 16px; background: rgba(255,250,215,.95); border: 1px solid #b39232; font: 13px var(--hei); box-shadow: 0 2px 6px rgba(0,0,0,.3); white-space: nowrap; pointer-events: none; } /* 只是提示，点击穿过去落在棋盘上 */

.room-right { width: 238px; flex: none; display: flex; flex-direction: column; padding: 8px 8px 8px 4px; min-height: 0; }
.tabs { display: flex; gap: 2px; }
.tab { flex: 1; height: 24px; padding: 0; font: 12px var(--hei); background: linear-gradient(#f2f5f9, #ccd6e3); border: 1px solid #8a99ae; border-bottom: 0; border-radius: 3px 3px 0 0; }
.tab.on { background: #fff; font-weight: bold; }
.tab-body { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid #8a99ae; background: var(--cream); }
.movelist { flex: 1; overflow-y: auto; font: bold 12.5px/1.95 var(--hei); color: #1a1a1a; }
.movelist .mv { padding: 0 8px; white-space: nowrap; cursor: pointer; }
.movelist .mv:hover { background: #e9e6bf; }
.movelist .mv.cur { background: #0b0f86; color: #fff; }
.movelist .empty { padding: 8px; color: #8a8460; font-weight: normal; }
.hall-msgs { flex: 1; overflow-y: auto; padding: 4px 8px; font: 12.5px/1.75 var(--hei); }
.navy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); flex: none; width: 100%; margin-top: 6px; background: linear-gradient(#2a4c86, #15305e); border: 1px solid #08183a; }
.navy-grid button {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; height: 46px; margin: 0; padding: 0; white-space: nowrap;
  color: #fff;
  font: 25px/1 var(--xingkai);
  text-shadow: 1px 1px 0 #000, -1px 0 0 #0a1530, 0 0 3px #000;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(160,190,240,.18);
  border-bottom: 1px solid rgba(160,190,240,.18);
}
.navy-grid button:nth-child(2n) { border-right: 0; }
.navy-grid button:nth-child(n+3) { border-bottom: 0; }
.navy-grid button:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.navy-grid button.on { box-shadow: inset 0 0 0 2px #f9bb44; background: rgba(255,255,255,.15); }
.navy-grid button:disabled { color: #8798b8; text-shadow: none; cursor: default; }
.lb-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 31px; margin-top: 4px;
  font: 13.5px var(--hei); color: #13325c;
  background: linear-gradient(#e2f3fd 0%, #b5dbf3 48%, #93c4e8 52%, #b8dcf2 100%);
  border: 1px solid #6c9dc8;
}
.lb-btn:hover:not(:disabled) { filter: brightness(1.05); }
.lb-btn:disabled { color: #7d93a8; cursor: default; }

/* 观战布局（剧中第9集笔记本上的样子）：棋盘在左，右上 VS 面板 */
.vs-panel { padding: 8px 8px 10px; background: #dbc08b var(--grain); border: 1px solid #7e5d2c; box-shadow: inset 0 0 0 3px #cfb07a, inset 0 0 0 4px #8b6a37; }
.vs-info { font: bold 11.5px/1.6 var(--hei); color: var(--blue-text); text-align: center; margin-bottom: 6px; }
.vs-info .drama-note { font-weight: normal; font-size: 11px; line-height: 1.45; color: #6b5a3a; margin-top: 2px; }
.vs-row { display: grid; grid-template-columns: 1fr 26px 1fr; align-items: center; text-align: center; }
.vs-row .vs { font: italic bold 18px Georgia, serif; color: #6a3a10; }
.vs-side .av-wrap { position: relative; width: 58px; height: 58px; margin: 0 auto; }
.vs-side img { width: 58px; height: 58px; border: 2px solid #f8f4ea; outline: 1px solid #7e5d2c; background: #fff; object-fit: cover; cursor: pointer; }
.vs-side .stone-badge { position: absolute; left: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%; }
.vs-side .stone-badge.b { background: radial-gradient(circle at 35% 30%, #888, #1a1a1a 48%, #000); }
.vs-side .stone-badge.w { background: radial-gradient(circle at 35% 30%, #fff, #e3eff2 55%, #a3c0c8); border: 1px solid #86a2aa; }
.vs-side .nm { font: bold 13px var(--hei); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-side .nm small { font-weight: normal; color: #5a4420; }
.vs-side .clk { display: inline-block; margin-top: 3px; padding: 1px 6px; font: 15px Tahoma, Arial, sans-serif; color: #9fc3ff; background: #0a1a6a; border: 1px solid #000; letter-spacing: 1px; }
.vs-side.to-move .clk { color: #fff; background: #1a3acf; }
/* 观战：两列网格，「退出房间」单独占一行（原来一行排五个挤不下，最后一个看不见） */
.watch-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; margin-top: 6px; }
.watch-tools .lb-btn { min-width: 0; margin-top: 0; padding: 0 2px; gap: 4px; font-size: 12.5px; white-space: nowrap; }
.watch-tools .watch-exit { grid-column: 1 / -1; }
.watch-tools.record-tools, .watch-tools.social-tools { grid-template-columns: repeat(3,minmax(0,1fr)); }
.record-tools .lb-btn, .social-tools .lb-btn { min-width: 0; }
.social-tools .record-share, .record-tools .record-chat { grid-column: 1 / -1; }
.record-tools .record-chat { order: 1; }
/* 棋谱评论（剧中没有，补全）：评整盘或某一手，点「第N手」跳过去 */
.gcmt-box { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gcmt-box[hidden] { display: none; }
.gcmt-list { flex: 1; overflow-y: auto; padding: 2px 8px; font: 12.5px/1.6 var(--hei); }
.gcmt { padding: 5px 0; border-bottom: 1px dotted #c9bfa6; }
.gcmt.cur { background: #fff3c4; }
.gcmt.hl { background: #ffe39a; }
.gcmt .hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: #555; }
.gcmt .nm { font-weight: bold; color: #1238b8; }
.gcmt .own { font-size: 11px; color: #a0521d; }
.gcmt .mv { color: #b0301c; font-weight: bold; }
.gcmt .mv.all { color: #777; font-weight: normal; }
.gcmt .t { margin-left: auto; font-size: 11px; color: #999; }
.gcmt .bd { white-space: pre-wrap; word-break: break-word; color: #1a1a1a; }
.gcmt .re { color: #777; }
.gcmt .tl { display: flex; gap: 10px; justify-content: flex-end; font-size: 11.5px; }
.gcmt .tl a { color: #555; }
.gcmt .tl a.on { color: #b0301c; }
.gcmt-empty { padding: 14px 0; text-align: center; }
.gcmt-form { flex: none; padding: 6px; border-top: 1px solid #8a99ae; background: #eef1f5; }
.gcmt-text { display: block; width: 100%; height: 52px; resize: none; box-sizing: border-box; font: 12.5px/1.5 var(--hei); border: 1px solid #8a99ae; padding: 3px 5px; }
.gcmt-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.gcmt-move { display: flex; align-items: center; gap: 3px; font: 12px var(--hei); color: #333; }
.gcmt-reply { font: 12px var(--hei); color: #6b5530; margin-bottom: 3px; }
.gcmt-reply a, .gcmt-login a { color: #1238b8; }
.gcmt-login { flex: none; padding: 8px; border-top: 1px solid #8a99ae; font: 12.5px var(--hei); text-align: center; background: #eef1f5; }
/* 对局礼仪的快捷语、结果框里的点赞和分享 */
.gchat-quick { flex: none; display: flex; gap: 4px; padding: 4px 6px; background: #eef1f5; border-top: 1px solid #c9ccd3; }
.gchat-quick button { font: 12px var(--hei); padding: 1px 8px; border: 1px solid #9aa6b8; border-radius: 2px; background: linear-gradient(#fff, #e3e8ef); color: #1a2a4a; cursor: pointer; }
.gchat-quick button:hover { border-color: #3c7fd1; }
/* 按钮不压缩，放不下就换行；「本局获得 1 人气点」单独一行 */
.vd-social { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; padding: 6px 0 4px; font: 13px var(--hei); }
.vd-social .xp-btn { flex: none; white-space: nowrap; }
.vd-earned { flex-basis: 100%; text-align: center; color: #b0301c; font-weight: bold; }

/* 数子面板 */
.score-box .sb-head { display: flex; justify-content: space-between; }
.score-box .score-left { font: bold 13px Tahoma, sans-serif; color: #b01818; }
.score-box { margin-top: 6px; padding: 8px 10px; background: #fffbe0; border: 1px solid #b39232; font: 12.5px/1.7 var(--hei); }
.score-box .big { font: bold 14px var(--hei); color: #9b1c1c; }
.score-box .acts { display: flex; gap: 6px; margin-top: 6px; }
.score-box .acts .xp-btn { min-width: 0; flex: 1; height: 26px; font-size: 12.5px; }
/* 对方的悔棋、数子、和棋申请：右侧四键上面一条，不弹窗 */
.req-box { margin-top: 6px; padding: 6px 8px; background: #fff4cc; border: 1px solid #c8961e; font: 13px/1.6 var(--hei); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; animation: req-in .25s ease-out; }
.req-box[hidden] { display: none; }
.req-box .req-text { flex: 1 1 auto; min-width: 0; }
.req-box .req-text b { color: #0b2c9a; }
.req-box .req-left { font: bold 13px Tahoma, sans-serif; color: #b01818; }
.req-box .req-acts { display: flex; gap: 6px; flex-basis: 100%; }
.req-box .req-acts .xp-btn { flex: 1; min-width: 0; height: 26px; }
.req-box .req-sub { flex-basis: 100%; font-size: 12px; color: #6a5a2c; }
@keyframes req-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* 平板等触屏设备用电脑布局、打开了落子确认：确认按钮放在右侧 */
.board-confirm.mobile-only.desk-confirm { display: flex !important; gap: 6px; margin-top: 6px; }
.board-confirm.desk-confirm[hidden] { display: none !important; }
.board-confirm.desk-confirm .primary { flex: 1; min-width: 0; }
.dlg-msg .claim-wait:empty { display: none; }

/* 回放控制 */
.replay-bar { display: flex; gap: 3px; margin-top: 6px; }
.replay-bar button { flex: 1; height: 26px; padding: 0; font: 13px var(--hei); background: linear-gradient(#fdfdfd, #d9dde4); border: 1px solid #7d8899; }
.replay-bar button:hover { background: #fff; }
.replay-bar { flex-wrap: wrap; }
.replay-bar .replay-trial { flex-basis: 100%; height: 26px; letter-spacing: 1px; }
.replay-bar .replay-trial.on { color: #fff; background: linear-gradient(#2c4f9e, #0b2c7a); border-color: #0a1f5a; }
.replay-info { margin-top: 4px; font: 12px var(--hei); color: #333; text-align: center; }

/* 对局聊天小窗：「与 红烧虾 对话中」 */
.chat-win { position: absolute; z-index: 30; display: flex; flex-direction: column; }
.chat-win .xp-win-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.gchat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px; background: #eef0f2; font: 14px/1.5 var(--hei); }
.gchat-log .msg { margin-bottom: 10px; }
.gchat-log .hd { font-weight: bold; }
.gchat-log .hd.c1 { color: #1630b8; }
.gchat-log .hd.c2 { color: #26a046; }
.gchat-log .hd.c0 { color: #7a5a1a; }
.gchat-log .bd { font-weight: bold; color: #111; word-break: break-all; }
.gchat-log .sysmsg { color: #8a6a2a; font-size: 12.5px; margin-bottom: 8px; }
.gchat-input { display: flex; flex: none; gap: 4px; padding: 6px; background: #dfe4ea; border-top: 1px solid #b4bcc8; }
.gchat-input .text-input { flex: 1; }

/* —— 胜率榜 —— */
.rank-page, .acct-page, .records-page { height: 100%; overflow: auto; background: var(--tan) var(--paper); padding: 18px 22px 24px; }
.rank-head { display: flex; align-items: flex-end; gap: 16px; max-width: 980px; margin: 0 auto 10px; }
.rank-head h2 { margin: 0; font: 34px/1 var(--hupo); color: #172a6e; letter-spacing: 6px; transform: scaleX(1.08); transform-origin: left; }
.rank-tabs { display: flex; gap: 2px; margin-left: 20px; }
.rank-tabs .tab { flex: none; width: 92px; height: 26px; }
.rank-note { margin-left: auto; font: 12px var(--hei); color: #4f3b18; }
.rank-back { display: inline-flex; align-items: center; justify-content: center; margin-left: 12px; text-decoration: none; }
.rank-head .records-filter + .rank-back { margin-left: auto; }
.rank-table { width: 100%; max-width: 980px; margin: 0 auto; border-collapse: collapse; background: var(--cream-2); border: 1px solid var(--tan-dark); font: 13px var(--hei); }
.rank-table th { height: 28px; color: #fff; font-weight: normal; background: linear-gradient(#5c7fb8, #34588f); border: 1px solid #23406b; }
.rank-table td { height: 36px; padding: 2px 8px; text-align: center; border-bottom: 1px solid #e0d2a6; }
.rank-table tr:nth-child(even) td { background: #f4eccb; }
.rank-table td.nm { text-align: left; }
.rank-table td.nm a { color: #0b2c9a; font-weight: bold; text-decoration: none; }
.rank-table td.nm a:hover { text-decoration: underline; }
.rank-table img { width: 28px; height: 28px; vertical-align: middle; border: 1px solid #8a6a3a; background: #fff; }
.rank-table .place { font: italic bold 15px Georgia, serif; color: #6a3a10; }
.rank-table .p1 .place { color: #c8860a; }
.rank-table .p2 .place { color: #7d8a96; }
.rank-table .p3 .place { color: #a0602a; }
.rank-table .rate { color: #b01818; font-weight: bold; }
.rank-table .online { color: #2a8a2a; font-size: 12px; }
.rank-empty { padding: 30px; text-align: center; font: 14px/2 var(--hei); color: #5a4420; }

/* —— 棋手资料（剧中：米黄页面、大字签名、注册时间、我的棋局缩略图）—— */
/* 棋手主页：照剧中后期「褚嬴的主页」 */
.home-page { height: 100%; overflow: auto; background: var(--tan) var(--paper); }
.home-sheet {
  width: 70%; min-width: 620px; max-width: 940px; min-height: 100%; margin: 0 auto; padding-bottom: 16px;
  display: flex; flex-direction: column; align-items: center;
  background: #e8dcc1 var(--grain); border-left: 1px solid #b09a6c; border-right: 1px solid #b09a6c;
}
.home-title {
  align-self: stretch; height: 30px; text-align: center;
  color: #fff; font: bold 15px/30px var(--hei); letter-spacing: 3px;
  background: linear-gradient(#f5a568, #ee8746 55%, #e2742f); border-bottom: 1px solid #b85a1e;
}
.home-av { width: 120px; height: 120px; margin-top: 12px; border: 2px solid #2b2620; background: #fff; object-fit: cover; }
.home-name { margin-top: 6px; font: bold 32px/1.15 var(--hei); color: #1c48a8; letter-spacing: 1px; }
.home-sign { font: bold 19px/1.5 var(--hei); color: #23201b; }
.home-facts { margin-top: 10px; width: 360px; display: grid; grid-template-columns: 1fr 1fr; font: bold 13.5px/21px var(--hei); color: #262320; }
.home-facts .k { text-align: right; }
.home-games { margin-top: 14px; display: flex; align-items: flex-start; gap: 8px; }
.home-games .lbl { padding-top: 4px; font: bold 13px var(--hei); color: #262320; }
.home-strip-box { position: relative; width: 520px; padding: 8px 18px 6px; background: #efede8; border: 1px solid #8e8576; box-shadow: inset 1px 1px 0 #fff; }
.home-strip { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.home-strip::-webkit-scrollbar { display: none; }
.home-strip-btn {
  position: absolute; top: 0; bottom: 0; width: 16px; padding: 0; border: none; cursor: pointer;
  color: #444; font: 11px var(--ui); background: linear-gradient(90deg, #e6e3db, #d3cec3);
}
.home-strip-btn.prev { left: 0; border-right: 1px solid #a49c8c; }
.home-strip-btn.next { right: 0; border-left: 1px solid #a49c8c; }
.home-strip-btn:hover { color: #000; background: #dcd7cc; }
.home-actions { margin-top: 14px; display: flex; gap: 12px; }
.home-kudos-hint { margin-top: 6px; padding: 0 12px; text-align: center; font: 12px/1.6 var(--hei); color: #655d50; }
/* 屏蔽、举报：页面右下角的灰色小字，不和上面那排按钮平级（补全） */
.home-more { align-self: stretch; margin-top: 10px; padding: 0 7%; display: flex; justify-content: flex-end; gap: 16px; }
.home-more button { padding: 0; border: 0; background: none; font: 12px var(--hei); color: #8a7f6c; cursor: pointer; }
.home-more button:hover { color: #262320; text-decoration: underline; }
.home-facts .watch-link { margin-left: 10px; color: #1c48a8; text-decoration: underline; }
/* 以前的网址里是名字、几位棋手用着这个昵称：列出来选（补全） */
.same-name-list { margin-top: 18px; width: 520px; display: flex; flex-direction: column; gap: 8px; }
.same-name-row {
  display: grid; grid-template-columns: 48px 1fr auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 8px 12px; color: #262320; text-decoration: none; background: #f4ecd9; border: 1px solid #c9b088;
}
.same-name-row:hover { background: #fff7e3; border-color: #8a7350; }
.same-name-row img { grid-row: 1 / 3; width: 48px; height: 48px; border: 1px solid #2b2620; background: #fff; object-fit: cover; }
.same-name-row .nm { font: bold 16px var(--hei); color: #1c48a8; }
.same-name-row .rk, .same-name-row .rec { font: 13px var(--hei); }
.same-name-row .dt { grid-column: 2 / 5; font: 12px var(--hei); color: #6b5a3a; }
/* 右上角「私信」「对战」（剧中第9集「荧光粉的主页」） */
.home-sheet { position: relative; }
.home-side { position: absolute; top: 44px; right: 7%; display: flex; flex-direction: column; gap: 12px; }
.home-side-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 92px; height: 32px; cursor: pointer;
  font: bold 13px var(--hei-b); color: #222; background: linear-gradient(#f8ebd0, #ead6ae);
  border: 1px solid #c9b088; border-right-color: #8a7350; border-bottom-color: #8a7350; box-shadow: 1px 1px 0 #6e5a3c;
}
.home-side-btn:hover:not(:disabled) { background: linear-gradient(#fdf3de, #f0dfbd); }
.home-side-btn:disabled { color: #9a8a70; cursor: default; }
.home-side-btn:disabled .ico { opacity: .45; }
.home-actions .xp-btn { min-width: 112px; height: 32px; font-weight: bold; }
.gthumb { flex: none; width: 96px; text-align: center; cursor: pointer; text-decoration: none; }
.gthumb .tb { width: 92px; height: 92px; margin: 0 auto; border: 1px solid #8a6a2a; background: #efc256; box-shadow: 2px 2px 3px rgba(0, 0, 0, .25); }
.gthumb .tb svg { display: block; width: 100%; height: 100%; }
.gthumb .opp { margin-top: 5px; font: bold 12.5px var(--hei); color: #1f2f9c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gthumb .dt { font: bold 12px Tahoma, sans-serif; color: #222; }
.gthumb:hover .tb { outline: 2px solid #e04a10; }
.gthumb.no-record { cursor: help; }
.no-games { padding: 40px 10px; color: #6b5530; font: 13px var(--hei); }

/* —— 账号设置 —— */
.acct-panel { max-width: 780px; margin: 0 auto 16px; }
.acct-body { display: flex; gap: 40px; padding: 22px 32px; }
.acct-actions { display: flex; gap: 12px; justify-content: center; padding: 0 0 18px; }
.privacy-body { padding: 16px 32px; }
.privacy-choice { display: inline-flex; align-items: center; gap: 6px; font: 13px var(--hei); cursor: pointer; }
.privacy-help { margin: 8px 0; color: #6b5530; font: 13px/1.7 var(--hei); }
.danger-zone { max-width: 780px; margin: 0 auto; padding: 12px 18px; background: #f6e4d0; border: 1px solid #b06a40; font: 13px/1.8 var(--hei); display: flex; align-items: center; gap: 16px; }
.danger-zone .xp-btn { border-color: #8a1a0a; color: #8a1a0a; }

/* —— 棋谱列表 —— */
.records-table { width: 100%; max-width: 980px; margin: 0 auto; border-collapse: collapse; background: var(--cream-2); border: 1px solid var(--tan-dark); font: 13px var(--hei); }
.records-table th { height: 26px; color: #fff; font-weight: normal; background: linear-gradient(#5c7fb8, #34588f); border: 1px solid #23406b; }
.records-table td { padding: 5px 8px; border-bottom: 1px solid #e0d2a6; text-align: center; }
.records-table td a { color: #0b2c9a; }

/* —— 窄屏：整个「窗口」等比缩小 —— */
body.scaled .xp-main { border: 0; }
.notice-link { color: #1238b8; text-decoration: underline; margin-left: 4px; }

/* —— 第8集 —— */
/* 对局室：聊天按钮在对手卡片里；卡片之间三行蓝字 */
.pcard .card-chat { margin: 8px auto 0; }
.watch-count { padding: 0 3px; border: 0; background: transparent; font: inherit; font-weight: normal; color: #1238b8; text-decoration: underline; cursor: pointer; }
.watch-count:hover { color: #8b3b10; }
.watch-count:focus-visible { outline: 2px solid #315ac5; outline-offset: 2px; }
.watchers-dlg .dlg-msg { width: 100%; min-width: 0; margin: 0; }
.watcher-summary { margin-bottom: 8px; font: bold 13px/1.6 var(--hei); color: #13325c; }
.watcher-list { margin: 0; padding: 0; list-style: none; max-height: 360px; max-height: min(360px, 50dvh); overflow-y: auto; }
.watcher-person { display: flex; gap: 10px; align-items: center; min-height: 52px; padding: 6px 4px; border-bottom: 1px dotted #b8ae92; color: #1238b8; text-decoration: none; }
.watcher-person:hover { background: #fff5ce; }
.watcher-person:focus-visible { background: #fff5ce; }
.watcher-person img { flex: none; width: 36px; height: 36px; object-fit: cover; border: 1px solid #9d8b64; }
.watcher-detail { min-width: 0; overflow-wrap: anywhere; font: 13px/1.6 var(--hei); }
.watcher-name { display: block; font-weight: bold; }
.watcher-detail small { display: block; color: #6b5a3a; font-size: 11px; }
.watcher-empty { padding: 20px 4px; text-align: center; font: 13px var(--hei); color: #6b5a3a; }
/* 聊天窗：上面记录、下面一大块输入区（回车发送） */
.chat-win .gchat-log .bd { font-weight: bold; color: #1a1a1a; }
.gchat-input { padding: 0; border-top: 1px solid #c9ccd3; }
.gchat-text { display: block; width: 100%; height: 96px; resize: none; border: none; padding: 8px 10px; font: bold 14px/1.6 var(--hei); color: #111; background: #fff; outline: none; }
.gchat-text::placeholder { font-weight: normal; color: #b0b4bb; }
.gchat-status { flex: none; padding: 5px 10px; font: 12px/1.5 var(--hei); color: #79581d; background: #fff8dd; }
.gchat-text:disabled { color: #777; background: #f1f1f1; cursor: not-allowed; }

/* 头像代替图标的对话框（「玩家褚嬴 向你发起了对战请求」） */
.dlg-avatar { width: 64px; height: 64px; flex: none; border: 1px solid #555; background: #fff; object-fit: cover; }
.dlg-msg .who.u { color: #111; font-weight: bold; text-decoration: underline; }
/* 剧中第9集：「褚嬴 第13次 向你发起对战请求」「荧光粉 请求添加你为好友」——蓝字带下划线 */
.dlg-msg .times { color: #1d2bd0; text-decoration: underline; }
.dlg-msg .who.link { color: #1d2bd0; font-family: var(--hei-b); font-weight: bold; text-decoration: underline; }
/* 私信提示：窗口左下角的小窗，不挡别的操作（剧中第9集） */
.pm-notice { position: fixed; left: 6px; bottom: 30px; box-shadow: 2px 3px 10px rgba(0, 0, 0, .35); }
.pm-notice .dlg-msg { font: bold 15px/1.6 var(--hei-b); }
.pm-notice .pmn-open { color: #2a1ab0; text-decoration: none; }
.pm-notice .pmn-open:hover { text-decoration: underline; }
.invite-dlg .dlg-msg { font-size: 16px; }
.conn-dlg .dlg-msg, .invite-dlg .dlg-msg { line-height: 1.6; }

/* 结果框：「胜利 对手认输了」+ 胜方 / 败方 */
.verdict-dlg .dlg-content { padding: 0; }
.verdict-dlg .dlg-msg { margin: 0; }
.verdict { padding: 14px 26px 6px; }
.vd-head { display: flex; align-items: center; justify-content: center; gap: 22px; padding-bottom: 12px; border-bottom: 1px solid #cfd3da; }
.vd-big { position: relative; width: 104px; height: 96px; font: bold 46px/1 var(--kai, "STKaiti", "KaiTi", serif); color: #111; }
.vd-big .vd-moon { position: absolute; left: 30px; top: 10px; width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #ffffff, #eef0f4 70%, rgba(238,240,244,0)); }
.vd-big .c1, .vd-big .c2 { position: absolute; }
.vd-big .c1 { left: 6px; top: 2px; }
.vd-big .c2 { left: 52px; top: 46px; }
.verdict.lose .vd-big { color: #3a3f48; }
.vd-reason { font: bold 30px var(--kai, "STKaiti", "KaiTi", serif); color: #f3c21a; letter-spacing: 2px;
  text-shadow: -1.5px -1.5px 0 #6a4206, 1.5px -1.5px 0 #6a4206, -1.5px 1.5px 0 #6a4206, 1.5px 1.5px 0 #6a4206, 2px 3px 3px rgba(0,0,0,.35); }
.verdict.lose .vd-reason { color: #c9ced8; text-shadow: -1.5px -1.5px 0 #333a46, 1.5px -1.5px 0 #333a46, -1.5px 1.5px 0 #333a46, 1.5px 1.5px 0 #333a46; }
.vd-sides { display: flex; justify-content: space-around; padding: 16px 0 6px; }
.vd-side { display: flex; align-items: center; gap: 14px; }
.vd-side img { width: 74px; height: 74px; border: 1px solid #555; background: #fff; object-fit: cover; }
.vd-tag { font: bold 15px var(--hei); }
.vd-tag.w { color: #1fa33a; }
.vd-tag.l { color: #d0302a; }
.vd-name { font: bold 19px/1.5 var(--hei); color: #111; }
.vd-rec { font: 15px var(--hei); color: #222; }
.vd-note { text-align: center; font: 13px var(--hei); color: #555; padding-bottom: 4px; }

/* 寻找对手 */
.finder-dlg .dlg-content { padding: 0; }
.finder-dlg .dlg-msg { margin: 0; }
.finder-dlg .dlg-buttons, .login-dlg .dlg-buttons { display: none; }
.finder-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #c9ccd3; }
.finder-tab { height: 46px; border: none; border-right: 1px solid #d6d8dd; background: linear-gradient(#fafafa, #ececec); font: 17px var(--hei); color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.finder-tab:last-child { border-right: none; }
.finder-tab .dot { width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.finder-tab.on { background: #fff; color: #111; }
.finder-tab.on .dot { background: #2fb34a; }
.finder-stage { min-height: 150px; display: flex; align-items: center; justify-content: center; padding: 14px 20px; background: #f3f4f6; border-bottom: 1px solid #c9ccd3; }
.finder-card { display: flex; align-items: center; gap: 26px; }
.finder-card img { width: 78px; height: 78px; border: 1px solid #555; background: #fff; object-fit: cover; }
.finder-card .nm { display: flex; align-items: center; gap: 30px; font: 21px var(--hei); color: #111; }
.finder-card .st, .finder-list .st { display: inline-flex; align-items: center; gap: 6px; font: 18px var(--hei); color: #888; }
.finder-card .st .dot { width: 11px; height: 11px; border-radius: 50%; background: #aaa; }
.finder-card .st.free { color: #20a63a; }
.finder-card .st.free .dot { background: #20a63a; }
.finder-card .rk { margin-top: 10px; font: 19px var(--hei); color: #222; }
.finder-list { width: 100%; max-height: 200px; overflow: auto; background: #fff; border: 1px solid #cfd3da; }
.finder-list .row { display: grid; grid-template-columns: 30px 1fr 80px 70px; align-items: center; gap: 8px; padding: 3px 8px; font: 14px var(--hei); cursor: pointer; }
.finder-list .row img { width: 26px; height: 26px; border: 1px solid #999; }
.finder-list .row.on { background: #316ac5; color: #fff; }
.finder-list .row .st { font-size: 13px; }
.finder-list .row .st.free { color: #20a63a; }
.finder-list .row.on .st { color: #fff; }
.finder-empty { font: 14px var(--hei); color: #666; text-align: center; }
.finder-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 18px; }
.finder-actions { display: flex; align-items: center; justify-content: center; gap: 34px; padding: 18px 0 8px; background: #f3f4f6; }
.finder-fight { height: 40px; padding: 0 26px; background: #fff; border: 1px solid #c9ccd0; box-shadow: 1px 1px 0 #9a9ea4; font: 17px var(--hei); color: #222; cursor: pointer; }
.finder-fight:disabled { color: #aaa; cursor: default; }
.finder-next { font: bold 17px var(--hei); color: #1238b8; text-decoration: underline; }

/* —— 围达博客（剧中 bloggo.cn）：浏览器里的网页，不显示客户端外壳 —— */
body.bare-page #titlebar, body.bare-page #menubar, body.bare-page .masthead, body.bare-page #statusbar { display: none; }
body.bare-page .xp-main { border: none; background: #fff; }
body.bare-page #view { overflow: auto; }
.blog-page { min-height: 100%; background: #fff; font: 14px/1.8 var(--hei); color: #222; }
.blog-wrap { width: 1000px; max-width: calc(100% - 32px); margin: 0 auto; padding: 18px 0 40px; }
.blog-top { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 4px 10px; }
.blog-brand { display: flex; flex-direction: column; text-decoration: none; color: #111; }
.bb-cn { font: bold 34px/1.1 var(--hei); letter-spacing: 3px; }
.bb-url { font: bold 13px Tahoma, Verdana, sans-serif; color: #333; letter-spacing: 1px; }
.blog-nav { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; }
.blog-nav a { color: #2a5db0; }
.blog-banner { position: relative; height: 280px; background: #c98c4a url(/img/blog-banner.svg) center / cover no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px; }
.blog-banner span { font: bold 34px var(--hei); color: #fff; letter-spacing: 4px; text-shadow: 0 2px 6px rgba(0, 0, 0, .65); }
.blog-body { display: flex; gap: 40px; margin-top: 26px; }
.blog-main { flex: 1; min-width: 0; }
.blog-side { width: 250px; flex: none; font-size: 14px; }
.bs-mail a { font: bold 18px var(--hei); color: #111; text-decoration: none; }
.bs-mail a:hover { text-decoration: underline; }
.bs-new { margin-left: 8px; font-size: 12px; color: #c0272d; }
.bs-welcome { margin-top: 14px; font: bold 15px var(--hei); }
.bs-links { display: flex; gap: 18px; margin-top: 6px; }
.bs-links a, .bs-list a, .bs-foot a { color: #2a5db0; }
.bs-owner { display: flex; gap: 12px; align-items: center; }
.bs-owner img { width: 64px; height: 64px; border: 1px solid #999; object-fit: cover; }
.bs-head { margin-top: 26px; padding-bottom: 4px; border-bottom: 1px solid #ddd; font: bold 16px var(--hei); color: #555; }
.bs-list { display: flex; flex-direction: column; padding-top: 6px; }
.bs-foot { margin-top: 30px; }
.bs-acts { display: flex; gap: 8px; margin-top: 10px; }
.bs-guest { padding: 12px 14px; background: #f7f4ec; border: 1px solid #e6dcc4; }
.bs-guest .bs-links { align-items: center; margin-top: 10px; }
.bs-owner + .bs-links { margin-top: 10px; }
.bs-cmts { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; font-size: 13px; line-height: 1.6; }
.bs-cmt { color: #444; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bs-cmt:hover { color: #2a5db0; }
.bs-people { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.bs-person { display: flex; gap: 10px; align-items: center; color: #222; text-decoration: none; }
.bs-person img { width: 36px; height: 36px; flex: none; border: 1px solid #ccc; object-fit: cover; }
.bs-person:hover .bs-pname { color: #2a5db0; }
.bs-pname { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.bs-pname .muted { font-size: 12px; }
.blog-filter { display: flex; gap: 14px; align-items: baseline; margin-bottom: 18px; padding: 6px 10px; background: #f7f4ec; font-size: 13px; }
.blog-filter a { color: #2a5db0; }
.blog-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 6px; font-size: 13px; }
.blog-pager a, .blog-pager .cur { min-width: 30px; padding: 3px 8px; text-align: center; border: 1px solid #ddd; color: #2a5db0; text-decoration: none; }
.blog-pager a:hover { border-color: #2a5db0; }
.blog-pager .cur { color: #fff; background: #2a5db0; border-color: #2a5db0; }
.blog-pager .gap { color: #999; }
/* 博客首页 */
.bh-banner { height: 150px; }
.bh-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; border-bottom: 2px solid #c98c4a; }
.bh-tabs { display: flex; gap: 2px; }
.bh-tab { padding: 6px 16px; font: bold 15px var(--hei); color: #555; text-decoration: none; }
.bh-tab:hover { color: #2a5db0; }
.bh-tab.on { color: #fff; background: #c98c4a; }
.bh-search { display: flex; gap: 6px; padding-bottom: 6px; }
.bh-search .text-input { width: 170px; }
.post-author { display: inline-flex; align-items: center; gap: 5px; color: #2a5db0; text-decoration: none; }
.post-author img { width: 18px; height: 18px; border: 1px solid #ccc; object-fit: cover; }
.post-pick { margin-left: 8px; padding: 0 4px; font: bold 12px/18px var(--hei); color: #fff; background: #c0272d; vertical-align: 4px; }
.post-adj { display: flex; justify-content: space-between; gap: 20px; margin-top: 26px; padding-top: 12px; border-top: 1px dashed #ddd; font-size: 13px; }
.post-adj a { color: #2a5db0; max-width: 48%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* 评论 */
.cmt-sec { margin-top: 34px; }
.cmt-head { margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid #ddd; font: bold 18px var(--hei); }
.cmt-form { margin-bottom: 16px; }
.cmt-input { display: block; width: 100%; height: 80px; resize: vertical; font: 14px/1.6 var(--hei); }
.cmt-send { display: flex; justify-content: flex-end; margin-top: 6px; }
.cmt-replying { display: flex; gap: 12px; margin-bottom: 6px; font-size: 13px; color: #6b5530; }
.cmt-replying a, .cmt-login a { color: #2a5db0; }
.cmt-login { margin-bottom: 16px; padding: 12px 14px; background: #f7f4ec; font-size: 13px; }
.cmt-empty { padding: 20px 0; color: #999; font-size: 13px; }
.cmt { display: flex; gap: 12px; padding: 12px 6px; border-bottom: 1px solid #eee; transition: background 1.5s; }
.cmt.fresh { background: #f6f9ff; }
.cmt.hl { background: #fff8e0; }
.cmt-av { width: 36px; height: 36px; flex: none; border: 1px solid #ccc; object-fit: cover; }
.cmt-main { flex: 1; min-width: 0; }
.cmt-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: 13px; }
.cmt-name { font-weight: bold; color: #2a5db0; }
.cmt-tag { padding: 0 4px; font-size: 11px; color: #fff; background: #c98c4a; }
.cmt-on a { color: #2a5db0; }
.cmt-time { font-size: 12px; color: #999; }
.cmt-text { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmt-re { color: #8a8f99; }
.cmt-tools { display: flex; gap: 14px; justify-content: flex-end; font-size: 12px; }
.cmt-tools a { color: #8a8f99; }
.cmt-tools a:hover { color: #2a5db0; }
.cmt-more { margin-top: 12px; text-align: center; }
.cmt-dlg-text { height: 120px; }
.blog-empty, .blog-missing { padding: 40px 0; color: #777; }
.blog-missing { text-align: center; padding-top: 120px; }
.post-item { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px dashed #ddd; }
.post-item h2 { margin: 0; font: bold 22px/1.4 var(--hei); }
.post-item h2 a { color: #111; text-decoration: none; }
.post-item h2 a:hover { text-decoration: underline; }
.post-meta { font-size: 12.5px; color: #8a8f99; display: flex; gap: 14px; }
.post-meta .kind { color: #b0642a; }
.post-row { display: flex; gap: 16px; margin-top: 10px; }
.post-thumb { flex: none; width: 130px; }
.post-thumb svg, .post-diagram svg { display: block; width: 100%; height: auto; }
.post-excerpt { color: #6a7a96; }
.post-full h1 { margin: 0; font: bold 26px/1.4 var(--hei); }
.post-tools { display: flex; gap: 16px; margin-top: 6px; font-size: 13px; }
.post-tools a { color: #2a5db0; }
.post-diagram { max-width: 420px; margin: 16px 0; }
.post-text p { margin: 0 0 10px; text-indent: 2em; }
.post-quiz { margin: 16px 0; }
.post-answer { margin-top: 10px; padding: 10px 14px; background: #fff8e6; border: 1px solid #f0d9a0; }
.post-nav { display: flex; justify-content: space-between; margin-top: 30px; font-size: 13px; }
.post-nav a { color: #2a5db0; }
.letters-head { margin: 0 0 14px; font: bold 24px var(--hei); }
.letter { padding: 12px 14px; border-bottom: 1px solid #eee; }
.letter.unread { background: #f6f9ff; }
.lt-head { display: flex; gap: 14px; align-items: baseline; }
.lt-from { font-weight: bold; color: #2a5db0; }
.lt-time { font-size: 12px; color: #999; }
.lt-new { font-size: 11px; color: #fff; background: #c0272d; padding: 0 5px; border-radius: 2px; }
.lt-text p { margin: 4px 0; }
.lt-tools { display: flex; gap: 8px; justify-content: flex-end; }
.letters-more { margin-top: 14px; text-align: center; }
.letter-text { display: block; width: 100%; height: 180px; resize: vertical; font: 14px/1.6 var(--hei); }
.blog-write h1 { margin: 0 0 12px; font: bold 22px var(--hei); }
.w-row { display: flex; gap: 10px; }
.w-title { flex: 1; }
.w-body { display: block; width: 100%; height: 220px; margin-top: 10px; resize: vertical; font: 14px/1.7 var(--hei); }
.w-answer { display: block; width: 100%; height: 70px; margin-top: 10px; font: 13px/1.6 var(--hei); }
.w-label { margin-top: 14px; font-size: 12.5px; color: #666; }
.w-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.w-tools .xp-btn.on { box-shadow: inset 0 0 0 2px #f9bb44; }
.w-turn { color: #6b5530; font: 13px var(--hei); }
.w-board { width: 420px; cursor: crosshair; border: 1px solid #ccc; }
.w-board svg { display: block; width: 100%; height: auto; }
.w-actions { display: flex; gap: 12px; margin-top: 16px; }

/* 对局设置表单、桌边「开始 / 接受」 */
.settings-form .row label { width: 76px; }
.gtable .cap .stand.go { color: #9ff09f; font-weight: bold; }

/* —— 研究模式 —— */
.study-left { width: 200px; gap: 8px; font: 13px var(--hei); }
.st-head { padding: 6px 0; text-align: center; color: #fff; font: bold 15px/1.4 var(--hei); letter-spacing: 3px; background: linear-gradient(#f5a568, #e2742f); border: 1px solid #b85a1e; }
.st-src { padding: 6px 8px; font: 12px/1.6 var(--hei); color: #4a3a1a; background: #efe2bd; border: 1px solid #c9b07a; }
.st-src a { color: #1238b8; font-weight: bold; }
.st-turn { display: flex; align-items: center; gap: 8px; font: bold 14px var(--hei); color: #222; }
.st-stone { width: 18px; height: 18px; border-radius: 50%; }
.st-stone.b { background: radial-gradient(circle at 35% 30%, #888, #1a1a1a 48%, #000); }
.st-stone.w { background: radial-gradient(circle at 35% 30%, #fff, #e3eef0 55%, #9fb5bb); border: 1px solid #86a2aa; }
.st-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.st-tool { height: 30px; font: 13px var(--hei); border: 1px solid #8a6a2a; border-radius: 3px; background: linear-gradient(#fbf3dc, #e9d6a6); cursor: pointer; }
.st-tool.on { color: #fff; background: linear-gradient(#2c4f9e, #0b2c7a); border-color: #0a1f5a; }
.st-caps { color: #4a3a1a; }
.st-row { display: flex; gap: 4px; flex-wrap: wrap; }
.st-count { padding: 6px 8px; font: 12.5px/1.7 var(--hei); background: #fffbe6; border: 1px solid #d9c27f; }
.st-result { font-weight: bold; color: #b01818; }
.st-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.st-new { display: flex; align-items: center; gap: 4px; }
.st-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 6px 0 4px; }
.st-nav .st-trial { grid-column: 1 / -1; height: 26px; font-size: 13px; letter-spacing: 1px; }
.st-nav .st-trial.on { color: #fff; background: linear-gradient(#2c4f9e, #0b2c7a); border-color: #0a1f5a; }
.st-files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.st-files .xp-btn { padding: 0 4px; white-space: nowrap; }
.st-trial-tag { padding: 0 5px; color: #fff; font: bold 12px/18px var(--hei); background: #0b2c7a; border-radius: 2px; }
.movelist .mv.trial-head { color: #0b2c7a; }
.movelist .mv.trial-head.cur { color: #fff; }
.movelist .mv.setup { color: #7a5a1a; font-weight: normal; }
.movelist .mv.setup.cur { color: #fff; }


/* —— 死活题（剧中没有）：沿用研究模式的米色面板、橙色标题条 —— */
.tsg-left { width: 210px; gap: 8px; font: 13px var(--hei); }
.tsg-left .tabs .tab { height: 28px; font-size: 13px; }
.tsg-panel { padding: 8px; background: var(--cream); border: 1px solid #8a99ae; border-top: 0; }
.tsg-box { display: flex; flex-direction: column; gap: 8px; }
.tsg-field { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tsg-field .sel { flex: 1; min-width: 0; }
.tsg-rule { color: #4a3a1a; font: 12px/1.6 var(--hei); }
.tsg-test-head { font: bold 14px var(--hei); color: #222; }
.tsg-clock { font: bold 26px/1.2 Arial, Helvetica, sans-serif; color: #0b2c7a; }
.tsg-clock.warn { color: #c01818; }
.tsg-dots { display: flex; gap: 4px; flex-wrap: wrap; }
.tsg-dots span { width: 12px; height: 12px; border-radius: 50%; background: #e4dcc4; border: 1px solid #b8a676; }
.tsg-dots span.cur { background: #fff; border-color: #0b2c7a; box-shadow: 0 0 0 1px #0b2c7a; }
.tsg-dots span.ok { background: #2f9a46; border-color: #1d6b2e; }
.tsg-dots span.bad { background: #d23a2a; border-color: #8f1d12; }
.tsg-me { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; line-height: 1.6; color: #4a3a1a; background: #efe2bd; border: 1px solid #c9b07a; }
.tsg-me .xp-btn { align-self: flex-start; }
.tsg-recent { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.tsg-mistakes { flex: none; } /* 错题本不和做题记录平分高度，记录紧跟在后面 */
.tsg-mistakes .tsg-list { max-height: 160px; }
.tsg-sub { padding: 4px 0; font: bold 13px var(--hei); color: #4a3a1a; }
.tsg-list { display: flex; flex-direction: column; overflow: auto; min-height: 0; background: var(--cream); border: 1px solid #c9b07a; }
.tsg-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; color: #222; font: 12.5px var(--hei); white-space: nowrap; text-decoration: none; border-bottom: 1px solid #eadfbf; }
.tsg-row:hover, .tsg-row.cur { background: #fff3c4; }
.tsg-row .muted { margin-left: auto; font-size: 11.5px; }
.tsg-row .ok { color: #1d7b33; font-weight: bold; }
.tsg-row .bad { color: #b01818; font-weight: bold; }
/* 电脑：左栏 + 棋盘一栏，整体居中。题目信息在棋盘上方，对错提示、按钮和出处紧贴棋盘下方，宽度和棋盘一样 */
.room.tsumego { display: grid; grid-template-columns: 210px minmax(360px, auto); grid-template-rows: auto auto auto auto minmax(0, 1fr); justify-content: center; }
.room.tsumego > .tsg-left { grid-column: 1; grid-row: 1 / -1; }
.room.tsumego > .tsg-info { grid-column: 2; grid-row: 1; justify-content: center; padding: 10px 4px 0; }
.room.tsumego > .room-board { grid-column: 2; grid-row: 2; }
.room.tsumego > .board-confirm { grid-column: 2; grid-row: 3; }
.room.tsumego > .tsg-under { grid-column: 2; grid-row: 4; width: 0; min-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 0 4px 8px; font: 13px var(--hei); }
/* 没有棋盘（还没开始测试、看测试结果）：这一栏按内容定宽，左栏不会偏在一边 */
.room.tsumego.no-board { grid-template-columns: 210px auto; }
.room.tsumego.no-board > .tsg-under { width: auto; min-width: 0; max-width: 560px; }
.tsg-left > .lb-btn { margin-top: auto; }
.tsg-info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 24px; font-size: 14px; color: #222; }
.tsg-status { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; min-height: 60px; padding: 8px 12px; box-sizing: border-box; background: #fffbe6; border: 1px solid #d9c27f; } /* 留够两行注释的高度，出提示时棋盘不跳 */
.tsg-status:empty { display: none; }
.tsg-head { font: bold 18px/1.4 var(--hei); color: #222; }
.tsg-head.ok { color: #1d7b33; }
.tsg-head.bad { color: #b01818; }
.tsg-note { font: 13px/1.7 var(--hei); color: #3a2c10; }
.tsg-status .tsg-list { grid-column: 1 / -1; margin-top: 8px; max-height: 300px; }
.tsg-act-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tsg-act-row:empty { display: none; }
.tsg-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tsg-actions .xp-btn { min-width: 84px; }
.tsg-actions .tsg-trial.on { color: #fff; background: linear-gradient(#2c4f9e, #0b2c7a); border-color: #0a1f5a; }
.tsg-nav { display: flex; gap: 4px; margin: 0; }
.tsg-nav .xp-btn { min-width: 44px; }
.tsg-src { color: #675633; font: 11.5px/1.6 var(--hei); }
.tsg-src a { color: #1238b8; }

/* —— 我的站内信（剧中第9集）：金橙色标题条，浅灰的信件区，白色回信框，米色底上蓝色「发送」—— */
.mail-sheet { min-height: 100%; display: flex; flex-direction: column; background: #f2e6c8; }
.mail-title { height: 26px; padding: 0 14px; color: #fff; font: bold 14px/26px var(--hei-b); letter-spacing: 1px; background: linear-gradient(#efb04e, #e5a03c 55%, #d88e2a); border-bottom: 1px solid #b0701c; }
.mail-send-row { display: flex; justify-content: flex-end; padding: 24px 14px 16px; background: #f2e6c8; }
.mail-send { width: 104px; height: 34px; cursor: pointer; font: bold 15px var(--hei-b); color: #10233a; background: linear-gradient(#d4f2ff, #8fd0f6 50%, #5fb6ec 51%, #78c4f2); border: 1px solid #3f86b8; }
.mail-send:hover:not(:disabled) { background: linear-gradient(#e2f7ff, #a2dbfa 50%, #6fc0f0 51%, #8ccef5); }
.mail-send:disabled { opacity: .6; cursor: default; }
.mail-empty { padding: 40px; text-align: center; font: 14px var(--hei); color: #6b5530; }
/* 站内信对话：左边按人列出对话，右边的往来照剧中聊天窗「与 红烧虾 对话中」——自己蓝字、对方绿字，下一行正文加粗 */
.pm-body { flex: 1; min-height: 0; display: flex; background: #eceeea; }
.pm-threads { width: 210px; flex: none; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #c9c7bf; background: #f6f5f1; }
.pm-thread-list { flex: 1; min-height: 0; overflow-y: auto; }
.pm-thread-list .mail-empty { padding: 30px 10px; }
.pm-thread { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: none; border-bottom: 1px solid #e2e0d8; background: none; text-align: left; font: 13px var(--hei); color: #111; cursor: pointer; }
.pm-thread:hover { background: #e4ecf7; }
.pm-thread.on { background: #316ac5; color: #fff; }
.pm-thread img { width: 34px; height: 34px; flex: none; border: 1px solid #8c8c86; background: #fff; object-fit: cover; }
.pm-thread-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-thread .nm { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-thread .pv { font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-thread-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pm-thread .tm { font: 11px Tahoma, sans-serif; color: #888; }
.pm-thread .link-badge { margin-left: 0; vertical-align: 0; }
.pm-thread.on .pv, .pm-thread.on .tm { color: #dfe8f8; }
.pm-more { display: block; margin: 6px auto; font-size: 12px; }
.pm-chat { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pm-chat-head { flex: none; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px; border-bottom: 1px solid #d2d0c8; font: bold 14px var(--hei-b); color: #1d1bb0; }
.pm-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-chat-ops { flex: none; display: flex; gap: 12px; font: 12.5px var(--hei); }
.pm-back { display: none; }
.pm-log { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px; background: #eef0f2; font: 14px/1.5 var(--hei); }
.pm-log .msg { margin-bottom: 10px; }
.pm-log .hd { font-weight: bold; }
.pm-log .hd.c1 { color: #1630b8; }
.pm-log .hd.c2 { color: #26a046; }
.pm-log .bd { font-weight: bold; color: #111; white-space: pre-wrap; overflow-wrap: anywhere; }
.pm-log .mail-empty { padding: 30px 10px; }
.pm-compose { flex: none; border-top: 1px solid #c9ccd3; background: #fff; }
.pm-text { display: block; width: 100%; height: 84px; resize: none; border: none; padding: 8px 10px; font: bold 14px/1.6 var(--hei); color: #111; background: #fff; outline: none; }
.pm-text::placeholder { font-weight: normal; color: #b0b4bb; }
.pm-compose .mail-send { width: 88px; height: 30px; font-size: 14px; }

/* —— 棋谱库筛选、战绩统计 —— */
.records-filter { display: flex; gap: 6px; align-items: center; }
.records-filter .text-input { width: 120px; height: 24px; }
.records-table td.res { color: #b01818; }
.records-table td.res .muted { font-size: 12px; }
.home-facts .stats-link { color: #262320; text-decoration: underline dotted; cursor: pointer; }
.home-facts .stats-link:hover { color: #1c48a8; }
.stats { font: 13px var(--hei); }
.stats-table { border-collapse: collapse; margin: 0 auto 10px; }
.stats-table td { padding: 3px 14px; border-bottom: 1px solid #e3dccb; }
.stats-table .rate { color: #b01818; font-weight: bold; }
.stats-recent { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin: 6px 0 10px; }
.stats-recent i { font-style: normal; width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 11px; color: #fff; border-radius: 2px; }
.stats-recent i.w { background: #c0392b; }
.stats-recent i.l { background: #7f8c8d; }
.stats-curve { margin: 4px auto; text-align: center; }
.stats-rating { text-align: center; margin-top: 6px; color: #3a2a10; }

/* —— 管理后台（剧中没有）：左边 XP 任务窗格式的模块列表，右边卡其色内容区 —— */
.adm-page { height: 100%; display: flex; background: var(--tan) var(--paper); font: 13px var(--hei); color: #222; }
.adm-nav { flex: none; width: 172px; padding: 12px 10px; overflow: auto; background: linear-gradient(#7ba2e7, #6375d6); border-right: 1px solid #3e57b4; }
.adm-nav-box { background: #f3f6fd; border-radius: 4px 4px 0 0; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.adm-nav-head { padding: 7px 10px; color: #fff; font: bold 13px var(--hei-b); background: linear-gradient(90deg, #0a49d8, #3b7cf4); }
.adm-nav-me { padding: 6px 10px; font-size: 12px; color: #2c3e78; background: #d6dff7; border-bottom: 1px solid #b6c4ea; }
.adm-nav a { display: flex; align-items: center; padding: 6px 12px; color: #1a3aa8; text-decoration: none; }
.adm-nav a:hover { color: #3b7cf4; text-decoration: underline; }
.adm-nav a.on { font-weight: bold; color: #0b2c9a; background: #dfe7fb; }
.adm-nav a .n { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; color: #fff; background: var(--red); font: bold 11px/16px Tahoma, sans-serif; text-align: center; }
.adm-main { flex: 1; min-width: 0; overflow: auto; padding: 14px 20px 28px; }
.adm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.adm-title { margin: 0; font: bold 20px var(--hei-b); color: #172a6e; letter-spacing: 2px; }
.adm-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.adm-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.adm-bar .text-input { width: 200px; }
.adm-gap { height: 12px; }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.adm-grid > .wide { grid-column: 1 / -1; }
.adm-pct { margin-left: 6px; color: #8a7a55; font-size: 11.5px; }
.adm-pending { color: #8a7a55; }
.adm-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.adm-box { min-width: 0; background: var(--cream-2); border: 1px solid var(--tan-dark); }
.adm-box > h3 { margin: 0; padding: 5px 10px; color: #fff; font: bold 13px var(--hei-b); background: linear-gradient(#5c7fb8, #34588f); border-bottom: 1px solid #23406b; }
.adm-box-body { padding: 10px 12px; overflow-x: auto; }
.adm-box-body > .adm-table { border: none; margin: -10px -12px; width: calc(100% + 24px); }
.adm-box-body > .adm-table:not(:last-child) { margin-bottom: 8px; }
.adm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.adm-card-link { color: inherit; text-decoration: none; }
.adm-card { height: 100%; padding: 10px 12px; background: var(--cream-2); border: 1px solid var(--tan-dark); }
.adm-card-link:hover .adm-card { background: #fff6cf; }
.adm-card .k { color: #5a4420; font-size: 12px; }
.adm-card .v { margin-top: 4px; font: bold 24px/1.1 Tahoma, var(--hei); color: #172a6e; }
.adm-card .v.red { color: var(--red); }
.adm-table { width: 100%; border-collapse: collapse; background: var(--cream-2); border: 1px solid var(--tan-dark); font-size: 12.5px; }
.adm-table th { height: 26px; padding: 0 8px; color: #fff; font-weight: normal; text-align: left; white-space: nowrap; background: linear-gradient(#5c7fb8, #34588f); border: 1px solid #23406b; }
.adm-table td { height: 30px; padding: 3px 8px; border-bottom: 1px solid #e0d2a6; vertical-align: middle; }
.adm-table tbody tr:nth-child(even) td { background: #f4eccb; }
.adm-table tbody tr:hover td { background: #fff6cf; }
.adm-table .num { text-align: right; font-family: Tahoma, var(--hei); }
.adm-table th.num { text-align: right; }
.adm-table .ops { width: 1%; white-space: nowrap; text-align: right; }
.adm-table .ops a { margin-right: 6px; }
.adm-table .ops .xp-btn + .xp-btn { margin-left: 4px; }
.adm-deleted { color: #999; text-decoration: line-through; }
.adm-review-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.adm-review-imgs img { width: 110px; height: 110px; object-fit: cover; border: 1px solid #c9ccd3; }
.adm-review-body { margin: 4px 0; white-space: pre-wrap; word-break: break-word; max-height: 9em; overflow: auto; font-size: 13px; }
.adm-table .detail { word-break: break-all; }
.adm-field .adm-text { width: 280px; }
.adm-table img.av { width: 22px; height: 22px; margin-right: 6px; vertical-align: middle; border: 1px solid #8a6a3a; background: #fff; }
.adm-table a, .adm-facts a, .adm-item a, .adm-acts a { color: #0b2c9a; }
.adm-empty { padding: 18px; text-align: center; color: #6a5530; }
.adm-badge { display: inline-block; margin: 0 4px 0 0; padding: 0 5px; font-size: 11.5px; line-height: 17px; border: 1px solid; border-radius: 2px; white-space: nowrap; vertical-align: 1px; }
.adm-badge.admin { color: #fff; background: #1c3a6b; border-color: #10264a; }
.adm-badge.mod { color: #fff; background: #3b7a3b; border-color: #255225; }
.adm-badge.on { color: #2a7a2a; background: #eaf7ea; border-color: #8cc08c; }
.adm-badge.ban { color: #fff; background: var(--red); border-color: #8a1010; }
.adm-badge.mute { color: #8a4a00; background: #fff0d0; border-color: #e0b060; }
.adm-badge.drama { color: #5a4420; background: #efe2bf; border-color: #c9a96c; }
.adm-badge.invisible { color: #55534c; background: #ecebe6; border-color: #b4b1a6; }
.adm-badge.review { color: #1b4f8a; background: #e9f0fa; border-color: #9db8dc; }
.adm-field { display: flex; align-items: center; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.adm-field.top { align-items: flex-start; }
.adm-field > label { flex: none; width: 70px; color: #4f3b18; text-align: right; }
.adm-field > label.long { width: 190px; }
.adm-field .text-input { width: 170px; }
.adm-field .text-input.narrow { width: 90px; }
.adm-field .text-input.wide { width: 300px; }
.adm-field .unit { color: #4f3b18; }
.adm-field .def { margin-left: 8px; color: #8a7a5a; font-size: 12px; }
.adm-field input[type="checkbox"] { width: 15px; height: 15px; margin: 0; }
.adm-words { width: 300px !important; height: 92px; font: 13px/1.5 var(--hei); }
.adm-acts { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.adm-acts .text-input { width: 160px; }
.adm-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; margin-top: 8px; }
.adm-page-at { white-space: nowrap; }
.adm-page-input { width: 56px; text-align: center; }
.adm-rel-tabs { flex-wrap: wrap; margin-left: 0; }
.adm-rel-tabs .tab { width: auto; padding: 0 12px; }
.adm-facts { display: grid; grid-template-columns: minmax(70px, max-content) minmax(0, 1fr); gap: 3px 10px; line-height: 1.75; }
.adm-facts .k { color: #4f3b18; text-align: right; }
.adm-back { display: inline-block; margin-bottom: 8px; color: #0b2c9a; }
/* 作弊检测 */
.adm-facts .adm-acts { margin-top: 0; }
.cheat-cards { margin-bottom: 10px; }
.cheat-cards .adm-card .v { font-size: 20px; }
.cheat-chart svg { display: block; width: 100%; height: 120px; background: #fffdf1; border: 1px solid #e3d6b0; }
.cheat-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 12px; }
.cheat-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; }
.cheat-legend i.k { background: #1f6fe0; }
.cheat-legend i.f { background: #8d96a3; }
.cheat-legend i.o { background: #d8d1bd; }
.cheat-legend i.e { background: #c81e1e; }
.adm-user-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; padding: 12px; background: var(--cream-2); border: 1px solid var(--tan-dark); }
.adm-user-head img { flex: none; width: 64px; height: 64px; border: 2px solid #2b2620; background: #fff; object-fit: cover; }
.adm-user-head .nm { margin-right: 8px; font: bold 22px var(--hei-b); color: #1c48a8; vertical-align: middle; }
.adm-user-head .meta { margin-top: 4px; color: #5a4420; }
.adm-user-head .links { margin-top: 4px; }
.adm-user-head .links a { margin-right: 14px; color: #0b2c9a; }
.adm-note { display: block; width: 100%; height: 64px; font: 13px/1.6 var(--hei); }
.adm-list { display: flex; flex-direction: column; gap: 10px; }
.adm-item { padding: 10px 12px; line-height: 1.8; background: var(--cream-2); border: 1px solid var(--tan-dark); }
.adm-pr { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #e0d2a6; }
.adm-gap-top { margin-top: 8px; }
.adm-nowrap .adm-table th, .adm-nowrap .adm-table td { white-space: nowrap; }
.adm-err { font: 12px/1.5 Consolas, "Courier New", monospace; white-space: pre-wrap; word-break: break-all; }
.adm-evidence { margin: 6px 0; padding: 6px 8px; max-height: 180px; overflow: auto; white-space: pre-wrap; font: 12px/1.6 var(--hei); background: #fffdf2; border: 1px solid #e0d2a6; }
/* 举报处理：被举报次数、处理和反馈 */
.adm-times { margin-left: 6px; font-size: 12px; color: var(--red); }
.adm-feedback { white-space: pre-wrap; word-break: break-word; }
.adm-handle { margin-top: 8px; }
.adm-handle .adm-field > label, .adm-dlg-field > label { width: 80px; white-space: nowrap; }
.adm-handle .adm-field > .text-input { flex: 1; min-width: 0; width: auto; }
.adm-feedback-box { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.adm-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.adm-chip { padding: 1px 8px; font: 12px/1.7 var(--hei); color: #4f3b18; background: #fffdf2; border: 1px solid #c9b48a; border-radius: 2px; cursor: pointer; }
.adm-chip:hover { background: #f5ecd2; }
.adm-field .adm-feedback-input { display: block; width: 100%; height: 76px; font: 13px/1.6 var(--hei); resize: vertical; }
.adm-check { display: flex; align-items: center; gap: 6px; margin: 8px 0 0 86px; }
.adm-check input { width: 15px; height: 15px; margin: 0; }
.adm-ann { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 8px; }
.adm-ann .no { flex: none; width: 22px; padding-top: 6px; text-align: right; color: #5a4420; }
.adm-ann textarea { flex: 1; height: 56px; font: 13px/1.6 var(--hei); }
.adm-ann .btns { display: flex; flex-direction: column; gap: 3px; }
.adm-cast { width: 460px !important; }
.adm-tabs { margin: 0 0 8px; }
.adm-sub { margin: 8px 0 4px; color: #4f3b18; }
.adm-page-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.adm-page-edit textarea { display: block; width: 100%; height: 420px; font: 13px/1.7 var(--hei); resize: vertical; }
.adm-preview { height: 420px; overflow: auto; padding: 6px 12px; font: 13px/1.8 var(--hei); background: #fff; border: 1px solid #7f9db9; }
.adm-preview h4 { margin: 10px 0 2px; font-size: 14px; color: #0f2f8f; }
.adm-preview p { margin: 2px 0; }
.adm-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-var { padding: 2px 8px; font: 12px var(--hei); color: #1a3aa8; background: #eef3fc; border: 1px solid #9fb4dc; border-radius: 2px; cursor: pointer; }
.adm-var:hover { background: #dfe8fb; }
.adm-bar-cell { position: relative; display: block; min-width: 90px; height: 18px; }
.adm-bar-cell i { position: absolute; left: 0; top: 3px; bottom: 3px; background: linear-gradient(#8fb0e6, #5c7fb8); }
.adm-bar-cell b { position: relative; padding-left: 4px; font: bold 12px/18px Tahoma, var(--hei); color: #172a6e; }
.xp-btn.danger { color: #fff; background: linear-gradient(#e86a5a, #c0392b); border-color: #7a1a10; }
.reg-closed { padding: 60px 20px; text-align: center; font: bold 16px var(--hei-b); color: #4a3510; }

/* 形势判断：按钮按下去的样子、结果框 */
.lb-btn.on { box-shadow: inset 0 0 0 2px #f9bb44; background: linear-gradient(#fff3c8, #f7dc8a); }
.est-box .big { color: #1c3c8a; }
.st-row .xp-btn.on { box-shadow: inset 0 0 0 2px #f9bb44; background: linear-gradient(#fff8dc, #f7e3a0); }

/* Hallmark · component: menu-controls · theme: existing Weida
 * pre-emit critique: P4 H5 E4 S5 R5 V4; existing palette and typography preserved. */
.menubar button.menu { border: 0; margin: 0; background: transparent; font: inherit; }
.menubar button.menu:hover, .menubar button.menu.open { background: var(--link); color: var(--cream-2); }
.menubar .menu:focus-visible, .menu-item:focus-visible { outline: 2px solid var(--blue-text); outline-offset: -2px; }
.menu-item:focus { background: var(--link); color: var(--cream-2); }

/* 站内信使用独立小窗，原页面和棋盘继续留在背后。 */
.mail-window { position: absolute; z-index: 50; display: flex; flex-direction: column; max-width: calc(100% - 16px); max-height: calc(100% - 16px); }
.mail-window > .xp-win-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.mail-window .mail-sheet { flex: 1; min-width: 0; min-height: 0; height: 100%; }
.mail-window .mail-title, .mail-window .mail-window-feedback { flex: none; }
.mail-window .mail-send-row { padding: 6px 12px 8px; }
.mail-window-feedback { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; background: var(--cream-2); color: var(--navy-deep); }
.mail-window-status { min-width: 0; overflow-wrap: anywhere; }
.mail-window-feedback button { flex: none; }
/* 分享图预览：图片按框缩小，长按可以保存 */
.share-card-box { text-align: center; }
.share-card-img { display: block; max-width: 100%; max-height: min(62vh, 560px); margin: 0 auto; border: 1px solid #cdb98e; }
.share-card-dlg .dlg-buttons { flex-wrap: wrap; }
/* AI 复盘：胜率曲线、这一手的评价、问题手列表 */
.review-box { padding: 6px 8px; background: #fffbe0; font: 12.5px/1.6 var(--hei); color: #111; }
.tab-body > .review-box { flex: 1; min-height: 0; overflow: auto; }
.review-box[hidden] { display: none; }
.review-box .rv-head { display: flex; align-items: center; gap: 6px; }
.review-box .rv-head > b { flex: 1; }
.review-box .rv-job { color: #777; font-size: 11.5px; }
/* AI 复盘结果出来之前的进度：计算中按局面数走（两次查询之间靠过渡补平），提交、排队时一小段来回滑动 */
.review-box .rv-wait { margin-top: 8px; }
.review-box .rv-start { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.review-box .rv-head + .muted { margin-top: 6px; }
.review-box .rv-bar { position: relative; height: 8px; overflow: hidden; border: 1px solid #b39232; background: #fff; }
.review-box .rv-bar > i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: #1f6fe0; transition: width 1.5s linear; }
.review-box .rv-bar.busy > i { width: 28%; transition: none; animation: rv-busy 1.4s ease-in-out infinite; }
@keyframes rv-busy { from { left: -28%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .review-box .rv-bar > i { transition: none; }
  .review-box .rv-bar.busy > i { left: 0; width: 100%; opacity: .3; animation: none; }
}
.review-box .rv-wait-text { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; color: #333; font-variant-numeric: tabular-nums; }
.review-box .rv-switch { display: inline-flex; border: 1px solid #b39232; }
.review-box .rv-switch button { height: 20px; padding: 0 8px; font: 12px var(--hei); background: #fff; border: 0; color: #5a4a1a; }
.review-box .rv-switch button + button { border-left: 1px solid #b39232; }
.review-box .rv-switch button.on { background: #b39232; color: #fff; }
.review-box .rv-graph-box { margin: 4px 0 2px; cursor: pointer; border: 1px solid #d8c592; }
.review-box .rv-graph { display: block; width: 100%; height: 96px; }
.review-box .rv-read { min-height: 18px; font-size: 12px; color: #333; text-align: center; }
.review-box .rv-sum { width: 100%; margin: 4px 0 0; border-collapse: collapse; font-size: 12px; }
.review-box .rv-sum th { padding: 0 2px; font-weight: normal; color: #777; text-align: right; white-space: nowrap; }
.review-box .rv-sum td { padding: 1px 2px; text-align: right; border-top: 1px solid #ebe3c4; }
.review-box .rv-sum .nm { max-width: 84px; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.review-box .st { display: inline-block; width: 10px; height: 10px; margin-right: 3px; border: 1px solid #333; border-radius: 50%; vertical-align: -1px; }
.review-box .st.b { background: #111; }
.review-box .st.w { background: #fff; }
.review-box .rv-pos, .review-box .rv-stats, .review-box .rv-probs { margin-top: 6px; padding-top: 6px; border-top: 1px solid #d8c592; }
.review-box .rv-stats .rv-sub > b { flex: 1; }
.review-box .rv-move, .review-box .rv-next, .review-box .rv-played, .review-box .rv-var, .review-box .rv-sub, .review-box .rv-plain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.review-box .rv-no { color: #555; }
.review-box .rv-delta { font-weight: bold; color: #2f6f3a; }
.review-box .rv-delta.bad { color: #b0541b; }
.review-box .rv-delta.bad2 { color: #c0261b; }
.review-box .rv-tag { padding: 0 5px; font-size: 11px; line-height: 16px; color: #555; border: 1px solid #bbb; background: #fff; }
.review-box .rv-tag.bad { color: #b0541b; border-color: #d7a99f; background: #fff3ea; }
.review-box .rv-tag.bad2 { color: #c0261b; border-color: #c0261b; background: #fbe4df; }
.review-box .rv-tag.ok { color: #1f6fe0; border-color: #9bbcf0; background: #eef4fd; }
.review-box .rv-tag.played { color: #c0261b; border-color: #c0261b; }
.review-box .rv-next { margin-top: 5px; }
.review-box .rv-visits { margin-left: auto; font-size: 11px; }
.review-box .rv-cands { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.review-box .rv-cand { display: grid; grid-template-columns: 46px 42px 1fr auto; align-items: center; gap: 4px; padding: 2px 6px; font: 12.5px var(--hei); text-align: left; color: #111; background: #fff; border: 1px solid #c9d6ea; cursor: pointer; }
.review-box .rv-cand .pt::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 50%; background: #a9c4ec; vertical-align: 0; }
.review-box .rv-cand.top .pt::before { background: #1f6fe0; }
.review-box .rv-cand .pt { font-weight: bold; }
.review-box .rv-cand .wr { font-weight: bold; color: #1f6fe0; }
.review-box .rv-cand .ld, .review-box .rv-cand .pvn { color: #666; }
.review-box .rv-cand .pvn { font-size: 11px; }
.review-box .rv-cand.top { border-color: #1f6fe0; }
.review-box .rv-cand:hover { background: #f3f7fd; }
.review-box .rv-cand.sel { background: #e4eefc; box-shadow: inset 0 0 0 1px #1f6fe0; }
.review-box .rv-played { margin-top: 3px; }
.review-box .rv-played .wr { color: #555; }
.review-box .rv-var { margin-top: 4px; }
.review-box .rv-var > span { flex: 1; }
.review-box .rv-plain { margin-top: 2px; }
.review-box .rv-deep { margin-top: 5px; }
.review-box .rv-prob { display: grid; grid-template-columns: 56px 14px 40px 44px 44px 1fr; align-items: center; gap: 2px; width: 100%; margin-top: 2px; padding: 2px 4px; font: 12px var(--hei); text-align: left; color: #9d2a1e; background: #fff; border: 1px solid #d7a99f; cursor: pointer; }
.review-box .rv-prob.bad2 { background: #fbe4df; border-color: #c0261b; }
.review-box .rv-prob.cur { box-shadow: inset 0 0 0 2px #1f6fe0; }
.review-box .rv-prob .dl { font-weight: bold; }
.review-box .rv-prob .ai { color: #1f6fe0; text-align: right; }
.movelist .mv.bad { color: #b0541b; }
.movelist .mv.bad2 { color: #c0261b; font-weight: bold; }
.movelist .mv .mv-q { margin-left: 6px; font-size: 11px; }
/* 围棋入门：电脑棋盘在左、讲解和练习在右；手机上下排 */
.learn-page { height: 100%; overflow: auto; box-sizing: border-box; padding: 12px; }
.learn { display: flex; justify-content: center; gap: 16px; height: 100%; min-height: 420px; } /* 棋盘区按棋盘定宽（脚本算），讲解靠着棋盘 */
.learn-board { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; }
.learn-holder { position: relative; }
.learn-side { flex: 0 0 340px; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: #fffbe0; border: 1px solid #b39232; font: 14px/1.8 var(--hei); align-self: center; }
.learn-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.learn-intro { margin: 0; padding: 8px 10px; background: #fff; border-left: 3px solid #b39232; color: #3d2a12; }
.learn-q { font-weight: bold; color: #0b2c9a; }
.learn-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.learn-choices:empty { display: none; }
.learn-choices .xp-btn { min-width: 64px; }
.learn-choices .xp-btn.wrong { color: #b01818; }
.learn-fb { min-height: 24px; }
.learn-fb.good { color: #1d6b1d; }
.learn-fb.bad { color: #b01818; }
.learn-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.learn-list { max-width: 560px; margin: 0 auto; background: #fffbe0; border: 1px solid #b39232; padding: 12px 16px; font: 14px/1.8 var(--hei); }
.learn-list-head h1 { margin: 0; font-size: 20px; color: #0b2c9a; }
.learn-list-head p { margin: 2px 0 8px; color: #5b4521; }
.learn-row { display: flex; gap: 12px; align-items: center; padding: 8px 4px; border-top: 1px dashed #d8c592; color: #111; text-decoration: none; }
.learn-row:hover { background: #fff3c2; }
.learn-row .learn-no { color: #7a6340; width: 64px; flex: none; }
.learn-row .learn-title { flex: 1; }
.learn-row .learn-mark { color: #1d6b1d; font-size: 12px; }
.learn-list .learn-acts { margin-top: 10px; }
/* 人气点明细 */
.points-balance { margin-bottom: 6px; font: bold 14px var(--hei); color: #8a1c1c; }
.points-table { width: 100%; border-collapse: collapse; font: 13px/1.8 var(--hei); }
.points-table td { border-bottom: 1px dashed #d8c592; padding: 0 4px; }
.points-table td.plus { color: #1d6b1d; text-align: right; }
.points-table td.minus { color: #b01818; text-align: right; }
/* 我的研究 */
.st-cloud { font-size: 12px; min-height: 18px; }
.study-list { max-height: 50vh; overflow: auto; margin-top: 6px; }
.study-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px dashed #d8c592; }
.study-row.cur { background: #fff3c2; }
.study-row .study-open { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.study-row .muted { flex: none; font-size: 12px; }
/* 死活题：每日一题、错题本、标签 */
.tsg-daily { margin: 6px 0; padding: 6px 8px; background: #fffbe0; border: 1px solid #b39232; display: flex; flex-direction: column; gap: 4px; font: 12.5px/1.6 var(--hei); }
.tsg-daily .ok { color: #1d6b1d; }
.tsg-tag { padding: 0 6px; border: 1px solid #c0261b; color: #c0261b; background: #fdeeea; font-size: 12px; }

/* 高级会员功能的「会员」标记（没开通的人看到） */
.member-tag { display: inline-block; margin-left: 4px; padding: 0 3px; font: 10.5px/14px var(--hei); color: #b8321f; border: 1px solid #c8513f; border-radius: 2px; background: rgba(255, 248, 238, 0.85); vertical-align: 1px; letter-spacing: 0; }