/* ============================================================================
   NZEP · assets/lobby/lobby.css —— 棋牌大厅（/board）的界面主题
   ----------------------------------------------------------------------------
   **风格照拼点大厅抄**（用户 2026-10-11 要求「小游戏大厅之类全部重新设计UI风格仿照拼点风格」）：
   配色与圆角直接从 assets/games/clash.css 的令牌搬过来 ——
     底 #f6f6f6 · 卡片 #fff · 线 #e3e6ea / #cfd4da · 正文 #1a1c1f · 次要 #4b5158
     站点红 #b32424（强调）· 深蓝 #2a54a8（链接/主按钮）· 顶栏深色 #1c2128
   组件基座仍是 **Bootstrap 5.3.3（MIT，自托管 assets/vendor/）**：栅格、按钮、模态框、徽章都用它，
   这一份只负责配色、圆角、间距与手机端。
   许可证：assets/lobby/LICENSE-bootstrap.txt
   ============================================================================ */
:root {
  --h-bg: #f6f6f6;
  --h-card: #ffffff;
  --h-card2: #f8f9fa;
  --h-line: #e3e6ea;
  --h-line2: #cfd4da;
  --h-t: #1a1c1f;
  --h-d: #4b5158;
  --h-d2: #6b7280;
  --h-red: #b32424;
  --h-blue: #2a54a8;
  --h-ok: #2f6f3f;
  --h-bad: #a8231d;
  --h-dark: #1c2128;
  --h-dark-t: #e9edf3;
  --h-dark-d: #b9c1cc;
  --h-r: 16px;
  /* 让 Bootstrap 的按钮/表单也落到这套色上 */
  --bs-primary: #2a54a8;
  --bs-primary-rgb: 42, 84, 168;
  --bs-link-color: #2a54a8;
  --bs-link-hover-color: #1d3d7d;
  --bs-border-color: #e3e6ea;
  --bs-body-color: #1a1c1f;
  --bs-body-bg: #f6f6f6;
}
body.lz { background: var(--h-bg); color: var(--h-t); }
.lz a { color: var(--h-blue); }
.lz-serif { font-family: Georgia, "Songti SC", "SimSun", serif; }

/* ---- 顶栏：照拼点那条深色 bar ----
   （下面这几条 .lz-nav .nav-link / .navbar-toggler 是旧结构留下的：现在的顶栏
   不再用 Bootstrap 折叠，但缓存里的旧 HTML 还能落到同一套色上，所以留着不删。） */
.lz-nav {
  background: var(--h-dark); border-bottom: 1px solid #10141a;
  position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);
}
.lz-nav .navbar-brand { color: var(--h-dark-t); font-family: Georgia, "Songti SC", serif; font-weight: 700; }
.lz-nav .navbar-brand .mk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; margin-right: .45rem; border-radius: 6px;
  background: var(--h-red); color: #fff; font-size: .95rem;
}
.lz-nav .navbar-toggler { border-color: #3a4250; }
.lz-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23b9c1cc' stroke-width='2.4' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
}
.lz-nav .nav-link { color: var(--h-dark-d); }
.lz-nav .nav-link:hover { color: #fff; }
.lz-nav .nav-link.active { color: #fff; font-weight: 700; }
.lz-nav .lz-count, .lz-nav .navbar-text { color: var(--h-dark-d) !important; }
.lz-nav .btn-outline-secondary { color: var(--h-dark-t); border-color: #3a4250; }
.lz-nav .btn-outline-secondary:hover { background: #2b313b; border-color: #4a5361; color: #fff; }

/* ---- 顶条统一（2026-10-30）----
   用户反馈「棋牌大厅页面没有统一品牌图和网站设计导航栏风格」：以前这一页是自定义的
   .lz-nav（红色 "N" 方块 + 品牌文字），跟 /games、/kards 那套 .st-bar 对不上。
   现在品牌 + 账号用**小游戏子站的共用顶条**（assets/subsite.css 的 .st-bar）：
     · 品牌图由 assets/subsite.js 从 /api/site 同步（与资料库顶栏同一张图，后台换了这里跟着换）；
     · 字体走 assets/nzep.css 的 --serif / --sans，底色走 --bar；
     · 大厅自己的页签降为第二条 .lz-tabbar，同一深色底，视觉上仍是"一条顶栏的两层"。
   上面那组 .lz-nav 规则保留：缓存里的旧 HTML 还能落到同一套色上。 */
.lz-topbar { background: var(--bar); border-bottom: 0; }
.lz-topbar .st-brand { color: var(--bar-text); }
.lz-topbar .st-sub { border-left-color: var(--bar-2); }
.lz-topbar #lzWho { max-width: none; overflow: visible; display: flex; align-items: center; gap: .4rem; }
.lz-topbar #lzWho .lz-count { color: #b9c1cc; white-space: nowrap; }
.lz-topbar .btn-outline-secondary { color: var(--bar-text); border-color: #3a4250; }
.lz-topbar .btn-outline-secondary:hover { background: #2b313b; border-color: #4a5361; color: #fff; }
.lz-tabbar { background: var(--bar); border-top: 1px solid #10141a; border-bottom: 1px solid #10141a; }
.lz-tabbar .lz-nav-in { display: flex; flex-wrap: nowrap; align-items: center; gap: .45rem; padding: .34rem .75rem; }
.lz-tabbar .lz-tabs { flex: 1 1 auto; max-width: none; }
.lz-tabbar .lz-more-btn { min-height: 44px; }

/* ---- 顶栏改版（2026-10）：主行只放**大厅自己的页签**，站点级入口收进「更多」----
   以前这一条是五个平级链接（棋牌 / 解密 / 通用 / 论坛 / 资料库）：分不清哪个是这一页的、
   手机宽度下还被整条折进三条杠（等于"导航没了"）。现在分成三层：
     品牌（左）· 页签（分段控件，主行）· 更多（原生 <details>，不需要 JS）
   配色只用上面那套令牌 + 顶栏原有的几个深色值（#3a4250 / #2b313b / #4a5361），没有新配色。
   触控：手机和桌面都给到 >= 40px 的点击高度（页签 40、更多 40、面板链接 44）。 */
.lz-nav-in {
  display: flex; flex-wrap: wrap; align-items: center;
  /* 左右沿用 Bootstrap .container 的 .75rem 槽宽（写成 0 会把品牌顶到屏幕边上） */
  gap: .38rem .5rem; padding: .38rem .75rem;
}
.lz-brand {
  order: 1; flex: 0 0 auto; display: inline-flex; align-items: center;
  min-height: 40px; text-decoration: none;
  color: var(--h-dark-t); font-family: Georgia, "Songti SC", serif; font-weight: 700; font-size: .95rem;
}
.lz-brand:hover { color: #fff; }
.lz-brand .mk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; margin-right: .45rem; border-radius: 6px;
  background: var(--h-red); color: #fff; font-size: .95rem; font-weight: 400;
}
.lz-nav-who { order: 2; margin-left: auto; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.lz-nav-who .btn { display: inline-flex; align-items: center; min-height: 40px; }
.lz-nav-tabsrow { order: 3; flex: 1 1 100%; display: flex; align-items: center; gap: .45rem; min-width: 0; }

/* 页签：一颗分段控件，滚得动但不撑破页面（窄屏只横向滚动这一条） */
.lz-tabs {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .15rem;
  list-style: none; margin: 0; padding: .18rem;
  background: #232a33; border: 1px solid #3a4250; border-radius: 999px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.lz-tabs::-webkit-scrollbar { display: none; }
.lz-tabs > li { display: flex; flex: 0 0 auto; min-width: 0; }
.lz-tab {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 .75rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--h-dark-d);
  font-family: inherit; font-size: .84rem; line-height: 1.2; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.lz-tab:hover { background: #2b313b; color: #fff; }
.lz-tab.on, .lz-tab[aria-current="page"] {
  background: #2b313b; color: #fff; font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--h-red);
}

/* 「更多」：原生 details，点开是一列站点级入口；键盘、触屏都不需要额外 JS */
.lz-more { position: relative; flex: 0 0 auto; }
.lz-more-btn {
  list-style: none; display: inline-flex; align-items: center; gap: .3rem;
  min-height: 44px; padding: 0 .8rem; border-radius: 999px;
  border: 1px solid #3a4250; background: transparent; color: var(--h-dark-t);
  font-size: .84rem; cursor: pointer; user-select: none;
}
.lz-more-btn::-webkit-details-marker { display: none; }
.lz-more-btn::after { content: "▾"; font-size: .68rem; color: var(--h-dark-d); }
.lz-more-btn:hover { background: #2b313b; border-color: #4a5361; color: #fff; }
.lz-more[open] > .lz-more-btn { background: #2b313b; border-color: #4a5361; color: #fff; }
.lz-more-panel {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40;
  min-width: 12.5rem; display: flex; flex-direction: column; gap: .1rem;
  padding: .35rem; background: var(--h-card); border: 1px solid var(--h-line2);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(16, 20, 26, .22);
}
.lz-more-panel a {
  display: flex; align-items: center; min-height: 44px; padding: 0 .7rem;
  border-radius: 8px; color: var(--h-t); font-size: .86rem; text-decoration: none;
}
.lz-more-panel a:hover { background: var(--h-card2); color: var(--h-blue); }

/* 窄屏：两行（品牌 + 我是谁 / 页签 + 更多），不再折进三条杠；
   两行加起来 ~100px，粘在顶上就把手机屏吃掉八分之一，所以窄屏不粘顶。 */
@media (max-width: 899.98px) {
  .lz-nav { position: static; }
  .lz-tab { padding: 0 .6rem; font-size: .82rem; }
  .lz-more-btn { padding: 0 .7rem; font-size: .82rem; }
}
/* 320 档（iPhone SE 那种）：页签居中时溢出会把最左边那颗切掉，改成从左边排 */
@media (max-width: 359.98px) {
  .lz-tabs { justify-content: flex-start; }
}

/* ---- 桌面（>= 900px）：品牌 · 页签 · 我是谁 收成一行（页签在中间，像一颗分段控件） ---- */
@media (min-width: 900px) {
  .lz-nav-in { flex-wrap: nowrap; gap: .8rem; padding: .5rem .75rem; }
  .lz-nav-tabsrow { order: 2; flex: 1 1 auto; justify-content: center; }
  .lz-tabs { flex: 0 1 auto; max-width: 30rem; }
  .lz-nav-who { order: 3; margin-left: 0; }
}

/* ---- 页头：拼点那套渐变 hero ---- */
.lz-hero {
  padding: 1.15rem 0 1rem; border-bottom: 1px solid var(--h-line);
  background: linear-gradient(135deg, #fdf3f2, #eef4fb 62%, var(--h-card));
}
.lz-hero h1 { font-size: 1.5rem; margin: 0 0 .35rem; }
.lz-hero p { margin: 0; color: var(--h-d); font-size: .92rem; }
.lz-stat { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-top: .7rem; }
.lz-stat .pill {
  background: var(--h-card); border: 1px solid var(--h-line2); color: var(--h-d);
  border-radius: 999px; padding: .12rem .6rem; font-size: .78rem;
}
.lz-stat .pill b { font-weight: 700; color: var(--h-t); }

/* ---- 工具条 ---- */
.lz-tools {
  background: var(--h-card); border: 1px solid var(--h-line); border-radius: var(--h-r);
  padding: .7rem .8rem; margin: 1rem 0 .9rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.lz-tools .form-control, .lz-tools .form-select { font-size: .9rem; min-height: 44px; }
.lz-count { color: var(--h-d2); font-size: .82rem; }

/* ---- 卡片 ---- */
.lz-card {
  background: var(--h-card); border: 1px solid var(--h-line); border-radius: var(--h-r);
  padding: .95rem 1rem; height: 100%; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.lz-card:hover { box-shadow: 0 6px 18px rgba(26, 28, 31, .10); transform: translateY(-2px); border-color: var(--h-line2); }
.lz-card h3 { font-size: 1.05rem; margin: 0 0 .35rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-family: Georgia, "Songti SC", serif; }
.lz-card h3 .ic { font-size: 1.2rem; }
.lz-card .desc { color: var(--h-d); font-size: .86rem; line-height: 1.65; margin: .1rem 0 .5rem; flex: 1 1 auto; }
.lz-card .meta { color: var(--h-d2); font-size: .78rem; line-height: 1.7; }
.lz-card .ops { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.lz-card .ops .btn { font-size: .85rem; min-height: 44px; }
.lz-tag {
  display: inline-block; background: var(--h-card2); border: 1px solid var(--h-line2); color: var(--h-d);
  border-radius: 999px; padding: .05rem .5rem; font-size: .75rem; font-weight: 400;
}
.lz-tag.on { background: #fdf3f2; border-color: #e8c6c3; color: var(--h-red); }

/* ---- 段位 / 设置 ---- */
.lz-rate { font-size: .8rem; margin-top: .35rem; color: var(--h-d); }
.lz-rate .lv { display: inline-block; min-width: 3.2rem; text-align: center; padding: 0 .35rem;
  border-radius: 3px; background: var(--h-card2); border: 1px solid var(--h-line2); color: var(--h-blue); font-weight: 700; }
.lz-card.lz-hi { border-color: var(--h-red); box-shadow: 0 0 0 3px rgba(179, 36, 36, .12); }

/* ---- 房间表 ---- */
.lz-rooms { background: var(--h-card); border: 1px solid var(--h-line); border-radius: var(--h-r); overflow: hidden; }
.lz-rooms table { margin: 0; font-size: .86rem; }
.lz-rooms th { background: var(--h-card2); color: var(--h-d); font-weight: 700; white-space: nowrap; }
.lz-rooms td { vertical-align: middle; }
.lz-rooms .btn { min-height: 38px; }
.lz-code { font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .06em; }
.lz-empty { color: var(--h-d2); font-size: .86rem; padding: 1rem; text-align: center; }

/* ---- 页脚 ---- */
/* 与 /games、/kards 一样的 .st-foot（品牌回资料库 + 右侧站点入口）；这里只补这条页在
   Bootstrap 文档流里的外边距，并把 flex 布局钉住（lobby.css 在 subsite.css 之后加载）。 */
.lz-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  background: transparent; margin-top: 2rem;
  padding: 1.1rem .75rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
}
.lz-foot, .lz-foot a { color: var(--h-d2); font-size: .82rem; }
.lz-foot .sep { margin: 0 .4rem; color: var(--h-line2); }

/* ---- 创建房间弹窗：「添加人机」这一步（2026-10-30 恢复）---- */
.lz-botbox { border: 1px solid var(--h-line); border-radius: 12px; padding: .7rem .75rem; background: var(--h-card2); }
.lz-botrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.lz-botrow .btn { min-height: 40px; }
.lz-botbox .form-text { font-size: .78rem; }

/* ---- 触控尺寸（2026-10 导航改版一起量出来的）----
   大厅里所有按钮 / 输入框都给到 >= 40px 高（手机上"创建房间 / 快速匹配 / 加入 / 观战"
   原来只有 31–38px）；卡片里那个「改设置」原来是一条 19px 高的小字链接，现在是一颗小胶囊。 */
.lz .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.lz .form-control, .lz .form-select { min-height: 44px; }
.lz-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-left: .15rem;
  padding: 0 .55rem; border: 1px solid var(--h-line2); border-radius: 999px;
  background: var(--h-card2); color: var(--h-blue); font-size: .78rem; cursor: pointer;
}
.lz-link:hover { text-decoration: none; background: #eef4fb; border-color: var(--h-blue); }

/* ---- 手机：单列、大按钮、不横向溢出 ---- */
@media (max-width: 575.98px) {
  .lz-hero { padding: 1rem 0 .85rem; }
  .lz-hero h1 { font-size: 1.3rem; }
  .lz-card { padding: .85rem .9rem; }
  .lz-card .ops { gap: .45rem; }
  .lz-card .ops .btn { flex: 1 1 calc(50% - .45rem); min-height: 44px; }
  .lz-tools .row > [class*="col-"] { margin-bottom: .45rem; }
  .lz-rooms table { font-size: .8rem; }
  .lz-rooms th, .lz-rooms td { padding: .45rem .4rem; }
  /* 触控：手机上这一页所有可点目标都给到 >=44px（页签 / 更多 / 品牌 / 按钮 / 输入框） */
  .lz .btn, .lz-tab, .lz-more-btn, .lz-topbar .st-brand, .lz-topbar #lzWho .btn { min-height: 44px; }
  .lz-link { min-height: 44px; }
}