/* 游戏大厅(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:#ffffffbb;animation:hl-fade .3s both}
@keyframes hl-site-down{from{transform:translateY(-100%)}}
@keyframes hl-site-up{from{transform:translateY(100%)}}
.hl{--hl-gold:#20b69d;--hl-ink:#0e3831;--hl-dim:#4d867d;--z-acc:#20b69d;--z-wall:#f1faf8;--z-wall2:#f3fbfa;--z-c1:#d1f6f4;--z-c2:#e1f9f9;--z-dot:#20b69d;
  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:#fbfdfd;color:var(--hl-ink);font-family:system-ui,"Noto Sans SC",sans-serif}
.hl[data-zone="1"]{--z-acc:#20b39a;--z-wall:#f2fcfb;--z-wall2:#f4fdfc;--z-c1:#e7fbf8;--z-c2:#edfcf9;--z-dot:#20b39a}
.hl[data-zone="2"]{--z-acc:#126461;--z-wall:#f5fcfc;--z-wall2:#f9fdfd;--z-c1:#e5f9f9;--z-c2:#ecfbfb;--z-dot:#10594d}
.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 #121212;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(#ffffffbb,#ffffff77 40%,#ffffff00)} /* 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%,#0e4e43,#62dac6);box-shadow:0 0 0 3px rgba(18,84,80,0.01),0 0 16px rgba(18,84,80,0.04);transition:transform .2s,box-shadow .2s}
.hl-back svg{width:19px;height:19px;fill:none;stroke:#ebfaf8;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.hl-back:hover{background:#20b69d1a;color:#0b3c34!important}
.hl-back:hover i{transform:translateX(-2px) scale(1.06);box-shadow:0 0 0 4px rgba(18,84,80,0.02),0 0 22px rgba(18,84,80,0.05)}
.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:#20b69d1a}
.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 rgba(18,84,80,0.04),0 2px 0 rgba(18,84,80,0.09)}
/* 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(#f1f9f8,#fbfdfd);border:1px solid #2bcbb099;box-shadow:inset 0 1px 0 rgba(18,84,80,0.02),inset 0 -6px 10px rgba(18,84,80,0.05),0 3px 10px rgba(18,84,80,0.05)}
.hl-coin i{display:block;flex:none;width:34px;height:34px;margin:-4px 0 -4px -6px;filter:drop-shadow(0 2px 3px rgba(18,84,80,0.07)) drop-shadow(0 0 6px rgba(18,84,80,0.04))}
.hl-coin.is-gem i{filter:drop-shadow(0 2px 3px rgba(18,84,80,0.07)) drop-shadow(0 0 7px rgba(18,84,80,0.06))}
.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:#121212;text-shadow:0 1px 3px rgba(18,84,80,0.09)}
.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 #0c4339aa;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 38% 30%,#0b3f36,#20b49b 45%,#84e9d9);box-shadow:inset 0 -2px 3px rgba(18,84,80,0.06),0 0 8px rgba(18,84,80,0.04),0 2px 4px rgba(18,84,80,0.06);transition:transform .2s,box-shadow .2s}
.hl-plus svg{width:15px;height:15px;fill:none;stroke:#e7fbf8;stroke-width:2.6;stroke-linecap:round}
.hl-plus:hover{transform:scale(1.12);box-shadow:inset 0 -2px 3px rgba(18,84,80,0.06),0 0 14px rgba(18,84,80,0.07),0 2px 4px rgba(18,84,80,0.06)}
.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 #2bcbb099;border-radius:999px;
  background:linear-gradient(#f1f9f8,#fbfdfd);box-shadow:inset 0 1px 0 rgba(18,84,80,0.02),inset 0 -6px 10px rgba(18,84,80,0.05),0 3px 10px rgba(18,84,80,0.05);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:#157867;background:linear-gradient(#ebf7f5,#f9fdfd);box-shadow:inset 0 1px 0 rgba(18,84,80,0.02),inset 0 -6px 10px rgba(18,84,80,0.05),0 0 12px rgba(18,84,80,0.03),0 3px 10px rgba(18,84,80,0.05)}
.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 rgba(18,84,80,0.04)}
.hl .hl-back svg{width:17px;height:17px}
.hl:is(.hl-site,.hl-ibtn){width:38px;margin:0;color:#175d51}
.hl:is(.hl-site,.hl-ibtn):hover,.hl .hl-site[aria-pressed=true]{color:#0b3c34}
.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(#f1f9f8,#fbfdfd) padding-box,linear-gradient(90deg,#2bcbb000,#2bcbb08c 30%,#2bcbb08c 70%,#2bcbb000) border-box;
  box-shadow:inset 0 1px 0 rgba(18,84,80,0.01),inset 0 -6px 10px rgba(18,84,80,0.05)}
.hl:is(.hl-back,.hl-site,.hl-ibtn,.hl-me-btn):hover,.hl .hl-site[aria-pressed=true]{
  background:linear-gradient(#ebf7f5,#f9fdfd) padding-box,linear-gradient(90deg,#15786700,#157867d9 30%,#157867d9 70%,#15786700) border-box;
  box-shadow:inset 0 1px 0 rgba(18,84,80,0.02),inset 0 -6px 10px rgba(18,84,80,0.05),0 0 12px rgba(18,84,80,0.02)}
/* 11-01 用户: 声音 / 菜单这两个圆按钮不要边框线, 只留深色圆底 */
.hl:is(.hl-site,.hl-ibtn),.hl :is(.hl-site,.hl-ibtn):hover,.hl .hl-site[aria-pressed=true]{background:linear-gradient(#f1f9f8,#fbfdfd) padding-box}
.hl:is(.hl-site,.hl-ibtn):hover,.hl .hl-site[aria-pressed=true]{background:linear-gradient(#ebf7f5,#f9fdfd) 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 rgba(18,84,80,0.01)}
.hl:is(.hl-back,.hl-me-btn),.hl .hl-coin{position:relative;border-color:transparent;background:linear-gradient(#f4f5f5a6,#fbfbfb8c) 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,#2bcbb000,#2bcbb04d 30%,#2bcbb04d 70%,#2bcbb000); /* 11-01 用户: 再淡一点(55% → 30%) */
  -webkit-mask:linear-gradient(#ffffff 0 0) content-box,linear-gradient(#ffffff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#ffffff 0 0) content-box exclude,linear-gradient(#ffffff 0 0)}
.hl:is(.hl-back,.hl-me-btn):hover::after{background:linear-gradient(90deg,#15786700,#15786799 30%,#15786799 70%,#15786700)}
.hl:is(.hl-back,.hl-me-btn){position:relative}
.hl:is(.hl-back,.hl-me-btn):hover{background:linear-gradient(#edefefb3,#f8f9f9a0) border-box;box-shadow:inset 0 1px 0 rgba(18,84,80,0.01),0 0 14px rgba(18,84,80,0.02)}
.hl:is(.hl-site,.hl-ibtn){background:#f7f8f88c padding-box}
.hl:is(.hl-site,.hl-ibtn):hover,.hl .hl-site[aria-pressed=true]{background:#edefefb3 padding-box;box-shadow:inset 0 1px 0 rgba(18,84,80,0.01),0 0 14px rgba(18,84,80,0.02)}
/* 标题: 中文大字和左右控件同一条中线, 上面的小字 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(#f1faf8,#f8fdfc);border:1px solid #20b69d55;box-shadow:0 18px 40px rgba(18,84,80,0.07),inset 0 1px 0 rgba(18,84,80,0.01)}
.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:#20b69d1f;color:#0e4d42;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%,#ffffff66,#ffffffcc);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,#20b69d1c,transparent 60%),linear-gradient(#f1faf8,#f8fdfc 60%,#fafefe);
  box-shadow:0 0 0 1px rgba(18,84,80,0.04),0 0 0 6px rgba(18,84,80,0.09),0 0 0 7px rgba(18,84,80,0.02),0 30px 80px rgba(18,84,80,0.08),inset 0 1px 0 rgba(18,84,80,0.02);scrollbar-width:thin;scrollbar-color:#20b69d44 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(#f1faf8 70%,#f1faf800)}
.hl-wd-title{margin:0;font:800 22px/1.15 "Noto Serif",Cambria,serif;color:#0e4d42;text-shadow:0 2px 8px rgba(18,84,80,0.09)}
.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 #20b69d55;border-radius:50%;background:#ffffff66;color:var(--hl-ink);font-size:22px;line-height:1;cursor:pointer;transition:background .2s,transform .2s}
.hl-wd-x:hover{background:#20b69d33;transform:rotate(90deg)}
.hl-wd-tabs{grid-column:1/-1;display:flex;gap:4px;padding:4px;border-radius:12px;background:#ffffff88;box-shadow:inset 0 0 0 1px rgba(18,84,80,0.02)}
.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(#157867,#62dac6);color:#f1faf8;box-shadow:0 2px 10px rgba(18,84,80,0.03)}
.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,#20b69d2e,transparent 60%),linear-gradient(160deg,#ebf8f6,#f6fcfb);box-shadow:inset 0 0 0 1px rgba(18,84,80,0.02),0 8px 20px rgba(18,84,80,0.05)}
.hl-wd-card.is-gem{background:radial-gradient(circle at 100% 0,#167d7a2e,transparent 60%),linear-gradient(160deg,#eef4f5,#f6fafa);box-shadow:inset 0 0 0 1px rgba(18,84,80,0.02),0 8px 20px rgba(18,84,80,0.05)}
.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:#0e4d42;font-variant-numeric:tabular-nums;text-shadow:0 2px 8px rgba(18,84,80,0.09)}
.hl-wd-card.is-gem b{color:#093332}
.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%,#0e4e43,#62dac6);box-shadow:0 0 14px rgba(18,84,80,0.04),inset 0 -2px 3px rgba(18,84,80,0.05)}
.hl-wd-coin svg{width:20px;height:20px;fill:#d7f8f2}
.is-gem .hl-wd-coin{background:radial-gradient(circle at 35% 30%,#093332,#6cdbd7);box-shadow:0 0 14px rgba(18,84,80,0.04),inset 0 -2px 3px rgba(18,84,80,0.05);color:#072524;font-size:20px;line-height:1}
.hl-wd-mini{margin-top:6px;padding:6px 14px;border:1px solid currentColor;border-radius:999px;background:#ffffff55;color:var(--hl-gold);font:700 12px/1 system-ui,sans-serif;cursor:pointer;transition:background .2s}
.is-gem .hl-wd-mini{color:#0f5553}
.hl-wd-mini:hover{background:#12121214}
.hl-wd-note{margin:12px 2px 0;font-size:11.5px;line-height:1.55;color:#649990}
.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 rgba(18,84,80,0.01)}
.hl-wd-logs li{display:grid;grid-template-columns:1fr auto 76px;align-items:center;gap:10px;padding:10px 14px;background:#ffffff44}
.hl-wd-logs li:nth-child(even){background:#ffffff22}
.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:#649990;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:#208885}.hl-wd-logs .is-minus{color:#126966}
.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:#0e4d42}
.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:#ffffff55;box-shadow:inset 0 0 0 1px rgba(18,84,80,0.01);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:#12121210;color:#649990}
.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:#20b69d14}
.hl-wd-ladder .is-done i{background:radial-gradient(circle at 35% 30%,#0e4e43,#62dac6);color:#def9f5}
.hl-wd-ladder .is-now{background:linear-gradient(160deg,#e5f8f5,#f3fcfa);box-shadow:inset 0 0 0 1.5px var(--hl-gold),0 0 18px rgba(18,84,80,0.03)}
.hl-wd-ladder .is-now i{background:radial-gradient(circle at 35% 30%,#0b3c34,#20b69d);color:#def9f5;animation:hl-pulse 1.8s ease-in-out infinite}
.hl-wd-month{margin-top:16px;padding:14px;border-radius:14px;background:#ffffff44;box-shadow:inset 0 0 0 1px rgba(18,84,80,0.01)}
.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:#32675e}
.hl-wd-cal .is-w{aspect-ratio:auto;font-size:10.5px;color:#649990}
.hl-wd-cal .is-got{background:linear-gradient(#157867,#62dac6);color:#f1faf8;font-weight:800}
.hl-wd-cal .is-today{box-shadow:inset 0 0 0 1.5px rgba(18,84,80,0.09)}
.hl .hl-wd-go{display:block;width:100%;margin-top:16px;padding:13px;border:0;border-radius:12px;background:linear-gradient(#157867,#62dac6);color:#f1faf8;font:800 15px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(18,84,80,0.02),inset 0 1px 0 rgba(18,84,80,0.04);transition:filter .2s,transform .2s}
.hl-wd-go:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.hl-wd-go:disabled{background:#ebf6f4;color:#649990;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%,#e4f3f1,#f7fcfb) padding-box,conic-gradient(from 200deg,#0b3f36,#66e2cd,#157969,#c1f4ec,#0b3f36) border-box;box-shadow:0 0 0 1px rgba(18,84,80,0.06),0 0 14px rgba(18,84,80,0.04);transition:box-shadow .2s}
.hl-ava svg{width:38px;height:44px}
.hl-me-btn:hover .hl-ava{box-shadow:0 0 0 1px rgba(18,84,80,0.06),0 0 22px rgba(18,84,80,0.07)}
.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,#fbfdfdf2,#fbfdfdb3 75%,transparent);scrollbar-width:thin;scrollbar-color:#20b69d44 transparent}
.hl-game{position:relative;display:flex;align-items:center;flex:none;gap:10px;padding:7px 10px 7px 8px;border-radius:10px;color:#18423b!important;transition:background .2s,color .2s}
.hl-game:hover{background:#1212120a}
.hl-game[aria-current]{background:linear-gradient(90deg,#20b69d26,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:#ebfafa;box-shadow:inset 0 0 0 1px rgba(18,84,80,0.02)}
.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:#26cfc9;box-shadow:0 0 6px rgba(18,84,80,0.09)}

/* ---------- 房间: 墙 + 透视地毯, 颜色跟档位 ---------- */
.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(#ffffff00 calc(100% - 14px),#f7fcfb calc(100% - 14px),color-mix(in srgb,var(--z-acc) 70%,#ffffff) calc(100% - 11px) calc(100% - 9px),#f9fdfd calc(100% - 9px)), /* 窗台: 深木 + 一道金线 */
    radial-gradient(ellipse 90px 70% at 50% 100%,color-mix(in srgb,#198f7b 30%,transparent),transparent) 0 0/360px 100%, /* 窗下暖光(落地灯) */
    repeating-linear-gradient(90deg,#f6fbfb 0 7px,color-mix(in srgb,var(--z-acc) 45%,#f1faf9) 7px 8px,transparent 8px 172px,#f6fbfb 172px 180px), /* 窗框竖梃 */
    linear-gradient(#ffffff00 26%,#f6fbfbcc 26% calc(26% + 4px),#ffffff00 calc(26% + 4px)), /* 上方横档 */
    linear-gradient(115deg,#ffffff00 30%,#1212120d 42%,#ffffff00 52%,#12121208 70%,#ffffff00 78%), /* 玻璃反光 */
    linear-gradient(color-mix(in srgb,var(--z-acc) 10%,transparent),transparent),
    var(--hl-city) center bottom/auto 140% repeat-x #f6fafa /* 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,#ffffff00 3px 14px,color-mix(in srgb,var(--z-dot) 30%,transparent) 14px 15px,#ffffff00 15px), /* 地毯边: 金色滚边 */
    radial-gradient(circle,color-mix(in srgb,var(--z-dot) 45%,transparent) 0 3px,#ffffff00 4px) 0 0/120px 120px,
    radial-gradient(circle,#ffffff00 0 19px,color-mix(in srgb,var(--z-dot) 24%,transparent) 20px 22px,#ffffff00 23px 34px,color-mix(in srgb,var(--z-dot) 10%,transparent) 35px 36px,#ffffff00 37px) 0 0/120px 120px,
    linear-gradient(45deg,#ffffff00 calc(50% - 1px),color-mix(in srgb,var(--z-dot) 14%,transparent) calc(50% - 1px) calc(50% + 1px),#ffffff00 calc(50% + 1px)) 60px 60px/120px 120px,
    linear-gradient(-45deg,#ffffff00 calc(50% - 1px),color-mix(in srgb,var(--z-dot) 14%,transparent) calc(50% - 1px) calc(50% + 1px),#ffffff00 calc(50% + 1px)) 60px 60px/120px 120px,
    radial-gradient(ellipse 60% 40% at 50% 10%,color-mix(in srgb,#126558 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 rgba(18,84,80,0.06)}
.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%,#ffffffaa)} /* 四周压暗, 视线集中到中间 */

/* 房间顶部: 游戏名 + 在线 + 两个下拉 + 快速入座 —— 都不加框, 字和光直接落在墙上 */
.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(#0b3c34,var(--z-acc) 55%,#8be2d3);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(18,84,80,0.09))}
.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:#0b3c34!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 rgba(18,84,80,0.09)}
.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,#f1faf8f0,#f9fdfcf2);box-shadow:0 18px 40px rgba(18,84,80,0.07),0 0 0 1px rgba(18,84,80,0.01),inset 0 1px rgba(18,84,80,0.01);-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:#f1faf8;box-shadow:-1px -1px 0 rgba(18,84,80,0.01)}
.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:#1212120f}
.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:#12121212;font-style:normal;font-size:15px;color:var(--hl-gold)}
.hl-dd-tier-0 i{background:linear-gradient(#176663,#98e0dd);color:#f0fbfb}
.hl-dd-tier-1 i{background:linear-gradient(#147263,#6ce5d1);color:#eefcfa}
.hl-dd-tier-2 i{background:linear-gradient(#34cbc6,#c5f5f3);color:#072a29;box-shadow:0 0 12px rgba(18,84,80,0.05)}
.hl-dd-state-open i{color:#1b9692}.hl-dd-state-busy i{color:#14726f}
.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:#1b9692;white-space:nowrap}
.hl-dd-opt.is-locked em{color:#0e4e4c}
.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:#20b69d44 transparent;-webkit-mask-image:linear-gradient(transparent,#ffffff 22px);mask-image:linear-gradient(transparent,#ffffff 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 rgba(18,84,80,0.09)}
.hl-state{padding:2px 9px;border-radius:999px;background:#ffffffaa;border:1px solid #1212121a;white-space:nowrap}
.hl-table:not(.is-busy) .hl-state{color:#1b9692;border-color:#26cfc955}
.hl-table.is-busy .hl-state{background:#98edea;border-color:#14726f55}
.hl-table.is-busy .hl-state::before{content:"● ";color:#0a3a39;animation:hl-blink 1.4s infinite}
.hl-table.is-flash .hl-state{background:var(--hl-gold);color:#f1faf8}
.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%,#1472632e,transparent 70%)}
.hl-table.is-busy .hl-lamp{background:radial-gradient(ellipse 50% 45% at 50% 58%,#14726344,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%,#a5e4e2,#e5faf9 72%);box-shadow:0 0 0 7px rgba(18,84,80,0.09),0 0 0 9px rgba(18,84,80,0.03),0 16px 22px rgba(18,84,80,0.07),inset 0 0 22px rgba(18,84,80,0.06)}
.hl-table.is-flash .hl-felt{box-shadow:0 0 0 7px rgba(18,84,80,0.09),0 0 0 9px var(--hl-gold),0 0 30px 6px rgba(18,84,80,0.05),inset 0 0 22px rgba(18,84,80,0.06)}
.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:#187c6cb0}
.hl-felt-stake b{font:700 13px/1 "Noto Serif",Cambria,"Noto Serif SC",serif;background:linear-gradient(#09322b,#20b69d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 1px rgba(18,84,80,0.05))}
.hl-hand{position:absolute;width:13px;height:18px;transform:translate(-50%,-50%);border-radius:2px;background:linear-gradient(135deg,#9feae7,#def9f8);border:1px solid #0e3831bb;box-shadow:7px 1px 0 -1px rgba(18,84,80,0.09),7px 1px 0 0 rgba(18,84,80,0.06)}
.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,#0d312b 0 5.5px,#38746a 5.5px 6.5px);border:0;box-shadow:0 2px 0 rgba(18,84,80,0.09),0 3px 2px rgba(18,84,80,0.05)}
[data-kind=strip] .hl-hand{width:7px;height:20px;border-radius:2px;background:#0e3f37;border:1px solid #c6f1ef88;box-shadow:5px 1px 0 -1px rgba(18,84,80,0.09),5px 1px 0 0 rgba(18,84,80,0.05),10px 0 0 -1px rgba(18,84,80,0.09),10px 0 0 0 rgba(18,84,80,0.05)}

/* ---------- 座位: 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:#ffffffbb;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(#157867,#62dac6);color:#f1faf8;font:800 10px/1.5 system-ui,sans-serif;font-style:normal;box-shadow:0 1px 3px rgba(18,84,80,0.06)}
.hl-bust{width:44px;height:50px;filter:drop-shadow(0 3px 3px rgba(18,84,80,0.05))}
.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(#cef2ec,#ebfbf8);border:2px solid #aae4db;box-shadow:0 4px 8px rgba(18,84,80,0.05)}
.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:#f7fcfb80;box-shadow:0 0 12px rgba(18,84,80,0.03)}
.hl-table.is-open{cursor:pointer}
.hl-table.is-open:hover .hl-felt{box-shadow:0 0 0 7px rgba(18,84,80,0.09),0 0 0 9px var(--hl-gold),0 16px 22px rgba(18,84,80,0.07),inset 0 0 22px rgba(18,84,80,0.06)}
.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:#f7fcfbe6;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:#f1faf8;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:#f1faf8;border-style:solid}
.is-empty a:hover .hl-sitlbl b,.hl-table.is-open:hover .hl-sitlbl b{background:#f1faf8;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,#ffffff88,transparent),repeating-linear-gradient(90deg,#e1faf9 0 16px,#c3f4f3 16px 28px,#e7fbfa 28px 42px);
  box-shadow:inset 0 -26px 0 -12px rgba(18,84,80,0.09),inset 0 -34px 18px rgba(18,84,80,0.05),0 0 30px rgba(18,84,80,0.07)}
.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:#f9fcfce6;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%,#0e4e43,#62dac6);color:#ebfaf8;box-shadow:0 6px 18px rgba(18,84,80,0.06),0 0 0 0 rgba(18,84,80,0.05);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:#f9fcfcf0;box-shadow:0 0 0 1px rgba(18,84,80,0.04),0 6px 16px rgba(18,84,80,0.06);
  color:var(--hl-gold,#20b69d);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:#f9fcfc;box-shadow:1px -1px 0 rgba(18,84,80,0.04)}
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%)}}

/* ---------- 底部动态 + 入座过场 ---------- */
/* 11-08 用户: 底栏融进大厅(不浮胶囊、不描边): 场景底部一层地面阴影, 顶上居中渐隐金线(同标题下那道), 一点光每 9 秒沿金线滑过;
   图标都是金色线描, 数字衬线体金色渐变字, 中间小菱形 = 列表选中 / 牌室小旗同一套语言 */
.hl-ticker{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;height:46px;padding:0 26px;pointer-events:none;
  background:linear-gradient(#ffffff00,#fbfefeb8 45%,#fdfefee6)}
.hl-ticker::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:linear-gradient(90deg,#18887600,#18887666 30%,#18887699 50%,#18887666 70%,#18887600)}
.hl-ticker::after{content:"";position:absolute;top:5px;left:0;width:90px;height:3px;border-radius:50%;background:radial-gradient(closest-side,#0a3831,#15786788 45%,#15786700);opacity:0;animation:hl-glide 9s ease-in-out 1.5s infinite}
@keyframes hl-glide{0%{transform:translateX(-10vw);opacity:0}8%{opacity:1}40%{opacity:1}48%,to{transform:translateX(105vw);opacity:0}}
.hl-feed{position:relative;display:flex;align-items:center;gap:14px;min-width:0;width:100%;padding-top:5px;font-size:13px}
.hl-online{flex:none;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-size:12px;letter-spacing:.04em;color:var(--hl-dim)}
.hl-online b{font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums;letter-spacing:.03em;
  color:transparent;background:linear-gradient(#09332c,#198f7b 60%,#73d9c8);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 2px rgba(18,84,80,0.07))}
.hl-online-ico{flex:none;width:19px;height:16px;fill:none;stroke:var(--z-acc);stroke-width:1.6;stroke-linecap:round;overflow:visible;filter:drop-shadow(0 0 4px rgba(18,84,80,0.03))}
.hl-online{position:relative}
.hl-online::before,.hl-online::after{content:"";position:absolute;left:15px;top:50%;margin-top:3px;width:5px;height:5px;border-radius:50%;background:#1fb0ab;box-shadow:0 0 6px rgba(18,84,80,0.09)}
.hl-online::before{animation:hl-ping 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes hl-ping{75%,to{transform:scale(2.8);opacity:0}}
.hl-feed-sep{flex:none;width:5px;height:5px;transform:rotate(45deg);background:var(--z-acc);box-shadow:0 0 8px rgba(18,84,80,0.05);opacity:.85}
.hl-ticker-i{flex:none;width:15px;height:15px;margin-right:-5px;fill:none;stroke:var(--z-acc);stroke-width:1.7;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(18,84,80,0.03))}
.hl-ticker p{flex:1;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#163f38;letter-spacing:.01em;text-shadow:0 1px 3px rgba(18,84,80,0.09)}
.hl-ticker p.is-in{animation:hl-tick .45s ease-out}
.hl-feed:has(p:empty) :is(.hl-feed-sep,.hl-ticker-i){display:none} /* 还没有消息: 只留在线人数 */
@media (max-width:560px){.hl-online-l{display:none}.hl-feed{gap:11px}.hl-ticker{padding:0 14px}}
.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%,#ffffffdd 75%);animation:hl-fade .5s both}
.hl-enter[hidden]{display:none}
.hl-enter p{margin:0;padding:10px 26px;border-radius:999px;background:#ffffffcc;border:1px solid #20b69d88;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 rgba(18,84,80,0.05)}70%,100%{box-shadow:0 0 0 12px rgba(18,84,80,0.00)}}
@keyframes hl-pulse{50%{box-shadow:0 0 0 5px rgba(18,84,80,0.02)}}
@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:#20b69d;color:#f1faf8;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:#f1faf8;background:none!important;filter:drop-shadow(0 1px 2px rgba(18,84,80,0.06))}
.hl-tierbadge::before{content:"";align-self:stretch;width:2px;margin:-3px 0 -5px;border-radius:1px;background:#276056} /* 小旗子: 左边旗杆 + 燕尾旗面(::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:#98e0dd;--tc2:#176663}
.hl-tier1{--tc:#6ce5d1;--tc2:#147263}
.hl-tier2{--tc:#c5f5f3;--tc2:#126461}
.hl-tier0 .hl-tierbadge{--flag:linear-gradient(#176663,#98e0dd)}
.hl-tier1 .hl-tierbadge{--flag:linear-gradient(#147263,#6ce5d1);color:#eefcfa}
.hl-tier2 .hl-tierbadge{--flag:linear-gradient(#34cbc6,#c5f5f3);color:#072a29}

.hl-tier1 .hl-felt{box-shadow:0 0 0 7px rgba(18,84,80,0.09),0 0 0 9px rgba(18,84,80,0.06),0 16px 22px rgba(18,84,80,0.07),inset 0 0 22px rgba(18,84,80,0.06)}
.hl-tier2 .hl-felt{background:radial-gradient(ellipse at 50% 35%,#c8f3f2,#effcfc 72%);box-shadow:0 0 0 7px rgba(18,84,80,0.09),0 0 0 9px rgba(18,84,80,0.07),0 0 26px 4px rgba(18,84,80,0.03),0 16px 22px rgba(18,84,80,0.07),inset 0 0 22px rgba(18,84,80,0.06)}


@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:-46px}
}

/* 桌子底下一行: 筹码范围(小字标签 + 衬线数字); 底注在台呢上(.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:#649990}
.hl-cost b{font:700 14px/1 "Noto Serif",Cambria,"Noto Serif SC",serif;letter-spacing:.02em;background:linear-gradient(#09322b,#20b69d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 2px rgba(18,84,80,0.09))}
.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%,#0e4e43,#62dac6);box-shadow:0 0 6px rgba(18,84,80,0.04)}
.hl-star svg{width:9px;height:9px;fill:#d7f8f2}


/* ========== 11-02 照 temp/15.png 改版(旧版 backup/hall-20261102-v1/): 翅膀徽章标题 + 酒红地毯 + 金框游戏列 + 金圈牌桌。
   没做参考图的顶部导航(用户不要)和没有功能的按钮(创建房间 / 搜索 / 翻页 / 刷新)。筛选仍是下拉(10-31 用户不要分区按钮) ========== */
.hl{--z-c1:#dbf8f7;--z-c2:#e5faf9}
/* 徽章: 从屏幕顶垂下来, 压在窗景上; 宽屏头像旁不放昵称, 给徽章让位 */
.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 rgba(18,84,80,0.05))}
.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:#3daa98}
.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(#0a372f,#178270 50%,#7de4d3);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 1px rgba(18,84,80,0.09))}
.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(#fcfdfdf2,#f6fbfbbf 70%,#f6fbfb00)} /* 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,#18887600,#18887699 50%,#18887600)}}
@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(#f6fbfaf2,#fbfdfdf2);box-shadow:inset 0 0 0 1px rgba(18,84,80,0.04),0 8px 26px rgba(18,84,80,0.07)}
  .hl-game{padding:6px 8px;border-radius:8px;background:linear-gradient(#f1f6f6,#f8fbfb);box-shadow:inset 0 0 0 1px rgba(18,84,80,0.02)}
  .hl-game:hover{background:linear-gradient(#ebf3f3,#f6fafa);box-shadow:inset 0 0 0 1px rgba(18,84,80,0.05)}
  /* 11-02 用户: 当前游戏只显示一处 —— 就是左边选中的这张牌, 放大成金字招牌(原来房间左上的游戏名 / 在线人数去掉, 标题留给读屏) */
  .hl-game[aria-current]{gap:10px;padding:12px 10px 12px 8px;background:radial-gradient(ellipse 90% 120% at 0 50%,#20b69d38,transparent 70%),linear-gradient(#ebf8f8,#f7fcfc);color:#09322b!important;box-shadow:inset 0 0 0 1.5px rgba(18,84,80,0.09),inset 0 0 0 3px rgba(18,84,80,0.09),inset 0 0 0 4px rgba(18,84,80,0.04),0 0 16px rgba(18,84,80,0.04)}
  .hl-game[aria-current]:hover{background:radial-gradient(ellipse 90% 120% at 0 50%,#20b69d38,transparent 70%),linear-gradient(#ebf8f8,#f7fcfc);box-shadow:inset 0 0 0 1.5px rgba(18,84,80,0.09),inset 0 0 0 3px rgba(18,84,80,0.09),inset 0 0 0 4px rgba(18,84,80,0.04),0 0 16px rgba(18,84,80,0.04)}
  .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:#188876;box-shadow:0 0 8px rgba(18,84,80,0.09)}
  .hl-game[aria-current] .hl-game-text small{margin-top:3px;color:#0b4138}
  /* 房间头: 只有右边一组 牌室 / 牌桌 / 快速入座, 浮在窗景上 */
  .hl-room{--wall:164px}
  .hl-bar{display:flex;justify-content:flex-end;padding:4px 104px 4px 0;background:linear-gradient(90deg,#ffffff00 40%,#ffffff73 72%,#ffffff73 88%,#ffffff00)}
  .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,#ffffff99,transparent),repeating-linear-gradient(90deg,#e3faf9 0 12px,#b5f1ef 12px 22px,#e7fbfa 22px 32px);filter:drop-shadow(0 4px 8px rgba(18,84,80,0.07))}
  .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:#2d7468}
.hl .hl-dd-btn b{font-size:16px;color:#0a372f}
.hl .hl-dd-btn svg{align-self:center}
.hl .hl-dd-btn:hover b,.hl .hl-dd.is-open .hl-dd-btn b{color:#116254;text-shadow:0 0 12px rgba(18,84,80,0.07)}
.hl .hl-quick{margin-left:6px;padding:6px 6px 8px}
/* 牌桌: 深木边 + 金圈; 牌室标记改成胶囊 */
.hl-table .hl-felt{box-shadow:0 0 0 6px rgba(18,84,80,0.09),0 0 0 8px rgba(18,84,80,0.09),0 0 0 10px rgba(18,84,80,0.09),0 16px 22px rgba(18,84,80,0.07),inset 0 0 22px rgba(18,84,80,0.06)}
.hl-table.hl-tier1 .hl-felt{box-shadow:0 0 0 6px rgba(18,84,80,0.09),0 0 0 8px rgba(18,84,80,0.09),0 0 0 10px rgba(18,84,80,0.09),0 16px 22px rgba(18,84,80,0.07),inset 0 0 22px rgba(18,84,80,0.06)}
.hl-table.hl-tier2 .hl-felt{box-shadow:0 0 0 6px rgba(18,84,80,0.09),0 0 0 8px rgba(18,84,80,0.09),0 0 0 10px rgba(18,84,80,0.09),0 0 26px 4px rgba(18,84,80,0.03),0 16px 22px rgba(18,84,80,0.07),inset 0 0 22px rgba(18,84,80,0.06)}
.hl-table.is-open:hover .hl-felt,.hl-table.is-flash .hl-felt{box-shadow:0 0 0 6px rgba(18,84,80,0.09),0 0 0 9px rgba(18,84,80,0.09),0 0 30px 8px rgba(18,84,80,0.05),inset 0 0 22px rgba(18,84,80,0.06)}
.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 rgba(18,84,80,0.03),0 1px 4px rgba(18,84,80,0.06)}
.hl-tierbadge::before,.hl-tierbadge::after{display:none}
@media (max-width:820px){.hl .hl-crest{display:none}}
.hl .hl-plaque{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 rgba(18,84,80,0.07))}
.hl .hl-game[aria-current] .hl-game-art{filter:drop-shadow(0 2px 3px rgba(18,84,80,0.07)) drop-shadow(0 0 7px rgba(18,84,80,0.05))}
/* 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(#f6fbfa 80%,#f6fbfa00)}
.hl .hl-cats button{flex:1;padding:6px 2px 9px;border:0;background:none;color:#4d867d;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:#0e4d42}
.hl .hl-cats button:focus-visible{outline:2px solid #121212;outline-offset:-2px}
.hl .hl-cats button[aria-pressed=true]{color:#178270}
.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,#18887600,#188876,#18887600);box-shadow:0 0 8px rgba(18,84,80,0.05)}
@media (max-width:820px){.hl-cats{position:sticky;left:-12px;top:auto;margin:0;padding:0 8px 0 0;background:#f8fbfb;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:#20b69d44 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(#0a372f,#178270 55%,#7de4d3);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 3px rgba(18,84,80,0.09))}
.hl-roster-head p{margin:0;font-size:13.5px;color:#163f38;text-shadow:0 1px 3px rgba(18,84,80,0.09)}
.hl-fee{width:min(420px,100%);margin:0 auto 18px;border-collapse:collapse;background:linear-gradient(90deg,#ffffff00,#ffffffaa 18%,#ffffffaa 82%,#ffffff00);text-align:center}
.hl-fee th{padding:8px 10px 4px;font-size:12px;font-weight:400;color:#397b70}
.hl-fee td{padding:2px 10px 9px;font:700 15px/1.3 "Noto Serif SC","Noto Serif",Cambria,serif;color:#0e3831;font-variant-numeric:tabular-nums}
.hl-fee td.is-total{color:#178270}
.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:#0e3831!important}
.hl-r-card b{font:700 14px/1.3 "Noto Serif SC","Noto Serif",Cambria,serif;text-shadow:0 1px 3px rgba(18,84,80,0.09)}
.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%,#ebf8f8,#f9fdfd);box-shadow:inset 0 0 0 1px rgba(18,84,80,0.06),0 8px 20px rgba(18,84,80,0.07);transition:transform .2s,box-shadow .2s;font:900 clamp(48px,6vw,84px)/1 "Noto Serif",Georgia,serif;color:#178270}
.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 rgba(18,84,80,0.09),0 0 22px rgba(18,84,80,0.05),0 12px 26px rgba(18,84,80,0.07)}
.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:#102924;color:#7dddda;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:#edf4f3}
@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:#178270;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,#fcfdfdf7,#f9fcfcec 62%,#f9fcfca8);box-shadow:none;border-right:1px solid;border-image:linear-gradient(#2bcbb000,#2bcbb066 18%,#2bcbb066 82%,#2bcbb000) 1}
  .hl-cats{margin:-8px -14px 6px -12px;padding:10px 12px 0;background:linear-gradient(#fbfdfdf2 75%,#fbfdfd00)}
  .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,#2bcbb000,#2bcbb03d 25%,#2bcbb03d 75%,#2bcbb000)}
  .hl-game:hover{background:radial-gradient(ellipse 80% 90% at 30% 50%,#20b69d1f,#20b69d00)}
  .hl-game:hover b{color:#0e4d42}
  /* 11-08 用户: 无边框, 但要醒目酷炫 —— 不描任何边, 靠一块边界清楚的圆角金色光块自己亮出来:
     左边一颗亮的光源(白金) → 琥珀金 → 往右淡进列表; 上半一道清楚的高光(像抛光面板); 左侧一根亮光柱; 名字白金色带一点金光; 每 4 秒一道强流光 */
  .hl .hl-game[aria-current],.hl .hl-game[aria-current]:hover{padding:9px 12px;overflow:hidden;border-radius:12px;color:#09302a!important;box-shadow:none;
    background:
      linear-gradient(180deg,#09322b38,#09322b12 48%,#09322b00 50%),
      radial-gradient(ellipse 70px 120% at 0 50%,#0b3c34b3,#12655859 45%,#12655800 100%),
      linear-gradient(90deg,#36d8bde6,#91ebdccc 32%,#dbf8f380 68%,#f2fcfa00)}
  .hl .hl-game[aria-current]::before{display:block;content:"";position:absolute;left:4px;top:50%;bottom:auto;width:3px;height:24px;margin-top:-12px;border-radius:3px;transform:none;
    background:linear-gradient(#121212,#116254);box-shadow:0 0 6px rgba(18,84,80,0.09),0 0 12px rgba(18,84,80,0.05)}
  .hl .hl-game[aria-current]::after{display:block;content:"";position:absolute;top:0;bottom:0;left:0;right:auto;width:38%;height:auto;pointer-events:none;
    background:linear-gradient(105deg,#09332c00,#09332c66 50%,#09332c00);transform:translateX(-130%);animation:hl-sheen 1.1s ease-in-out .15s both} /* 11-08 用户: 流光只播一次(每次选中时扫一下) */
  .hl .hl-game[aria-current] .hl-game-text b{color:#072621;text-shadow:0 1px 1px rgba(18,84,80,0.09),0 0 8px rgba(18,84,80,0.04)}
  .hl .hl-game-art{transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s}
  .hl .hl-game[aria-current] .hl-game-art{transform:scale(1.12);filter:drop-shadow(0 2px 2px rgba(18,84,80,0.07)) drop-shadow(0 0 6px rgba(18,84,80,0.07))}
  .hl .hl-game[aria-current] .hl-game-text small{margin:0;color:#0a3a32}
}
@keyframes hl-sheen{from{transform:translateX(-130%)}to{transform:translateX(330%)}}
@media (prefers-reduced-motion:reduce){.hl-ticker::after,.hl-online::before{animation:none;display:none}.hl .hl-game[aria-current]::after{animation:none;display:none}.hl .hl-game-art{transition:none}}
.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:#e6fbfa;--tint2:#f4fdfd;--ban:#caf6f4;position:relative;display:block;aspect-ratio:16/10;container-type:inline-size;color:#0c443a!important;text-align:center;text-decoration:none!important;transition:transform .25s,filter .25s}
.hl-bt-lv2{--tint:#cbf6ef;--tint2:#edfcf9}
.hl-bt-lv3{--tint:#a9f0ed;--tint2:#e6fbfa}
.hl-bt::before{content:"";position:absolute;left:3%;right:3%;top:42%;bottom:-1%;background:radial-gradient(closest-side,#ffffffaa 62%,#ffffff66 82%,#ffffff00);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 #116254;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:#0c463c;text-shadow:0 1px 2px rgba(18,84,80,0.09);
  border-radius:999px 0 0 999px;background:linear-gradient(90deg,#f9fdfdf2,#f9fdfde6 62%,#ffffff00) padding-box,linear-gradient(90deg,#188876,#188876 58%,#18887600) 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%,#ffffff),var(--tint2));box-shadow:0 0 0 1px rgba(18,84,80,0.09),0 0 0 2.5px rgba(18,84,80,0.05),0 0 0 3.5px rgba(18,84,80,0.04),0 1cqw 2cqw rgba(18,84,80,0.05),inset 0 0 2.4cqw rgba(18,84,80,0.04)}
.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:#166759}
.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 rgba(18,84,80,0.05))}
.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(#09302a,#157767 62%,#62dac6);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 1px rgba(18,84,80,0.05))}
.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 #18887640;font:600 max(11px,2.3cqw)/1 "Noto Serif",Georgia,serif;font-variant-numeric:lining-nums tabular-nums;color:#0b3931}
.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%,#e9f4f4,#f9fdfd 72%);box-shadow:0 0 0 1px rgba(18,84,80,0.09),0 0 0 2.5px rgba(18,84,80,0.09),0 0 0 3.5px rgba(18,84,80,0.09),0 .6cqw 1.4cqw rgba(18,84,80,0.07),inset 0 0 1.2cqw rgba(18,84,80,0.06)}
.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:#edfcf9;background:linear-gradient(#0e4e43,#33d6bb);box-shadow:0 0 1.8cqw rgba(18,84,80,0.05),0 .6cqw 1.4cqw rgba(18,84,80,0.06);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 rgba(18,84,80,0.07))}
.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,#11625400 40%,#11625430 49%,#0a383166 50%,#11625430 51%,#11625400 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)}}

/* 11-03 用户: 对战房间卡(象棋 / 国际象棋 / 隔墙狙击 / 台球), 参考 temp/13~15.png: 酒红面板 + 金线, 蓝红 VS, 金色「进入房间」。旧版 backup/hall-20261103-duel/ */
.hl-floor.is-duel{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:20px}
.hl-floor.is-duel[data-layout=solo]{grid-template-columns:minmax(0,420px)}
.hl-duel{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;border-radius:6px;overflow:hidden;color:#0c443a!important;text-decoration:none!important;background:radial-gradient(ellipse 70% 80% at 50% 55%,#d0f4f2,transparent 75%),linear-gradient(#e2f8f8,#eefcfb);box-shadow:inset 0 0 0 1px rgba(18,84,80,0.09),inset 0 0 0 4px rgba(18,84,80,0.09),inset 0 0 0 5px rgba(18,84,80,0.02),0 10px 22px rgba(18,84,80,0.05);transition:transform .2s,box-shadow .2s,filter .2s}
.hl-duel::before,.hl-duel::after{content:"";position:absolute;bottom:10px;width:44px;height:24px;background:conic-gradient(#167e6d55 25%,transparent 0 50%,#167e6d55 0 75%,transparent 0) 0 0/12px 12px;pointer-events:none}
.hl-duel::before{left:14px;-webkit-mask-image:linear-gradient(90deg,#ffffff,transparent);mask-image:linear-gradient(90deg,#ffffff,transparent)}
.hl-duel::after{right:14px;-webkit-mask-image:linear-gradient(270deg,#ffffff,transparent);mask-image:linear-gradient(270deg,#ffffff,transparent)}
.hl-duel.is-open,a.hl-duel{cursor:pointer}
.hl-duel.is-open:hover,a.hl-duel:hover,a.hl-duel:focus-visible{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px rgba(18,84,80,0.09),inset 0 0 0 4px rgba(18,84,80,0.09),inset 0 0 0 5px rgba(18,84,80,0.04),0 0 22px rgba(18,84,80,0.04),0 14px 26px rgba(18,84,80,0.06)}
.hl-duel.is-busy,.hl-duel.is-full{filter:saturate(.75) brightness(.85)}
.hl-dc-top{display:flex;align-items:center;gap:10px;min-width:0}
.hl-dc-tier{flex:none;padding:0 12px;border-radius:999px;font:800 12px/24px system-ui,sans-serif;font-style:normal;color:#edfcfb;background:linear-gradient(#105956,#77d7d4);box-shadow:inset 0 0 0 1px rgba(18,84,80,0.04)}
.hl-tier1 .hl-dc-tier{color:#eefcfa;background:linear-gradient(#147263,#6ce5d1)}
.hl-tier2 .hl-dc-tier{color:#072a29;background:linear-gradient(#1a9591,#a6edea)}
.hl-tier3 .hl-dc-tier{color:#082b25;background:linear-gradient(#1da29d,#9cedeb)}
.hl-dc-name{flex:1;min-width:0;font:700 15px/1.3 "Noto Serif SC","Noto Serif",Cambria,serif;color:#0e4e43;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-dc-state{flex:none;max-width:48%;padding:0 11px;border:1px solid #26cfc9aa;border-radius:999px;font:700 12px/22px system-ui,sans-serif;color:#167c79;background:#f8fdfdcc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-duel.is-busy .hl-dc-state{color:#0c4240;border-color:#14726f99;background:#ebfbfacc}
.hl-duel.is-flash .hl-dc-state{color:#f1faf8;border-color:transparent;background:#157867}
a.hl-duel .hl-dc-state{color:#0e4e43;border-color:#167e6d88;background:#f6fcfccc}
.hl-dc-vs{flex:none;font:italic 900 36px/1 system-ui,sans-serif;letter-spacing:-.02em;color:#157565;background:linear-gradient(#0b3c34,#24cbaf 55%,#88eada);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 7px rgba(18,84,80,0.05))}
.hl-dc-go,.hl-table .hl-dc-go{position:relative;z-index:1;align-self:center;display:block;min-width:58%;max-width:100%;padding:8px 22px;border-radius:999px;text-align:center;font:800 15px/1.3 system-ui,sans-serif;color:#eefcfa!important;text-decoration:none!important;background:linear-gradient(#0f5449,#24cbaf 60%,#5ae2cb);box-shadow:inset 0 1px 0 rgba(18,84,80,0.05),0 3px 0 rgba(18,84,80,0.09),0 6px 12px rgba(18,84,80,0.04);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:filter .15s,transform .15s}
.hl-duel.is-open:hover .hl-dc-go,a.hl-duel:hover .hl-dc-go,.hl-dc-go:focus-visible{filter:brightness(1.1)}
.hl-dc-go:focus-visible,a.hl-duel:focus-visible{outline:2px solid #121212;outline-offset:2px}
.hl-dc-go.is-off{color:#27413d!important;background:linear-gradient(#c1b8b8,#e7e2e2);box-shadow:0 3px 0 rgba(18,84,80,0.09)}
@media (prefers-reduced-motion:reduce){.hl-duel,.hl-dc-go{transition:none}}

/* 11-03 用户第二版(temp/12.png): 对战大厅两排 —— 随机匹配(桌 + 棋子 + 问号) / 空桌(两张椅子, 点了头像坐上去)。3D 图 tools/bj-roster/render-duel.mjs */
.hl[data-duel-on] .hl-bar{display:none}
.hl-floor.is-duel{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1240px;width:100%;box-sizing:border-box;margin:0 auto;gap:14px 18px;padding-top:14px}
.hl-dc-row{grid-column:1/-1;margin:6px 0 -4px;font:700 14px/1.4 "Noto Serif SC","Noto Serif",Cambria,serif;color:#157867;text-shadow:0 1px 3px rgba(18,84,80,0.09)}
.hl-dc-coin{flex:none;display:inline-flex;align-items:center;gap:5px;padding:0 11px 0 6px;border:1px solid #167e6d;border-radius:999px;font:800 13px/24px system-ui,sans-serif;color:#0e4e43;background:#f6fcfccc}
.hl-dc-coin svg{width:17px;height:17px}
.hl-dc-scene{position:relative;display:flex;align-items:flex-end;justify-content:center;aspect-ratio:2/1;min-height:0;flex:none}
.hl-dc-scene img{display:block;user-select:none;-webkit-user-drag:none}
.hl-dc-scene>.hl-dc-vs{position:absolute;top:15%;left:50%;transform:translateX(-50%);z-index:2;font-size:clamp(24px,2.4vw,34px)}
.hl-dc-board{flex:none;width:50%;min-width:0;margin:0 -8%;z-index:1;pointer-events:none}
.hl-dc-board img{width:100%;height:auto;filter:drop-shadow(0 6px 8px rgba(18,84,80,0.04))}
.hl-dc-chair{position:relative;flex:none;width:33%;aspect-ratio:420/480;padding:0;border:0;background:none;color:inherit;font:inherit}
.hl-dc-chair img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 6px 7px rgba(18,84,80,0.04));transition:filter .15s}
button.hl-dc-chair{cursor:pointer}
.hl-table button.hl-dc-chair:is(:hover,:focus-visible) img{filter:drop-shadow(1.5px 0 0 rgba(18,84,80,0.09)) drop-shadow(-1.5px 0 0 rgba(18,84,80,0.09)) drop-shadow(0 1.5px 0 rgba(18,84,80,0.09)) drop-shadow(0 -1.5px 0 rgba(18,84,80,0.09)) drop-shadow(0 0 9px rgba(18,84,80,0.09))}
.hl-dc-chair:focus-visible{outline:none}
.hl-dc-sit{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);padding:3px 13px;border-radius:999px;font:800 13px/1.4 system-ui,sans-serif;color:#eefcfa;background:linear-gradient(#0f5449,#24cbaf);box-shadow:0 2px 6px rgba(18,84,80,0.06);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
button.hl-dc-chair:is(:hover,:focus-visible) .hl-dc-sit{opacity:1}
@media (hover:none){.hl-dc-sit{opacity:1}}
.hl-dc-who{position:absolute;left:50%;bottom:28%;width:56%;transform:translateX(-50%)}
.hl-dc-who .hl-bust{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 3px rgba(18,84,80,0.05))}
.hl-dc-chair.is-new .hl-dc-who{animation:hl-dc-sitdown .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes hl-dc-sitdown{from{opacity:0;transform:translate(-50%,-26px)}to{opacity:1;transform:translateX(-50%)}}
.hl-dc-nick{position:absolute;left:50%;bottom:0;max-width:100%;transform:translateX(-50%);padding:0 7px;border-radius:6px;background:#ffffffbb;font:600 11px/1.5 system-ui,sans-serif;color:#0c443a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-dc-chair.is-mine .hl-dc-nick{background:#20b69d;color:#f1faf8;font-weight:700}
.hl-dc-chair.is-mine img{filter:drop-shadow(1.5px 0 0 rgba(18,84,80,0.09)) drop-shadow(-1.5px 0 0 rgba(18,84,80,0.09)) drop-shadow(0 0 7px rgba(18,84,80,0.09))}
button.hl-dc-go{border:0;cursor:pointer}
.hl-table .hl-dc-go.is-leave{color:#072a24!important;background:linear-gradient(#30d0cb,#adedeb);box-shadow:inset 0 1px 0 rgba(18,84,80,0.03),0 3px 0 rgba(18,84,80,0.09),0 6px 12px rgba(18,84,80,0.04)}
.hl-dc-wait{cursor:default}
.hl-dc-wait::before,.hl-dc-wait::after{bottom:6px}
.hl-floor.is-duel .hl-duel{--sc:1}
.hl-floor.is-duel .hl-table.is-entering{--sc:1.12}
@media (prefers-reduced-motion:reduce){.hl-dc-chair.is-new .hl-dc-who{animation:none}.hl-dc-chair img,.hl-dc-sit{transition:none}}
@media (max-width:1180px){.hl-floor.is-duel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.hl-floor.is-duel{grid-template-columns:minmax(0,1fr)}}

/* 11-03 用户第三版(temp/21.png, 不要左上角游戏名): 第一排和台球一张 VS 场景图; 细金线单边框, 标题一条 */
.hl-duel{border-radius:12px;background:radial-gradient(ellipse 60% 70% at 50% 55%,#d2f5f4,transparent 75%),#e5faf9;box-shadow:inset 0 0 0 1px rgba(18,84,80,0.09),0 10px 22px rgba(18,84,80,0.05)}
.hl-duel.is-open:hover,a.hl-duel:hover,a.hl-duel:focus-visible{box-shadow:inset 0 0 0 1.5px rgba(18,84,80,0.09),0 0 22px rgba(18,84,80,0.04),0 14px 26px rgba(18,84,80,0.06)}
.hl-dc-tier{color:#edfcfb;background:linear-gradient(#167c78,#62ddd9)}
.hl-dc-name{padding-left:10px;border-left:1px solid #1b988366;font:600 13.5px/1.4 system-ui,"Noto Sans SC",sans-serif;color:#0b3b33}
.hl-dc-scene.is-vs{aspect-ratio:2.4/1;align-items:center}
.hl-dc-scene.is-vs img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(18,84,80,0.04))}
.hl-duel.is-open:hover .hl-dc-scene.is-vs img,a.hl-duel:hover .hl-dc-scene.is-vs img{filter:drop-shadow(0 0 10px rgba(18,84,80,0.04)) drop-shadow(0 6px 8px rgba(18,84,80,0.04))}
.hl-dc-scene.is-vs>.hl-dc-vs{top:50%;transform:translate(-50%,-50%);font-size:clamp(26px,2.9vw,42px)}
.hl-dc-go,.hl-table .hl-dc-go{min-width:44%;padding:7px 22px}

/* 11-03 用户第四版(temp/23.png): 空桌 = 金圆桌 + 桌上棋局 + 两张无扶手椅, VS 在桌子正上方, 地上一圈红光 */
.hl-dc-wait .hl-dc-scene{aspect-ratio:2.1/1;align-items:flex-end}
.hl-dc-wait .hl-dc-scene>.hl-dc-vs{top:-2%;font-size:clamp(22px,2.2vw,32px)}
.hl-dc-wait .hl-dc-board{width:56%;margin:0 -12%}
.hl-dc-wait .hl-dc-chair{width:34%;margin-bottom:1%}
.hl-dc-who{bottom:22%;width:58%}

/* 11-03 用户: 不写底注字样; 星币框两排都在右上, 等待状态在左边; VS 不许被裁: 渐变字只画在盒子里, 斜体会出界, 所以留内边距 */
.hl-dc-coin{margin-left:auto}
.hl-dc-wait .hl-dc-name{flex:0 1 auto}
.hl-dc-wait .hl-dc-state{max-width:none;min-width:0}
.hl-dc-vs{display:inline-block;padding:.14em .3em .14em .16em;line-height:1.1}
.hl-dc-scene.is-vs>.hl-dc-vs{font-size:clamp(22px,2.4vw,34px)}
.hl-dc-wait .hl-dc-scene>.hl-dc-vs{top:3%;font-size:clamp(20px,1.9vw,27px)}

/* ===== uwgame 手调: 三个牌室各自一套浅色(新手 薄荷 / 中级 暖沙 / 高级 淡紫), 盖住上面自动换色的结果 ===== */
.hl{--hl-gold:#0f8f7e;--hl-ink:#14332f;--hl-dim:#5c7b76;--z-acc:#0f8f7e;--z-wall:#e6f5f0;--z-wall2:#dcefe9;--z-c1:#cfeee5;--z-c2:#bfe6da;--z-dot:#0f8f7e;background:#f4faf8}
.hl[data-zone="1"]{--z-acc:#b07a1e;--z-wall:#f7f0e2;--z-wall2:#f1e7d3;--z-c1:#f0e2c4;--z-c2:#e8d6b0;--z-dot:#b07a1e}
.hl[data-zone="2"]{--z-acc:#7454c2;--z-wall:#f1ecfa;--z-wall2:#e9e1f7;--z-c1:#e2d7f5;--z-c2:#d5c6ef;--z-dot:#7454c2}
:is(.hl-back,.hl-site,.hl-me,.hl-plus,.hl-ibtn,.hl-dd-btn,.hl-quick,.hl-game):focus-visible{outline-color:#0f8f7e}
html.hl-site-open .hl::after{background:rgba(232,246,242,.7);backdrop-filter:blur(6px)}