/* 游戏大厅(hall.php / hall.js) 10-31 第五版: 全屏游戏画面(盖住站点顶栏 / 页脚, 旧版 backup/hall-20261031-v4/)。
   上: 信息条(返回首页 / 标题 / 星币 星钻 / 声音 / 头像, 都不加框) → 左: 一列游戏; 右: 房间(右上档位 / 牌桌两个下拉 + 快速入座, 无边框; 牌桌普通网格上下滚; 选中档 / 高档换墙和地毯颜色)。
   窄屏(≤820px): 整页上下滚, 游戏列表变成顶部横滑 */
html:has(.hl){overflow:hidden}
/* 站点顶栏 / 页脚: 照常在页面里(搜索引擎看得到), 大厅里视觉上收起来; 点左上角的「网站导航」才从上 / 下滑出来(盖在大厅上, 大厅压暗; 点压暗处 / Esc 收回, hall.js) */
html:has(.hl):not(.hl-site-open) body>:is(header,footer){visibility:hidden}
html:has(.hl) body>header :is(dialog,.acct-toast){visibility:visible} /* 登录 / 兑换弹窗和提示条是顶栏里的, 要照常能弹 */
html.hl-site-open body>header{position:fixed;left:0;right:0;top:0;z-index:45;animation:hl-site-down .3s ease-out}
html.hl-site-open body>footer{position:fixed;left:0;right:0;bottom:0;z-index:45;max-height:50vh;overflow:auto;animation:hl-site-up .3s ease-out}
html.hl-site-open .hl::after{content:"";position:absolute;inset:0;z-index:30;background:#000b;animation:hl-fade .3s both}
@keyframes hl-site-down{from{transform:translateY(-100%)}}
@keyframes hl-site-up{from{transform:translateY(100%)}}
.hl{--hl-gold:#e2b55a;--hl-ink:#f4ead2;--hl-dim:#b9a785;--z-acc:#e2b55a;--z-wall:#2b1a10;--z-wall2:#24150c;--z-c1:#6c1616;--z-c2:#561010;--z-dot:#e2b55a;
  position:fixed;inset:0;z-index:40;isolation:isolate;display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);overflow:hidden;background:#0d0806;color:var(--hl-ink);font-family:system-ui,"Noto Sans SC",sans-serif}
.hl[data-zone="1"]{--z-acc:#f7c948;--z-wall:#2a1d08;--z-wall2:#221706;--z-c1:#4a3208;--z-c2:#3a2706;--z-dot:#f7c948}
.hl[data-zone="2"]{--z-acc:#b48cff;--z-wall:#0e0820;--z-wall2:#090514;--z-c1:#24104a;--z-c2:#1a0b38;--z-dot:#ffe39a}
.hl button{font:inherit;color:inherit;cursor:pointer}
.hl a{color:inherit;text-decoration:none}
:is(.hl-back,.hl-site,.hl-me,.hl-plus,.hl-ibtn,.hl-dd-btn,.hl-quick,.hl-game):focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- 顶部信息条: 不加框, 字 / 图标直接落在暗色渐隐上 ---------- */
/* 11-01 用户: 顶栏做成半透明的丝绒帷幔(参考 temp/1a.png 顶栏), 从上面垂下来盖在落地窗上 —— 竖褶 + 金线 + 下沿波浪 + 小流苏, 透出后面的夜景 */
.hl{--hl-top-h:80px} /* 11-01 用户: 控件离屏幕顶约 20px, 不贴边 */
.hl-top{grid-column:1/-1;grid-row:1;position:relative;z-index:6;display:flex;align-items:center;gap:14px;height:var(--hl-top-h);box-sizing:border-box;padding:18px 24px 18px}
/* 11-01 用户定方案 A: 顶栏不要窗帘 / 框 / 边线 —— 只从屏幕顶往下渐暗, 按钮和标题直接浮在窗外夜景上。
   旧版: 窗帘 backup/hall-20261101-topbar/hall.v3.css, 重做的帷幔 hall.v4-valance.css */
.hl-top::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 40px);pointer-events:none;z-index:-1;background:linear-gradient(#000b,#0007 40%,#0000)} /* 11-01 用户: 再透明一点点(顶 87%→73%, 中段 67%→44%) */
/* 场景(墙 + 窗 + 地毯)从最上面铺起, 帷幔和左边的游戏列都盖在场景上面 */
.hl-room{grid-column:1/-1;grid-row:1/3;padding:calc(var(--hl-top-h) + 8px) 0 0 230px}
.hl-room{--wall:clamp(170px,27%,250px)}
.hl-back{display:inline-flex;align-items:center;gap:9px;flex:none;padding:4px 10px 4px 4px;border-radius:999px;font:700 15px/1 "Noto Serif",Cambria,"Noto Serif SC",serif;letter-spacing:.04em;color:var(--hl-gold)!important;transition:background .2s,color .2s}
.hl-back i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,#c8922f);box-shadow:0 0 0 3px #e2b55a22,0 0 16px #e2b55a66;transition:transform .2s,box-shadow .2s}
.hl-back svg{width:19px;height:19px;fill:none;stroke:#3b210e;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.hl-back:hover{background:#e2b55a1a;color:#fff3c4!important}
.hl-back:hover i{transform:translateX(-2px) scale(1.06);box-shadow:0 0 0 4px #e2b55a33,0 0 22px #e2b55a99}
.hl-site{display:grid;place-items:center;flex:none;width:34px;height:34px;margin-left:-14px;padding:0;border:0;border-radius:50%;background:none;color:var(--hl-dim);transition:color .2s,background .2s}
.hl-site svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hl-site:hover,.hl-site[aria-pressed=true]{color:var(--hl-gold);background:#e2b55a1a}
.hl-brand{flex:1;min-width:0;text-align:center;line-height:1.1}
.hl-brand small{font-size:10px;letter-spacing:.4em;color:var(--hl-dim)}
.hl-brand h1{margin:0;font:900 24px/1.15 "Noto Serif",Cambria,"Noto Serif SC",serif;color:var(--hl-gold);text-shadow:0 0 18px #e2b55a66,0 2px 0 #000}
/* 11-01 用户(照 temp/16.png): 星币 / 星钻 = 深色胶囊 + 金边, 左边立体金币 / 切面宝石稍探出, 右边金色圆钮「+」(取代之前的无外圈 +) */
.hl-wallet{display:flex;align-items:center;gap:14px}
.hl-coin{position:relative;display:inline-flex;align-items:center;gap:8px;height:34px;box-sizing:border-box;padding:0 4px 0 2px;border-radius:999px;
  background:linear-gradient(#2a1c12,#0d0805);border:1px solid #d9a44e99;box-shadow:inset 0 1px 0 #ffe7a933,inset 0 -6px 10px #0008,0 3px 10px #0009}
.hl-coin i{display:block;flex:none;width:34px;height:34px;margin:-4px 0 -4px -6px;filter:drop-shadow(0 2px 3px #000b) drop-shadow(0 0 6px #f5c55a66)}
.hl-coin.is-gem i{filter:drop-shadow(0 2px 3px #000b) drop-shadow(0 0 7px #6cc4ffaa)}
.hl-coin i svg{display:block;width:100%;height:100%}
.hl-coin b{min-width:56px;font:800 16px/1 system-ui,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 1px 3px #000}
.hl-coin small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* 字只留给读屏 */
.hl .hl-plus{display:grid;place-items:center;flex:none;width:26px;height:26px;padding:0;border:1px solid #fff0b8aa;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 38% 30%,#fff3bf,#f2c24c 45%,#b97818);box-shadow:inset 0 -2px 3px #7a4a12aa,0 0 8px #f5c55a66,0 2px 4px #000a;transition:transform .2s,box-shadow .2s}
.hl-plus svg{width:15px;height:15px;fill:none;stroke:#4a2a08;stroke-width:2.6;stroke-linecap:round}
.hl-plus:hover{transform:scale(1.12);box-shadow:inset 0 -2px 3px #7a4a12aa,0 0 14px #ffd76acc,0 2px 4px #000a}
.hl-ibtn{display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:0;background:none;color:var(--hl-dim)}
.hl-ibtn:hover{color:var(--hl-gold)}
/* 11-01 用户: 顶栏所有控件统一 —— 和星币 / 星钻同一种 38px 深色金边胶囊, 圆形图标(返回 / 头像)稍微探出 */
.hl :is(.hl-back,.hl-site,.hl-ibtn,.hl-me-btn){height:38px;box-sizing:border-box;border:1px solid #d9a44e99;border-radius:999px;
  background:linear-gradient(#2a1c12,#0d0805);box-shadow:inset 0 1px 0 #ffe7a933,inset 0 -6px 10px #0008,0 3px 10px #0009;transition:border-color .2s,box-shadow .2s,color .2s}
.hl :is(.hl-back,.hl-site,.hl-ibtn,.hl-me-btn):hover,.hl .hl-site[aria-pressed=true]{border-color:#f3d27f;background:linear-gradient(#3a2616,#120a06);box-shadow:inset 0 1px 0 #ffe7a944,inset 0 -6px 10px #0008,0 0 12px #e2b55a55,0 3px 10px #0009}
.hl .hl-back{gap:9px;padding:0 16px 0 2px;font-size:14px}
.hl .hl-back i{width:32px;height:32px;box-shadow:0 0 10px #e2b55a66}
.hl .hl-back svg{width:17px;height:17px}
.hl :is(.hl-site,.hl-ibtn){width:38px;margin:0;color:#e9d3a4}
.hl :is(.hl-site,.hl-ibtn):hover,.hl .hl-site[aria-pressed=true]{color:#fff3c4}
.hl .hl-site svg{width:18px;height:18px}
.hl .hl-me-btn{gap:10px;padding:0 0 0 16px}
.hl .hl-me-btn .hl-ava{width:42px;height:42px;margin:-3px -3px -3px 0}
.hl .hl-me-text b{font-size:13.5px}
.hl .hl-me-text small{font-size:10px}
/* 11-01 用户: 边框线改成渐隐 —— 底色照旧(深色胶囊), 金边线中间亮、往左右两端淡到透明(border-box 渐变), 去掉外框阴影; 金色圆图标 / 头像金环 / 「+」照旧 */
.hl :is(.hl-back,.hl-site,.hl-ibtn,.hl-me-btn),.hl .hl-coin{border:.5px solid transparent; /* 11-01 用户: 线再细一点(高清屏是半像素细线, 普通屏 1px 但颜色更淡) */
  background:linear-gradient(#2a1c12,#0d0805) padding-box,linear-gradient(90deg,#d9a44e00,#d9a44e8c 30%,#d9a44e8c 70%,#d9a44e00) border-box;
  box-shadow:inset 0 1px 0 #ffe7a922,inset 0 -6px 10px #0008}
.hl :is(.hl-back,.hl-site,.hl-ibtn,.hl-me-btn):hover,.hl .hl-site[aria-pressed=true]{
  background:linear-gradient(#3a2616,#120a06) padding-box,linear-gradient(90deg,#f3d27f00,#f3d27fd9 30%,#f3d27fd9 70%,#f3d27f00) border-box;
  box-shadow:inset 0 1px 0 #ffe7a933,inset 0 -6px 10px #0008,0 0 12px #e2b55a40}
/* 11-01 用户: 声音 / 菜单这两个圆按钮不要边框线, 只留深色圆底 */
.hl :is(.hl-site,.hl-ibtn),.hl :is(.hl-site,.hl-ibtn):hover,.hl .hl-site[aria-pressed=true]{background:linear-gradient(#2a1c12,#0d0805) padding-box}
.hl :is(.hl-site,.hl-ibtn):hover,.hl .hl-site[aria-pressed=true]{background:linear-gradient(#3a2616,#120a06) padding-box}
.hl .hl-ibtn [data-gs-icon]{display:grid;place-items:center}.hl .hl-ibtn svg{display:block} /* 11-01 用户: 声音图标原来是行内元素, 按文字基线排, 偏上; 改成居中 */
/* 11-01 用户: 按钮更融入 —— 暗烟灰色半透明玻璃(琥珀色版 hall.v11-amber-glass.css) + 毛玻璃, 透出后面的夜景(像玻璃片浮在窗前), 去掉底部压暗, 只留顶上一丝高光 */
.hl :is(.hl-back,.hl-site,.hl-ibtn,.hl-me-btn),.hl .hl-coin{-webkit-backdrop-filter:blur(8px) saturate(.9) brightness(.8);backdrop-filter:blur(8px) saturate(.9) brightness(.8);box-shadow:inset 0 1px 0 #ffffff14}
.hl :is(.hl-back,.hl-me-btn),.hl .hl-coin{position:relative;border-color:transparent;background:linear-gradient(#1b1d24a6,#0a0b0f8c) border-box}
/* 渐隐金边线单独画在 ::after(只留 1px 边缘, 中间挖空), 半透明玻璃底下不会再透出金色 */
.hl :is(.hl-back,.hl-me-btn)::after,.hl .hl-coin::after{content:"";position:absolute;inset:-.5px;border-radius:inherit;padding:.5px;pointer-events:none;
  background:linear-gradient(90deg,#d9a44e00,#d9a44e4d 30%,#d9a44e4d 70%,#d9a44e00); /* 11-01 用户: 再淡一点(55% → 30%) */
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hl :is(.hl-back,.hl-me-btn):hover::after{background:linear-gradient(90deg,#f3d27f00,#f3d27f99 30%,#f3d27f99 70%,#f3d27f00)}
.hl :is(.hl-back,.hl-me-btn){position:relative}
.hl :is(.hl-back,.hl-me-btn):hover{background:linear-gradient(#2a2d36b3,#111319a0) border-box;box-shadow:inset 0 1px 0 #ffe7a92a,0 0 14px #e2b55a33}
.hl :is(.hl-site,.hl-ibtn){background:#14161c8c padding-box}
.hl :is(.hl-site,.hl-ibtn):hover,.hl .hl-site[aria-pressed=true]{background:#2a2d36b3 padding-box;box-shadow:inset 0 1px 0 #ffe7a92a,0 0 14px #e2b55a33}
/* 标题: 中文大字和左右控件同一条中线, 上面的小字 GAME HALL 挂在大字上方, 不占高度 */
.hl .hl-brand{position:relative}
.hl .hl-brand small{position:absolute;left:0;right:0;bottom:100%;margin-bottom:1px;line-height:1}
.hl .hl-brand h1{line-height:38px}
.hl-me{position:relative;min-width:0}
.hl-me-btn{display:flex;align-items:center;gap:10px;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
/* 头像菜单: 移上去弹出(同站点顶栏), 触屏点一下 .is-open(account.js) */
.hl-pop{display:none;position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:200px;padding:8px;border-radius:12px;background:linear-gradient(#2a1a10,#160d07);border:1px solid #e2b55a55;box-shadow:0 18px 40px #000c,inset 0 1px 0 #ffe7a922}
.hl-pop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.hl-me:hover .hl-pop,.hl-me:focus-within .hl-pop,.hl-me.is-open .hl-pop{display:grid;gap:2px}
.hl-pop button{padding:9px 12px;border:0;border-radius:8px;background:none;color:var(--hl-ink);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;white-space:nowrap}
.hl-pop button:hover,.hl-pop button:focus-visible{background:#e2b55a1f;color:#ffe7a9;outline:none}
.hl-pop [hidden]{display:none}
/* 钱包 / 每日签到窗口(11-01): 大厅同款 —— 深木色框 + 金线 + 衬线标题, 两个标签 */
.hl-wd{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:0;background:none;color:var(--hl-ink);overflow:visible}
.hl-wd::backdrop{background:radial-gradient(ellipse at 50% 40%,#0006,#000c);backdrop-filter:blur(4px)}
.hl-wd[open]{animation:hl-wd-in .28s cubic-bezier(.2,1.2,.4,1) both}
@keyframes hl-wd-in{from{opacity:0;transform:translateY(14px) scale(.97)}}
.hl-wd-frame{position:relative;max-height:calc(100dvh - 32px);overflow:auto;padding:0 26px 26px;border-radius:6px;
  background:radial-gradient(ellipse 90% 50% at 50% 0,#e2b55a1c,transparent 60%),linear-gradient(#2a1a10,#160d07 60%,#100804);
  box-shadow:0 0 0 1px #e2b55a66,0 0 0 6px #1a0f08,0 0 0 7px #e2b55a33,0 30px 80px #000e,inset 0 1px 0 #ffe7a933;scrollbar-width:thin;scrollbar-color:#e2b55a44 transparent}
html:has(.hl) .acct-dlg{border-radius:6px} /* 11-01 用户: 大厅里弹的窗口(钱包 / 签到 / 兑换 / 登录)四角只要一点点圆 */
.hl-wd-head{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:1fr auto;gap:12px 10px;align-items:center;margin:0 -26px 18px;padding:20px 26px 0;background:linear-gradient(#2a1a10 70%,#2a1a1000)}
.hl-wd-title{margin:0;font:800 22px/1.15 "Noto Serif",Cambria,serif;color:#ffe7a9;text-shadow:0 2px 8px #000}
.hl-wd-title small{display:block;font:700 10px/1 system-ui,sans-serif;letter-spacing:.32em;color:var(--hl-gold);margin-bottom:6px}
.hl-wd-x{grid-row:1;grid-column:2;width:36px;height:36px;border:1px solid #e2b55a55;border-radius:50%;background:#0006;color:var(--hl-ink);font-size:22px;line-height:1;cursor:pointer;transition:background .2s,transform .2s}
.hl-wd-x:hover{background:#e2b55a33;transform:rotate(90deg)}
.hl-wd-tabs{grid-column:1/-1;display:flex;gap:4px;padding:4px;border-radius:12px;background:#0008;box-shadow:inset 0 0 0 1px #e2b55a33}
.hl-wd-tabs button{flex:1;padding:9px 10px;border:0;border-radius:9px;background:none;color:var(--hl-dim);font:700 14px/1 system-ui,sans-serif;cursor:pointer;transition:color .2s,background .2s}
.hl-wd-tabs button[aria-selected=true]{background:linear-gradient(#f3d27f,#c8922f);color:#2b1a10;box-shadow:0 2px 10px #e2b55a55}
.hl-wd-pane{display:none}.hl-wd-pane.is-on:not([hidden]){display:block}
.hl-wd-guest{padding:30px 10px 10px;text-align:center;color:var(--hl-dim)}
.hl-wd-guest[hidden]{display:none}
.hl-wd-bal{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hl-wd-card{position:relative;display:grid;justify-items:start;gap:4px;padding:16px 16px 14px;border-radius:14px;overflow:hidden;
  background:radial-gradient(circle at 100% 0,#e2b55a2e,transparent 60%),linear-gradient(160deg,#3a2414,#1d120a);box-shadow:inset 0 0 0 1px #e2b55a44,0 8px 20px #0008}
.hl-wd-card.is-gem{background:radial-gradient(circle at 100% 0,#6cc4ff2e,transparent 60%),linear-gradient(160deg,#16283a,#0c1520);box-shadow:inset 0 0 0 1px #6cc4ff44,0 8px 20px #0008}
.hl-wd-card small{font-size:12px;letter-spacing:.06em;color:var(--hl-dim)}
.hl-wd-card b{font:800 28px/1.1 "Noto Serif",Cambria,serif;color:#ffe7a9;font-variant-numeric:tabular-nums;text-shadow:0 2px 8px #000}
.hl-wd-card.is-gem b{color:#d6f4ff}
.hl-wd-coin{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-bottom:4px;font-style:normal;background:radial-gradient(circle at 35% 30%,#ffe9a8,#c8922f);box-shadow:0 0 14px #e2b55a77,inset 0 -2px 3px #7a4a1288}
.hl-wd-coin svg{width:20px;height:20px;fill:#6a3c0c}
.is-gem .hl-wd-coin{background:radial-gradient(circle at 35% 30%,#d6f4ff,#2f7fc0);box-shadow:0 0 14px #6cc4ff77,inset 0 -2px 3px #0c305088;color:#f2fbff;font-size:20px;line-height:1}
.hl-wd-mini{margin-top:6px;padding:6px 14px;border:1px solid currentColor;border-radius:999px;background:#0005;color:var(--hl-gold);font:700 12px/1 system-ui,sans-serif;cursor:pointer;transition:background .2s}
.is-gem .hl-wd-mini{color:#9fdcff}
.hl-wd-mini:hover{background:#ffffff14}
.hl-wd-note{margin:12px 2px 0;font-size:11.5px;line-height:1.55;color:#a8977a}
.hl-wd-h{margin:20px 0 8px;font:700 13px/1 system-ui,sans-serif;letter-spacing:.08em;color:var(--hl-gold)}
.hl-wd-logs{list-style:none;margin:0;padding:0;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px #e2b55a26}
.hl-wd-logs li{display:grid;grid-template-columns:1fr auto 76px;align-items:center;gap:10px;padding:10px 14px;background:#0004}
.hl-wd-logs li:nth-child(even){background:#0002}
.hl-wd-logs li span{display:grid;gap:2px;min-width:0}
.hl-wd-logs li b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-wd-logs li small{font-size:11px;color:#a8977a;text-align:right;font-variant-numeric:tabular-nums}
.hl-wd-logs li span small{text-align:left}
.hl-wd-logs em{font:800 15px/1 system-ui,sans-serif;font-style:normal;font-variant-numeric:tabular-nums}
.hl-wd-logs .is-plus{color:#7be08f}.hl-wd-logs .is-minus{color:#ff8f86}
.hl-wd-logs .hl-wd-empty{display:block;text-align:center;color:var(--hl-dim)}
.hl-wd-streak{margin:0 0 14px;text-align:center;font:700 15px/1.4 "Noto Serif",Cambria,serif;color:#ffe7a9}
.hl-wd-ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:8px}
.hl-wd-ladder li{display:grid;justify-items:center;gap:4px;padding:10px 4px;border-radius:12px;background:#0005;box-shadow:inset 0 0 0 1px #e2b55a26;color:var(--hl-dim)}
.hl-wd-ladder i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-size:15px;background:#ffffff10;color:#a8977a}
.hl-wd-ladder b{font:800 14px/1 system-ui,sans-serif;color:var(--hl-ink)}
.hl-wd-ladder small{font-size:10.5px}
.hl-wd-ladder .is-done{background:#e2b55a14}
.hl-wd-ladder .is-done i{background:radial-gradient(circle at 35% 30%,#ffe9a8,#c8922f);color:#5a3410}
.hl-wd-ladder .is-now{background:linear-gradient(160deg,#4a2e14,#24150a);box-shadow:inset 0 0 0 1.5px var(--hl-gold),0 0 18px #e2b55a55}
.hl-wd-ladder .is-now i{background:radial-gradient(circle at 35% 30%,#fff3c4,#e2b55a);color:#5a3410;animation:hl-pulse 1.8s ease-in-out infinite}
.hl-wd-month{margin-top:16px;padding:14px;border-radius:14px;background:#0004;box-shadow:inset 0 0 0 1px #e2b55a26}
.hl-wd-month>b{display:block;margin-bottom:10px;font-size:12.5px;color:var(--hl-gold);text-align:center}
.hl-wd-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
.hl-wd-cal span{display:grid;place-items:center;aspect-ratio:1;max-height:34px;border-radius:8px;color:#cdbb98}
.hl-wd-cal .is-w{aspect-ratio:auto;font-size:10.5px;color:#a8977a}
.hl-wd-cal .is-got{background:linear-gradient(#f3d27f,#c8922f);color:#2b1a10;font-weight:800}
.hl-wd-cal .is-today{box-shadow:inset 0 0 0 1.5px #fff3c4}
.hl .hl-wd-go{display:block;width:100%;margin-top:16px;padding:13px;border:0;border-radius:12px;background:linear-gradient(#f3d27f,#c8922f);color:#2b1a10;font:800 15px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 18px #e2b55a44,inset 0 1px 0 #fff6;transition:filter .2s,transform .2s}
.hl-wd-go:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.hl-wd-go:disabled{background:#3a2a1a;color:#a8977a;box-shadow:none;cursor:default}
.hl-wd-guest .hl-wd-go{max-width:240px;margin:16px auto 0}
@media (max-width:520px){.hl-wd-frame{padding:0 16px 18px}.hl-wd-head{margin:0 -16px 14px;padding:16px 16px 0}.hl-wd-card b{font-size:22px}}
.hl-ava{display:grid;place-items:end center;flex:none;width:44px;height:44px;box-sizing:border-box;overflow:hidden;border-radius:50%;border:3px solid transparent; /* 11-01 用户(temp/16.png): 金属金环 */
  background:radial-gradient(circle at 50% 30%,#4a3020,#1a0f08) padding-box,conic-gradient(from 200deg,#fff3bf,#c88a26,#f6d27a,#8a5310,#fff3bf) border-box;box-shadow:0 0 0 1px #000a,0 0 14px #e2b55a77;transition:box-shadow .2s}
.hl-ava svg{width:38px;height:44px}
.hl-me-btn:hover .hl-ava{box-shadow:0 0 0 1px #000a,0 0 22px #ffd76acc}
.hl-me-text{display:flex;flex-direction:column;align-items:flex-end;min-width:0;line-height:1.25}
.hl-me-text b{max-width:130px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px}
.hl-me-text small{font-size:10.5px;letter-spacing:.1em;color:var(--hl-dim)}
.hl-me.is-member small{color:var(--hl-gold)}

/* ---------- 左边: 游戏列表(不加框, 选中的左边一道金光) ---------- */
.hl-side{grid-column:1;grid-row:2;position:relative;z-index:4;display:flex;flex-direction:column;gap:2px;min-height:0;overflow-y:auto;padding:22px 10px 12px 14px;background:linear-gradient(90deg,#0b0705f2,#0b0705b3 75%,transparent);scrollbar-width:thin;scrollbar-color:#e2b55a44 transparent}
.hl-game{position:relative;display:flex;align-items:center;flex:none;gap:10px;padding:7px 10px 7px 8px;border-radius:10px;color:#e8dcc0!important;transition:background .2s,color .2s}
.hl-game:hover{background:#ffffff0a}
.hl-game[aria-current]{background:linear-gradient(90deg,#e2b55a26,transparent);color:var(--hl-gold)!important}
.hl-game[aria-current]::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--hl-gold);box-shadow:0 0 12px var(--hl-gold)}
.hl-game-art{flex:none;width:46px;height:42px;border-radius:8px;background:#0e3a2c;box-shadow:inset 0 0 0 1px #e2b55a33}
.hl-game-text{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.hl-game-text b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-game-text small{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--hl-dim)}
.hl-game-text small i{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px #4ade80}

/* ---------- 房间: 墙 + 透视地毯, 颜色跟档位 ---------- */
.hl-room{position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* 11-01 照 temp/1a.png 改: 顶上一窄条落地窗(窗外夜景城市 hall-city.svg), 下面马上接整片地毯, 牌桌都落在地毯上(旧版 backup/hall-20261101/) */

.hl-wall{position:absolute;inset:0 0 auto;height:var(--wall);z-index:-2;
  background:
    linear-gradient(#0000 calc(100% - 14px),#1a0f08 calc(100% - 14px),color-mix(in srgb,var(--z-acc) 70%,#000) calc(100% - 11px) calc(100% - 9px),#120a05 calc(100% - 9px)), /* 窗台: 深木 + 一道金线 */
    radial-gradient(ellipse 90px 70% at 50% 100%,color-mix(in srgb,#ffb35c 30%,transparent),transparent) 0 0/360px 100%, /* 窗下暖光(落地灯) */
    repeating-linear-gradient(90deg,#1b120b 0 7px,color-mix(in srgb,var(--z-acc) 45%,#2a1a0e) 7px 8px,transparent 8px 172px,#1b120b 172px 180px), /* 窗框竖梃 */
    linear-gradient(#0000 26%,#1b120bcc 26% calc(26% + 4px),#0000 calc(26% + 4px)), /* 上方横档 */
    linear-gradient(115deg,#0000 30%,#ffffff0d 42%,#0000 52%,#ffffff08 70%,#0000 78%), /* 玻璃反光 */
    linear-gradient(color-mix(in srgb,var(--z-acc) 10%,transparent),transparent),
    var(--hl-city) center bottom/auto 140% repeat-x #0a0d22 /* 11-01 用户: 放大到 140%, 高楼顶到顶栏窗帘后面透出来; 窗外夜景: 地址由 hall.php 给(资源发布后是哈希文件名, CSS 里不能写相对路径) */}
.hl-room::after{content:"";position:absolute;left:-30%;right:-30%;top:var(--wall);height:140%;z-index:-1;transform:perspective(900px) rotateX(50deg);transform-origin:50% 0;
  background:
    linear-gradient(color-mix(in srgb,var(--z-dot) 55%,transparent) 0 3px,#0000 3px 14px,color-mix(in srgb,var(--z-dot) 30%,transparent) 14px 15px,#0000 15px), /* 地毯边: 金色滚边 */
    radial-gradient(circle,color-mix(in srgb,var(--z-dot) 45%,transparent) 0 3px,#0000 4px) 0 0/120px 120px,
    radial-gradient(circle,#0000 0 19px,color-mix(in srgb,var(--z-dot) 24%,transparent) 20px 22px,#0000 23px 34px,color-mix(in srgb,var(--z-dot) 10%,transparent) 35px 36px,#0000 37px) 0 0/120px 120px,
    linear-gradient(45deg,#0000 calc(50% - 1px),color-mix(in srgb,var(--z-dot) 14%,transparent) calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px)) 60px 60px/120px 120px,
    linear-gradient(-45deg,#0000 calc(50% - 1px),color-mix(in srgb,var(--z-dot) 14%,transparent) calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px)) 60px 60px/120px 120px,
    radial-gradient(ellipse 60% 40% at 50% 10%,color-mix(in srgb,#ffcf8a 16%,transparent),transparent),
    conic-gradient(from 45deg,var(--z-c1) 25%,var(--z-c2) 0 50%,var(--z-c1) 0 75%,var(--z-c2) 0) 0 0/240px 240px;
  box-shadow:inset 0 40px 50px #000a}
.hl-room::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 55%,transparent 40%,#000a)} /* 四周压暗, 视线集中到中间 */

/* 房间顶部: 游戏名 + 在线 + 两个下拉 + 快速入座 —— 都不加框, 字和光直接落在墙上 */
.hl-bar{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 26px 0}
.hl-plaque{line-height:1.1}
.hl-plaque[hidden]{display:none}
.hl-plaque small{font-size:10px;letter-spacing:.3em;color:var(--hl-dim)}
.hl-plaque h2{margin:0;font:900 26px/1.15 "Noto Serif",Cambria,"Noto Serif SC",serif;background:linear-gradient(#fff3c4,var(--z-acc) 55%,#a8742a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px #000)}
.hl-online{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#cfe9d6;text-shadow:0 1px 3px #000}
.hl-online::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:hl-blink 2s ease-in-out infinite}
.hl-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.hl-quick{position:relative;display:inline-flex;align-items:center;gap:7px;margin-left:6px;padding:8px 6px 10px;border:0;background:none;color:var(--z-acc)!important;font:800 15px/1.2 "Noto Serif",Cambria,"Noto Serif SC",serif;letter-spacing:.06em;animation:hl-shine 2.4s ease-in-out infinite}
.hl-quick svg{width:11px;height:11px;fill:currentColor;filter:drop-shadow(0 0 4px currentColor)}
.hl-quick::after{content:"";position:absolute;left:4px;right:4px;bottom:3px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--z-acc),transparent);box-shadow:0 0 8px var(--z-acc)}
.hl-quick:hover{color:#fff3c4!important}
@keyframes hl-shine{50%{text-shadow:0 0 14px color-mix(in srgb,var(--z-acc) 80%,transparent)}}

/* 下拉: 触发器只有字 + 小箭头 + 底下一道渐隐金线; 弹层是半透明烟熏玻璃, 选中项左边一道金光 */
.hl-dd{position:relative}
.hl-dd-btn{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:8px;padding:6px 12px 8px;border:0;background:none;text-align:left;text-shadow:0 1px 4px #000}
.hl-dd-btn small{grid-column:1/-1;font-size:9.5px;letter-spacing:.3em;color:var(--hl-dim)}
.hl-dd-btn b{font:700 15px/1.25 "Noto Serif",Cambria,"Noto Serif SC",serif;color:var(--hl-ink);transition:color .2s}
.hl-dd-btn svg{width:12px;height:12px;fill:none;stroke:var(--z-acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.hl-dd-btn::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;background:linear-gradient(90deg,transparent,var(--z-acc),transparent);opacity:.45;transition:opacity .2s,left .25s,right .25s}
.hl-dd-btn:hover b,.hl-dd.is-open .hl-dd-btn b{color:var(--z-acc)}
.hl-dd-btn:hover::after,.hl-dd.is-open .hl-dd-btn::after{opacity:1;left:4px;right:4px;box-shadow:0 0 8px var(--z-acc)}
.hl-dd.is-open .hl-dd-btn svg{transform:rotate(180deg)}
.hl-dd-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:270px;margin:0;padding:6px;list-style:none;border-radius:14px;outline:0;
  background:linear-gradient(160deg,#2a1b10f0,#120b07f2);box-shadow:0 18px 40px #000c,0 0 0 1px #e2b55a2e,inset 0 1px #ffe3a62a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:hl-drop .18s ease-out;transform-origin:90% 0}
.hl-dd-menu[hidden]{display:none}
.hl-dd-menu::before{content:"";position:absolute;right:26px;top:-5px;width:10px;height:10px;transform:rotate(45deg);background:#2a1b10;box-shadow:-1px -1px 0 #e2b55a2e}
.hl-dd-opt{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px 9px 10px;border-radius:10px;cursor:pointer;transition:background .15s}
.hl-dd-opt.is-active{background:#ffffff0f}
.hl-dd-opt[aria-selected=true]{background:linear-gradient(90deg,color-mix(in srgb,var(--z-acc) 22%,transparent),transparent)}
.hl-dd-opt[aria-selected=true]::before{content:"";position:absolute;left:-6px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--z-acc);box-shadow:0 0 10px var(--z-acc)}
.hl-dd-opt i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:#ffffff12;font-style:normal;font-size:15px;color:var(--hl-gold)}
.hl-dd-tier-0 i{background:linear-gradient(#9be8cf,#2f9a7c);color:#0b2e24}
.hl-dd-tier-1 i{background:linear-gradient(#ffe27a,#d99a0e);color:#3a2604}
.hl-dd-tier-2 i{background:linear-gradient(#7b4fd2,#3b1580);color:#f3e8ff;box-shadow:0 0 12px #7b4fd288}
.hl-dd-state-open i{color:#6ee7a0}.hl-dd-state-busy i{color:#ff8a7a}
.hl-dd-opt span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.hl-dd-opt b{font-size:14px;color:var(--hl-ink)}
.hl-dd-opt small{font-size:11px;color:var(--hl-dim);white-space:nowrap}
.hl-dd-opt em{margin-left:auto;padding-left:10px;font-size:11.5px;font-style:normal;color:#6ee7a0;white-space:nowrap}
.hl-dd-opt.is-locked em{color:#ffb4a8}
.hl-dd-opt.is-locked b{color:var(--hl-dim)}
@keyframes hl-drop{from{opacity:0;transform:translateY(-6px) scale(.97)}}

/* ---------- 牌桌 ---------- */
.hl-floor{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:30px 24px;align-content:start;padding:28px 22px 70px;
  position:relative;z-index:1;scrollbar-width:thin;scrollbar-color:#e2b55a44 transparent;-webkit-mask-image:linear-gradient(transparent,#000 22px);mask-image:linear-gradient(transparent,#000 22px)}
.hl-none{grid-column:1/-1;text-align:center;color:var(--hl-dim);padding:60px 0}
.hl-floor[data-layout=solo]{grid-template-columns:minmax(0,320px);justify-content:center}
.hl-table{--hl-seat-gap:14px;position:relative;transform:scale(var(--sc,1));transition:transform .9s cubic-bezier(.3,.7,.2,1),opacity .5s,filter .5s}
.hl-floor.is-in .hl-table{animation:hl-rise .5s both}
.hl-floor.is-in .hl-table:nth-child(2){animation-delay:.05s}.hl-floor.is-in .hl-table:nth-child(3){animation-delay:.1s}.hl-floor.is-in .hl-table:nth-child(4){animation-delay:.15s}
.hl-floor.is-in .hl-table:nth-child(n+5){animation-delay:.2s}
.hl-table header{position:relative;z-index:3;display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:var(--hl-seat-gap);font-size:12px} /* 11-01 用户: 和下面拉开(对面座位往上提了, 三人桌的「入座」原来贴着这一行) */
.hl-table header b{font:700 13px "Noto Serif",Cambria,"Noto Serif SC",serif;color:var(--hl-gold);text-shadow:0 1px 3px #000}
.hl-state{padding:2px 9px;border-radius:999px;background:#000a;border:1px solid #ffffff1a;white-space:nowrap}
.hl-table:not(.is-busy) .hl-state{color:#6ee7a0;border-color:#4ade8055}
.hl-table.is-busy .hl-state{background:#a3261c;border-color:#ff8a7a55}
.hl-table.is-busy .hl-state::before{content:"● ";color:#ffd0c8;animation:hl-blink 1.4s infinite}
.hl-table.is-flash .hl-state{background:var(--hl-gold);color:#2b1a10}
.hl-table footer{text-align:center;font-size:11.5px;color:var(--hl-dim);margin-top:-4px}
.hl-scene{position:relative;height:200px}
.hl-lamp{position:absolute;left:50%;top:-24px;width:250px;height:240px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse 50% 45% at 50% 58%,#ffcf7a2e,transparent 70%)}
.hl-table.is-busy .hl-lamp{background:radial-gradient(ellipse 50% 45% at 50% 58%,#ffcf7a44,transparent 70%)}
.hl-felt{position:absolute;left:13%;right:13%;top:26%;bottom:18%;z-index:1;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%,#2b9163,#0f4a33 72%);box-shadow:0 0 0 7px #5a3014,0 0 0 9px #e2b55a55,0 16px 22px #000c,inset 0 0 22px #000a}
.hl-table.is-flash .hl-felt{box-shadow:0 0 0 7px #5a3014,0 0 0 9px var(--hl-gold),0 0 30px 6px #e2b55a88,inset 0 0 22px #000a}
.hl-felt-stake{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:5px;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none} /* 像印在台呢上的金字 */
.hl-felt-stake small{font-size:9.5px;letter-spacing:.2em;color:#e7c983b0}
.hl-felt-stake b{font:700 13px/1 "Noto Serif",Cambria,"Noto Serif SC",serif;background:linear-gradient(#fff6d8,#e2b55a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 1px #0009)}
.hl-hand{position:absolute;width:13px;height:18px;transform:translate(-50%,-50%);border-radius:2px;background:linear-gradient(135deg,#9a2f22,#5c160f);border:1px solid #f4ead2bb;box-shadow:7px 1px 0 -1px #7a2218,7px 1px 0 0 #f4ead2aa}
.hl-h6-0{left:47%;top:76%}.hl-h6-1{left:76%;top:62%}.hl-h6-2{left:76%;top:33%}.hl-h6-3{left:47%;top:22%}.hl-h6-4{left:21%;top:33%}.hl-h6-5{left:21%;top:62%}
.hl-h4-0,.hl-h3-0{left:47%;top:76%}.hl-h4-1{left:83%;top:46%}.hl-h4-2{left:47%;top:22%}.hl-h4-3{left:14%;top:46%}.hl-h3-1{left:70%;top:26%}.hl-h3-2{left:27%;top:26%}
.hl-h2-0{left:47%;top:76%}.hl-h2-1{left:47%;top:22%}
/* 麻将: 一排象牙色牌; 长牌 / 四色牌: 细长条 */
[data-kind=tile] .hl-hand{width:26px;height:11px;border-radius:2px;background:repeating-linear-gradient(90deg,#f6efdc 0 5.5px,#c9b98f 5.5px 6.5px);border:0;box-shadow:0 2px 0 #1f7a52,0 3px 2px #0008}
[data-kind=strip] .hl-hand{width:7px;height:20px;border-radius:2px;background:#f2e5c6;border:1px solid #7a1f1f88;box-shadow:5px 1px 0 -1px #f2e5c6,5px 1px 0 0 #7a1f1f88,10px 0 0 -1px #f2e5c6,10px 0 0 0 #7a1f1f88}

/* ---------- 座位: 4 人 = 下(背对我们) / 右 / 上(桌子后面) / 左; 3 人 = 下 / 右上 / 左上 ---------- */
.hl-seats{list-style:none;margin:0;padding:0}
.hl-seat{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1px;width:78px;transform:translate(-50%,-50%);font-size:11px;line-height:1.25}
.hl-seat.is-far{z-index:2;transform:translate(-50%,-62%)} /* 11-01 用户: 对面的人不再被桌子挡成只剩个头 —— 整个半身坐在桌沿后面、画在台呢上面; 名字和其它座位一样在头像下面 */
.hl-seat span{max-width:78px;padding:1px 6px;border-radius:6px;background:#000b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-seat em{position:absolute;top:10px;right:6px;padding:0 5px;border-radius:5px;background:linear-gradient(#f3d27f,#c8922f);color:#2b1a10;font:800 10px/1.5 system-ui,sans-serif;font-style:normal;box-shadow:0 1px 3px #000a}
.hl-bust{width:44px;height:50px;filter:drop-shadow(0 3px 3px #0009)}
.hl-s6-0{left:50%;top:88%}.hl-s6-1{left:88%;top:72%}.hl-s6-2{left:88%;top:26%}.hl-s6-3{left:50%;top:13%}.hl-s6-4{left:12%;top:26%}.hl-s6-5{left:12%;top:72%} /* 德州 6 人桌 */
.hl-s4-0,.hl-s3-0{left:50%;top:86%}.hl-s4-1{left:91%;top:48%}.hl-s4-2{left:50%;top:17%}.hl-s4-3{left:9%;top:48%}.hl-s3-1{left:75%;top:17%}.hl-s3-2{left:25%;top:17%}
.hl-s2-0{left:50%;top:86%}.hl-s2-1{left:50%;top:17%} /* 两人游戏: 面对面 */
.hl-seat.is-new .hl-bust{animation:hl-sit .6s cubic-bezier(.3,1.4,.5,1) both}
.hl-seat.is-gone{animation:hl-leave .6s forwards}
.hl-chair{width:36px;height:34px;border-radius:12px 12px 5px 5px;background:linear-gradient(#6e3e1e,#3a1e0c);border:2px solid #8c5a2c;box-shadow:0 4px 8px #0008}
.is-empty a{display:flex;flex-direction:column;align-items:center;padding:4px 6px 5px;border:1.5px solid transparent;border-radius:12px;text-decoration:none;transition:border-color .15s,box-shadow .15s}
/* 鼠标移到整个空位(或有空位的桌子): 空位套上和「入座」一样的金色边框 */
.is-empty a:hover,.is-empty a:focus-visible,.hl-table.is-open:hover .is-empty a{border-color:var(--hl-gold);background:#1a100980;box-shadow:0 0 12px #e2b55a55}
.hl-table.is-open{cursor:pointer}
.hl-table.is-open:hover .hl-felt{box-shadow:0 0 0 7px #5a3014,0 0 0 9px var(--hl-gold),0 16px 22px #000c,inset 0 0 22px #000a}
.hl-seat .hl-sitlbl{display:inline-flex;align-items:center;gap:4px;max-width:none;margin-top:-10px;padding:2px 10px 2px 4px;border:1.5px dashed var(--hl-gold);border-radius:999px;background:#1a1009e6;color:var(--hl-gold);font-weight:700;font-size:11.5px;animation:hl-pulse 1.8s ease-in-out infinite}
.hl-sitlbl b{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--hl-gold);color:#2b1a10;font-size:14px;line-height:1}
.is-empty a:hover .hl-sitlbl,.is-empty a:focus-visible .hl-sitlbl,.hl-table.is-open:hover .hl-sitlbl{background:var(--hl-gold);color:#2b1a10;border-style:solid}
.is-empty a:hover .hl-sitlbl b,.hl-table.is-open:hover .hl-sitlbl b{background:#2b1a10;color:var(--hl-gold)}


/* 换档位: 两片红丝绒帷幕从两边合上(中间金牌写档位名), 换好桌子再拉开; 关键帧 40% 全合上, hall.js 在 480ms 换 */
.hl-curtain{position:absolute;inset:0;z-index:8;display:grid;place-items:center;pointer-events:none;visibility:hidden}
.hl-curtain i{position:absolute;top:0;bottom:0;width:51%;background:radial-gradient(ellipse 120% 30% at 50% 0,#0008,transparent),repeating-linear-gradient(90deg,#5a0a1c 0 16px,#82162e 16px 28px,#4a0816 28px 42px);
  box-shadow:inset 0 -26px 0 -12px #e2b55a,inset 0 -34px 18px #0009,0 0 30px #000c}
.hl-curtain i:first-child{left:0;transform:translateX(-100%)}.hl-curtain i:nth-child(2){right:0;transform:translateX(100%)}
.hl-curtain b{position:relative;padding:10px 34px;border-radius:10px;background:#140c08e6;box-shadow:0 0 0 2px var(--z-acc),0 0 30px color-mix(in srgb,var(--z-acc) 50%,transparent);font:900 26px "Noto Serif",Cambria,"Noto Serif SC",serif;letter-spacing:.2em;color:var(--z-acc);opacity:0}
.hl-curtain b[hidden]{display:none}
.hl.is-curtain .hl-curtain{visibility:visible}
.hl.is-curtain .hl-curtain i:first-child{animation:hl-curtain-l 1.2s cubic-bezier(.6,0,.3,1) both}
.hl.is-curtain .hl-curtain i:nth-child(2){animation:hl-curtain-r 1.2s cubic-bezier(.6,0,.3,1) both}
.hl.is-curtain .hl-curtain b{animation:hl-plate 1.2s both}
@keyframes hl-curtain-l{0%{transform:translateX(-100%)}40%,58%{transform:none}100%{transform:translateX(-100%)}}
@keyframes hl-curtain-r{0%{transform:translateX(100%)}40%,58%{transform:none}100%{transform:translateX(100%)}}
@keyframes hl-plate{0%,30%{opacity:0;transform:scale(.85)}42%,58%{opacity:1;transform:none}72%,100%{opacity:0}}

/* 右下角留言(_shared/chat.php): 大厅里缩成一个金色气泡图标; 刚进来时旁边的「Message us」标签亮 4 秒再收起, 鼠标移上 / 键盘聚焦再出来 */
html:has(.hl) .chat-fab{z-index:60;right:22px;bottom:22px;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,#c8922f);color:#3b210e;box-shadow:0 6px 18px #000a,0 0 0 0 #e2b55a88;animation:hl-glow 2.6s ease-out infinite;transform:none}
html:has(.hl) .chat-fab::before{content:"";width:26px;height:26px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4.5h16a1.5 1.5 0 0 1 1.5 1.5v9.5A1.5 1.5 0 0 1 20 17h-9.5L6 20.5V17H4a1.5 1.5 0 0 1-1.5-1.5V6A1.5 1.5 0 0 1 4 4.5zM7.5 9.6a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6zm4.5 0a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6zm4.5 0a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4.5h16a1.5 1.5 0 0 1 1.5 1.5v9.5A1.5 1.5 0 0 1 20 17h-9.5L6 20.5V17H4a1.5 1.5 0 0 1-1.5-1.5V6A1.5 1.5 0 0 1 4 4.5zM7.5 9.6a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6zm4.5 0a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6zm4.5 0a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6z'/%3E%3C/svg%3E") center/contain no-repeat}
html:has(.hl) .chat-fab:hover{transform:translateY(-2px);filter:brightness(1.08)}
html:has(.hl) .chat-fab__text{position:absolute;right:calc(100% + 10px);top:50%;padding:7px 14px;border-radius:999px;background:#140c08f0;box-shadow:0 0 0 1px #e2b55a66,0 6px 16px #000a;
  color:var(--hl-gold,#e2b55a);font:700 13px/1 system-ui,sans-serif;white-space:nowrap;pointer-events:none;transform:translateY(-50%);opacity:0;transition:opacity .2s,transform .2s;animation:hl-chat-hint 4.5s .8s both}
html:has(.hl) .chat-fab__text::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;margin-top:-4px;transform:rotate(45deg);background:#140c08;box-shadow:1px -1px 0 #e2b55a66}
html:has(.hl) .chat-fab:is(:hover,:focus-visible) .chat-fab__text{opacity:1;transform:translate(-4px,-50%);animation:none}
@keyframes hl-chat-hint{0%{opacity:0;transform:translate(10px,-50%)}10%,85%{opacity:1;transform:translateY(-50%)}100%{opacity:0;transform:translate(10px,-50%)}}

/* ---------- 底部动态 + 入座过场 ---------- */
.hl-ticker{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:10px;height:40px;padding:0 22px;background:linear-gradient(transparent,#000d 60%);font-size:13px;pointer-events:none}
.hl-ticker span{color:var(--z-acc)}
.hl-ticker p{margin:0;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eadfc4}
.hl-ticker p.is-in{animation:hl-tick .45s ease-out}
.hl.is-leaving .hl-table:not(.is-entering){opacity:.12;filter:blur(2px)}
.hl-table.is-entering{z-index:5;--sc:1.6}
.hl-enter{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:radial-gradient(circle,transparent 20%,#000d 75%);animation:hl-fade .5s both}
.hl-enter[hidden]{display:none}
.hl-enter p{margin:0;padding:10px 26px;border-radius:999px;background:#000c;border:1px solid #e2b55a88;font:700 18px "Noto Serif",Cambria,"Noto Serif SC",serif;color:var(--hl-gold)}

@keyframes hl-blink{50%{opacity:.35}}
@keyframes hl-glow{0%{box-shadow:0 0 0 0 #e2b55a88}70%,100%{box-shadow:0 0 0 12px #e2b55a00}}
@keyframes hl-pulse{50%{box-shadow:0 0 0 5px #e2b55a33}}
@keyframes hl-rise{from{opacity:0;translate:0 18px}}
@keyframes hl-sit{from{opacity:0;transform:translateY(-14px) scale(.8)}}
@keyframes hl-leave{to{opacity:0;transform:translate(-50%,-80%)}}
@keyframes hl-tick{from{opacity:0;transform:translateY(10px)}}
@keyframes hl-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.hl *,.hl *::before{animation:none!important;transition:none!important}html:has(.hl) .chat-fab{animation:none}}

/* 真人(跨站同桌的玩家): 金色名牌 */
.hl-seat.is-human span{background:#e2b55a;color:#2b1a10;font-weight:700}

/* 牌室(10-31): 每张桌属于初级场 / 中级场 / 高级场(按底注), 桌号前一面小旗子写 初级 / 中级 / 高级, 桌号前一块青绿 / 黄 / 深紫牌子, 桌沿跟着换色(不用铜银金, 免得像给人分等级) */
.hl-tierbadge{position:relative;display:inline-flex;align-items:center;gap:7px;padding:0 13px 0 4px;font:800 10.5px/1.5 system-ui,sans-serif;font-style:normal;letter-spacing:.06em;color:#2b1a10;background:none!important;filter:drop-shadow(0 1px 2px #000a)}
.hl-tierbadge::before{content:"";align-self:stretch;width:2px;margin:-3px 0 -5px;border-radius:1px;background:#d8c7a0} /* 小旗子: 左边旗杆 + 燕尾旗面(::after 当旗面底色, 字压在上面) */
.hl-tierbadge::after{content:"";position:absolute;z-index:-1;left:6px;top:0;right:0;bottom:0;clip-path:polygon(0 0,100% 0,84% 50%,100% 100%,0 100%);background:var(--flag)}
.hl-tier0{--tc:#2f9a7c;--tc2:#9be8cf}
.hl-tier1{--tc:#d99a0e;--tc2:#ffe27a}
.hl-tier2{--tc:#3b1580;--tc2:#b48cff}
.hl-tier0 .hl-tierbadge{--flag:linear-gradient(#9be8cf,#2f9a7c)}
.hl-tier1 .hl-tierbadge{--flag:linear-gradient(#ffe27a,#d99a0e);color:#3a2604}
.hl-tier2 .hl-tierbadge{--flag:linear-gradient(#7b4fd2,#3b1580);color:#f3e8ff}

.hl-tier1 .hl-felt{box-shadow:0 0 0 7px #4a3410,0 0 0 9px #f7c948aa,0 16px 22px #000c,inset 0 0 22px #000a}
.hl-tier2 .hl-felt{background:radial-gradient(ellipse at 50% 35%,#3a1a78,#170833 72%);box-shadow:0 0 0 7px #1f0f3d,0 0 0 9px #7b4fd2cc,0 0 26px 4px #7b4fd255,0 16px 22px #000c,inset 0 0 22px #000a}


@media (max-width:820px){
  .hl{display:flex;flex-direction:column;overflow-y:auto}
  .hl-top{position:sticky;top:0;gap:12px;padding:8px 12px}
  .hl-brand,.hl-me-text,.hl-coin small{display:none}
  .hl-back{font-size:13px}
  .hl-wallet{gap:8px;margin-left:auto}
  .hl .hl-top{gap:8px;padding:12px 12px}
  .hl .hl-back{padding:0 2px;gap:0}.hl .hl-back span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} /* 手机: 返回只留金色圆图标, 字给读屏 */
  .hl .hl-me-btn{padding:0;border:0;background:none;box-shadow:none}.hl .hl-me-btn::after{display:none}.hl .hl-me-btn .hl-ava{margin:0}
  .hl .hl-coin{gap:6px}
  .hl-coin b{min-width:0;font-size:14px}
  .hl-side{flex-direction:row;flex:none;overflow:auto hidden;padding:4px 12px 8px;background:none}
  .hl-game{flex:none}
  .hl-game[aria-current]::before{left:10px;right:10px;top:auto;bottom:0;width:auto;height:2px;border-radius:2px}
  .hl-room{flex:none;overflow:visible;padding:0;--wall:clamp(108px,19%,180px)}
  .hl-top{height:auto}
  .hl-bar{padding:12px 12px 4px}
  .hl-tools{width:100%;margin-left:0}
  .hl-quick{margin-left:auto}
  .hl-dd-menu{right:auto;left:0;min-width:250px}
  .hl-dd-menu::before{right:auto;left:26px}
  .hl-floor{overflow:visible;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));padding:16px 12px 60px;-webkit-mask-image:none;mask-image:none}
  .hl-ticker{position:sticky;margin-top:-40px}
}

/* 桌子底下一行: 筹码范围(小字标签 + 衬线数字); 底注在台呢上(.hl-felt-stake) */
.hl-table footer.hl-cost{display:flex;justify-content:center;margin-top:var(--hl-seat-gap);color:var(--hl-dim)} /* 11-01 用户: 和下方座位的头像 / 名字拉开, 和上面桌名行同一个间隔 */
.hl-cost span{display:flex;align-items:baseline;gap:6px}
.hl-cost small{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#a8977a}
.hl-cost b{font:700 14px/1 "Noto Serif",Cambria,"Noto Serif SC",serif;letter-spacing:.02em;background:linear-gradient(#fff6d8,#e2b55a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 2px #000)}
.hl-cost em{margin:0 3px;font-style:normal;opacity:.6}
.hl-star{align-self:center;display:grid;place-items:center;flex:none;width:14px;height:14px;margin-right:-1px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,#c8922f);box-shadow:0 0 6px #e2b55a66}
.hl-star svg{width:9px;height:9px;fill:#6a3c0c}


/* ========== 11-02 照 temp/15.png 改版(旧版 backup/hall-20261102-v1/): 翅膀徽章标题 + 酒红地毯 + 金框游戏列 + 金圈牌桌。
   没做参考图的顶部导航(用户不要)和没有功能的按钮(创建房间 / 搜索 / 翻页 / 刷新)。筛选仍是下拉(10-31 用户不要分区按钮) ========== */
.hl{--z-c1:#5e1228;--z-c2:#4a0e20}
/* 徽章: 从屏幕顶垂下来, 压在窗景上; 宽屏头像旁不放昵称, 给徽章让位 */
.hl .hl-crest{position:absolute;left:50%;top:0;width:420px;height:110px;z-index:7;transform:translateX(-50%);flex:none;display:flex;flex-direction:column;align-items:center;padding-top:24px;box-sizing:border-box;pointer-events:none;filter:drop-shadow(0 2px 4px #0009)}
.hl-crest-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.hl .hl-crest small{position:static;margin:0;font:700 11px/1.3 Georgia,"Noto Serif",serif;letter-spacing:.46em;margin-right:-.46em;color:#c9a768}
.hl .hl-crest h1{margin:0;font:700 29px/38px "Noto Serif SC","Noto Serif",Cambria,serif;letter-spacing:.06em;white-space:nowrap;background:linear-gradient(#fff6cf,#f3cd72 50%,#b57f26);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 1px #000)}
.hl[data-lang=vi] .hl-crest h1{font-size:22px;letter-spacing:.01em}
.hl[data-lang=en] .hl-crest h1{font-size:26px;letter-spacing:.02em}
.hl-wallet{margin-left:auto}
.hl-top::before{height:calc(100% + 26px);background:linear-gradient(#0a0508f2,#1c0d14bf 70%,#1c0d1400)} /* 11-02 用户: 顶栏金线, 从徽章肩部伸出去(线画在徽章的 SVG 里, 融成一体) */
@media (max-width:1120px){.hl-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,#e9c77700,#e9c77799 50%,#e9c77700)}}
@media (max-width:1500px){.hl .hl-me-text{display:none}.hl .hl-me-btn{padding:0;border:0;background:none;box-shadow:none}.hl .hl-me-btn::after{display:none}.hl .hl-me-btn .hl-ava{margin:0}}
@media (max-width:1120px){ /* 放不下翅膀: 只留文字标题, 排在中间 */
  .hl .hl-crest{position:relative;left:auto;top:auto;transform:none;flex:1;width:auto;height:auto;padding:0;min-width:0}
  .hl-crest-art{display:none}
  .hl .hl-crest h1,.hl[data-lang] .hl-crest h1{font-size:22px;line-height:26px}
  .hl .hl-crest small{font-size:9px}
}
/* 左边: 金边面板 + 一张张带框的游戏牌, 选中的整张发金 */
@media (min-width:821px){
  .hl-side{overflow-x:hidden;scrollbar-width:none;gap:7px;margin:8px 0 12px 8px;padding:10px 8px;border-radius:12px;background:linear-gradient(#1c0e12f2,#0d0709f2);box-shadow:inset 0 0 0 1px #d9a44e66,0 8px 26px #000b}
  .hl-game{padding:6px 8px;border-radius:8px;background:linear-gradient(#2a1a1c,#150c0e);box-shadow:inset 0 0 0 1px #d9a44e38}
  .hl-game:hover{background:linear-gradient(#3a2422,#1c1012);box-shadow:inset 0 0 0 1px #d9a44e88}
  /* 11-02 用户: 当前游戏只显示一处 —— 就是左边选中的这张牌, 放大成金字招牌(原来房间左上的游戏名 / 在线人数去掉, 标题留给读屏) */
  .hl-game[aria-current]{gap:10px;padding:12px 10px 12px 8px;background:radial-gradient(ellipse 90% 120% at 0 50%,#e2b55a38,transparent 70%),linear-gradient(#3a1422,#1a090f);color:#fff6d8!important;box-shadow:inset 0 0 0 1.5px #ffe08f,inset 0 0 0 3px #1a090f,inset 0 0 0 4px #d9a44e66,0 0 16px #e2b55a77}
  .hl-game[aria-current]:hover{background:radial-gradient(ellipse 90% 120% at 0 50%,#e2b55a38,transparent 70%),linear-gradient(#3a1422,#1a090f);box-shadow:inset 0 0 0 1.5px #ffe08f,inset 0 0 0 3px #1a090f,inset 0 0 0 4px #d9a44e66,0 0 16px #e2b55a77}
  .hl-game[aria-current]::before{left:auto;right:-5px;top:50%;bottom:auto;width:12px;height:12px;border-radius:2px;transform:translateY(-50%) rotate(45deg);background:#e9c777;box-shadow:0 0 8px #e2b55a}
  .hl-game[aria-current] .hl-game-text small{margin-top:3px;color:#fbeac0}
  /* 房间头: 只有右边一组 牌室 / 牌桌 / 快速入座, 浮在窗景上 */
  .hl-room{--wall:164px}
  .hl-bar{display:flex;justify-content:flex-end;padding:4px 104px 4px 0;background:linear-gradient(90deg,#0000 40%,#00000073 72%,#00000073 88%,#0000)}
  .hl-tools{gap:18px;margin:0}
  /* 窗景两边的红丝绒帷幕 */
  .hl-wall::before,.hl-wall::after{content:"";position:absolute;top:0;bottom:0;width:84px;background:radial-gradient(ellipse 120% 20% at 50% 0,#0009,transparent),repeating-linear-gradient(90deg,#57091c 0 12px,#8c1a33 12px 22px,#4a0816 22px 32px);filter:drop-shadow(0 4px 8px #000b)}
  .hl-wall::before{left:230px;clip-path:polygon(0 0,100% 0,88% 32%,48% 62%,22% 100%,0 100%)}
  .hl-wall::after{right:0;clip-path:polygon(0 0,100% 0,100% 100%,78% 100%,52% 62%,12% 32%)}
}
.hl .hl-dd-btn{display:inline-flex;align-items:baseline;gap:8px;padding:6px 4px;border-radius:0;background:none;box-shadow:none} /* 前面的小字说明这是筛什么: 牌室 全部 / 牌桌 全部 */
.hl .hl-dd-btn small{grid-column:auto;font-size:12px;letter-spacing:.08em;color:#d3bd8d}
.hl .hl-dd-btn b{font-size:16px;color:#fff3cf}
.hl .hl-dd-btn svg{align-self:center}
.hl .hl-dd-btn:hover b,.hl .hl-dd.is-open .hl-dd-btn b{color:#ffe08f;text-shadow:0 0 12px #e2b55acc}
.hl .hl-quick{margin-left:6px;padding:6px 6px 8px}
/* 牌桌: 深木边 + 金圈; 牌室标记改成胶囊 */
.hl-table .hl-felt{box-shadow:0 0 0 6px #3d2110,0 0 0 8px #e9c777,0 0 0 10px #6a431a,0 16px 22px #000c,inset 0 0 22px #000a}
.hl-table.hl-tier1 .hl-felt{box-shadow:0 0 0 6px #3a2a10,0 0 0 8px #ffe08f,0 0 0 10px #8a5a14,0 16px 22px #000c,inset 0 0 22px #000a}
.hl-table.hl-tier2 .hl-felt{box-shadow:0 0 0 6px #1f0f3d,0 0 0 8px #e9c777,0 0 0 10px #5a3a9a,0 0 26px 4px #7b4fd255,0 16px 22px #000c,inset 0 0 22px #000a}
.hl-table.is-open:hover .hl-felt,.hl-table.is-flash .hl-felt{box-shadow:0 0 0 6px #5a3014,0 0 0 9px #ffe08f,0 0 30px 8px #e2b55a99,inset 0 0 22px #000a}
.hl-tierbadge{padding:0 12px;border-radius:999px;font-size:11px;line-height:20px;background:var(--flag)!important;box-shadow:inset 0 0 0 1px #fff5,0 1px 4px #000a}
.hl-tierbadge::before,.hl-tierbadge::after{display:none}
@media (max-width:820px){.hl .hl-crest{display:none}}
.hl .hl-plaque,.hl .hl-online{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hl .hl-plaque::before{display:none}
/* 11-02 用户: 游戏标志是牌徽本身, 不要底色方块 */
.hl .hl-game-art,.hl .hl-game[aria-current] .hl-game-art{background:none;border-radius:0;box-shadow:none;overflow:visible;filter:drop-shadow(0 2px 3px #000b)}
.hl .hl-game[aria-current] .hl-game-art{filter:drop-shadow(0 2px 3px #000b) drop-shadow(0 0 7px #e2b55a88)}
/* 11-02 用户: 列表顶上切换 全部 / 本土 / 剧情 —— 不加框, 字 + 选中一道金线, 滚动时贴在顶上 */
.hl-game[hidden]{display:none}
.hl-game.is-soon{opacity:.5;cursor:default}
.hl-game-text small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-cats{position:sticky;top:-10px;z-index:2;display:flex;flex:none;margin:-10px -8px 4px;padding:10px 8px 0;background:linear-gradient(#1c0e12 80%,#1c0e1200)}
.hl .hl-cats button{flex:1;padding:6px 2px 9px;border:0;background:none;color:#b9a785;font:700 13.5px/1.2 "Noto Serif SC","Noto Serif",Cambria,serif;white-space:nowrap;position:relative;transition:color .2s}
.hl .hl-cats button:hover{color:#ffe7a9}
.hl .hl-cats button:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.hl .hl-cats button[aria-pressed=true]{color:#f3cd72}
.hl .hl-cats button[aria-pressed=true]::after{content:"";position:absolute;left:14%;right:14%;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,#e9c77700,#e9c777,#e9c77700);box-shadow:0 0 8px #e2b55a99}
@media (max-width:820px){.hl-cats{position:sticky;left:-12px;top:auto;margin:0;padding:0 8px 0 0;background:#160b0e;min-width:170px}}
/* 午夜二十一点选对手(11-02): 问号 + 9 位头像 */
.hl-roster{flex:1;min-height:0;overflow:auto;position:relative;z-index:1;padding:14px 30px 70px;scrollbar-width:thin;scrollbar-color:#e2b55a44 transparent}
.hl-roster[hidden]{display:none}
.hl[data-panel-on] :is(.hl-floor,.hl-bar){display:none}
.hl-roster-head{margin-bottom:18px;padding-left:80px;text-align:left} /* 11-02 用户: 游戏名放左上, 和有牌桌的游戏一样; 让开窗景左边的帷幕 */
.hl-roster-head h2{margin:0 0 6px;font:900 30px/1.2 "Noto Serif SC","Noto Serif",Cambria,serif;background:linear-gradient(#fff6cf,#f3cd72 55%,#b57f26);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 3px #000)}
.hl-roster-head p{margin:0;font-size:13.5px;color:#eadfc4;text-shadow:0 1px 3px #000}
.hl-fee{width:min(420px,100%);margin:0 auto 18px;border-collapse:collapse;background:linear-gradient(90deg,#0000,#000a 18%,#000a 82%,#0000);text-align:center}
.hl-fee th{padding:8px 10px 4px;font-size:12px;font-weight:400;color:#c9b48a}
.hl-fee td{padding:2px 10px 9px;font:700 15px/1.3 "Noto Serif SC","Noto Serif",Cambria,serif;color:#f4ead2;font-variant-numeric:tabular-nums}
.hl-fee td.is-total{color:#f3cd72}
.hl-roster-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 20px;max-width:980px;margin:0 auto}
.hl-r-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#f4ead2!important}
.hl-r-card b{font:700 14px/1.3 "Noto Serif SC","Noto Serif",Cambria,serif;text-shadow:0 1px 3px #000}
.hl-r-img{display:grid;place-items:center;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:10px;background:radial-gradient(circle at 50% 35%,#3a1422,#12060a);box-shadow:inset 0 0 0 1px #e9c777aa,0 8px 20px #000b;transition:transform .2s,box-shadow .2s;font:900 clamp(48px,6vw,84px)/1 "Noto Serif",Georgia,serif;color:#f3cd72}
.hl-r-img img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%}
.hl-r-card:hover .hl-r-img,.hl-r-card:focus-visible .hl-r-img{transform:translateY(-4px);box-shadow:inset 0 0 0 1.500px #ffe08f,0 0 22px #e2b55a88,0 12px 26px #000c}
.hl-r-card:focus-visible{outline:none}
@media (max-width:1100px){.hl-roster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.hl-roster{padding:12px 12px 60px}.hl-roster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
/* 非本土游戏: 图标用游戏库原图, 缩进列表的格子里 */
.hl .hl-game-orig{display:grid;place-items:center;overflow:hidden;filter:none}
.hl .hl-game-orig .gl-art-svg{width:100%;height:100%;filter:none}
.hl .hl-game-orig .gl-cards{transform:scale(.3);transform-origin:center;flex:none}
@media (min-width:821px){
  .hl-ticker{padding-left:246px} /* 滚动消息别钻到左边列表底下 */
}
/* 其它模板没有 gl.css: 德州 / 黑杰克那种两张牌的图标自己带样式 */
.hl .hl-game-orig{position:relative}
.hl .hl-game-orig .gl-cards{position:absolute;left:50%;top:50%;display:flex;align-items:center;transform:translate(-50%,-50%) scale(.3)}
.hl .hl-game-orig .gl-card-symbol{display:grid;place-items:center;width:62px;height:89px;border-radius:7px;background:#f5f0e6;color:#b22e58;font:700 24px Georgia,serif;transform:rotate(-14deg)}
.hl .hl-game-orig .gl-card-symbol+.gl-card-symbol{transform:rotate(13deg);margin-left:-14px}
.hl .hl-game-orig .gl-card-symbol.is-dark{color:#272134}
@media (min-width:821px){
  .hl:is([data-lang=vi],[data-lang=en]) .hl-cats button{font-size:12.5px}
  /* 11-02 用户: 所有站、所有有牌桌的游戏, 房间左上都写游戏名 */
  .hl .hl-plaque:not([hidden]){position:static;width:auto;height:auto;overflow:visible;clip-path:none;margin:0 auto 0 110px;padding:0}
  .hl .hl-plaque small{display:none}
}
@media (max-width:820px){.hl-roster-head{padding-left:0}}
.hl-r-fee{font:700 12.5px/1.2 "Noto Serif SC","Noto Serif",Cambria,serif;font-style:normal;color:#f3cd72;margin-top:-4px}
.hl-roster-grid.is-few{grid-template-columns:repeat(4,minmax(0,1fr));max-width:880px}
@media (max-width:1100px){.hl-roster-grid.is-few{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 11-02 用户: 左边列表重做 —— 不要一张张盒子, 像吧台酒单一样融进场景: 暗色帷幕渐隐 + 细金线分隔; 选中不变大, 只有外框特殊(金色角花 + 柔光) */
@media (min-width:821px){
  .hl-side{gap:0;margin:0;padding:8px 14px 16px 12px;border-radius:0;background:linear-gradient(90deg,#0a0508f7,#120a0eec 62%,#120a0ea8);box-shadow:none;border-right:1px solid;border-image:linear-gradient(#d9a44e00,#d9a44e66 18%,#d9a44e66 82%,#d9a44e00) 1}
  .hl-cats{margin:-8px -14px 6px -12px;padding:10px 12px 0;background:linear-gradient(#0d070af2 75%,#0d070a00)}
  .hl-game,.hl-game:hover{position:relative;padding:9px 10px;border-radius:0;background:none;box-shadow:none}
  .hl-game::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,#d9a44e00,#d9a44e3d 25%,#d9a44e3d 75%,#d9a44e00)}
  .hl-game:hover{background:radial-gradient(ellipse 80% 90% at 30% 50%,#e2b55a1f,#e2b55a00)}
  .hl-game:hover b{color:#ffe7a9}
  .hl .hl-game[aria-current],.hl .hl-game[aria-current]:hover{padding:9px 10px;color:#ffe7a9!important;
    background:
      linear-gradient(#f3d27f,#f3d27f) 0 0/12px 1.5px, linear-gradient(#f3d27f,#f3d27f) 0 0/1.5px 12px,
      linear-gradient(#f3d27f,#f3d27f) 100% 0/12px 1.5px, linear-gradient(#f3d27f,#f3d27f) 100% 0/1.5px 12px,
      linear-gradient(#f3d27f,#f3d27f) 0 100%/12px 1.5px, linear-gradient(#f3d27f,#f3d27f) 0 100%/1.5px 12px,
      linear-gradient(#f3d27f,#f3d27f) 100% 100%/12px 1.5px, linear-gradient(#f3d27f,#f3d27f) 100% 100%/1.5px 12px,
      linear-gradient(90deg,#e2b55a26,#e2b55a0d);
    background-repeat:no-repeat;box-shadow:inset 0 0 0 1px #d9a44e4d,0 0 16px #e2b55a40}
  .hl-game[aria-current]::after{display:none}
  .hl .hl-game[aria-current]::before{display:none}
  .hl .hl-game[aria-current] .hl-game-text small{margin:0;color:#e6d3a5}
}
.hl-roster-grid.is-few{margin-top:26px}
/* 全服游戏的六张桌(11-02): 上排星币, 下排星钻; 新手绿 中级黄 高级紫, 币种用图标 */
.hl-bt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;max-width:1280px;margin:10px auto 0} /* 桌子图 tools/bj-roster/render-table.mjs 渲染, 文字叠在上面; 11-02 用户参考 temp/14.png */
.hl-bt{--tint:#0c4a30;--tint2:#052517;--ban:#7a1228;position:relative;display:block;aspect-ratio:16/10;container-type:inline-size;color:#f6e7bf!important;text-align:center;text-decoration:none!important;transition:transform .25s,filter .25s}
.hl-bt-lv2{--tint:#7a5410;--tint2:#3a2505}
.hl-bt-lv3{--tint:#4a1a96;--tint2:#210a4d}
.hl-bt::before{content:"";position:absolute;left:3%;right:3%;top:42%;bottom:-1%;background:radial-gradient(closest-side,#000a 62%,#0006 82%,#0000);pointer-events:none} /* 贴地的暗影, 桌子落在地板上 */
.hl-bt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.hl-bt:hover,.hl-bt:focus-visible{transform:translateY(-3px);filter:brightness(1.1)}
.hl-bt:focus-visible{outline:2px solid #ffe08f;outline-offset:-6px;border-radius:14px}
.hl-bt-name,.hl-bt-plate,.hl-bt-join{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
/* 铭牌: 游戏徽章压在缎带左端, 右边是场次, 缎带向右渐隐 */
.hl-bt-name{top:13.5%;display:flex;align-items:center;gap:1cqw;padding:.3em 3.4em .3em .4em;font:700 max(12px,3cqw)/1.25 "Noto Serif SC","Noto Serif",Cambria,serif;letter-spacing:.14em;color:#ffe9b2;text-shadow:0 1px 2px #000;
  border-radius:999px 0 0 999px;background:linear-gradient(90deg,#120714f2,#120714e6 62%,#0000) padding-box,linear-gradient(90deg,#e9c777,#e9c777 58%,#e9c77700) border-box;border-block:1px solid transparent}
/* 底注牌: 台呢上的细金框, 上面是底注, 细线下是限红 */
.hl-bt-plate{top:27%;display:flex;flex-direction:column;align-items:center;min-width:34%;padding:1.1cqw 2.6cqw 1.15cqw;border-radius:1cqw;background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 86%,#000),var(--tint2));box-shadow:0 0 0 1px #e9c777,0 0 0 2.5px #1a0c0599,0 0 0 3.5px #e9c77766,0 1cqw 2cqw #0009,inset 0 0 2.4cqw #0006}
.hl-bt-stake{display:flex;align-items:center;gap:.8cqw;line-height:1}
.hl-bt-stake small,.hl-bt-limit small{font:500 max(11px,2.15cqw)/1 "Noto Serif SC","Noto Serif",Cambria,serif;letter-spacing:.06em;color:#e9d29a}
.hl-bt-stake small{margin-right:.5cqw}
.hl-bt-cur{flex:none;width:max(18px,4.2cqw);height:max(18px,4.2cqw);filter:drop-shadow(0 1px 2px #0009)}
.hl-bt-stake strong{font:800 max(20px,5.5cqw)/1 "Noto Serif",Georgia,serif;font-variant-numeric:lining-nums tabular-nums;background:linear-gradient(#fff8dc,#f4d27f 62%,#c8922f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 1px #0009)}
.hl-bt-limit{display:flex;align-items:baseline;justify-content:center;gap:.7cqw;align-self:stretch;margin-top:.9cqw;padding-top:.8cqw;border-top:1px solid #e9c77740;font:600 max(11px,2.3cqw)/1 "Noto Serif",Georgia,serif;font-variant-numeric:lining-nums tabular-nums;color:#f6ecd2}
.hl-bt-medal{flex:none;position:relative;width:max(32px,8.6cqw);height:max(32px,8.6cqw);margin-block:-2.6cqw;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 35%,#35203f,#120714 72%);box-shadow:0 0 0 1px #5a3c10,0 0 0 2.5px #e9c777,0 0 0 3.5px #5a3c10,0 .6cqw 1.4cqw #000b,inset 0 0 1.2cqw #000a}
.hl .hl-bt-medal svg{width:78%;height:78%;filter:none}
/* 入座: 平时只有桌子, 鼠标放上去才出现(触屏一直显示) */
.hl-bt-join{top:56%;padding:.4em 1.9em;border-radius:999px;font:700 max(12px,2.4cqw)/1.2 "Noto Serif SC","Noto Serif",Cambria,serif;letter-spacing:.12em;color:#3a2205;background:linear-gradient(#ffe9a8,#d9a441);box-shadow:0 0 1.8cqw #e9b95a88,0 .6cqw 1.4cqw #000a;opacity:0;transition:opacity .2s}
.hl-bt:hover .hl-bt-join,.hl-bt:focus-visible .hl-bt-join{opacity:1}
@media (hover:none){.hl-bt-join{opacity:1}}
@media (max-width:1100px){.hl-bt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.hl-bt-grid{grid-template-columns:minmax(0,1fr);max-width:520px;margin-top:0}}
@media (prefers-reduced-motion:reduce){.hl-bt,.hl-bt-join{transition:none}.hl-bt:hover,.hl-bt:focus-visible{transform:none}}
/* 换游戏(11-02 用户: 不然看不出从百家乐换到了骰宝): 面板 hidden 一取消动画就重播 —— 金光扫过 → 游戏名滑入 → 桌子错开升起 → 徽章弹出。只用 backwards, 播完不影响 hover */
.hl-roster-head{display:flex;align-items:center;gap:12px;position:relative}
.hl-roster-head h2{margin:0}
.hl-roster-ico{position:relative;flex:none;display:grid;place-items:center;width:52px;height:48px;overflow:hidden;filter:drop-shadow(0 2px 4px #000b)}
.hl .hl-roster-ico svg{width:100%;height:100%;filter:none}
.hl-roster:not([hidden])::before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:min(100%,640px);pointer-events:none;background:linear-gradient(100deg,#ffe08f00 40%,#ffe08f30 49%,#fff4cc66 50%,#ffe08f30 51%,#ffe08f00 60%);background-size:260% 100%;background-repeat:no-repeat;animation:hl-sweep .75s ease-out both}
.hl-roster:not([hidden]) .hl-roster-head{animation:hl-head-in .42s cubic-bezier(.2,.8,.2,1) backwards}
.hl-roster:not([hidden]) .hl-bt{animation:hl-bt-in .5s cubic-bezier(.2,.8,.2,1) backwards}
.hl-roster:not([hidden]) .hl-bt:nth-child(1){animation-delay:.08s}.hl-roster:not([hidden]) .hl-bt:nth-child(2){animation-delay:.14s}.hl-roster:not([hidden]) .hl-bt:nth-child(3){animation-delay:.2s}
.hl-roster:not([hidden]) .hl-bt:nth-child(4){animation-delay:.26s}.hl-roster:not([hidden]) .hl-bt:nth-child(5){animation-delay:.32s}.hl-roster:not([hidden]) .hl-bt:nth-child(6){animation-delay:.38s}
.hl-roster:not([hidden]) .hl-bt-medal{animation:hl-medal-in .4s cubic-bezier(.3,1.6,.5,1) .5s backwards}
.hl-roster:not([hidden]) .hl-r-card{animation:hl-bt-in .4s cubic-bezier(.2,.8,.2,1) .08s backwards}
@keyframes hl-sweep{from{background-position:130% 0;opacity:1}to{background-position:-30% 0;opacity:0}}
@keyframes hl-head-in{from{opacity:0;transform:translateX(-22px)}}
@keyframes hl-bt-in{from{opacity:0;transform:translateY(26px) scale(.93)}}
@keyframes hl-medal-in{from{opacity:0;transform:scale(.3)}}