:root {
  --bg: #0f1216;
  --panel: #171b21;
  --border: #262c35;
  --text: #e7ebf0;
  --muted: #8b96a5;
  --accent: #3d8bfd;
  --accent-hover: #5a9dff;
  --danger: #f36767;
  --ok: #4ec98a;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6f9;
    --panel: #ffffff;
    --border: #dfe4ea;
    --text: #1a1f26;
    --muted: #6b7684;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --danger: #d63a3a;
    --ok: #17915c;
  }
}

* { box-sizing: border-box; }

/* ---------- 全站: 文字不给选 ---------- */
/* 用户 2026-09-17: "所有页面上的文字 都设置禁止选择"。
   顺带关掉 iOS 长按弹出的那个选择/复制气泡(-webkit-touch-callout)。

   **"点个单选框就冒出闪烁光标"也是这一条治的**(用户同日: "所有页面上除了输入框
   其他地方一律不能出现输入光标闪烁的情况")。量过之后才敢写下面这段:

     他给的复现条件是"鼠标点在那个单选框圆形上, **按住不松手**"。按住 = 开始一次
     文本选择: 浏览器把一个**折叠选区**(Selection.type === 'Caret')放到离按下点最近的
     文本位置(那个圆圈 .pick 自己是空的, 于是落到旁边的卡片名字上)。这块地方同时
     又是可聚焦的, 一个已获得焦点的元素里存在 Caret, Chrome 就把它画成闪烁的输入光标。
     全站一处 contenteditable 都没有, 跟那个无关。

     2×2 实测(system.html, 在第二张卡的圆圈上按住 250ms 再微拖):
       卡片=div[role=button] + 文字可选(他报 bug 那版) → Caret
       卡片=div[role=button] + 文字禁选               → None
       卡片=<button>         + 文字可选               → Caret
       卡片=<button>         + 文字禁选(现在这样)      → None

     **决定因素只有"那段文字可不可选"** —— 把 div 换成原生 button 并不免疫(那一版
     照样出光标), 所以别把免光标的功劳记在按钮头上。按钮换了是另有理由:
     移动端点得稳、键盘支持不用自己接。
     所以这条 user-select 规则不是把光标藏起来, 是**拆掉了产生光标的前提**: 文字
     不可选中, 选区就无处可放。(拿 caret-color:transparent 去盖才是遮症状, 已撤掉。)

   **输入类必须留着** —— 不给选的话连改自己打过的字、双击选个词都做不到。
   个别地方是**要照着复制**的(后台那串一次性口令、约战房号), 给它加 .selectable。
   四套牌桌自己那份样式里早就写了 user-select:none, 不受这条影响。

   **例外名单里没有 select**(2026-09-17 收掉): 原生下拉里的文字本来就选不中, 给它开
   反而把里面的 <option> 一并放开了 —— 扫全站 label 时, 唯一还能选中的就是个人资料
   那几个 <select> 里的 22 个 option(用户: "lable控件 里面的文字应该都不可以选择复制")。
   没有任何好处, 索性不给。 */
body,
/* select / option 要**点名写上**: 浏览器自带样式给了它们自己的 user-select,
   压过从 body 继承下来的那份, 于是扫出来是 auto 而不是 none。原生下拉是系统控件,
   用户本来也选不中里面的字, 但留个 auto 在那儿早晚被人当成漏网的。 */
select, option {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable], .selectable {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ---------- 手机上点一下就是点一下 ---------- */
/* 用户 2026-09-17: "桌面设置的单双击切换按钮 在手机上还是不能切换"。

   页面的 viewport 没禁缩放(也不该禁), 于是 Safari/Chrome 每收到一次点击都要**等一会儿
   看是不是双击缩放**: 单点被压后 ~300ms; 更要命的是**连着点两下时, 第二下被判成双击、
   click 根本不发** —— 表现就是"点一次就再也点不回去了"。开关这种要来回拨的控件撞得最准。

   touch-action: manipulation 的意思正是"这块地方只认单点和滑动, 双击缩放免了",
   捏合缩放、滚动一概不受影响。挂在所有点得动的东西上, 不单给这一个开关 ——
   页签、牌桌卡、排行榜的行, 凡是要连点的都是同一个毛病。 */
button, a, label, summary,
[role="button"], [role="switch"], [role="tab"], [tabindex],
.tab, .tabs > *, .skin, .swrow, .check {
  touch-action: manipulation;
}

/* **左右滑不许翻页**(用户 2026-09-13)。横向滚到头还接着滑, Chrome / Edge / 安卓
   会当成"上一页/下一页" —— 在牌桌上误滑一下就退出去了。
   这一条只封导航手势, 页面自己的横向滚动(宽表格之类)照常。
   iOS 的边缘回扫是系统手势, CSS 管不着, 由 auth.js 那段 touchmove 兜住。 */
html, body { overscroll-behavior-x: none; }

/* **滚动条的位置一直留着**(用户 2026-09-17: "个人统计和全局统计 切换的瞬间
   整个tab页面有个往右画又瞬间移动回来的闪烁")。

   这两页是各自独立的页面, 点一下是整页跳转。新文档刚载入时内容还没填、页面不够高
   —— 没有滚动条, 可视区宽 1000; 内容一填满变高, 滚动条冒出来, 可视区变 985,
   居中的东西整体左移 7.5px。看起来就是"先往右画一下又弹回来"。
   实测这台机器上滚动条占 15px。

   scrollbar-gutter 在浏览器下限内(Chrome 94+ / Safari 16.0+, 我们卡的是
   iOS 16.4 / Chrome 108, 见 docs/BROWSER_SUPPORT.md)。手机上滚动条是覆盖式的、
   本来就不占位, 这条在那儿是空转, 没有副作用。

   **没用 `overflow-y: scroll`**: 那样短页面上也会画一条空的滚动槽, 难看。 */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 -apple-system, "Segoe UI", "Microsoft YaHei", Roboto, sans-serif;
}

/* ---------- 登录页 ---------- */

.center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
}

.brand {
  text-align: center;
  margin-bottom: 24px;
}

.brand h1 {
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: 1px;
}

.brand p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* ---------------- 页签 ----------------
   **全站只有这一份**(用户 2026-09-17: "所有的tab页 要统一一下. 现在太随意 也不好看")。

   在这之前有四套并存, 长相各不相同:
     · app.css 这条 .tabs(实心蓝选中) —— 后台、登录页;
     · guild.html / guild-admin.html 各自本地又写了一份(.tab.on, 描边药丸);
     · .tabs2(小号描边药丸) —— 段位排行榜、统计排行榜、赛事详情;
     · .seg(顶栏导航) —— 段位场视图切换, 而它在 match.html 与 stats.html 里
       还各写了一遍(一个用 button 一个用 a)。
   同一个站里几种页签是最容易被当成 bug 的那类不一致。

   **形态是"连体页签"**(用户从三个方案里挑的 C): 选中那格像文件夹的标签,
   与下面的内容连成一体 —— 三个签因此读成"一组"而不是"三颗孤立的按钮"。

   **底线画在容器上, 不指望下面有面板**: 这个站有的页签底下是列表、有的是一排卡片,
   不总有一块 .panel 可以连。容器自己带一条底线, 选中那格用 margin-bottom:-1px
   压上去、又没有下边框, 于是把那条线"咬开一个口" —— 不依赖任何下方元素。

   **三种选中标记都认**: aria-selected(后台/排行榜)、aria-current(视图切换/跨页导航)、
   .on(公会那两页)。这样各页的 JS 一行都不用改, 换皮不动逻辑。
   button 和 a 也都认 —— 有的页签就地切, 有的跳页。 */
.tabs {
  display: flex;
  gap: 4px;
  padding: 0 4px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.tabs > button, .tabs > a, .tabs > .tab {
  appearance: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  padding: 9px 18px;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  /* 压住容器那条底线 —— "连体"就是这么来的 */
  margin-bottom: -1px;
  transition: color .15s, background .15s;
}

.tabs > button:hover, .tabs > a:hover, .tabs > .tab:hover { color: var(--text); }

.tabs > [aria-selected="true"],
.tabs > [aria-current="page"],
.tabs > .on {
  color: var(--accent);
  background: var(--panel);
  border-color: var(--border);
}

/* **当前这一格点不动**(用户 2026-09-17: "统计页 你连续点击全局 就会来回闪了")。
   跨页的那几条页签是真链接(个人统计 / 全局统计 是两个页面), 站在全局统计上再点
   「全局统计」, 浏览器就老老实实**把同一页重新载一遍** —— 那一下白屏就是他看到的闪。
   当前页签本来也没有"再去一次"的语义。
   只挡链接: button 那几条是就地切视图的, 重复点一下不会跳转, 也就没这个问题。 */
.tabs > a[aria-current="page"] { pointer-events: none; }

/* 二级页签(用户 2026-09-17: "公会管理页面下的那几个tab 要放在自己的tab页下
   作为二级tab页")。**换个形状而不是照抄一级** —— 两条一模一样的连体页签上下贴着,
   看不出谁管谁; 做成实心胶囊、不带底线, 一眼就知道它归上面那一格管。 */
.tabs.sub {
  border-bottom: 0;
  gap: 8px;
  padding: 0;
  margin: 14px 0 18px;
}
.tabs.sub > button, .tabs.sub > a, .tabs.sub > .tab {
  font-size: 13px;
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: 0;
  background: var(--bg);
}
.tabs.sub > [aria-selected="true"],
.tabs.sub > [aria-current="page"],
.tabs.sub > .on {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* 窄屏: 字与内边距各收一档, 三个签仍要在一行里排得下 */
@media (max-width: 560px) {
  .tabs > button, .tabs > a, .tabs > .tab { padding: 8px 12px; font-size: 13px; }
}

/* **必须放在 label 之前**: `hidden` 属性靠浏览器默认的 `display:none` 生效,
   而下面 `label { display:block }` 的优先级比它高 —— 于是 hidden 的字段照样显示。
   登录页上"姓名/昵称藏不住"就是这么来的, 而且用 JS 查 el.hidden 还是 true, 查不出来。 */
[hidden] { display: none !important; }

label {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted);
}

/* 输入框下面那行小字说明(比如注册时"姓名"是干什么用的)。
   放 placeholder 里的话一开始打字就没了, 而这类说明恰恰是填的时候最需要看见。 */
.field-note {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
  opacity: .8;
}

input {
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
}

input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}

/* 勾选框那一行(登录页的「记住我」)。上面那条 input 规则给的是**输入框**的样子
   —— 宽度 100%、10px 内边距, 套到 checkbox 上会变成一个巨大的方块, 所以这儿单独收回来。
   整行可点: 手机上只点那个 14px 的小方块太难点中。 */
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  cursor: pointer;
  user-select: none;
}
.check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  flex: none;
  accent-color: var(--accent);
}
.check span { font-size: 13px; color: var(--muted); }

.btn {
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover:not(:disabled) { background: var(--accent-hover); }
.btn:disabled { opacity: .55; cursor: default; }

.hint {
  margin-top: 14px;
  font-size: 13px;
  min-height: 20px;
  text-align: center;
}

.hint.err { color: var(--danger); }
.hint.ok  { color: var(--ok); }

.rule {
  color: var(--muted);
  font-size: 12px;
  margin: -8px 0 16px;
}

/* ---------- 页面宽度: 全站就这一个数 ---------- */

/* 用户 2026-09-17: "所有页面 默认的宽度都一样 这样才能保证完美适配以及不晃动"。
   页面之间来回跳(大厅 ↔ 各模块、公会 ↔ 公会管理), 只要这个数不一样, 整块居中的
   内容就左右挪一下 —— 从前全站有八种宽度: 720 / 860 / 900 / 960 / 1040 / 1120 / 1180。
   取 1040(原来用得最多的一档), 左右内边距一并统一到 20。

   **各页不要再自己写 .wrap / .lobby 的 max-width 和左右 padding**。
   真要破例就在这儿开一个类并写明理由, 别在页内偷偷改回去 —— 那等于把晃动放回来。
   上下内边距各页自便: 有 .page-head 的页面上边留白由它出, 没有的自己垫一点。 */
.wrap, .lobby {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 560px) {
  .wrap, .lobby { padding-left: 14px; padding-right: 14px; }
}

/* ---------- 大厅页 ---------- */

/* 左右内边距由上面那条公共件出, 这儿只管上下 */
.lobby {
  padding-top: 28px;
  padding-bottom: 20px;
}

/* 在线人数: 跟在标题后面, 轻一档 —— 它是背景信息, 不该跟标题抢注意力 */
.online {
  margin-left: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
.online.bad { color: #c2560f; }

.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px;
}

/* 卡片是**横向**的: 左边一块图标, 右边文字。竖排(图在上、字在下)那版一张卡就 190px 高,
   六个入口要滚一屏半; 横过来之后单卡 76px, 整个大厅一眼看完。 */
.room {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  min-height: 74px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}

a.room:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.room.disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* 图标(用户 2026-09-17 给的那套, 源图在 F 盘 麻将游戏设计拆解/mahjong_lobby_icons_png,
   出成 img/lobby/*.webp)。

   **底板画在图里, 这儿不再铺渐变** —— 每张 PNG 自带圆角彩色板, 外面再垫一层
   只会露出两圈不一样的圆角。原来那十个 .art-* 渐变因此一起撤掉, 没有别处在用
   (2026-09-17 全站 grep 过, 只有 lobby.html)。

   **改成内嵌一块而不是通栏色柱**: 设计图里图标四周是留白的, 卡片底色从图标两边
   一直连过去。原来那版是左边一整条到顶到底的色柱, 卡片被切成两半。 */
.room-art {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 10px 12px;
}
.room-art img {
  width: 76px; height: 76px; display: block;
  /* 图自带圆角, 这儿只补一层很浅的投影, 让它从卡片底色上浮起来一点 */
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .22));
}

.room-body { padding: 11px 14px; flex: 1; min-width: 0;
              display: flex; flex-direction: column; justify-content: center; }

.room-name { font-size: 15px; font-weight: 600; margin-bottom: 3px; }

.room-desc {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  /* 右边给角标让出位置, 否则长说明会钻到"可进入"底下。
     2026-09-17 从 58 加到 84: 角标改成实心胶囊 + 箭头之后自己宽了一圈。 */
  padding-right: 84px;
  /* 最多两行, 超了省略 —— 说明长短不一时卡片高度参差, 一排看过去很乱 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 角标钉在卡片右侧、**竖向居中**(用户 2026-09-17 给的设计图)。放在文字流里的话
   每张卡都要多出一行的高度, 而它只是个状态字, 不值这个高度。

   从描边改成**实心胶囊 + 一个 ›**: 描边那版在浅色底上几乎看不见, 而这一颗是这张卡
   唯一"可以点"的提示。箭头用伪元素而不是写进文案 —— 文案那几个字各页面还在别处引。 */
.room-tag {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.2;
  white-space: nowrap;
}
.room-tag::after { content: ' ›'; }

/* 绿=可进入(能点), 蓝=管理员(能点但只有他看得见)。两颗都是实心的 —— 它们是同一档
   东西, 只是去处不同; 一实一虚会让人以为其中一颗点不动。 */
.room-tag.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.room-tag.admin { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 大厅内的页脚跟着卡片左对齐, 不要白板页那套左右留白 */
.lobby .foot { padding: 18px 0 0; }

/* ---------- 游戏壳子 ---------- */
/* iframe 里的游戏按视口高度排版, 所以壳子自己不能滚动 */

body.game-page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gamebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

/* 模块名与大厅顶栏那个人名**同一档字**(用户 2026-09-17: "标题栏 模块名称字体和
   名字字体一样加粗")。原来是 13px 的灰色次要文字 —— 它其实是这一页的主标题,
   不该比旁边的按钮还轻。与 .who 写成一条, 免得将来只改一边又分叉。 */
.who, .game-title { font-weight: 600; color: var(--text); }

/* 标题栏上那个模块图标(用户 2026-09-17: "标题栏…名称前面加大厅对应的logo")。
   用的就是大厅那张卡片上的同一张图 —— 从大厅点进来的人, 一眼认得出"我在哪一格里"。

   **让标题自己变成 flex**: .who / .game-title 原来只是一段文字, 图直接塞进去会
   按基线排, 底下垂着一截。改成 inline-flex 居中对齐, 图和字才在一条线上。
   .game-title 是次要文字(13px 灰), 图比它大一圈是故意的 —— 认图比认字快。 */
.who, .game-title { display: inline-flex; align-items: center; gap: 8px; }
.mod-ico { width: 30px; height: 30px; flex: none; display: block;
           filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2)); }

.game-frame {
  flex: 1;
  width: 100%;
  border: 0;
  display: block;
}

/* ---------- 白板页 ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  /* **栏高钉死 52, 图标去迁就它**(用户 2026-09-17: "你栏高52 你头像和exit就搞到
     48或者50就行了 52不要变")。
     原来是反过来的: 栏高由最高那个孩子撑出来, 头像和退出一放大就把整条栏顶起来
     (24 那会儿 52, 放到 56 变 81)。现在写死 min-height, 上下内边距归零 ——
     图标 48, 上下各剩 1.5px, 再改图标大小也不会动到这条栏。
     全站 box-sizing: border-box(见文件开头), 所以这 52 是**含那条下边框**的。 */
  min-height: 52px;
  padding: 0 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.who span { color: var(--muted); font-weight: 400; margin-left: 8px; font-size: 13px; }

/* 顶栏右上那颗退出(用户 2026-09-17: "退出登录 用那个退出的logo替换吧")。
   **只剩图标, 字去掉** —— 那张图本身就是"门 + 往外的箭头", 说得比两个字清楚;
   title/aria-label 留着, 悬停和读屏都还知道它是什么。
   描边也去掉: 图是立体的, 外面再套个框像是把它关进了盒子。 */
/* 顶栏上的图标按钮: 只有一张图, 没有字。退出、返回大厅都走这一份。
   **不带位置**(外边距之类) —— 那是各自的事, 写在这儿会互相牵连。 */
.tool.iconbtn { padding: 0; border: 0; background: transparent;
                line-height: 0; border-radius: 10px; }
/* 退出那一颗单独往右让(用户 2026-09-17 调了三轮: 贴边 → 往左 → 再往右一点)。
   顶栏自己有 20px 的右内边距, 这儿抵掉 10 —— 合起来离屏幕边 10px。 */
#logout.iconbtn { margin-right: -10px; }
/* **占满顶栏那一行的高**: 这张图是立体的、细节多(门框 + 门扇 + 箭头), 小了糊成一团。
   它是顶栏右边唯一一个东西, 顶满也不挤 —— 顶栏的高本来就由最高的那个孩子决定,
   所以这一颗有多大, 那条栏就有多高。 */
.tool.iconbtn img { width: 48px; height: 48px; display: block;
                    filter: drop-shadow(0 1px 3px rgba(0,0,0,.28)); }
.tool.iconbtn:hover { background: rgba(127,127,127,.14); }

/* 计分器是独立一页、自带一条深色头栏, 那颗返回原来是个 ‹ 字(见 .top button)。
   只把字换成图, 位置与那圈白描边一律不动 —— 那条栏比顶栏矮, 48 会把它撑开。 */
#back img { width: 26px; height: 26px; display: block; }
.topbar #back img, .tool.iconbtn img { width: 48px; height: 48px; }
.tool.iconbtn:hover img { filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)); }

.spacer { flex: 1; }

.tool {
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.tool:hover { border-color: var(--accent); }

input[type="color"] {
  width: 38px;
  height: 32px;
  margin: 0;
  padding: 2px;
  cursor: pointer;
}

input[type="range"] { width: 110px; margin: 0; padding: 0; }

.board-wrap { padding: 16px 20px 20px; }

canvas {
  width: 100%;
  height: 72vh;
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: crosshair;
  touch-action: none;
}

.foot {
  color: var(--muted);
  font-size: 12px;
  padding: 0 20px 20px;
}

code {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  word-break: break-all;
}

/* ---------- 观战列表(live.js 用, 四个页面共用) ---------- */
/* 设计见 docs/SPECTATE.md: 列表长在各自的末级页面上, 所以样式要能塞进
   段位场的档位卡片下面、娱乐场的班卡片下面、赛事详情页里 —— 一律做成窄条。 */
/* 观战列表是挂在上面那张卡片下面的**第二层**: 缩进 + 左边一条竖线, 与卡片拉开层次
   (用户 2026-08-19: 两种类型排成一列不好看)。赛事详情页/约战页本身就是独立一节,
   调用方传 indent:false 就不缩进。 */
.lv-block.lv-in { margin: -4px 0 10px 34px; padding-left: 12px; border-left: 2px solid var(--border); }
.lv-block { margin: 4px 0 10px; }

/* 收/开。桌子多了这一段会很长, 给个把手收起来(用户 2026-08-19) */
.lv-toggle {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 3px 2px; display: flex; align-items: center; gap: 5px;
}
.lv-toggle:hover { color: var(--text); }
.lv-toggle b { color: var(--accent); }
.lv-caret { font-size: 10px; }

.lv-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; }
.lv-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
          border-radius: 9px; background: rgba(127,127,127,.08);
          border: 1px solid var(--border); }
.lv-col { flex: 1; min-width: 0; }
.lv-head { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.lv-eye { color: var(--accent); }
.lv-eye.off { color: var(--muted); }
.lv-seats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 13px; }
/* 桌子列表里名字前面那张头像(用户 2026-08-24)。**样式写在这儿而不是 live.js 里** ——
   .lv-p 本来就在这个文件里定的, 分两处写迟早改一处漏一处。图集和取格逻辑见 avatar.js。 */
.lv-p .av { width: 1.5em; height: 1.5em; margin-right: 5px; vertical-align: -.35em; }
.lv-p { white-space: nowrap; }
.lv-p.off { color: var(--muted); }            /* 掉线托管中的那家 */
.lv-ai { font-style: normal; font-size: 10px; color: var(--muted);
         border: 1px solid var(--border); border-radius: 3px; padding: 0 3px; margin-left: 4px; }
.lv-acts { flex: none; display: flex; gap: 6px; }
.lv-btn { font-size: 13px; padding: 6px 11px; border-radius: 8px; cursor: pointer;
          border: 1px solid var(--border); background: transparent; color: var(--text);
          text-decoration: none; white-space: nowrap; }
.lv-btn.pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.lv-btn:disabled { opacity: .45; cursor: not-allowed; }
/* 按钮上那句"还差 N 分" —— 让人干等是最糟的做法, 差多久要写在按钮上 */
.lv-eta { font-size: 11px; opacity: .85; }
.lv-empty { color: var(--muted); font-size: 12px; padding: 6px 2px; }

@media (max-width: 480px) {
  .lv-row { flex-wrap: wrap; }
  .lv-acts { width: 100%; justify-content: flex-end; }

  /* 大厅卡片在窄屏上把地方还给说明文字(2026-09-17)。
     一张卡宽 358 上下, 图标 76 + 胶囊 84 一占, 文字只剩百来像素, 两行都写不全 ——
     实测"四人实时对战, 计段位与 R 分: 五档匹配, 坐满四…"就断在这儿。
     图标收到 56、胶囊收窄、说明放到三行, 三样一起让, 才够写完一句话。 */
  .room-art { padding: 10px 0 10px 10px; }
  .room-art img { width: 56px; height: 56px; }
  .room-body { padding: 10px 12px; }
  .room-tag { right: 10px; padding: 4px 9px; font-size: 12px; }
  .room-desc { padding-right: 72px; -webkit-line-clamp: 3; }
}