/*
 * C「夜景会所」（2026-10-22 用户在 public/design/floor.html 三套方案里选的）：
 *   游戏大厅、俱乐部大厅：落地窗外城市夜景 + 往远处收的深灰大理石地面，按钮深蓝金边、主按钮金色。
 *   等人页、游戏页（房间里）的大理石地面、聚光灯、黑色圆地毯在 skin-q.css / skin-gold-games.css 末尾。
 * 全部 CSS 画，没有图片；以后有美术图可以直接换 .nscene 的背景。最后加载，盖过霓虹皮肤的大厅颜色。
 */

/* ---------- 远景（登录、大厅、俱乐部、房间里共用，垫在所有内容下面） ---------- */
.nscene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(50% 30% at 30% 40%, rgba(110, 140, 255, .22), transparent 70%),
    linear-gradient(#070d22 0%, #13204a 30%, #26386e 44%, #3a4c86 47%, #0d1222 48%, #05070e 100%); }
/* 整个游戏只有一份，在 #stage 最底下（app.js applySkin 放进去），各页面的 .screen（z-index 1）都盖在它上面 */
#stage > .nscene { z-index: 0; }
/* 房间里（等人页、十三水牌桌）：远景压暗一点，正中桌子那块打一束光，视线落在桌上 */
html.q #stage > .nscene::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(45% 55% at 50% 55%, rgba(255, 240, 210, .14), transparent 70%), radial-gradient(120% 95% at 50% 50%, rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .6) 100%); }
/* 远处的楼：剪影，零星几个亮窗 */
.ncity { position: absolute; left: 0; right: 0; bottom: 52%; }
.ncity.far { height: 24%; opacity: .9;
  background: radial-gradient(circle, rgba(170, 200, 255, .55) 1px, transparent 1.6px) 3px 5px / 23px 17px, #18234a;
  clip-path: polygon(0 100%, 0 40%, 6% 40%, 6% 20%, 11% 20%, 11% 50%, 18% 50%, 18% 10%, 22% 10%, 22% 45%, 30% 45%, 30% 25%, 36% 25%, 36% 55%, 44% 55%, 44% 0, 48% 0, 48% 40%, 56% 40%, 56% 30%, 63% 30%, 63% 55%, 70% 55%, 70% 15%, 75% 15%, 75% 45%, 83% 45%, 83% 25%, 90% 25%, 90% 50%, 100% 50%, 100% 100%); }
/* 近处的楼：密一点的暖色灯光 */
.ncity.near { height: 16%;
  background: radial-gradient(circle, rgba(255, 214, 130, .9) 1px, transparent 1.6px) 0 0 / 11px 9px, #0d1430;
  clip-path: polygon(0 100%, 0 30%, 8% 30%, 8% 60%, 15% 60%, 15% 20%, 24% 20%, 24% 55%, 33% 55%, 33% 35%, 41% 35%, 41% 70%, 52% 70%, 52% 15%, 60% 15%, 60% 50%, 69% 50%, 69% 30%, 78% 30%, 78% 65%, 88% 65%, 88% 25%, 100% 25%, 100% 100%); }
/* 落地窗：竖的窗框 + 一道斜的玻璃反光 */
.nwin { position: absolute; left: 0; right: 0; top: 0; bottom: 52%;
  background:
    linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .06) 36%, transparent 44%),
    repeating-linear-gradient(90deg, rgba(8, 12, 26, .95) 0 4px, transparent 4px 25%);
  box-shadow: inset 0 -3px 0 rgba(215, 162, 78, .55); }
/* 大理石地面：往远处收，近处有城市灯光的倒影 */
.nfloor { position: absolute; left: -40%; right: -40%; bottom: -12%; height: 120%; transform-origin: 50% 100%; transform: perspective(700px) rotateX(52deg);
  background:
    linear-gradient(rgba(0, 0, 0, .55), transparent 35%),
    linear-gradient(rgba(120, 150, 230, .18), transparent 25%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 120px),
    linear-gradient(135deg, #262c3a, #171b25 50%, #222837); }

/* ---------- 游戏大厅 ---------- */
.lobby2 { --ngold: #e8c070; --ncream: #f4ead2; }
.lobby2 .lme, .lobby2 .lhead .lcards, .lobby2 .lnotice { background: rgba(6, 10, 24, .6); border: 1px solid rgba(232, 192, 112, .55); box-shadow: none; }
.lobby2 .lme span { color: #b8c0d8; }
/* 四张游戏海报：深蓝玻璃 + 金边，选过的那张金光 */
.lobby2 .lgame, .lobby2 .lgame.pink, .lobby2 .lgame.cyan, .lobby2 .lgame.gold, .lobby2 .lgame.violet { --n: var(--ngold); --n2: rgba(60, 90, 170, .5);
  border: 1.5px solid var(--ngold); background: linear-gradient(160deg, rgba(70, 100, 190, .28), rgba(10, 16, 36, .55) 55%, rgba(6, 10, 24, .88)); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 0 24px rgba(0, 0, 0, .35); }
.lobby2 .lgame.on { box-shadow: 0 0 16px rgba(232, 192, 112, .65), 0 8px 16px rgba(0, 0, 0, .6), inset 0 0 24px rgba(0, 0, 0, .35); }
.lobby2 .lgame b { color: #fff6dc; text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 10px rgba(232, 192, 112, .55); }
.lobby2 .lgtag { color: #2a1a00; background: var(--ngold); }
.lobby2 .lgart .hook { stroke: #e8c070; filter: drop-shadow(0 0 4px rgba(232, 192, 112, .7)); }
/* 右边一列：创建房间是唯一的金色实心主按钮，其余深蓝金边 */
.lobby2 .lact, .lobby2 .lact.join, .lobby2 .lact.club, .lobby2 .lact.records { --n: var(--ngold);
  border: 1.5px solid var(--ngold); background: linear-gradient(#26325c, #121a36); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 3px 0 rgba(0, 0, 0, .5), 0 6px 12px rgba(0, 0, 0, .45); }
.lobby2 .lact .ico { filter: none; }
.lobby2 .lact.create { border: 0; color: #4a2600; background: linear-gradient(#fff0a8, #f2c14e 50%, #d8961e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 4px 0 #8a5a0a, 0 0 16px rgba(242, 193, 78, .55); }
.lobby2 .lact.create i { color: #6a3a00; }
.lobby2 .lbar { margin: 0 auto; padding: 2px 10px 4px; border-radius: 14px 14px 0 0; background: rgba(6, 10, 24, .55); border-top: 1px solid rgba(232, 192, 112, .4); }
.lobby2 .lnav { color: var(--ncream); }
.lobby2 .lnav i { color: var(--ngold); }
.lobby2 .lnav .ico { filter: none; }
.lobby2 .lnav:active i { color: #fff3c4; }

/* ---------- 登录 / 注册（2026-10-22 用户要求跟大厅统一）：左边金色灯牌，右边深蓝玻璃登录框 ---------- */
.loginscreen { --ngold: #e8c070; --ncream: #f4ead2; }
/* 灯牌：黑底金框，字是暖白色、金色光晕，偶尔闪一下（沿用 nFlick） */
.loginscreen .nsign { border: 2px solid var(--ngold); border-radius: 16px; background: rgba(6, 10, 24, .7);
  box-shadow: 0 0 0 4px rgba(6, 10, 24, .7), 0 0 0 5px rgba(232, 192, 112, .5), 0 0 22px rgba(232, 192, 112, .35), inset 0 0 18px rgba(232, 192, 112, .2); }
.loginscreen .nsign span { color: #fff8e4; text-shadow: 0 0 4px #fff3c4, 0 0 12px #f2c14e, 0 0 26px #d8961e, 0 2px 0 #5a3a00; }
.loginscreen .tagline { color: #c8d0e8; }
.loginscreen .loginform { background: linear-gradient(rgba(26, 36, 70, .9), rgba(8, 12, 28, .92)); border: 1.5px solid var(--ngold);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.loginscreen .loginform .ltitle { color: #ffe7a0; text-shadow: 0 2px 0 #000, 0 0 10px rgba(232, 192, 112, .45); }
.loginscreen .lfield span, .loginscreen .lswitch, .loginscreen .hint { color: #b8c0d8; }
.loginscreen input { background: rgba(4, 6, 16, .75); border: 1px solid rgba(232, 192, 112, .45); color: var(--ncream); box-shadow: none; }
.loginscreen input:focus { border-color: var(--ngold); box-shadow: 0 0 0 2px rgba(232, 192, 112, .25); outline: none; }
.loginscreen input::placeholder { color: #6e7894; }
.loginscreen .btn.primary { border: 0; color: #4a2600; text-shadow: none; background: linear-gradient(#fff0a8, #f2c14e 50%, #d8961e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 4px 0 #8a5a0a, 0 0 14px rgba(242, 193, 78, .45); }
.loginscreen .btn.ghost { color: var(--ncream); border-color: rgba(232, 192, 112, .6); background: rgba(6, 10, 24, .5); }
.loginscreen .linkbtn { color: #ffd56a; }
/* 微信登录 / 绑定微信：微信绿 */
.btn.wxbtn, :root:not(.q) .btn.wxbtn { border: 0; color: #fff; text-shadow: none; background: linear-gradient(#3ee07f, #07c160 55%, #06a050);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 #04773b; }
.loginform .lwx { letter-spacing: 2px; }
/* 账号登录和微信登录之间的一道细线（2026-10-30 用户：不写「新玩家」之类的提示） */
.loginform .lor { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 12px; color: #b8c0d8; }
.loginform .lor::before, .loginform .lor::after { content: ''; flex: 1; height: 1px; background: rgba(232, 192, 112, .3); }
.loginform .lor:empty::after { display: none; } /* 不写字就是一整条线 */

/* ---------- 房间外（登录、大厅、俱乐部）的通用控件：弹出面板、按钮、选项、输入框、提示 ----------
 * 原来用霓虹皮肤（skin-neon.css）的紫粉色，2026-10-22 跟夜景会所统一成深蓝金边。房间里有 html.q（Q 版金绿），不受影响。 */
:root:not(.q) {
  --surface: rgba(16, 22, 44, .82); --surface-2: rgba(255, 255, 255, .06); --surface-3: rgba(255, 255, 255, .12);
  --line: rgba(232, 192, 112, .22); --line-strong: rgba(232, 192, 112, .45);
  --text: #f4ead2; --muted: #b8c0d8; --faint: #6e7894;
  --pink: #f2c14e; --pink-glow: rgba(242, 193, 78, .45); --cyan: #e8c070; --cyan-glow: rgba(232, 192, 112, .4);
  --primary: #f2c14e; --primary-press: #d8961e; --primary-soft: rgba(242, 193, 78, .16);
}
:root:not(.q) .overlay { background: rgba(2, 4, 10, .72); }
:root:not(.q) .sheet { background: linear-gradient(rgba(28, 38, 74, .96), rgba(10, 14, 30, .97)); border: 1.5px solid #e8c070; box-shadow: 0 20px 50px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .1); }
:root:not(.q) .panel { background: rgba(255, 255, 255, .05); border: 1px solid rgba(232, 192, 112, .3); box-shadow: none; }
:root:not(.q) .btn { background: linear-gradient(#26325c, #121a36); border: 1px solid rgba(232, 192, 112, .55); color: #f4ead2; box-shadow: 0 3px 0 rgba(0, 0, 0, .5); text-shadow: none; }
:root:not(.q) .btn:active { background: linear-gradient(#1e284c, #0e142c); box-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
:root:not(.q) .btn.primary, :root:not(.q) .btn.gold { border: 0; color: #4a2600; text-shadow: none; background: linear-gradient(#fff0a8, #f2c14e 50%, #d8961e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 4px 0 #8a5a0a, 0 0 14px rgba(242, 193, 78, .4); }
:root:not(.q) .btn.primary:active { background: linear-gradient(#f6e090, #e2ac38 50%, #c4841a); box-shadow: 0 1px 0 #8a5a0a; }
:root:not(.q) .btn.blue { background: linear-gradient(#26325c, #121a36); border: 1.5px solid #e8c070; color: #ffe7a0; text-shadow: none; box-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
:root:not(.q) .btn.ghost { background: rgba(6, 10, 24, .5); border-color: rgba(232, 192, 112, .45); color: #f4ead2; }
:root:not(.q) .btn.danger { color: #ff9a8b; border-color: rgba(255, 122, 107, .5); }
:root:not(.q) .chip { background: rgba(255, 255, 255, .05); border: 1px solid rgba(232, 192, 112, .3); color: #f4ead2; }
:root:not(.q) .chip.on { background: linear-gradient(rgba(242, 193, 78, .28), rgba(216, 150, 30, .12)); color: #ffe7a0; border-color: #e8c070; box-shadow: inset 0 0 8px rgba(242, 193, 78, .2); text-shadow: none; }
:root:not(.q) .gtab { background: linear-gradient(#26325c, #121a36); border-color: rgba(232, 192, 112, .45); color: #f4ead2; }
:root:not(.q) .gtab.on { background: linear-gradient(#fff0a8, #f2c14e 50%, #d8961e); color: #4a2600; border-color: transparent; box-shadow: 0 0 10px rgba(242, 193, 78, .45); }
:root:not(.q) input { background: rgba(4, 6, 16, .7); border: 1px solid rgba(232, 192, 112, .4); color: #f4ead2; }
:root:not(.q) input:focus { border-color: #e8c070; box-shadow: 0 0 0 2px rgba(232, 192, 112, .25); }
:root:not(.q) .toast { background: rgba(14, 20, 40, .96); border: 1px solid #e8c070; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); }
:root:not(.q) .switch.on { background: linear-gradient(90deg, #f2c14e, #d8961e); box-shadow: 0 0 8px rgba(242, 193, 78, .45); }
:root:not(.q) .dotbadge { background: linear-gradient(#ff8a6c, #e0452a); box-shadow: none; }
:root:not(.q) .history th { background: #121a36; color: #ffe7a0; }
:root:not(.q) .clubrow { background: linear-gradient(90deg, rgba(60, 80, 150, .35), rgba(255, 255, 255, .03)); border: 1px solid rgba(232, 192, 112, .35); }
:root:not(.q) .tag { background: rgba(255, 255, 255, .1); }
:root:not(.q) .tag.club, :root:not(.q) .tag.watch { background: rgba(232, 192, 112, .16); color: #ffe7a0; }
:root:not(.q) .avatar.empty { border-color: rgba(232, 192, 112, .55); color: #e8c070; background: rgba(232, 192, 112, .06); }

/* ---------- 标题字体：马善政楷书（毛笔字，2026-10-22 用户在 design/fonts.html 里选的 C） ----------
 * 免费可商用（SIL OFL，许可见 fonts/OFL-MaShanZheng.txt）。只截了标题用到的字（scripts/make-title-font.js 生成），
 * 只用在固定的大标题上；俱乐部名、玩家名、按钮这些字随便变的地方还是手机自带字体（截过的字体里没有那些字）。
 * 毛笔字本身就有粗细变化，不再加粗、不再倾斜（font-synthesis: none 防止浏览器硬造粗体斜体）。 */
@font-face { font-family: 'TitleBrush'; src: url(fonts/title-brush.woff2) format('woff2'); font-display: swap; }
.loginscreen .nsign span, .logo, .lgame b, .wmark b, .fx-start b, .fx-title, .hr-title b, .revealstage, .wstamp {
  font-family: 'TitleBrush', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  font-weight: normal !important; font-style: normal !important; font-synthesis: none; }
/* 毛笔字笔画比黑体细，字号略放大、字距收一点 */
.loginscreen .nsign span { letter-spacing: .06em; margin-right: -.06em; }
.lgame b { font-size: clamp(19px, calc(var(--gh) * .068), 28px); letter-spacing: 2px; }
.fx-start b { letter-spacing: 4px; margin-right: -4px; font-size: clamp(34px, calc(var(--gh) * .145), 58px); }
.hr-title b { letter-spacing: 4px; }
.revealstage { font-size: 1.15em; letter-spacing: 2px; }

/* 房间外的确认框（退出登录、解散俱乐部这些，app.js gameConfirm）：原来是 style.css 里写死的紫色，改成深蓝金边（2026-10-22 用户指出） */
:root:not(.q) .gpanel { background: linear-gradient(rgba(28, 38, 74, .97), rgba(10, 14, 30, .98)); border: 1.5px solid #e8c070;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .7), 0 0 24px rgba(232, 192, 112, .25), inset 0 1px 0 rgba(255, 255, 255, .1); }
:root:not(.q) .gtitle { background: linear-gradient(#fffbe8, #ffe39a 55%, #d8a040); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 #000); }
:root:not(.q) .gtext { color: #f4ead2; }
:root:not(.q) .ginput { border-color: rgba(232, 192, 112, .5); }
:root:not(.q) .gdialog { background: rgba(2, 4, 10, .66); }

/* 掉线的「离线」小牌子：红底白字，一眼看出来（原来灰底灰字看不清）；房间里外都用 */
.badge.off, html.q .badge.off { background: linear-gradient(#ff6b5c, #d0242a) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .6) !important; font-weight: 800; }

/* 大厅「福州钓鱼（A嗦9）」海报：A、9 两张牌往两边歪（原来下面的「A吃9」金牌子用户说不要） */
.lgame b small { display: block; margin-top: -2px; font: 900 .56em/1.1 system-ui, "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 1px; color: #f2c14e; }
.lgame:has(b small) b { bottom: 4%; }
.lgart.g-diaoyu { flex-direction: column; align-items: center; }
.lgart.g-diaoyu .dypair { display: flex; transform: none; }
.lgart.g-diaoyu .dypair .card:first-child { transform: rotate(-12deg) translate(6%, 6%); }
.lgart.g-diaoyu .dypair .card:last-child { transform: rotate(12deg) translate(-6%, 6%); }

/* 大厅十三水海报：A 到 K 一条龙摆成头道 3 张、中道 5 张、尾道 5 张三排，用游戏里的牌面（.card，颜色跟房间里一样），
 * 每张的歪斜写在 app.js SSS_MESS；牌的大小跟海报宽度走，窄手机也放得下 */
.lobby2 .lgame { container-type: inline-size; }
.lgart.g-sss { top: 14%; --cw: min(calc(var(--gh) * .1), 25cqw); }
.lgart .sss3 { display: flex; flex-direction: column; align-items: center; transform: none; }
.lgart .sss3 > span { display: flex; transform: none; }
.lgart .sss3 > span:nth-child(2) { margin: calc(var(--cw) * -.74) 0 0 calc(var(--cw) * -.1); }
.lgart .sss3 > span:nth-child(3) { margin: calc(var(--cw) * -.74) 0 0 calc(var(--cw) * .14); }

/* 大厅四张海报上的扑克都用游戏里的牌面（.card），颜色、白底、细边跟房间里一样 */
.lgart { --cw: var(--pk); --card-bg: #fff; --card-red: #d0121e; --card-black: #121418; }
.lgart > .card, .lgart .dypair .card { margin: 0 calc(var(--cw) * -.06); }
.lgart .sss3 .card { margin: 0 calc(var(--cw) * -.25); }
.lgart .card { background: linear-gradient(160deg, #fff 0%, #fbfbf8 60%, #f0f0ea 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .9), 0 2px 5px rgba(0, 0, 0, .45); }