/*
 * 俱乐部「装修」（2026-10-22 用户发竞品截图要求），同日改成 C「夜景会所」：
 * 远景（落地窗外城市夜景 + 大理石地面）在 night.css 的 .nscene，这里是俱乐部自己的东西：
 * 左边一列深蓝金边大按钮、椭圆 / 方 / 圆牌桌（黑色桌边 + 金线）、黑色皮椅、底部按游戏筛选。
 * 全部用 CSS 画，没有图片。只管 .clubscreen 里面，不影响大厅和牌桌。
 */
.clubscreen {
  --cgold: #e8c070; --cgold-hi: #ffe7a0; --cream: #f4ead2; --cmuted: #b8c0d8;
  --navy-hi: #2a3866; --navy: #18213e; --navy-lo: #0c1124;
  gap: 6px; color: var(--cream); background: none; /* 背景是 #stage 底下的夜景 */
}
@media (prefers-reduced-motion: reduce) { .cnoticebox span { animation: none; } }

/* ---------- 顶栏 ---------- */
.cbar { display: flex; align-items: center; gap: 10px; flex: none; height: 44px; }
.cnotice { flex: 1; min-width: 60px; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px;
  background: rgba(6, 10, 24, .6); border: 1px solid rgba(232, 192, 112, .4); color: var(--cgold); }
.cnotice .ico { width: 16px; height: 16px; flex: none; }
.cnoticebox { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.cnoticebox span { display: inline-block; padding-left: 100%; font-size: 12px; color: var(--cream); animation: cnoticeRoll 18s linear infinite; }
@keyframes cnoticeRoll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.cback {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 14px 0 8px; border: 0; border-radius: 18px; cursor: pointer;
  background: linear-gradient(#fff0a8, #f2c14e 55%, #d8961e); color: #4a2600; font-size: 15px; font-weight: 900;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(0, 0, 0, .15), 0 3px 0 #8a5a0a, 0 5px 8px rgba(0, 0, 0, .5);
}
.cback i { font-style: normal; font-size: 24px; line-height: 1; margin-top: -3px; }
.cname { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.cname b {
  font-size: 20px; font-weight: 900; letter-spacing: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(#fffbe8, #ffe39a 55%, #d8a040); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 6px rgba(232, 192, 112, .35));
}
.cname span { font-size: 11px; color: var(--cmuted); }
.cpool {
  margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; padding: 2px 12px; border-radius: 10px; line-height: 1.1;
  background: rgba(6, 10, 24, .7); border: 1.5px solid var(--cgold); box-shadow: inset 0 0 8px rgba(0, 0, 0, .5);
}
.cpool small { font-size: 10px; color: var(--cmuted); }
.cpool b { font-size: 20px; color: var(--cgold-hi); font-variant-numeric: tabular-nums; }
.cpool.low { border-color: #ff7a6b; }
.cpool.low b { color: #ff9a8b; }

/* ---------- 左边一列大按钮：深蓝底金边，选中的金色 ---------- */
.cmain { flex: 1; min-height: 0; display: flex; gap: 10px; }
.cside { flex: none; width: 112px; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 16px; overflow-y: auto;
  background: linear-gradient(rgba(28, 38, 72, .92), rgba(10, 14, 30, .92)); border: 1.5px solid var(--cgold); box-shadow: inset 0 0 12px rgba(0, 0, 0, .5), 0 6px 14px rgba(0, 0, 0, .55); }
/* 图标在左、字在右（两行：名字 + 小字），一个按钮 44px 左右高，手机横屏四个放得下 */
.cnav {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 6px;
  padding: 6px 8px; border: 1px solid rgba(232, 192, 112, .6); border-radius: 12px; cursor: pointer; text-align: left;
  background: linear-gradient(var(--navy-hi), var(--navy)); color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 3px 0 #05070e, 0 4px 6px rgba(0, 0, 0, .4);
}
.cnav .ico { grid-row: 1 / 3; width: 22px; height: 22px; stroke-width: 2.2; color: var(--cgold); }
.cnav b { font-size: 17px; line-height: 1.15; font-weight: 900; letter-spacing: 2px; }
.cnav small { font-size: 10px; line-height: 1.2; color: var(--cmuted); white-space: nowrap; }
.cnav.on { border-color: transparent; background: linear-gradient(#fff0a8, #f2c14e 55%, #d8961e); color: #4a2600;
  box-shadow: inset 0 2px 0 #fffbe0, 0 3px 0 #8a5a0a, 0 0 12px rgba(242, 193, 78, .6); }
.cnav.on .ico { color: #6a3a00; }
.cnav.on small { color: #7a4a10; }
.cnav:active { transform: translateY(2px); }
.cnav .dotbadge { position: absolute; top: -4px; right: -4px; }

/* ---------- 牌桌页 ---------- */
.chall { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.chall > .empty { margin: auto; text-align: center; color: var(--cmuted); line-height: 2.6; font-size: 15px; }
/* 一排固定 4 张桌（2026-10-26 用户），桌子宽度跟着屏幕宽度走；桌上的椅子、头像、名字、牌匾按桌子宽度缩放（cqw，见 .ctbl 的 container） */
.cgrid { flex: 1; min-height: 0; overflow-x: hidden; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; align-content: start; padding: 2px 4px 4px 2px; }
/* 桌子直接摆在地面上（不套卡片框），下面一块牌匾写桌号和玩法 */
.ctbl { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 2px 4px; container-type: inline-size; }

/* 桌子：黑色桌边 + 金线，里面是台呢，地上有影子；空座位是黑色皮椅，有人的是头像 + 名字 */
/* 牌桌区域固定 100:62 的宽高比（app.js tableLayout 按这个比例算座位和台面位置） */
.cfloor { position: relative; aspect-ratio: 100 / 62; cursor: pointer; }
.cfloor:active .cfelt { filter: brightness(1.12); }
.cshadow { position: absolute; border-radius: 50%; transform: translateY(16%) scale(1.08, 1.05);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); }
.cfelt {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border: 7px solid #14161e; box-shadow: inset 0 0 0 1.5px var(--cgold), inset 0 6px 14px rgba(0, 0, 0, .5), 0 0 0 1.5px rgba(232, 192, 112, .5), 0 8px 14px rgba(0, 0, 0, .6);
}
/* 长条牌桌（十三水、五十K）：两头半圆 */
.cfelt.long { border-radius: 999px; }
.cfelt.green { background: radial-gradient(ellipse at 50% 35%, #3a9a64, #1d6440 65%, #134a2d); }
.cfelt.blue { background: radial-gradient(ellipse at 50% 35%, #4a86c8, #2a5c96 65%, #1b3f6c); }
.cfelt.red { background: radial-gradient(ellipse at 50% 35%, #c0503f, #8e3022 65%, #621d14); }
/* 麻将方桌：更厚的边，四个角圆一点（台面颜色看上面 .green / .red） */
.cfelt.square { border-radius: 16%; border-width: 8px; }
.ctbl.t-square .cshadow { border-radius: 22%; }
/* 钓鱼圆桌 */
.cfelt.round { border-radius: 50%; }
.cplate { display: flex; flex-direction: column; align-items: center; padding: 2px 10px; border-radius: 10px; line-height: 1.2;
  background: rgba(0, 0, 0, .4); border: 1px solid rgba(232, 192, 112, .7); }
.cplate span { font-size: 13px; font-weight: 900; color: var(--cgold-hi); letter-spacing: 1px; white-space: nowrap; }
.ctbl.t-square .cplate, .ctbl.t-round .cplate { padding: 2px 6px; }
.ctbl.t-square .cplate span, .ctbl.t-round .cplate span { font-size: 12px; letter-spacing: 0; }
.cplate b { font-size: 11px; font-weight: 700; color: var(--cream); white-space: nowrap; }
.ctbl.playing .cplate b { color: #9effc4; }

.cseat { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 26px; height: 22px; }
/* 有人坐：头像叠在椅子上，名字挂在头像下面 */
.cwho { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 56px; }
.cseat .avatar { width: 30px; height: 30px; font-size: 12px; box-shadow: 0 0 0 2px var(--cgold), 0 2px 4px rgba(0, 0, 0, .6); }
.cseat .cnm { max-width: 54px; margin-top: 1px; padding: 0 4px; border-radius: 6px; background: rgba(0, 0, 0, .6); font-size: 10px; line-height: 14px;
  color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 黑色皮椅：上面一条是椅背（朝外），下面是椅面（朝桌子）；整个按座位方向转 */
.chair { position: relative; display: block; width: 26px; height: 22px; }
.chair::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(#4a4e5c, #1c1e26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .6); }
.chair::after { content: ''; position: absolute; left: 3px; right: 3px; top: 7px; bottom: 0; border-radius: 3px 3px 7px 7px;
  background: linear-gradient(#3a3d48, #15171e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 3px rgba(0, 0, 0, .6); }
.cliving { position: absolute; right: 6%; top: 6%; padding: 1px 7px; border-radius: 8px; font-style: normal; font-size: 11px; font-weight: 800;
  color: #fff; background: linear-gradient(#ff8a5c, #e0452a); box-shadow: 0 2px 0 #8a2412; animation: cliving 1.6s ease-in-out infinite; }
@keyframes cliving { 50% { opacity: .65; } }
.cwatch { position: absolute; left: 8px; top: 4px; font-style: normal; font-size: 11px; color: var(--cmuted); }

.cfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 牌匾：黑底金边，大字桌号，小字玩法 */
.csign { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 8px;
  background: linear-gradient(#1c2238, #0c1020); border: 1.5px solid var(--cgold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 4px rgba(0, 0, 0, .55); }
.csign b { flex: none; font-size: 13px; color: var(--cgold-hi); letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.csign span { min-width: 0; font-size: 11px; color: var(--cmuted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cban { font-size: 12px; color: #ff9a8b; font-weight: 700; }
.cnote { grid-column: 1 / -1; margin: 2px 0 0; text-align: center; font-size: 11px; color: var(--cmuted); }

/* 按钮：坐下是金色实心，旁观是深蓝金边 */
.cbtn {
  min-width: 76px; height: 32px; padding: 0 16px; border: 0; border-radius: 16px; cursor: pointer; color: #4a2600; font-size: 15px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(#fff0a8, #f2c14e 55%, #d8961e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(0, 0, 0, .12), 0 3px 0 #8a5a0a, 0 5px 8px rgba(0, 0, 0, .5);
}
.cbtn.brown { color: var(--cream); border: 1.5px solid var(--cgold); background: linear-gradient(var(--navy-hi), var(--navy));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 3px 0 #05070e, 0 5px 8px rgba(0, 0, 0, .5); }
.cbtn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 1px 0 rgba(0, 0, 0, .5); }

/* 底部按游戏筛选 */
.cfilter { flex: none; display: flex; gap: 8px; padding: 6px 8px; border-radius: 14px; overflow-x: auto;
  background: rgba(4, 6, 14, .75); border-top: 1.5px solid rgba(232, 192, 112, .5); }
.cft { flex: 1; min-width: 70px; height: 34px; border: 1px solid rgba(232, 192, 112, .6); border-radius: 10px; cursor: pointer; font-size: 16px; font-weight: 900; letter-spacing: 1px;
  color: var(--cream); background: linear-gradient(var(--navy-hi), var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 3px 0 #05070e; }
.cft.on { border-color: transparent; color: #4a2600; background: linear-gradient(#fff0a8, #f2c14e 55%, #d8961e); box-shadow: inset 0 2px 0 #fffbe0, 0 3px 0 #8a5a0a, 0 0 10px rgba(242, 193, 78, .5); }

/* ---------- 成员 / 玩法 / 战绩：深蓝玻璃面板 ---------- */
.cpanel { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 16px;
  background: linear-gradient(rgba(26, 36, 70, .94), rgba(10, 14, 30, .94)); border: 1.5px solid var(--cgold); box-shadow: inset 0 0 14px rgba(0, 0, 0, .5), 0 6px 14px rgba(0, 0, 0, .55); }
.clubscreen .cpanel .panel { background: rgba(255, 255, 255, .05); border: 1px solid rgba(232, 192, 112, .35); backdrop-filter: none; -webkit-backdrop-filter: none; }
.clubscreen .cpanel h2 { color: var(--cgold-hi); }
.clubscreen .cpanel .hint, .clubscreen .cpanel .row .lbl { color: var(--cmuted); }
.clubscreen .cpanel .mrow { border-color: rgba(232, 192, 112, .2); }
.clubscreen .cpanel table.history th { color: var(--cgold-hi); }

/* 小屏横屏手机：左栏窄一点、桌子矮一点 */
.narrow .clubscreen .cside { width: 88px; padding: 6px; gap: 6px; }
.narrow .clubscreen .cnav { column-gap: 4px; padding: 5px 6px; }
.narrow .clubscreen .cnav b { font-size: 15px; letter-spacing: 1px; }
.narrow .clubscreen .cnav .ico { width: 18px; height: 18px; }
.narrow .clubscreen .cgrid { gap: 8px; }
.short .clubscreen .cbar { height: 36px; }
.short .clubscreen .cback { height: 30px; font-size: 13px; }
.short .clubscreen .cname b { font-size: 16px; }
.short .clubscreen .cnav { padding: 5px 4px; }
.short .clubscreen .cnav small { display: none; }
.short .clubscreen .cnav .ico { width: 16px; height: 16px; }
.narrow .clubscreen .cnotice { display: none; }
.short .clubscreen .cft { height: 30px; font-size: 14px; }
/* 玩法名称（2026-10-24）：添加玩法时填名字 */
.mnamerow { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.mnamerow label { flex: none; font-weight: 700; }
.mnamerow input { flex: 1; min-width: 0; }

.msearch input { flex: 1; min-width: 0; }
.history tr.me td { background: var(--primary-soft); }
/* 普通会员只有「牌桌」一个按钮，退出亲友圈放在侧栏最下面（2026-10-26） */
.cside .cquit { margin-top: auto; font-size: 12px; padding: 6px 4px; white-space: nowrap; }
.cside .cdissolve { margin-top: 8px; font-size: 12px; padding: 6px 4px; white-space: nowrap; }

/* 一排 4 张桌（2026-10-26）：桌子窄了，里面的东西按桌宽（cqw）缩，大屏上不超过原来的大小 */
.cfelt { border-width: clamp(4px, 3.6cqw, 7px); }
.cfelt.square { border-width: clamp(5px, 4cqw, 8px); }
.cplate { padding: 1px clamp(4px, 4cqw, 10px); border-radius: 8px; }
.cplate span, .ctbl.t-square .cplate span, .ctbl.t-round .cplate span { font-size: clamp(9px, 6.4cqw, 13px); letter-spacing: 0; }
.cplate b { font-size: clamp(8px, 5.4cqw, 11px); }
.cseat, .chair { width: clamp(14px, 12cqw, 26px); height: clamp(12px, 10cqw, 22px); }
.chair::before { height: 36%; }
.chair::after { top: 32%; }
.cseat .avatar { width: clamp(16px, 14cqw, 30px); height: clamp(16px, 14cqw, 30px); font-size: clamp(8px, 5.6cqw, 12px); box-shadow: 0 0 0 1.5px var(--cgold), 0 2px 4px rgba(0, 0, 0, .6); }
.cwho { width: clamp(30px, 26cqw, 56px); }
.cseat .cnm { max-width: clamp(30px, 26cqw, 54px); padding: 0 2px; font-size: clamp(8px, 5cqw, 10px); line-height: 1.35; }
.cliving { right: 3%; top: 3%; padding: 0 5px; font-size: clamp(8px, 5.4cqw, 11px); border-radius: 6px; }
.cwatch { left: 4px; top: 2px; font-size: clamp(8px, 5cqw, 11px); }
.csign { gap: 4px; padding: 2px 6px; border-radius: 6px; }
.csign b { font-size: clamp(10px, 6.4cqw, 13px); letter-spacing: 0; }
.csign span { font-size: clamp(8px, 5.2cqw, 11px); }
/* 上面一排座位的头像会冒出桌子区域、下面一排的头像 + 名字会往下伸：桌子上下各留一点地方，免得盖住牌匾和上一排 */
.cfloor { margin: 7cqw 0 13cqw; }
.cft { white-space: nowrap; padding: 0 8px; font-size: clamp(13px, 2.2vw, 16px); }

/* 打烊 / 开业（2026-10-26）：侧栏最下面一个按钮；打烊时大厅上面一条横幅、名字旁边一个「已打烊」小牌 */
.cshut { margin-top: auto; height: 34px; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 900; letter-spacing: 3px;
  color: #ffd9cf; border: 1.5px solid #c0503f; background: linear-gradient(#5a2018, #2c0d08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 3px 0 #120402; }
.cshut.open { color: #4a2600; border-color: transparent; background: linear-gradient(#fff0a8, #f2c14e 55%, #d8961e); box-shadow: inset 0 2px 0 #fffbe0, 0 3px 0 #8a5a0a; }
.cshut:active { transform: translateY(2px); }
.cshuttag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0;
  vertical-align: middle; color: #fff; background: linear-gradient(#d0503c, #8e2618); }
.cshutbar { flex: none; display: flex; align-items: baseline; gap: 10px; padding: 6px 12px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(120, 30, 20, .92), rgba(60, 14, 10, .85)); border: 1.5px solid #c0503f; }
.cshutbar b { flex: none; color: #ffd9cf; font-size: 15px; letter-spacing: 2px; }
.cshutbar span { min-width: 0; color: #f3d6cc; font-size: 12px; }

/* 只在某几种玩法被禁玩（2026-10-26）：那几种玩法的桌上挂一条红牌子，别的玩法照常坐 */
.cbanmark { position: absolute; z-index: 2; left: 50%; top: 2px; transform: translateX(-50%); padding: 0 6px; border-radius: 6px; white-space: nowrap;
  font-style: normal; font-size: clamp(8px, 5cqw, 11px); font-weight: 800; color: #fff; background: linear-gradient(#d0503c, #8e2618); pointer-events: none; }
.banchip { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.banchip small { font-size: 11px; font-weight: 400; opacity: .75; }