/* ==========================================================
   GOBANG! 顽趣五子棋 — 米白纸感海报 · 俏皮野兽派
   ========================================================== */

:root {
  --paper: #f3ebd9;        /* 米白纸底 */
  --paper-dark: #e6dabf;   /* 深一档纸 */
  --paper-light: #fbf6ea;  /* 亮一档纸 */
  --white: #fffdf6;
  --ink: #201f1c;          /* 近黑墨 */
  --ink-dim: #6f6758;      /* 灰墨 */
  --red: #e63946;
  --blue: #1d3557;
  --yellow: #f2b705;
  --green: #2a9d8f;
  --orange: #f77f00;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow-lg: 10px 10px 0 var(--ink);
  --bd: 3px solid var(--ink);
  --bd-thin: 2px solid var(--ink);
  --topbar-h: 52px;
  --font-display: 'Anton', 'Archivo Black', 'Noto Sans SC', sans-serif;
  --font-body: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  /* 旧霓虹主题变量别名：代码中仍有引用，映射到新色板避免样式失效 */
  --magenta: var(--red);
  --gold: var(--yellow);
  --text: var(--ink);
  --text-dim: var(--ink-dim);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
input, select {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  border: var(--bd-thin);
  border-radius: 0;
  padding: 9px 12px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input:focus, select:focus {
  border-color: var(--ink);
  background: #fff7d6;
  box-shadow: var(--shadow-sm);
}
kbd {
  display: inline-block;
  padding: 1px 8px;
  border: 2px solid var(--ink);
  border-bottom-width: 4px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.72rem;
  background: var(--yellow);
  letter-spacing: 1px;
}
.hidden { display: none !important; }

/* 键盘导航焦点可见（无障碍） */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* ---------------- 背景层（纸感 + 海报色块） ---------------- */

body::before {
  /* 海报角落色块 */
  content: '';
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(242, 183, 5, 0.28) 0 120px, transparent 121px),
    radial-gradient(circle at 94% 88%, rgba(230, 57, 70, 0.22) 0 150px, transparent 151px),
    radial-gradient(circle at 92% 6%, rgba(29, 53, 87, 0.16) 0 110px, transparent 111px),
    radial-gradient(circle at 4% 94%, rgba(42, 157, 143, 0.18) 0 130px, transparent 131px);
}
/* 极细网格 = 纸面印刷感 */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, rgba(32, 31, 28, 0.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(to bottom, rgba(32, 31, 28, 0.045) 0 1px, transparent 1px 56px);
}
/* 扫描线/暗角移除，颗粒保留作纸纹 */
.scanlines, .vignette { display: none; }
.grain {
  position: fixed; inset: 0; z-index: 41; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

.chroma-flash { display: none; }

/* ---------------- 公告弹幕（贴纸飘带） ---------------- */
.danmaku {
  position: fixed; inset: 0; z-index: 85;
  pointer-events: none;
  overflow: hidden;
}
.danm-item {
  position: absolute;
  left: 100vw;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 1px;
  color: var(--white);
  background: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(32, 31, 28, 0.35);
  padding: 5px 16px;
  opacity: 0.95;
  transform: rotate(-1.5deg);
  animation: danmMove linear forwards;
}
.danm-item.important {
  color: var(--ink);
  background: var(--yellow);
  transform: rotate(1.5deg);
}
@keyframes danmMove {
  from { transform: translateX(0) rotate(-1.5deg); }
  to { transform: translateX(calc(-100vw - 100%)) rotate(-1.5deg); }
}

/* ---------------- 对局聊天弹幕（移动端触屏：新消息贴纸飘带从右向左） ---------------- */
.chat-danmaku {
  position: fixed; inset: 0; z-index: 71;
  pointer-events: none;
  overflow: hidden;
}
.cd-item {
  position: absolute;
  left: 100vw;
  top: 5%;
  max-width: 86vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--paper-light);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(32, 31, 28, 0.45);
  padding: 4px 12px;
  opacity: 0.95;
  animation-name: chatDanMove;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.cd-item.mine {
  color: var(--white);
  background: var(--blue);
  animation-name: chatDanMoveMine;
}
@keyframes chatDanMove {
  from { transform: translateX(0) rotate(-1.5deg); }
  to { transform: translateX(calc(-100vw - 100%)) rotate(-1.5deg); }
}
@keyframes chatDanMoveMine {
  from { transform: translateX(0) rotate(1.5deg); }
  to { transform: translateX(calc(-100vw - 100%)) rotate(1.5deg); }
}

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 52px; /* 回退 */
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; /* 回退 */
  padding: env(safe-area-inset-top, 0px) 18px 0;
  background: var(--paper-light);
  border-bottom: var(--bd);
  box-shadow: 0 3px 0 rgba(32, 31, 28, 0.18);
}
.topbar-brand {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 1.05rem;
  color: var(--ink);
  transform: rotate(-1deg);
}
.topbar-brand span { color: var(--red); }
.topbar-user {
  display: flex; align-items: center; gap: 10px;
}
.tu-avatar {
  font-size: 1.4rem;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--ink);
}
.tu-avatar .avatar-img { width: 30px; height: 30px; }
.tu-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.tu-name {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--ink);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tu-nav {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  padding: 0;
  border-bottom: 2px solid var(--ink);
}
.tu-nav:hover { color: var(--red); border-color: var(--red); }
.tu-nav + .tu-nav { margin-left: 8px; }
.tu-nav .fr-in-count { margin-left: 4px; }
.tu-navs { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; }

/* ---------------- 屏幕切换 ---------------- */
#app {
  position: fixed; inset: 0; z-index: 50;
}
.screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translateY(12px) scale(0.985);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.screen.active {
  opacity: 1; pointer-events: auto;
  transform: none;
}

/* 顶栏避让：带顶栏的屏幕内容下移（含刘海安全区 + 回退） */
/* 同时改为顶部对齐，避免超高面板被 flex 居中时顶部溢出到顶栏下方 */
#screen-menu, #screen-pve, #screen-online, #screen-rank, #screen-personal, #screen-admin, #screen-more {
  align-items: flex-start;
  padding-top: 52px; /* 回退 */
  padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  overflow-y: auto;
}
/* 带顶栏屏幕：面板高度上限，防止矮视口溢出顶栏 */
#screen-menu .panel, #screen-pve .panel, #screen-online .panel,
#screen-rank .panel, #screen-personal .panel, #screen-admin .panel,
#screen-more .panel {
  max-height: calc(100vh - 76px); /* 回退 */
  max-height: calc(100vh - var(--topbar-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
  align-self: flex-start;
  margin: 16px auto 24px;
}

/* ---------------- 按钮（海报色块） ---------------- */
.btn-neon {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 2px;
  padding: 12px 26px;
  text-align: center;
  color: var(--ink);
  background: var(--white);
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s, color 0.15s;
}
.btn-neon:hover { background: var(--yellow); }
.btn-neon:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}
.btn-neon.primary {
  color: var(--white);
  background: var(--red);
  border-color: var(--ink);
}
.btn-neon.primary:hover { background: #c92c39; }
.btn-neon.ghost { background: transparent; }
.btn-neon.ghost:hover { background: var(--yellow); color: var(--ink); }
.btn-neon.big {
  font-size: 1.15rem;
  padding: 16px 44px;
  box-shadow: var(--shadow);
}
.btn-neon.big:active { transform: translate(5px, 5px); box-shadow: none; }
.btn-neon:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn-neon.sm { font-size: 0.8rem; padding: 8px 16px; letter-spacing: 1px; box-shadow: var(--shadow-sm); }
.btn-neon.block { width: 100%; }

/* ---------------- 面板（去卡片化：硬纸板分区） ---------------- */
.panel {
  position: relative;
  background: var(--paper-light);
  border: var(--bd);
  box-shadow: var(--shadow);
  padding: 26px 28px 28px;
  width: min(560px, 92vw);
  max-height: 90vh;
  overflow-x: hidden; /* 禁止面板横向滚动/拖动（移动端左右移动的根因） */
  overflow-y: auto;
  animation: panelIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(24px) rotate(-0.6deg) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.panel-close {
  position: absolute; top: 12px; right: 12px;
  z-index: 30;
  width: 34px; height: 34px;
  border: var(--bd-thin);
  background: var(--white);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  transition: all 0.15s;
}
.panel-close:hover { background: var(--red); color: var(--white); transform: rotate(4deg); }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 1px;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 6px;
}
/* 验证码输入 + 图片并排（多屏自适应：输入框 flex 伸缩，图片固定比例） */
.captcha-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.captcha-row input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.captcha-img {
  flex: 0 0 auto;
  width: 120px;
  height: 42px;
  border: var(--bd-thin);
  cursor: pointer;
  background: #f7f3e8;
  object-fit: cover;
}
/* 自定义头像上传 */
.avatar-upload-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.avatar-upload-preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  object-fit: cover;
  background: var(--yellow);
}
@media (max-width: 480px) {
  .captcha-img { width: 100px; height: 38px; }
  .captcha-row input { font-size: 16px; } /* 防 iOS 聚焦缩放 */
}


/* 标题横条（黑底白字，粗海报）：不拦截点击，点击穿透到关闭按钮 */
.setup-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 3px;
  color: var(--white);
  background: var(--ink);
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  padding: 10px 16px;
  margin: 0 42px 22px 0;
  transform: rotate(-0.5deg);
  text-align: center;
  pointer-events: none;
}

/* ---------------- 封面 ---------------- */
#screen-cover {
  position: relative;
  align-items: center;
}
/* 俏皮野兽派：五子棋背景装饰层（不挡交互、仅封面可见） */
.cover-ops {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.cover-ops .cb-board {
  position: absolute;
  right: -7vmin;
  bottom: -7vmin;
  width: 46vmin;
  height: 46vmin;
  background-image:
    repeating-linear-gradient(to right, rgba(32, 31, 28, 0.16) 0 1px, transparent 1px calc(46vmin / 14)),
    repeating-linear-gradient(to bottom, rgba(32, 31, 28, 0.16) 0 1px, transparent 1px calc(46vmin / 14));
  border: 3px solid rgba(32, 31, 28, 0.34);
  transform: rotate(3deg);
}
.cover-ops .cb-five {
  position: absolute;
  left: 5%;
  top: 18%;
  display: flex;
  align-items: center;
  gap: 1.3vmin;
  padding-bottom: 2.6vmin;
  transform: rotate(-9deg);
}
.cover-ops .cb-five::after {
  content: '';
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 0;
  height: 1.1vmin;
  background: rgba(230, 57, 70, 0.8);
  transform: rotate(-2deg);
}
.cover-ops .cb-five i {
  width: 3vmin;
  height: 3vmin;
  border-radius: 50%;
}
.cover-ops .cb-five i:nth-child(odd) {
  background: var(--ink);
  box-shadow: 3px 3px 0 rgba(32, 31, 28, 0.55);
}
.cover-ops .cb-five i:nth-child(even) {
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(32, 31, 28, 0.4);
}
.cover-ops .cb-stone {
  position: absolute;
  border-radius: 50%;
}
.cover-ops .cb-stone.black {
  background: var(--ink);
  box-shadow: 4px 4px 0 rgba(32, 31, 28, 0.5);
}
.cover-ops .cb-stone.white {
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(32, 31, 28, 0.4);
}
.cover-ops .s1 { width: 3.8vmin; height: 3.8vmin; left: 7%; bottom: 20%; }
.cover-ops .s2 { width: 2.9vmin; height: 2.9vmin; right: 10%; top: 12%; }
.cover-ops .s3 { width: 2.5vmin; height: 2.5vmin; left: 17%; top: 9%; transform: rotate(18deg); }
.cover-ops .s4 { width: 3.2vmin; height: 3.2vmin; right: 16%; bottom: 24%; }
.cover-ops .s5 { width: 2.2vmin; height: 2.2vmin; left: 42%; bottom: 6%; transform: rotate(-14deg); }
.cover-ops .cb-stamp {
  position: absolute;
  right: 4%;
  top: 14%;
  padding: 1.4vmin 2.6vmin;
  background: var(--yellow);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-display);
  font-size: 3.2vmin;
  letter-spacing: 0.12em;
  color: var(--ink);
  transform: rotate(-7deg);
}
.cover-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 20px;
  padding: 3vh 0 12vh;
  max-width: 94vw;
  animation: fadeUp 0.8s ease-out;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}
.cover-logo { text-align: center; }
.logo-chip {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 3px;
  color: var(--white);
  background: var(--red);
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  padding: 4px 14px;
  margin-bottom: 16px;
  transform: rotate(-3deg);
  animation: chipBob 2.4s ease-in-out infinite;
}
@keyframes chipBob { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-4px); } }

.glitch-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 7.5rem);
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--ink);
  position: relative;
  text-shadow:
    4px 4px 0 var(--red),
    8px 8px 0 var(--yellow);
  animation: titleWiggle 4s ease-in-out infinite;
}
.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  white-space: nowrap;
  opacity: 0.28;
  pointer-events: none;
}
.glitch-title::before { color: var(--red); transform: translate(5px, -3px); animation: sliceL 2.6s infinite linear alternate; }
.glitch-title::after { color: var(--blue); transform: translate(-5px, 3px); animation: sliceR 2.2s infinite linear alternate; }
@keyframes sliceL { 0% { clip-path: inset(0 0 82% 0); } 30% { clip-path: inset(40% 0 30% 0); } 70% { clip-path: inset(70% 0 4% 0); } 100% { clip-path: inset(10% 0 68% 0); } }
@keyframes sliceR { 0% { clip-path: inset(70% 0 5% 0); } 40% { clip-path: inset(18% 0 58% 0); } 80% { clip-path: inset(55% 0 20% 0); } 100% { clip-path: inset(4% 0 74% 0); } }
@keyframes titleWiggle {
  0%, 100% { transform: rotate(-1.2deg); }
  50% { transform: rotate(0.8deg); }
}
.cover-sub {
  font-family: var(--font-display);
  font-size: clamp(1rem, 3.4vw, 1.6rem);
  letter-spacing: 0.4em;
  color: var(--ink);
  background: var(--yellow);
  border: var(--bd-thin);
  display: inline-block;
  padding: 2px 14px;
  margin-top: 4px;
  transform: rotate(1deg);
}
.cover-tagline {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center;
  color: var(--ink-dim);
  font-size: 0.85rem;
  font-weight: 700;
}
.cover-tagline .tg {
  color: var(--ink);
  background: var(--white);
  border: var(--bd-thin);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 2px 12px;
  transform: rotate(-1.5deg);
}
.cover-tagline .tg:nth-child(3) { transform: rotate(1.5deg); }
.cover-tagline i { color: var(--red); font-style: normal; font-weight: 900; }
.cover-menu {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; width: min(320px, 80vw);
}
.cover-menu .btn-neon { width: 100%; }
/* 语言切换 */
.lang-switch {
  display: flex; gap: 8px; align-items: center;
}
.lang-btn {
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 1px;
  padding: 5px 12px;
  color: var(--ink);
  background: var(--white);
  border: var(--bd-thin);
  cursor: pointer;
  transition: all 0.12s;
}
.lang-btn:hover { background: var(--yellow); }
.lang-btn.active { background: var(--ink); color: var(--white); }
.auth-panel .auth-lang { justify-content: center; margin-top: 14px; }
.cover-hint {
  font-size: 0.8rem;
  color: var(--ink-dim);
  text-align: center;
  line-height: 1.8;
}
.cover-footer {
  position: absolute; bottom: 14px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: var(--ink-dim);
  pointer-events: none;
}

/* ---------------- 登录 / 注册 ---------------- */
.auth-tabs {
  display: flex; gap: 10px;
  margin-bottom: 20px;
}
.auth-tab {
  flex: 1;
  padding: 11px;
  font-family: var(--font-display);
  letter-spacing: 3px;
  font-size: 0.9rem;
  color: var(--ink);
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
}
.auth-tab.active { background: var(--yellow); }
.auth-tab:active { transform: translate(2px, 2px); box-shadow: none; }
.auth-tip { margin-top: 14px; font-size: 0.74rem; color: var(--ink-dim); text-align: center; }
.auth-tip b { color: var(--red); }

/* ---------------- 主菜单 ---------------- */
.menu-panel { width: min(680px, 92vw); text-align: center; }
.menu-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 4px;
  color: var(--white);
  background: var(--ink);
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  display: inline-block;
  padding: 10px 34px;
  margin-bottom: 26px;
  transform: rotate(-1deg);
}
.menu-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.mode-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 30px 16px;
  border: var(--bd);
  box-shadow: var(--shadow);
  background: var(--blue);
  color: var(--white);
  transition: transform 0.1s, box-shadow 0.1s;
}
.mode-card:hover { transform: rotate(-1.5deg) translateY(-3px); animation: wiggle 0.3s ease; }
.mode-card:active { transform: translate(3px, 3px); box-shadow: none; }
.mode-card.pve { background: var(--red); }
.mode-card.online { background: var(--yellow); color: var(--ink); }
.mode-icon {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 6px 14px;
  border: 2px solid currentColor;
  background: rgba(0, 0, 0, 0.18);
  transform: rotate(-2deg);
}
.mode-card.online .mode-icon { background: rgba(0, 0, 0, 0.1); }
.mode-name { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 2px; }
.mode-desc { font-size: 0.8rem; opacity: 0.85; }
.menu-extra {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* 第一级「选择游戏」：五子棋 / 连珠 两张卡片，两列排布 */
#screen-mode .menu-modes { grid-template-columns: repeat(2, 1fr); }
.mode-card.gobang { background: var(--blue); }
.mode-card.renju { background: var(--red); }

/* ---------------- 更多页（辅助功能） ---------------- */
.more-panel { width: min(620px, 92vw); text-align: center; }
.more-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 8px;
}
.more-card {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px;
  font-family: var(--font-display); font-size: 1rem; letter-spacing: 2px;
  border: var(--bd); box-shadow: var(--shadow-sm);
  background: var(--white); color: var(--ink);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.more-card:hover { transform: rotate(-1.5deg) translateY(-3px); }
.more-card:active { transform: translate(3px, 3px); box-shadow: none; }
.more-card:nth-child(1) { background: var(--yellow); }
.more-card:nth-child(2) { background: var(--blue); color: var(--white); }
.more-card:nth-child(3) { background: var(--red); color: var(--white); }
.more-card:nth-child(4) { background: var(--ink); color: var(--white); }
.more-card:nth-child(5) { background: var(--blue); color: var(--white); }

/* ---------------- 开局方式 / 五连判定选择卡片 ---------------- */
.opening-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.opening-card {
  flex: 1 1 auto; min-width: 0;
  border: var(--bd-thin); background: var(--white); color: var(--ink);
  padding: 10px 14px; font-size: 0.85rem; cursor: pointer;
  transition: all 0.12s;
}
.opening-card.selected {
  background: var(--ink); color: var(--white); box-shadow: var(--shadow-sm);
}
.opening-card:hover { transform: translateY(-2px); }

/* ---------------- 在线对战 / 大厅 ---------------- */
.online-panel { width: min(760px, 94vw); }
.online-tip {
  font-size: 0.82rem; color: var(--ink); line-height: 1.7;
  margin-bottom: 16px; border-left: 6px solid var(--ink); padding-left: 12px;
  background: rgba(242, 183, 5, 0.14);
  padding: 8px 12px;
  transform: rotate(-0.3deg);
}
.online-actions { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.online-actions .btn-neon { flex: 1; min-width: 150px; }
.join-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 16px; flex-wrap: wrap; }
.online-lobby-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 1px;
  color: var(--ink);
  margin: 4px 0 10px;
}
.ol-rank { font-family: var(--font-display); }
.ol-count { color: var(--red); }

/* 大厅筛选 Tab 与分页 */
.lobby-toolbar { margin-bottom: 10px; }
.lobby-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.lobby-tab {
  padding: 6px 14px;
  border: var(--bd-thin);
  background: var(--white);
  color: var(--ink);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.12s;
}
.lobby-tab:hover { transform: translateY(-2px); }
.lobby-tab.active { background: var(--ink); color: var(--white); box-shadow: var(--shadow-sm); }
.lobby-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 14px; padding-top: 12px;
  border-top: 2px dashed var(--ink);
}
.lp-info { font-size: 0.82rem; color: var(--ink); font-weight: 700; }
.rc-rule {
  font-size: 0.7rem; line-height: 1;
  padding: 3px 8px;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.06);
  color: var(--blue);
}
.rc-rule.renju { color: var(--red); }

.create-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 3px dashed var(--ink);
  background: rgba(242, 183, 5, 0.12);
  transform: rotate(-0.3deg);
}
.create-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cr-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  width: 70px;
  flex-shrink: 0;
}
.board-size-cards { display: flex; gap: 8px; flex-wrap: wrap; }
.size-card {
  padding: 8px 14px;
  border: var(--bd-thin);
  background: var(--white);
  color: var(--ink);
  font-size: 0.82rem;
  transition: all 0.12s;
}
.size-card:hover { background: var(--yellow); }
.size-card.selected {
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

/* 创建房间：允许观战开关 */
.spect-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}
.spect-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.spect-switch {
  position: relative;
  width: 46px; height: 24px;
  flex-shrink: 0;
  background: var(--white);
  border: var(--bd-thin);
  box-shadow: 1px 1px 0 var(--ink);
  transition: background 0.15s;
}
.spect-switch::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--ink);
  transition: transform 0.15s, background 0.15s;
}
.spect-toggle input:checked + .spect-switch { background: var(--green); }
.spect-toggle input:checked + .spect-switch::after { transform: translateX(22px); background: var(--white); }
.spect-toggle input:focus-visible + .spect-switch { outline: 3px solid var(--orange); outline-offset: 2px; }
.spect-text { font-weight: 700; }

/* 进行中可观战房间卡 */
.room-card.spect { border-color: var(--blue); }
.room-card.spect .rc-wait { color: var(--blue); }
.room-card.tn { border-color: var(--orange); }
.room-card.tn .rc-wait { color: var(--orange); }
.room-card.spect .rc-btn { color: var(--white); background: var(--blue); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.room-card.spect .rc-btn:hover { background: var(--ink); }

/* 大厅房间：贴纸票（非卡片） */
.lobby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 12px;
}
.room-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
  padding: 16px 16px 14px;
  border: var(--bd);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  cursor: default; /* 卡片整体不可点击，仅加入按钮可点 */
  transition: transform 0.1s, box-shadow 0.1s;
}
.room-card:hover {
  transform: rotate(-1deg) translateY(-3px);
  box-shadow: var(--shadow);
}
.room-card::before {
  content: attr(data-tag);
  position: absolute; top: -12px; right: 12px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 1px;
  padding: 2px 10px;
  border: var(--bd-thin);
  transform: rotate(3deg);
  z-index: 1;
}
.room-card.tn::before { background: var(--orange); color: var(--white); }
.room-card.match::before { background: var(--green); color: var(--white); }
.room-card.pwd::before { background: var(--yellow); color: var(--ink); }
.room-card.pub::before { background: var(--white); color: var(--ink); }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-id {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 1px;
  color: var(--ink);
  font-weight: 700;
}
.rc-type {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 1px;
  padding: 1px 8px;
  border: var(--bd-thin);
}
.rc-type.tn { color: var(--white); background: var(--orange); }
.rc-type.match { color: var(--white); background: var(--green); }
.rc-type.pwd { color: var(--ink); background: var(--yellow); }
.rc-type.pub { color: var(--ink); background: var(--white); }
/* 大厅房间卡片顶部已有 ::before 类型贴纸，隐藏顶部文字徽标避免重复（观战中心卡片保留） */
.room-card .rc-type { display: none; }
.rc-host {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 游客房主徽标 */
.room-card .rc-g {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 0.62rem;
  font-family: sans-serif;
  line-height: 15px;
  border-radius: 4px;
  background: #f6c445;
  color: #333;
  border: 1px solid #e0a800;
  vertical-align: 2px;
}
/* 游客个人中心升级会员 */
.guest-upgrade { padding: 8px 0 4px; }
.guest-upgrade .gu-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.gu-title { margin: 0; font-size: 1.15rem; }
.gu-tip { margin: 0; color: var(--ink-dim); line-height: 1.6; }
.guest-upgrade .btn-neon { align-self: flex-start; }
/* 房间邀请弹窗 */
.ri-tip { margin: 0 0 12px; font-size: 0.86rem; color: var(--ink-dim); line-height: 1.6; }
.ri-link-row { display: flex; gap: 10px; margin-bottom: 10px; }
.ri-link-input {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  border: var(--bd-thin);
  background: var(--white);
  padding: 9px 10px;
  color: var(--ink);
}
.ri-actions { display: flex; justify-content: flex-end; }
.rc-meta { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; color: var(--ink-dim); }
.rc-size {
  font-family: var(--font-display);
  color: var(--white);
  background: var(--blue);
  border: 2px solid var(--ink);
  padding: 0 8px;
}
.rc-time { margin-left: auto; white-space: nowrap; }
.rc-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.rc-wait { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--green); font-weight: 700; }
.rc-wait i {
  width: 8px; height: 8px;
  background: var(--green);
  border: 1px solid var(--ink);
  animation: chipPulse 1s ease-in-out infinite;
}
@keyframes chipPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.rc-btn {
  display: inline-block; /* 触发区域为块级按钮，可点击 */
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 1px;
  padding: 8px 16px;
  color: var(--ink);
  border: var(--bd);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.1s;
  user-select: none;
}
.room-card .rc-btn:hover { background: var(--yellow); transform: rotate(-1deg); }
.room-card .rc-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.room-card.pwd .rc-btn {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--red);
}
.room-card.pwd .rc-btn:hover { background: var(--red); }
.lobby-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 28px 12px;
  color: var(--ink-dim);
  font-size: 0.85rem;
  border: 2px dashed var(--ink-dim);
}

/* 公共频道悬浮 */
.lobby-chat-toggle {
  display: block;
  position: fixed;
  right: 14px;
  bottom: 20px; /* 回退 */
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 90;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 2px;
  padding: 12px 20px;
  color: var(--white);
  background: var(--green);
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  transform: rotate(-2deg);
  transition: transform 0.1s;
}
.lobby-chat-toggle:hover { transform: rotate(0) translateY(-2px); }
.lobby-chat-pop {
  position: fixed;
  right: 14px;
  bottom: 68px; /* 回退 */
  bottom: max(68px, calc(env(safe-area-inset-bottom, 0px) + 56px));
  z-index: 95;
  width: min(320px, calc(100vw - 28px));
  height: 380px; /* 回退 */
  height: min(380px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  border: var(--bd);
  background: var(--white);
  box-shadow: var(--shadow);
}
.lobby-chat-pop .chat-close { display: flex; }

/* ---------------- 聊天组件（局内 + 公共频道共用） ---------------- */
.chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: var(--bd-thin);
  background: var(--paper-light);
  overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 2px;
}
.chat-title { font-weight: 700; }
.chat-close {
  width: 26px; height: 26px;
  border: 2px solid var(--white);
  color: var(--white);
  font-size: 0.75rem;
  display: none;
  align-items: center; justify-content: center;
  line-height: 1;
}
.chat-close:hover { background: var(--red); }
.chat-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.82rem;
}
.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 92%;
  animation: msgIn 0.2s ease-out;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg .cm-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.66rem;
  color: var(--ink-dim);
}
.chat-msg.mine .cm-head { flex-direction: row-reverse; }
.chat-msg .cm-name { color: var(--red); font-weight: 700; }
.chat-msg .cm-time { opacity: 0.7; }
.chat-msg .cm-body {
  padding: 6px 10px;
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
}
.chat-msg.mine .cm-body {
  background: var(--blue);
  border-color: var(--ink);
  color: var(--white);
}
.chat-msg.sys .cm-body { background: transparent; border: none; color: var(--orange); font-size: 0.74rem; text-align: center; font-weight: 700; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-top: 2px solid var(--ink); }
.chat-quick button {
  font-size: 0.72rem;
  padding: 6px 10px;
  border: var(--bd-thin);
  background: var(--white);
  color: var(--ink);
  transition: all 0.12s;
}
.chat-quick button:hover { background: var(--yellow); }
.chat-input-row {
  display: flex; gap: 8px;
  padding: 10px;
  border-top: 2px solid var(--ink);
  background: var(--paper-light);
}
.chat-input-row input { flex: 1; padding: 9px 11px; }
.chat-send {
  font-family: var(--font-display);
  letter-spacing: 1px;
  padding: 0 16px;
  color: var(--white);
  background: var(--ink);
  border: var(--bd-thin);
  transition: background 0.12s;
}
.chat-send:hover { background: var(--red); }

/* 局内聊天侧栏 + 悬浮按钮 */
.game-chat { width: 280px; flex-shrink: 0; }
.chat-toggle {
  display: none;
  position: fixed;
  right: 14px;
  bottom: 66px; /* 回退 */
  bottom: max(66px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  z-index: 90;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 2px;
  padding: 12px 20px;
  color: var(--white);
  background: var(--blue);
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  transform: rotate(2deg);
}
.chat-toggle:hover { transform: rotate(0) translateY(-2px); }

/* ---------------- 排行榜 ---------------- */
.rank-tabs {
  display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.rank-tab {
  padding: 9px 18px;
  border: var(--bd);
  background: var(--white);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: all 0.12s;
}
.rank-tab:active { transform: translate(2px, 2px); box-shadow: none; }
.rank-tab.active {
  background: var(--yellow);
  color: var(--ink);
}
.rank-my {
  margin-bottom: 12px; padding: 10px 14px;
  border: var(--bd);
  background: var(--yellow);
  box-shadow: var(--shadow-sm);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
  transform: rotate(-0.3deg);
}
.rank-my b { color: var(--red); font-size: 1.05rem; }
/* 排行榜精简列：排名 / 玩家（昵称+用户名）/ 动态核心列 */
.rank-panel td { vertical-align: middle; }
.rank-player { padding: 4px 0; width: 100%; min-width: 0; }
.rank-name { font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-user { font-size: 0.66rem; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-sub { font-size: 0.66rem; color: var(--ink-dim); font-weight: 400; white-space: nowrap; }
/* 排行榜不产生左右滚动条：取消继承的 min-width，固定列宽分配，超长昵称省略号 */
.rank-panel .table-scroll { overflow-x: hidden; }
.rank-panel .data-table { min-width: 0; table-layout: fixed; }
.rank-panel .data-table th, .rank-panel .data-table td { white-space: nowrap; }
.rank-panel .data-table th:nth-child(1), .rank-panel .data-table td:nth-child(1) { width: 14%; text-align: center; }
.rank-panel .data-table th:nth-child(2), .rank-panel .data-table td:nth-child(2) { width: 54%; }
.rank-panel .data-table th:nth-child(3), .rank-panel .data-table td:nth-child(3) { width: 32%; text-align: center; }

/* ---------------- 对局设置 ---------------- */
.setup-panel { width: min(680px, 92vw); }
.setup-group { margin-bottom: 22px; }
.setup-label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 2px;
  color: var(--white);
  background: var(--ink);
  display: inline-block;
  padding: 4px 14px;
  margin-bottom: 12px;
  transform: rotate(-0.5deg);
}
.difficulty-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.dif-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 8px;
  border: var(--bd);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: all 0.1s;
}
.dif-card:hover { transform: rotate(-1deg) translateY(-3px); }
.dif-card.selected {
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow);
}
.d-name { font-family: var(--font-display); font-size: 1rem; letter-spacing: 1px; }
.d-desc { font-size: 0.7rem; opacity: 0.75; }
.d-stars { color: var(--orange); font-size: 0.85rem; letter-spacing: 2px; }
.dif-card.selected .d-stars { color: var(--yellow); }

.side-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.side-card {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px;
  border: var(--bd);
  background: var(--white);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: all 0.1s;
}
.side-card:hover { transform: translateY(-3px) rotate(0.5deg); }
.side-card.selected { background: var(--yellow); box-shadow: var(--shadow); }
.side-stone {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-block;
  border: 2px solid var(--ink);
}
.side-stone.b { background: radial-gradient(circle at 32% 30%, #555, #141414 60%); }
.side-stone.w { background: radial-gradient(circle at 32% 30%, #fff, #cfc9b8 70%); }
.setup-sub {
  font-size: 0.8rem;
  color: var(--ink);
  margin-bottom: 20px;
  line-height: 1.7;
  border-left: 6px solid var(--ink);
  padding-left: 10px;
  background: rgba(42, 157, 143, 0.12);
  padding: 8px 12px;
}
.setup-actions { display: flex; gap: 14px; justify-content: flex-end; }

/* ---------------- 对局界面 ---------------- */
#screen-game { padding: 0; }
.game-stage {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 10px;
  padding: 12px 12px 10px;
}
.game-layout {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.game-hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  height: 60px;
  overflow: hidden;
  background: var(--paper-light);
  border: var(--bd);
  box-shadow: var(--shadow-sm);
}
.hud-left {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 0;
  flex-wrap: nowrap;
}
.hud-mode {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 2px;
  color: var(--white);
  background: var(--ink);
  padding: 4px 12px;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-diff {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--yellow);
  border: var(--bd-thin);
  padding: 2px 10px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.hud-opp {
  font-size: 0.74rem; color: var(--white);
  background: var(--blue);
  border: 2px solid var(--ink);
  padding: 2px 10px;
  flex: 1 1 auto;
  max-width: 40%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.hud-right { display: flex; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; min-width: 0; }
.hud-btn {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 12px;
  border: var(--bd-thin);
  background: var(--white);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.12s;
}
.hud-btn:hover { background: var(--yellow); }
.hud-btn:active { transform: translate(2px, 2px); }
/* 求和按钮：收到对手和棋请求时高亮为「同意和棋」 */
.hud-btn.offer-in {
  background: var(--gold, #f2b705);
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(242,183,5,0.45);
  animation: offerInPulse 1.1s ease-in-out infinite;
}
@keyframes offerInPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(242,183,5,0.45); }
  50% { box-shadow: 0 0 0 5px rgba(242,183,5,0.15); }
}
/* 连珠指定开局下拉：建房 / 快速匹配 / 约战三处共用 */
.named-open-select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: var(--bd-thin);
  padding: 6px 8px;
}
.match-named { margin-top: 6px; display: flex; }
.match-named .named-open-select { width: 100%; }

.turn-box {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 1px;
  background: var(--ink);
  color: var(--white);
  padding: 6px 14px;
  border: var(--bd-thin);
  transform: rotate(-0.5deg);
  flex: 0 1 auto;
  min-width: 0;
}
.turn-box #turnText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34vw;
}
.turn-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--ink);
}
.turn-dot.black-turn { background: #141414; }
.turn-dot.white-turn { background: #fff; }
.turn-dot.ai-turn { background: var(--red); animation: dotSpin 1.4s linear infinite; }
@keyframes dotSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* 棋盘画框（打印棋盘感） */
.board-wrap {
  position: relative;
  flex: 1;
  min-height: 360px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border: var(--bd);
  box-shadow: var(--shadow);
  padding: 8px;
}
#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
/* CSS 棋盘线框兜底 */
.board-wrap::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(88vmin, 700px);
  height: min(88vmin, 700px);
  background:
    repeating-linear-gradient(to right, rgba(32, 31, 28, 0.35) 0 1px, transparent 1px calc(100% / 15)),
    repeating-linear-gradient(to bottom, rgba(32, 31, 28, 0.35) 0 1px, transparent 1px calc(100% / 15));
  border: 2px solid rgba(32, 31, 28, 0.6);
  pointer-events: none;
  z-index: -1;
}
.hud-debug {
  max-width: 94vw;
  margin: 0 auto;
  padding: 6px 12px;
  font-size: 0.74rem;
  font-family: var(--font-display);
  color: var(--white);
  background: var(--red);
  border: 2px solid var(--ink);
  text-align: center;
}
.game-hud-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--paper-light);
  border: var(--bd);
  box-shadow: var(--shadow-sm);
}
.game-hud-bottom .hud-btn { flex-shrink: 0; }
/* 手数显示固定宽度，防止数字变化导致底部行跳动/换行（手机端） */
#hudMoves { min-width: 4.5em; text-align: left; white-space: nowrap; flex-shrink: 0; }
/* 底部 HUD 房间号：黄底黑字更清晰，点击可复制 */
.hud-room {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.78rem; font-weight: 700;
  color: var(--ink);
  background: var(--yellow);
  padding: 3px 10px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  flex-shrink: 0;
  cursor: pointer;
  transition: none;
}
.hud-room:hover { background: var(--orange); color: var(--white); }
.hud-timer { display: flex; align-items: center; gap: 8px; color: var(--red); font-weight: 700; }
.dot-live {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  border: 1px solid var(--ink);
  animation: chipPulse 1s ease-in-out infinite;
}

/* 每手倒计时：平静态=黄底，剩余≤10s 进入紧急态（红底 + 脉冲），提示玩家即将超时判负 */
.hud-turnclock {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 1px 8px;
  white-space: nowrap;
}
.hud-turnclock .dot-clock {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink);
  display: inline-block;
}
.hud-turnclock.urgent {
  color: var(--white);
  background: var(--red);
  animation: turnClockUrgent 0.9s ease-in-out infinite;
}
.hud-turnclock.urgent .dot-clock { background: var(--white); }
@keyframes turnClockUrgent {
  0%, 100% { transform: scale(1); box-shadow: 2px 2px 0 var(--ink); }
  50% { transform: scale(1.08); box-shadow: 3px 3px 0 var(--ink); }
}
@media (max-width: 480px) {
  .hud-turnclock { font-size: 0.72rem; padding: 1px 6px; }
}

/* 胜利面板 */
.victory-panel {
  position: absolute; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(243, 235, 217, 0.78);
  animation: panelFadeIn 0.3s ease;
}
@keyframes panelFadeIn { from { opacity: 0; } to { opacity: 1; } }
.victory-inner {
  text-align: center;
  padding: 34px 40px;
  border: var(--bd);
  background: var(--paper-light);
  box-shadow: var(--shadow-lg);
  width: min(500px, 92vw);
  animation: victoryIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
@keyframes victoryIn {
  from { opacity: 0; transform: scale(0.7) rotate(-3deg) translateY(30px); }
  to { opacity: 1; transform: none; }
}
.victory-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 7vw, 3rem);
  letter-spacing: 4px;
  color: var(--white);
  background: var(--ink);
  display: inline-block;
  padding: 6px 26px;
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  transform: rotate(-2deg);
  margin-bottom: 16px;
}
.victory-title.win { background: var(--green); }
.victory-title.lose { background: var(--red); }
.victory-title.draw { background: var(--orange); }
.victory-result { font-size: 1rem; color: var(--ink); margin-bottom: 16px; font-weight: 700; }
.victory-stats {
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.victory-stats .vs-item { text-align: center; }
.victory-stats .vs-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--red);
}
.victory-stats .vs-label { font-size: 0.74rem; color: var(--ink-dim); font-weight: 700; }
.victory-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* 组合特效弹字 */
.combo-toast {
  position: absolute;
  bottom: 26%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  font-family: var(--font-display);
  font-size: clamp(1rem, 3.6vw, 1.6rem);
  letter-spacing: 4px;
  color: var(--white);
  background: var(--ink);
  border: var(--bd-thin);
  box-shadow: var(--shadow-sm);
  padding: 8px 24px;
  pointer-events: none;
  white-space: nowrap;
  animation: comboPop 1.1s ease-out forwards;
}
.combo-toast.magenta { background: var(--red); }
.combo-toast.gold { background: var(--orange); }
@keyframes comboPop {
  0% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.4) rotate(-4deg); }
  18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.1) rotate(1deg); }
  32% { transform: translateX(-50%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-26px) scale(1.1); }
}

/* 落子确认弹窗 */
.confirm-pop {
  position: fixed;
  z-index: 130;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--paper-light);
  border: var(--bd);
  box-shadow: var(--shadow);
  max-width: calc(100vw - 20px); /* 兜底：窄屏不溢出 */
  flex-wrap: wrap;
  justify-content: center;
}
.confirm-pop .cp-text { font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.confirm-pop .cp-yes {
  font-family: var(--font-display);
  padding: 8px 16px;
  min-width: 64px;
  color: var(--white);
  background: var(--red);
  border: var(--bd-thin);
  cursor: pointer;
}
.confirm-pop .cp-no {
  font-family: var(--font-display);
  padding: 8px 16px;
  min-width: 64px;
  color: var(--ink);
  background: var(--white);
  border: var(--bd-thin);
  cursor: pointer;
}
.confirm-pop .cp-yes:active, .confirm-pop .cp-no:active { transform: translate(2px, 2px); }

/* ---------------- 个人中心 ---------------- */
.personal-panel { width: min(880px, 94vw); }
.pc-header {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 18px;
  border-bottom: var(--bd);
  flex-wrap: wrap;
}
.pc-avatar {
  width: 70px; height: 70px;
  display: grid; place-items: center;
  font-size: 2.4rem;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
}
.pc-avatar .avatar-img { width: 64px; height: 64px; border-radius: 50%; }
.pc-id { flex: 1; min-width: 160px; }
.pc-nickline { display: flex; align-items: center; gap: 10px; }
.pc-nickline h2 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 2px; }
.pc-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 10px;
  background: var(--blue);
  color: var(--white);
  border: var(--bd-thin);
  transform: rotate(2deg);
}
.pc-level-line {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0;
}
.pc-level {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.exp-bar {
  flex: 1;
  max-width: 180px;
  height: 14px;
  background: var(--white);
  border: var(--bd-thin);
  overflow: hidden;
}
.exp-fill {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(45deg, var(--yellow), var(--yellow) 8px, var(--orange) 8px, var(--orange) 16px);
  transition: width 0.5s ease;
}
.pc-rank-badge, .rank-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-family: var(--font-display);
  padding: 2px 10px;
  border: var(--bd-thin);
  background: var(--white);
  color: var(--ink);
  letter-spacing: 1px;
  white-space: nowrap;
}
.pc-exp-tip { font-size: 0.72rem; color: var(--ink-dim); white-space: nowrap; }
.pc-rank-line { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.pc-rank-wins { font-size: 0.74rem; color: var(--orange); font-weight: 700; white-space: nowrap; }
.rank-bar {
  max-width: 200px;
  height: 10px;
  background: var(--white);
  border: var(--bd-thin);
  overflow: hidden;
  margin: 4px 0 2px;
}
.rank-fill {
  height: 100%;
  width: 0%;
  transition: width 0.5s ease;
}
.pc-rank-tip { font-size: 0.68rem; color: var(--ink-dim); }
.pc-user { color: var(--ink-dim); font-size: 0.82rem; margin: 3px 0; }
.pc-since { color: var(--ink-dim); font-size: 0.74rem; }
.pc-rank-box {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--white);
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  transform: rotate(1deg);
}
.pc-rank-num { font-family: var(--font-display); font-size: 2rem; color: var(--yellow); }
.pc-rank-label { font-size: 0.68rem; color: var(--paper); letter-spacing: 1px; }

.pc-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}
.stat-card {
  position: relative;
  text-align: center;
  padding: 14px 8px;
  background: var(--yellow);
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  transition: all 0.1s;
}
.stat-card:hover { transform: rotate(-1deg) translateY(-3px); }
.stat-card.win { background: var(--green); }
.stat-card.loss { background: var(--red); }
.stat-card.hot { background: var(--orange); }
.sc-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--ink);
}
.stat-card.win .sc-num, .stat-card.loss .sc-num, .stat-card.hot .sc-num { color: var(--white); }
.sc-label { font-size: 0.74rem; color: var(--ink); font-weight: 700; margin-top: 4px; }
.stat-card.win .sc-label, .stat-card.loss .sc-label, .stat-card.hot .sc-label { color: var(--white); }

.pc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  /* 个人中心内容较高时 tab 栏会被推到面板底部（手机上可能被视口裁切、点不到），
     吸顶保证 tab 始终可见可点 */
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper-light);
  padding: 8px 0;
}
.pc-tab {
  padding: 9px 18px;
  border: var(--bd);
  background: var(--white);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.pc-tab.active { background: var(--yellow); }

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.mini-form {
  padding: 18px;
  border: var(--bd);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.mini-form h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 2px;
  margin-bottom: 14px;
  color: var(--white);
  background: var(--ink);
  display: inline-block;
  padding: 4px 12px;
  transform: rotate(-0.5deg);
}
.avatar-row { display: flex; gap: 8px; align-items: center; }
.avatar-row input { flex: 1; }
.avatar-preset { display: flex; gap: 6px; flex-wrap: wrap; }
.avatar-preset-item {
  display: inline-flex;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  transition: transform 0.15s;
}
.avatar-preset-item:hover { transform: scale(1.12) rotate(-5deg); }
.avatar-preset-item.selected { outline: 3px solid var(--red); outline-offset: 1px; }
.avatar-preset-item .avatar-img { width: 40px; height: 40px; }
.avatar-img {
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  background: var(--paper-dark);
}
.tu-avatar .avatar-img { width: 30px; height: 30px; }

/* ---------------- 表格 / 分页 ---------------- */
.table-scroll {
  overflow-x: auto;
  border: var(--bd-thin);
  background: var(--white);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 640px;
}
.data-table th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 1px;
  color: var(--white);
  text-align: left;
  padding: 10px 10px;
  background: var(--ink);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.data-table td {
  padding: 9px 10px;
  border-bottom: 2px solid rgba(32, 31, 28, 0.15);
  white-space: nowrap;
  color: var(--ink);
}
.data-table tbody tr:nth-child(even) { background: var(--paper); }
.data-table tbody tr:hover { background: #fff3c4; }
.data-table tbody tr.me { background: #ffe08a; box-shadow: inset 4px 0 0 var(--red); }
.result-win { color: var(--green); font-weight: 800; }
.result-loss { color: var(--red); font-weight: 700; }
.result-draw { color: var(--orange); font-weight: 700; }
.pager {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px;
  font-size: 0.8rem;
}
.pager button {
  padding: 6px 12px;
  border: var(--bd-thin);
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
}
.pager button:hover { background: var(--yellow); }
.pager button:disabled { opacity: 0.35; cursor: default; }
.pager .pg-info { color: var(--ink-dim); font-size: 0.78rem; }

/* ---------------- 管理员后台 ---------------- */
.admin-panel { width: min(1180px, 96vw); height: min(86vh, 720px); display: flex; flex-direction: column; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.admin-topbar h2 {
  font-family: var(--font-display);
  letter-spacing: 3px;
  color: var(--white);
  background: var(--ink);
  display: inline-block;
  padding: 6px 16px;
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  transform: rotate(-0.5deg);
}
.admin-tabs { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-tab {
  padding: 9px 20px;
  border: var(--bd);
  background: var(--white);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.admin-tab:active { transform: translate(2px, 2px); box-shadow: none; }
.admin-tab.active { background: var(--red); color: var(--white); }
.adm-content { flex: 1; min-height: 0; overflow-y: auto; }

/* ===== 后台管理面板 · 多屏幕适配（平板 / 手机） ===== */
@media (max-width: 900px) {
  .admin-panel { width: 98vw; height: min(92vh, 880px); }
  .dash-cards { grid-template-columns: repeat(2, 1fr); }
  .dash-row { grid-template-columns: 1fr; }
  .config-grid { grid-template-columns: 1fr; }
  /* tab 过多的模块改为横向滑动，避免占满整屏高度 */
  .admin-tabs, .ad-chat-scope {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
    margin-bottom: 12px;
  }
  .admin-tab, .ad-chat-scope .admin-tab { flex: 0 0 auto; }
  /* 表格横向滚动时，首列（勾选 / ID）固定，便于左右对照 */
  .table-scroll .data-table th:first-child,
  .table-scroll .data-table td:first-child { position: sticky; left: 0; z-index: 2; }
  .table-scroll .data-table th:first-child { background: var(--ink); }
  .table-scroll .data-table tbody tr:nth-child(even) td:first-child { background: var(--paper); }
  .table-scroll .data-table tbody tr:nth-child(odd) td:first-child { background: var(--white); }
}
@media (max-width: 480px) {
  .dash-cards { grid-template-columns: 1fr; }
  .admin-topbar { gap: 6px; }
  .admin-topbar h2 { font-size: 1rem; padding: 5px 12px; letter-spacing: 2px; }
  .ad-toolbar { gap: 8px; }
  .ad-toolbar input[type="search"], .ad-toolbar input:not([type]) { flex-basis: 100%; }
  .config-actions { justify-content: stretch; }
  .config-actions .btn-neon { flex: 1; }
  .ad-batch-row { gap: 8px; }
  .ad-batch-row select { flex: 1 1 100%; }
}

.dash-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.dash-card {
  padding: 14px 16px;
  border: var(--bd);
  background: var(--yellow);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.dash-card.hot { background: var(--orange); color: var(--white); }
.dash-card.gold { background: var(--ink); color: var(--yellow); }
.dc-num { font-family: var(--font-display); font-size: 1.8rem; color: var(--ink); }
.dash-card.hot .dc-num, .dash-card.gold .dc-num { color: var(--yellow); }
.dc-label { font-size: 0.76rem; color: var(--ink); font-weight: 700; margin-top: 4px; }
.dash-card.hot .dc-label { color: var(--white); }
.dash-card.gold .dc-label { color: var(--yellow); }

.dash-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}
.dash-row > :only-child { grid-column: 1 / -1; }
.chart-box, .top-box {
  border: var(--bd);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}
.chart-box h3, .top-box h3 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin-bottom: 10px;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  display: inline-block;
  padding-bottom: 4px;
}
#dashChart { width: 100%; height: 220px; display: block; }
.top-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 4px;
  border-bottom: 2px dashed rgba(32, 31, 28, 0.25);
  font-size: 0.85rem;
}
.top-item .ti-rank { font-family: var(--font-display); color: var(--red); width: 22px; font-weight: 700; }
.top-item .ti-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-item .ti-score { font-family: var(--font-display); color: var(--blue); }

.ad-toolbar {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 12px; flex-wrap: wrap;
}
.ad-toolbar input { width: min(280px, 100%); flex: 1; }
.ad-toolbar select { width: auto; }
.config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.config-tip {
  font-size: 0.76rem;
  color: var(--ink);
  line-height: 1.7;
  border-left: 6px solid var(--ink);
  padding-left: 10px;
  background: rgba(242, 183, 5, 0.12);
  padding: 8px 12px;
}
.config-rank-list { display: flex; flex-direction: column; gap: 8px; }
.config-rank-row {
  display: grid;
  grid-template-columns: 1fr auto 90px;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: var(--bd-thin);
  background: var(--white);
}
.cr-name { font-family: var(--font-display); font-size: 0.82rem; color: var(--ink); }
.cr-min { font-size: 0.7rem; color: var(--ink-dim); white-space: nowrap; }
.cr-input { width: 90px; }
.cr-select { flex: 1; min-width: 0; max-width: 320px; }
.cr-unit { font-size: 0.76rem; font-weight: 700; color: var(--ink-dim); }
.config-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.tbl-btn {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 10px;
  border: var(--bd-thin);
  background: var(--white);
  color: var(--ink);
  margin-right: 4px;
}
.tbl-btn:hover { background: var(--yellow); }
.tbl-btn.danger:hover { background: var(--red); color: var(--white); }
.tbl-btn.ok:hover { background: var(--green); color: var(--white); }
.badge-role {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border: var(--bd-thin);
}
.badge-role.admin { background: var(--red); color: var(--white); }
.badge-role.user { background: var(--blue); color: var(--white); }
.badge-state.ok { color: var(--green); font-weight: 700; }
.badge-state.ban { color: var(--red); font-weight: 700; }

/* 后台聊天 / 公告管理 */
.chat-admin-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: var(--ink);
  background: var(--yellow);
  display: inline-block;
  padding: 4px 12px;
  border: var(--bd-thin);
  margin: 14px 0 8px;
  transform: rotate(-0.5deg);
}
.chat-admin-msgs {
  border: var(--bd-thin);
  background: var(--white);
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}
.chat-admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 2px dashed rgba(32, 31, 28, 0.2);
  font-size: 0.82rem;
}
.chat-admin-row:last-child { border-bottom: none; }
.chat-admin-row .cm-id { font-family: var(--font-display); color: var(--ink-dim); font-size: 0.7rem; flex-shrink: 0; }
.chat-admin-row .cm-name { color: var(--red); font-weight: 800; flex-shrink: 0; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-admin-row .cm-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.chat-admin-row .cm-time { color: var(--ink-dim); font-size: 0.72rem; flex-shrink: 0; }
.chat-admin-row .cm-ops { flex-shrink: 0; }
.chat-admin-empty { text-align: center; color: var(--ink-dim); padding: 16px; font-size: 0.8rem; }

/* 公告中心 */
.ann-center {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  background: rgba(32, 31, 28, 0.55);
}
.ann-center-box {
  width: min(520px, 92vw);
  max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--paper-light);
  border: var(--bd);
  box-shadow: var(--shadow-lg);
}
.ann-center-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 2px;
}
.ann-center-head .chat-close { display: flex; border-color: var(--white); color: var(--white); }
.ann-center-list { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ann-item {
  border: var(--bd-thin);
  background: var(--white);
  padding: 10px 12px;
}
.ann-item.important { background: var(--yellow); }
.ann-item.urgent { background: var(--red); color: var(--white); border-color: var(--ink); }
.ai-text { font-weight: 700; line-height: 1.6; }
.ai-meta { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 0.7rem; color: var(--ink-dim); flex-wrap: wrap; }
.ann-item.urgent .ai-meta { color: #ffd8dc; }
.ai-type { font-weight: 800; color: var(--orange); }
.ann-item.urgent .ai-type { color: var(--white); }
.ai-state { font-weight: 700; }
.ai-state.ok { color: var(--green); }
.ai-state.off { color: var(--ink-dim); }
.ann-item.urgent .ai-state.ok { color: var(--yellow); }
.ann-item.urgent .ai-state.off { color: #ffd8dc; }

/* 观战中心 */
.spectate-body {
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.spect-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: var(--bd); background: var(--white); box-shadow: var(--shadow-sm); }
.spect-card.tn { border-color: var(--orange); }
.spect-card.match { border-color: var(--green); }
.spect-card.pwd { border-color: var(--yellow); }
.sc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-top { display: flex; align-items: center; gap: 8px; }
.sc-id { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.sc-id::before { content: '# '; opacity: 0.6; }
.sc-host { font-weight: 800; font-size: 0.95rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-meta { font-size: 0.74rem; color: var(--ink-dim); }
.sc-enter { flex-shrink: 0; }

/* 锦标赛邀请弹窗 */
.invite-box { width: min(400px, 92vw); max-height: 80vh; overflow: hidden; }
.invite-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 700;
  line-height: 1.6;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto; /* 内容（含图片）超高时内部滚动，避免遮挡底部按钮 */
}
.invite-body .iv-from { color: var(--ink); font-size: 0.95rem; }
.invite-body .iv-room { color: var(--ink-dim); font-size: 0.8rem; }
/* 约战配置弹窗内容区：选规则/开局 */
.challenge-config {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.challenge-config .create-row { display: flex; align-items: center; gap: 12px; }
.challenge-config .cr-label { flex: 0 0 auto; font-size: 0.85rem; font-weight: 800; }
.invite-actions {
  display: flex;
  gap: 10px;
  padding: 0 16px 16px;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex-shrink: 0; /* 固定底部，不随内容滚动，始终可见 */
}

/* 好友私聊弹窗 */
.dm-msgs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dm-row {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  word-break: break-word;
}
.dm-row:not(.dm-mine) {
  align-self: flex-start;
  background: var(--white);
  color: var(--ink);
  border: var(--bd-thin);
}
.dm-row.dm-mine {
  align-self: flex-end;
  background: var(--blue);
  color: #fff;
}
.dm-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 0.7rem; }
.dm-row:not(.dm-mine) .dm-meta { color: var(--ink-dim); }
.dm-row.dm-mine .dm-meta { color: #dbeafe; justify-content: flex-end; }
.dm-empty { align-self: center; color: #999; font-size: 0.9rem; padding: 20px; }
#dmPop .chat-input-row { flex-shrink: 0; }

/* 电脑端私信悬浮气泡（仅 >640px 显示） */
.dm-bubble {
  position: fixed;
  right: 16px;
  bottom: 90px; /* 高于局内悬浮聊天按钮(bottom:66px)，避免长时遮挡 */
  z-index: 120;
  width: 300px;
  background: var(--paper-light);
  border: var(--bd);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  animation: dmBubbleIn .25s ease;
}
@keyframes dmBubbleIn {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.dm-bubble-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: 2px;
}
.dm-bubble-close {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 4px;
}
.dm-bubble-close:hover { color: var(--red); }
.dm-bubble-body { display: flex; align-items: center; gap: 10px; padding: 10px; }
.dm-bubble-avatar img { border-radius: 50%; }
.dm-bubble-info { flex: 1; min-width: 0; }
.dm-bubble-name {
  display: flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: .92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-bubble-color { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dm-bubble-text {
  font-size: .82rem; color: var(--ink-dim); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) {
  .dm-bubble { display: none !important; }
}

/* 快速匹配面板：先排队等待配对，成功后自动进入对局 */
.match-box { width: min(380px, 92vw); text-align: center; }
.match-body {
  padding: 20px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-height: 0; /* flex 子项允许滚动 */
  overflow-y: auto; /* 内容超过 80vh 时内部滚动，避免移动端溢出被裁 */
}
.match-badge {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 1px;
  padding: 4px 14px;
  border: var(--bd-thin);
  background: var(--white);
  max-width: 100%;
  white-space: normal; /* 段位名+积分过长时允许换行 */
  word-break: break-word;
}
.match-status { font-size: 0.95rem; font-weight: 800; color: var(--ink); max-width: 100%; }
.match-opp { font-size: 0.8rem; color: var(--ink-dim); max-width: 100%; }
.match-timer {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--orange);
}
.match-rule-pick { display: flex; gap: 10px; width: 100%; flex-wrap: wrap; }
.match-rule-pick .opening-card {
  display: flex; flex: 1 1 150px; min-width: 0;
  flex-direction: column; align-items: center; gap: 3px;
}
.opening-card small {
  font-size: 0.62rem; color: var(--ink-dim); font-family: var(--font-body); font-weight: 400;
  white-space: normal; word-break: break-word; line-height: 1.35; /* 描述允许换行，防窄屏溢出 */
}
.opening-card.selected small { color: rgba(255, 255, 255, 0.78); }
.match-opens { width: 100%; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.match-open-label { font-size: 0.74rem; font-weight: 800; color: var(--ink-dim); text-align: left; }
.match-open-tip { font-size: 0.68rem; color: var(--ink-dim); text-align: left; line-height: 1.5; border-top: var(--bd-thin); padding-top: 6px; }
/* 连珠开局卡片：窄屏允许两列换行，避免三卡挤爆 */
.match-opens .opening-cards .opening-card { flex: 1 1 45%; min-width: 0; }
/* 超窄屏（小屏手机）：面板更紧凑 */
@media (max-width: 380px) {
  .match-body { padding: 14px 12px; gap: 10px; }
  .match-rule-pick { gap: 8px; }
  .match-timer { font-size: 1.35rem; }
}

/* 匹配成功确认条：配对成功后展示本局规则/开局/判定，10 秒自动进入（移动端不溢出错位） */
.match-confirm-box { width: min(400px, 92vw); text-align: left; }
.match-confirm-body {
  padding: 16px;
  gap: 10px;
  align-items: stretch; /* 内容行占满横向，换行不外溢 */
  text-align: left;
}
.mc-line {
  background: var(--white);
  border: var(--bd-thin);
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
  max-width: 100%;
  word-break: break-word; /* 长文案/昵称允许换行 */
}
.mc-line b { color: var(--orange); font-weight: 800; }
.mc-sides {
  background: var(--yellow);
  border: var(--bd-thin);
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  max-width: 100%;
  word-break: break-word;
}
.mc-tip {
  font-size: 0.68rem;
  color: var(--ink-dim);
  line-height: 1.5;
  text-align: left;
  border-top: var(--bd-thin);
  padding-top: 8px;
  max-width: 100%;
  word-break: break-word;
}
.mc-count {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--orange);
  letter-spacing: 1px;
}
.mc-actions {
  display: flex;
  gap: 10px;
  padding: 0 16px 16px;
  justify-content: center;
  flex-wrap: wrap;
}
/* 超窄屏：确认条更紧凑 */
@media (max-width: 380px) {
  .match-confirm-body { padding: 12px; gap: 8px; }
  .mc-line, .mc-sides { padding: 6px 10px; font-size: 0.8rem; }
  .mc-count { font-size: 0.9rem; }
}

/* ---------------- Toast / Loading ---------------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 120;
  padding: 12px 24px;
  background: var(--ink);
  border: var(--bd-thin);
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: var(--shadow);
  animation: toastIn 0.3s ease;
  max-width: 86vw;
  text-align: center;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(16px) rotate(-1deg); } to { opacity: 1; transform: none; } }
#toast.err { background: var(--red); border-color: var(--ink); }

.loading {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: var(--paper);
}
.loader-ring {
  width: 64px; height: 64px;
  border: 4px solid var(--ink);
  border-top-color: var(--red);
  border-right-color: var(--yellow);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text {
  font-family: var(--font-display);
  letter-spacing: 3px;
  color: var(--ink);
  font-size: 0.95rem;
  background: var(--yellow);
  border: var(--bd-thin);
  padding: 6px 18px;
  transform: rotate(-1deg);
}

/* ---------------- 俏皮动画 ---------------- */
@keyframes wiggle {
  0% { transform: rotate(0); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}

/* 锦标赛面板（game 屏内） */
.tn-panel {
  flex-shrink: 1; /* 允许被压缩，保证棋盘优先占用空间 */
  border: var(--bd);
  background: var(--paper-light);
  box-shadow: var(--shadow-sm);
  padding: 10px 12px;
}
.tn-head {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 2px;
  color: var(--white);
  background: var(--ink);
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 8px;
}
.tn-status { color: var(--yellow); font-size: 0.78rem; margin-left: 6px; }
.tn-body { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; max-height: 28vh; overflow-y: auto; }
.tn-meta { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 1px; color: var(--red); margin-bottom: 2px; }
.tn-fmt { font-size: 0.72rem; color: var(--ink-dim); font-weight: 700; margin-bottom: 6px; }
.tn-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 8px;
  border: 1px dashed rgba(32, 31, 28, 0.35);
}
.tn-row.on { border: var(--bd-thin); background: var(--yellow); }
.tn-name { font-weight: 700; }
.tn-sb { font-size: 0.72rem; color: var(--ink-dim); }
.tn-done { font-family: var(--font-display); color: var(--green); font-size: 0.8rem; margin-top: 4px; }
.tn-host { margin-top: 8px; border-top: var(--bd-thin); padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.tn-add-row { display: flex; gap: 8px; align-items: center; }
.tn-add-row input { flex: 1; }
.tn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tn-rm {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--red);
  background: var(--white);
  border: var(--bd-thin);
  padding: 3px 10px;
  cursor: pointer;
}
.tn-rm:hover { background: var(--red); color: var(--white); }
.tn-next {
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
  border: 1px dashed rgba(32, 31, 28, 0.4);
  padding: 4px 8px;
}
.tn-row.champ { background: var(--yellow); border: var(--bd-thin); font-weight: 800; }

/* 触摸设备（移动端）：放大点击区；隐藏无用提示 */
@media (hover: none), (pointer: coarse) {
  .panel-close { width: 40px; height: 40px; font-size: 1.1rem; }
  .rank-tab, .size-card, .auth-tab, .admin-tab, .pc-tab { padding: 12px 18px; }
  .tu-nav { padding: 8px 4px; }
  .hud-btn { padding: 10px 14px; }
  .chat-quick button { padding: 10px 12px; }
  .pager button { padding: 10px 14px; }
  .btn-neon.sm { padding: 10px 18px; }
  input, select { padding: 12px 14px; }
}

/* ---------------- 响应式多屏幕 ---------------- */
@media (max-width: 900px) {
  .dash-cards { grid-template-columns: repeat(2, 1fr); }
  .dash-row { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .config-grid { grid-template-columns: 1fr; }
  .pc-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .difficulty-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  /* 顶栏导航按钮隐藏：移动端入口由底部 Tab 承担（好友/观战/更多），个人中心与后台走「更多」页，避免按钮挤在一排溢出 */
  .tu-navs { display: none; }
  /* 封面装饰精简：缩小图章/棋盘，隐藏贴近按钮区的散子 */
  .cover-ops .cb-board { width: 34vmin; height: 34vmin; }
  .cover-ops .cb-stamp { font-size: 3.6vmin; padding: 1.2vmin 2.2vmin; top: 12%; }
  .cover-ops .cb-five { left: 3%; top: 12%; }
  .cover-ops .s3, .cover-ops .s5 { display: none; }
  .cover-ops .s4 { right: 6%; bottom: 10%; }
  .menu-modes { grid-template-columns: 1fr; }
  /* 第一级「选择游戏」：同断点内提高特异性覆盖 ID 双列规则，移动端单列排布 */
  #screen-mode .menu-modes { grid-template-columns: 1fr; }
  .mode-card { min-width: 0; padding: 22px 16px; }
  .more-grid { grid-template-columns: 1fr 1fr; }
  .side-cards { grid-template-columns: 1fr; }
  .panel { padding: 20px 16px; }
  /* 带顶栏的屏幕：面板限高在顶栏以下（含刘海/底部安全区），并全宽抽屉化——贴边去左右/下边框、
     高度占满顶栏以下全部空间、内容区可滚动，避免卡片式弹窗在小屏上被裁切导致按钮点不到。
     限高必须用 100dvh（动态视口高）而非 100vh：移动端浏览器地址栏收起/展开时 vh 恒等于「最大视口高」，
     按 vh 算出的面板底部会落在可视区外且外层无滚动溢出 → 底部按钮划不出来；dvh 跟随当前可视高度，
     面板自身再配 overflow-y:auto，内容超高时在面板内滚动即可触达底部按钮 */
  #screen-menu .panel, #screen-pve .panel, #screen-online .panel,
  #screen-rank .panel, #screen-personal .panel, #screen-admin .panel,
  #screen-more .panel {
    width: 100vw;
    margin: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
    max-height: calc(100vh - 64px); /* 回退 */
    max-height: calc(100vh - var(--topbar-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto; /* 内容超高时面板内滚动（部分移动端浏览器 flex 子元素溢出不延伸外层滚动区，不能只靠屏幕滚） */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  /* 排行榜仅 5 个短列，窄屏无需横向滚动 */
  .rank-panel .data-table { min-width: 0; }
  .rank-panel .data-table th, .rank-panel .data-table td { padding: 8px 6px; }
  .game-stage { padding: 8px 6px 6px; }
  .game-layout { padding: 0; }
  /* 移动端右下角有悬浮聊天按钮（底部预留），面板沉底后给底部留出空间避免按钮被遮挡；缩短高度让棋盘更大 */
  .tn-panel { padding-bottom: 44px; }
  .tn-body { max-height: 22vh; }
  /* 邀请按钮前置到左侧，避开右下悬浮聊天按钮；输入框在右端即使被盖也只盖输入框尾部 */
  .tn-add-row .btn-neon { order: -1; }
  /* 局内聊天：桌面侧栏在移动端收起为右下角悬浮按钮 */
  .game-chat {
    position: fixed;
    right: 8px;
    top: 60px; /* 回退 */
    top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 8px);
    bottom: 8px; /* 回退 */
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: min(320px, calc(100vw - 16px));
    z-index: 95;
    transform: translateX(calc(100% + 16px));
    transition: transform 0.3s ease;
    box-shadow: var(--shadow);
  }
  .game-chat.open { transform: none; }
  .chat-close { display: flex; }
  .chat-toggle { display: block; }
  /* 移动端顶部 HUD 用 grid 两行硬约束：第一行「模式+对手」与「回合」必然同排，第二行四个操作按钮均分整行（无论文字多长都不折行） */
  .game-hud-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "info turn" "btns btns";
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    height: auto;
    overflow: visible;
  }
  .hud-left { grid-area: info; min-width: 0; display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: nowrap; }
  .hud-mode { flex: 0 1 auto; font-size: 0.72rem; padding: 3px 8px; letter-spacing: 1px; white-space: nowrap; text-align: center; }
  .hud-diff { flex: 0 0 auto; font-size: 0.62rem; white-space: nowrap; }
  .hud-opp { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.62rem; padding: 2px 8px; text-align: center; }
  .turn-box { grid-area: turn; justify-self: end; min-width: 0; font-size: 0.72rem; gap: 6px; padding: 5px 10px; justify-content: center; }
  .turn-box #turnText { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
  .hud-right { grid-area: btns; justify-content: space-between; gap: 6px; flex-wrap: nowrap; min-width: 0; }
  .hud-right .hud-btn { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; padding: 8px 4px; }
  /* 底部 HUD：允许换行，按钮与信息不溢出屏幕 */
  .game-hud-bottom { flex-wrap: wrap; row-gap: 6px; }
  .game-hud-bottom .hud-btn { flex: 1 1 auto; min-width: 0; white-space: nowrap; text-align: center; }
  #hudMoves { min-width: 3.2em; font-size: 0.78rem; }
  .hud-timer { white-space: nowrap; }
  .victory-inner { padding: 24px 20px; }
}
/* 矮屏（横屏手机 / 小窗口） */
@media (max-height: 620px) {
  .game-stage { padding-top: 4px; }
  .hud-btn { padding: 4px 10px; font-size: 0.74rem; }
  .board-wrap { min-height: 200px; }
  .cover-inner { padding: 2vh 0 6vh; }
  .victory-inner { max-height: calc(100vh - 20px); overflow-y: auto; }
}
/* 极窄屏（320~480px） */
@media (max-width: 480px) {
  .panel { padding: 18px 12px; }
  .online-actions .btn-neon { min-width: 0; }
  .cover-inner { gap: 14px; padding: 2vh 0 6vh; }
  .victory-inner { padding: 22px 16px; }
  .tu-name { max-width: 90px; }
  .body-corners { display: none; }
  /* 极窄：底部 HUD 精简文字，按钮一排放不下自动折行 */
  .game-hud-bottom { gap: 6px; }
  .game-hud-bottom #hudMoves { min-width: 3em; font-size: 0.72rem; text-align: center; white-space: nowrap; flex-shrink: 0; }
  .game-hud-bottom .hud-btn { font-size: 0.72rem; padding: 6px 8px; }
}

/* 大屏（桌面宽屏） */
@media (min-width: 1024px) {
  /* 大屏端：主菜单面板在屏幕中间（视口充足，不会被顶栏遮挡） */
  #screen-menu .menu-panel, #screen-mode .menu-panel, #screen-more .more-panel { align-self: center; margin: 24px auto; }
}
@media (min-width: 1600px) {
  :root { --topbar-h: 58px; }
  body { font-size: 18px; }
}

/* ---------------- 成就系统 ---------------- */
.achv-summary {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 2px;
  color: var(--white);
  background: var(--ink);
  display: inline-block;
  padding: 6px 16px;
  border: var(--bd);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  transform: rotate(-0.5deg);
}
.achv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.achv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: var(--bd);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.achv-item.off { background: var(--paper-dark); opacity: 0.75; filter: grayscale(0.7); }
.achv-medal {
  width: 58px; height: 58px;
  object-fit: cover;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  flex-shrink: 0;
}
.achv-info { flex: 1; min-width: 0; }
.achv-name { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 1px; color: var(--ink); }
.achv-desc { font-size: 0.76rem; color: var(--ink-dim); margin: 2px 0; }
.achv-meta { font-size: 0.72rem; font-weight: 700; color: var(--ink); }
.achv-bar {
  height: 8px;
  margin-top: 6px;
  background: var(--paper-dark);
  border: 1px solid var(--ink);
  overflow: hidden;
}
.achv-fill {
  height: 100%;
  background: repeating-linear-gradient(45deg, var(--green), var(--green) 6px, var(--orange) 6px, var(--orange) 12px);
}

/* 结算成就解锁提示 */
.achv-toast {
  position: fixed;
  top: 74px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 140;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--yellow);
  border: var(--bd);
  box-shadow: var(--shadow);
  transition: transform 0.35s ease;
}
.achv-toast.on { transform: translateX(-50%) translateY(0) rotate(-0.5deg); }
.achv-toast.lvup { background: var(--green); }
.achv-toast.promo { background: var(--yellow); }

/* ---------------- 后台完善管理：批量条 / 分布 / 详情 / 监测 / 日志 ---------------- */
.ad-batch-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 8px;
  border: var(--bd); background: var(--yellow); box-shadow: var(--shadow-sm);
}
.ab-count { font-weight: 800; font-size: 0.85rem; margin-right: 4px; }
/* 实时在线卡片（在线监测页顶部） */
.ops-live { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.ops-live-card { flex: 1 1 130px; min-width: 120px; border: var(--bd-thin); background: var(--white); padding: 10px 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px; }
.ops-live-card b { font-family: var(--font-display); font-size: 2rem; color: var(--green); }
.ops-live-card.hot b { color: var(--orange); }
.ops-live-card span { font-size: 0.76rem; color: var(--ink-dim); font-weight: 700; }
.ops-live-note { width: 100%; font-size: 0.7rem; color: var(--ink-dim); }
.ops-guest-list { border: var(--bd-thin); background: var(--white); margin-bottom: 12px; padding: 8px 10px; }
.ops-guest-title { font-weight: 800; font-size: 0.8rem; margin-bottom: 6px; }
.ops-guest-row { display: flex; gap: 12px; font-size: 0.75rem; padding: 4px 2px; border-bottom: 1px solid rgba(32, 31, 28, 0.08); }
.ops-guest-row .og-name { font-weight: 800; color: var(--ink); min-width: 90px; }
.ops-guest-row .og-room { color: var(--red); flex: 1; }
.ops-guest-row .og-time { color: var(--ink-dim); }
.ops-title { font-weight: 800; font-size: 0.9rem; letter-spacing: 1px; }

/* 后台聊天管理：scope 切换 / 房间筛选 / 房号标签 */
.ad-chat-scope { gap: 6px; }
.ad-chat-scope .admin-tab { padding: 4px 12px; }
.chat-admin-rooms { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 10px; }
.chat-admin-rooms .cr-tip { font-size: 0.75rem; color: var(--ink-dim); font-weight: 700; }
.cr-chip { border: var(--bd-thin); background: var(--white); padding: 3px 10px; font-size: 0.72rem; font-weight: 800; cursor: pointer; }
.cr-chip.active, .cr-chip:hover { background: var(--yellow); }
.chat-admin-row .cm-room { flex-shrink: 0; color: var(--blue); font-size: 0.72rem; font-weight: 800; }
.dist-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.dist-name { font-size: 0.72rem; font-weight: 800; width: 78px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dist-bar { flex: 1; height: 12px; background: var(--white); border: var(--bd-thin); overflow: hidden; }
.dist-fill { height: 100%; min-width: 2px; transition: width 0.3s; }
.dist-num { font-size: 0.74rem; color: var(--ink-dim); min-width: 34px; text-align: right; }
.dist-empty { color: var(--ink-dim); font-size: 0.8rem; padding: 8px 0; }

/* 用户详情抽屉 */
.ud-box { width: min(560px, 94vw); }
.ud-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ud-head { display: flex; gap: 12px; align-items: center; }
.ud-head .avatar-img { width: 56px; height: 56px; border-radius: 50%; }
.ud-id { flex: 1; min-width: 0; }
.ud-nick { font-weight: 800; font-size: 1.02rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ud-sub { font-size: 0.72rem; color: var(--ink-dim); margin: 3px 0; word-break: break-all; }
.ud-note { font-size: 0.74rem; color: var(--orange); }
.ud-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ud-stat { border: var(--bd-thin); background: var(--white); padding: 8px; text-align: center; }
.ud-stat b { font-family: var(--font-display); font-size: 1.2rem; display: block; }
.ud-stat.win b { color: var(--green); }
.ud-stat.loss b { color: var(--red); }
.ud-stat.hot b { color: var(--orange); }
.ud-stat span { font-size: 0.68rem; color: var(--ink-dim); }
.ud-lines { display: flex; flex-direction: column; gap: 8px; }
.ud-line { font-size: 0.8rem; }
.ud-line span { display: block; margin-bottom: 3px; }
.ud-exp { max-width: 260px; }
.ud-rank { max-width: 260px; margin: 0; }
.udt { font-weight: 800; font-size: 0.85rem; border-bottom: var(--bd-thin); padding-bottom: 4px; }
.ud-achv { display: flex; flex-wrap: wrap; gap: 6px; }
.ud-achv-item { flex: 1 1 46%; border: var(--bd-thin); padding: 5px 8px; font-size: 0.74rem; background: var(--white); }
.ud-achv-item.un { background: var(--yellow); font-weight: 700; }
.ud-games { display: flex; flex-direction: column; gap: 4px; }
.ud-grow { display: flex; gap: 10px; font-size: 0.76rem; padding: 4px 6px; border-bottom: 1px solid rgba(32, 31, 28, 0.12); }
.ud-grow span { white-space: nowrap; }
.ud-more { text-align: center; }

/* 对局详情（逐步回放） */
.gd-box { width: min(480px, 94vw); max-height: 80vh; overflow-y: auto; /* 内容超高时内部滚动，防止落子序列溢出弹窗外 */ }
.gd-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.gd-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 0.78rem; font-weight: 700; }
.gd-board {
  --gd-line: rgba(32, 31, 28, 0.5);
  display: grid; gap: 0; padding: 0;
  background-color: var(--paper);
  /* 网格线穿过每个格心：棋子（格心）恰好落在交叉点上，与真实棋盘观感一致 */
  background-image:
    linear-gradient(to right, transparent calc(50% - 1px), var(--gd-line) calc(50% - 1px), var(--gd-line) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), var(--gd-line) calc(50% - 1px), var(--gd-line) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: calc(100% / var(--gd-n, 15)) 100%, 100% calc(100% / var(--gd-n, 15));
  border: var(--bd-thin);
}
.gd-cell { aspect-ratio: 1; background: transparent; position: relative; }
.gd-cell.black::after, .gd-cell.white::after {
  content: ''; position: absolute; inset: 22%; border-radius: 50%;
}
.gd-cell.black::after { background: radial-gradient(circle at 35% 30%, #4a4036, #201f1c 70%); }
.gd-cell.white::after { background: radial-gradient(circle at 35% 30%, #ffffff, #d8cdb4 70%); border: 1px solid rgba(32, 31, 28, 0.4); }
.gd-cell.last::after { outline: 3px solid var(--red); outline-offset: -3px; }
.gd-none { color: var(--ink-dim); font-size: 0.82rem; text-align: center; padding: 12px; border: var(--bd-thin); }
.gd-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gd-controls .gd-step { font-weight: 800; font-size: 0.82rem; flex-shrink: 0; }
.gd-controls input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--red); }
.gd-moves { display: flex; flex-wrap: wrap; gap: 5px 8px; font-size: 0.7rem; max-height: 130px; overflow-y: auto; padding: 8px; border: var(--bd-thin); background: var(--white); }
.gd-moves-title { width: 100%; font-weight: 800; color: var(--ink-dim); font-size: 0.72rem; }
.gd-move { border: 1px solid rgba(32, 31, 28, 0.35); padding: 2px 6px; color: var(--ink-dim); background: var(--paper-light); }
.gd-move.done { color: var(--ink); }
.gd-move.cur { border-color: var(--red); color: var(--red); font-weight: 800; background: var(--paper-light); }

/* 社区（玩家发帖交流） */
.community-panel { width: min(720px, 94vw); }
.community-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.community-sub { font-size: 0.78rem; color: var(--ink-dim); margin-bottom: 12px; }
.community-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.community-sort { border: var(--bd-thin); background: var(--white); padding: 4px 14px; font-size: 0.8rem; font-weight: 800; cursor: pointer; }
.community-sort.active, .community-sort:hover { background: var(--yellow); }
.community-count { margin-left: auto; font-size: 0.76rem; color: var(--ink-dim); }
.community-list { display: flex; flex-direction: column; gap: 10px; }
.community-empty { text-align: center; color: var(--ink-dim); padding: 30px 12px; border: var(--bd-thin); background: var(--white); }
.community-card { border: var(--bd); background: var(--white); box-shadow: var(--shadow-sm); padding: 12px 14px; cursor: pointer; transition: transform 0.12s ease; }
.community-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.cc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-author { font-weight: 800; color: var(--ink); }
.cc-time { font-size: 0.72rem; color: var(--ink-dim); }
.cc-img-badge { font-size: 0.72rem; background: var(--paper-dark); padding: 2px 6px; border-radius: 4px; }
.cc-title { font-size: 1.05rem; font-weight: 900; margin: 6px 0 4px; color: var(--ink); word-break: break-word; }
.cc-excerpt { font-size: 0.82rem; color: var(--ink-dim); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.cc-foot { margin-top: 8px; font-size: 0.76rem; color: var(--ink-dim); }
/* 帖子详情 */
.community-detail { display: flex; flex-direction: column; gap: 10px; }
.cd-head { display: flex; align-items: center; gap: 10px; }
.cd-author { font-weight: 900; color: var(--ink); }
.cd-time { font-size: 0.72rem; color: var(--ink-dim); }
.cd-head .cd-del { margin-left: auto; }
.cd-title { font-size: 1.25rem; font-weight: 900; color: var(--ink); word-break: break-word; }
.cd-content { font-size: 0.92rem; line-height: 1.6; color: var(--ink); }
.cd-image { max-width: 100%; }
.cd-image img { max-width: 100%; height: auto; border: var(--bd-thin); display: block; }
.cd-replies { display: flex; flex-direction: column; gap: 8px; border-top: var(--bd-thin); padding-top: 12px; }
.cd-replies-title { font-weight: 800; color: var(--ink-dim); font-size: 0.8rem; }
.cd-reply { display: flex; gap: 8px; align-items: flex-start; border: 1px solid rgba(32, 31, 28, 0.18); background: var(--paper-light); padding: 8px 10px; }
.cr-body { flex: 1; min-width: 0; }
.cr-author { font-weight: 800; font-size: 0.78rem; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cr-time { font-weight: 400; color: var(--ink-dim); font-size: 0.7rem; }
.cr-content { font-size: 0.84rem; margin-top: 2px; color: var(--ink); }
.cd-reply-box { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 6px; }
.cd-reply-box textarea { flex: 1; min-width: 180px; resize: vertical; }
.cd-login-tip { text-align: center; color: var(--ink-dim); font-size: 0.8rem; padding: 10px; border: var(--bd-thin); background: var(--paper-light); }
/* 发帖弹窗编辑区：统一输入框/文本框样式 */
.invite-body .field span { display: block; font-weight: 800; font-size: 0.78rem; color: var(--ink); margin-bottom: 6px; }
.invite-body input[type="text"], .invite-body textarea {
  width: 100%;
  box-sizing: border-box;
  border: var(--bd-thin);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  padding: 8px 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.invite-body input[type="text"]:focus, .invite-body textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.16);
}
.invite-body textarea { resize: vertical; min-height: 96px; }
/* 图片预览：相框式容器，图片不溢出编辑框、居中、限高 */
.community-img-preview {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  border: var(--bd-thin);
  background: var(--paper-dark);
  margin-top: 4px;
}
.community-img-preview img {
  max-width: 100%;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 480px) {
  .invite-body input[type="text"], .invite-body textarea { font-size: 16px; } /* 防 iOS 聚焦缩放 */
}
/* 后台社区管理：开关设置区 */
.community-admin-settings { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 12px; border: var(--bd-thin); background: var(--white); }
.adm-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.adm-switch input { width: 18px; height: 18px; accent-color: var(--red); }
.adm-switch span { font-weight: 800; font-size: 0.85rem; }
.adm-switch small { color: var(--ink-dim); font-size: 0.7rem; }
@media (max-width: 480px) {
  .community-card { padding: 10px 12px; }
  .cd-reply-box textarea { min-width: 100%; }
}

/* 在线监测 */
.ops-qcards { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ops-qcard { border: var(--bd-thin); background: var(--white); padding: 8px 14px; font-size: 0.8rem; box-shadow: var(--shadow-sm); }
.ops-qcard b { font-family: var(--font-display); font-size: 1.3rem; margin-right: 4px; }
.ops-qcard.hot b { color: var(--orange); }
.ops-qcard.gold { background: var(--yellow); }
.ops-qrow { display: flex; gap: 12px; font-size: 0.78rem; padding: 5px 8px; border-bottom: 1px solid rgba(32, 31, 28, 0.1); }
.ops-qempty { color: var(--ink-dim); font-size: 0.8rem; padding: 10px; border: var(--bd-thin); background: var(--white); }
.at-label { font-family: var(--font-display); letter-spacing: 1px; color: var(--white); background: var(--red); padding: 2px 8px; }
.at-names { font-weight: 800; color: var(--ink); }

/* 后台成就管理 */
.achv-admin-meta { font-size: 0.76rem; color: var(--ink-dim); margin-bottom: 10px; }
.admin-achv-list { display: flex; flex-direction: column; gap: 10px; }
.achv-adm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: var(--bd);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.achv-adm-item.off { opacity: 0.55; filter: grayscale(0.8); }
.achv-adm-medal { width: 46px; height: 46px; object-fit: cover; border: 2px solid var(--ink); flex-shrink: 0; }
.achv-adm-info { flex: 1; min-width: 0; }
.achv-adm-name { font-family: var(--font-display); font-size: 0.9rem; color: var(--ink); }
.achv-adm-id { font-size: 0.68rem; color: var(--ink-dim); font-family: var(--font-body); }
.achv-adm-desc { font-size: 0.76rem; color: var(--ink-dim); }
.achv-adm-meta { font-size: 0.72rem; font-weight: 700; color: var(--ink); }
.achv-adm-ops { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

/* 成就管理表单 */
.achv-adm-form {
  margin-top: 14px;
  padding: 16px;
  border: var(--bd);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.achv-adm-form-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 2px;
  margin-bottom: 12px;
  color: var(--white);
  background: var(--ink);
  display: inline-block;
  padding: 4px 12px;
}
.achv-form-row { margin-bottom: 10px; }
.achv-form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.achv-form-row .field span { display: block; font-weight: 700; margin-bottom: 4px; font-size: 0.76rem; }
.achv-form-actions { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 640px) { .achv-form-row.two { grid-template-columns: 1fr; } }

/* ============ 普通房「准备」面板（悬浮于棋盘上，多屏自适应） ============ */
.game-layout { position: relative; }
.ready-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  width: min(340px, 86vw);
  z-index: 40;
  background: rgba(251, 246, 234, 0.96);
  border: var(--bd-thin);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 24px;
}
.rp-seat {
  width: 22px; height: 22px; border-radius: 50%;
  color: var(--white); font-size: 0.78rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.rp-seat.rp-b { background: var(--ink); }
.rp-seat.rp-w { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.rp-name { font-weight: 900; font-size: 0.86rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.rp-state { font-size: 0.78rem; font-weight: 700; color: var(--ink-dim); flex: 0 0 auto; }
.rp-state.go { color: var(--green); }
.rp-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; border-top: 1px dashed rgba(32,31,28,.15); padding-top: 8px;
  flex-wrap: wrap;
}
.rp-tip { font-size: 0.78rem; color: var(--ink-dim); flex: 1 1 auto; min-width: 0; }
.rp-btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .ready-panel { width: 86vw; padding: 12px; }
  .rp-foot { justify-content: center; text-align: center; }
  .rp-btn { width: 100%; }
}

/* ============ 好友系统 ============ */
.fr-block { margin-bottom: 16px; }
.fr-block h3 { margin: 0 0 8px; font-size: 14px; letter-spacing: .5px; color: var(--ink, #404756); }
.fr-search-row { display: flex; gap: 8px; margin-bottom: 8px; }
.fr-search-row input { flex: 1; padding: 8px 10px; border: 1px solid rgba(0,0,0,.15); border-radius: 8px; background: rgba(255,255,255,.6); }
.fr-empty { color: #9aa1b0; font-size: 13px; padding: 8px 2px; }
.fr-slot { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px dashed rgba(0,0,0,.08); }
.fr-avatar img { border-radius: 50%; }
.fr-meta { flex: 1; min-width: 0; }
.fr-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.fr-sub { font-size: 12px; color: #8a91a0; }
.fr-online { font-size: 11px; color: #9aa1b0; border: 1px solid currentColor; border-radius: 9px; padding: 0 6px; }
.fr-online.on { color: #27c36e; }
.fr-ops { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.fr-ops .btn-neon { padding: 4px 10px; font-size: 12px; }
.fr-at { font-size: 11px; color: #b3b9c5; white-space: nowrap; }
.fr-in-count { background: #ff3b5c; color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; }
.fr-dm-badge {
  background: #ff3b5c; color: #fff;
  border-radius: 10px; padding: 0 6px;
  font-size: 11px; line-height: 1.4;
  flex: 0 0 auto; margin-left: 6px;
}
.fr-friend-count { color: #9aa1b0; font-size: 12px; }

/* 好友列表移动端双行卡片：第一行头像+信息，第二行操作按钮等分铺满 */
@media (max-width: 640px) {
  .fr-slot {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 8px;
    margin-bottom: 8px;
    border: 1px dashed rgba(0,0,0,.08);
    border-bottom: none;
    border-radius: 10px;
    background: rgba(255,255,255,.35);
  }
  .fr-slot .fr-meta { flex: 1 1 0; min-width: 0; }
  .fr-slot .fr-ops { flex: 1 1 100%; }
  .fr-ops .btn-neon { flex: 1 1 0; padding: 7px 6px; font-size: 12px; }
  /* 资料弹窗操作区小屏自动换行，避免按钮挤压 */
  .profile-actions { flex-wrap: wrap; }
}

/* 玩家资料弹窗 */
.profile-body { text-align: center; padding: 8px 4px 2px; }
.pf-avatar img { border-radius: 50%; border: 3px solid var(--ink); background: var(--yellow); }
.pf-name { font-family: var(--font-display); font-size: 1.1rem; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pf-sub { font-size: 13px; color: var(--ink-dim); margin-top: 2px; }
.profile-actions { display: flex; justify-content: center; gap: 10px; padding: 12px 0 6px; }

/* ============ 移动端底部导航（≤640px 显示，桌面隐藏） ============ */
.mobile-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; /* 桌面不显示 */
  height: calc(54px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--paper-dark);
  border-top: var(--bd-thin);
  box-shadow: 0 -4px 0 rgba(32, 31, 28, .15);
}
.mtab {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head, 'Anton', sans-serif);
  font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink); background: none;
  border: none; border-left: var(--bd-thin); cursor: pointer;
}
.mtab:first-child { border-left: none; }
.mtab .fr-in-count { margin-left: 4px; line-height: 1.5; }
.mtab.active { background: var(--red); color: var(--white); }
.mtab:active { background: var(--blue); color: var(--white); }
@media (max-width: 640px) {
  .mobile-tabbar { display: flex; }
  .mobile-tabbar.mt-hide { display: none !important; }
  /* 带底部导航的屏幕：面板底部让出 tabbar 高度，避免内容被遮挡；同样加 dvh 变体跟随当前可视高度 */
  #screen-menu .panel, #screen-rank .panel, #screen-personal .panel, #screen-more .panel {
    max-height: calc(100vh - var(--topbar-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 54px); /* 回退 */
    max-height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 54px);
  }
}