.hl-account { display: flex; gap: 10px; }
.hl-avatar { flex: 0 0 58px; }
.hl-identity { flex: 1; text-align: left; }
.hl-identity strong, .hl-identity small { width: 100%; text-align: left; }
.hl-balance { display: flex; min-width: 0; gap: 7px; align-items: center; padding: 9px 11px; text-align: left; }
.hl-balance i { width: 20px; height: 20px; border: 5px dashed #c94b43; border-radius: 50%; background: #fff; }
.hl-balance strong { color: #17191f; }
.hl-friend-game { text-align: left; }
.hl-friend-game b { position: absolute; top: 16px; right: auto; left: 16px; }
.hl-friend-game small { position: absolute; top: 43px; right: 16px; left: 16px; }
.hl-game h3 { text-align: left; }
.hl-game h3 small { color: var(--hl-muted); font-size: 10px; }
.hl-public-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; padding: 5px; border: 1px solid var(--hl-line); border-radius: 15px; background: rgba(255,255,255,.62); }
.hl-public-tab { min-width: 0; padding: 10px 3px; overflow: hidden; border: 0; border-radius: 10px; background: transparent; color: var(--hl-muted); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.hl-public-tab.active { background: var(--hl-accent); box-shadow: 0 5px 14px rgba(70,80,180,.2); color: #fff; }
.hl-public-panel { padding-top: 13px; }
.hl-public-panel h3 { margin: 0 0 7px; }
.hl-friend-grid { display: block; }
.hl-friend-actions, .hl-three-player-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hl-friend-actions button, .hl-three-player-grid button { min-height: 66px; }
.hl-three-player-section .hl-title { align-items: end; margin-bottom: 10px; }
.hl-three-player-section .hl-title h2 { margin-top: 2px; }
.hl-choice.active { border-color: var(--hl-accent); background: #e8eaff; color: #3945ba; }
.hl-config-label { display: block; margin-top: 15px; color: var(--hl-muted); font-size: 11px; text-align: left; }
.hl-config-row { display: flex; gap: 7px; }
.hl-config-row .hl-choice { flex: 1; }
.hl-config-row .hl-room-input { min-width: 0; flex: 1; letter-spacing: 1px; }
.hl-cap-row { align-items: center; margin-top: 8px; }
.hl-cap-row .hl-room-input { height: 46px; padding: 8px 12px; }
.hl-cap-row .hl-cap-apply { flex: 0 0 76px; height: 46px; margin-top: 0; padding: 0; }
.hl-stepper { display: grid; grid-template-columns: 55px 1fr 55px; gap: 8px; align-items: center; margin-top: 8px; }
.hl-stepper button { padding: 10px; border: 1px solid var(--hl-line); border-radius: 10px; background: #f5f6fa; }
.hl-game-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
.hl-game-tabs .hl-choice { margin-top: 0; padding: 10px 4px; font-size: 12px; }
.hl-nav i { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; background: #eef0ff; font-size: 17px; font-style: normal; }
#HtmlLobby { width: var(--app-viewport-width, 100vw); height: var(--app-viewport-height, 100dvh); }
.hl-games { gap: 0; }

/* 轻量棋牌 Club 氛围：仅增加背景层次，不改变现有结构和尺寸。 */
#HtmlLobby { background:
  radial-gradient(circle at 14% 7%, rgba(112,124,226,.14), transparent 27%),
  radial-gradient(circle at 88% 42%, rgba(130,147,222,.10), transparent 24%),
  linear-gradient(180deg, #f8f8fb 0%, #f1f3f8 45%, #edf0f6 100%); }
.hl-banner { isolation: isolate; background: linear-gradient(132deg, #6d79e5 0%, #5966d4 56%, #505cc6 100%); box-shadow: 0 16px 38px rgba(55,63,137,.20); }
.hl-banner::before { content: "A\A ♠"; position: absolute; z-index: -1; top: 12px; right: 78px; width: 62px; height: 88px; padding: 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; color: rgba(255,255,255,.13); font: 700 18px/1.15 Georgia,serif; white-space: pre; transform: rotate(-12deg); }
.hl-banner::after { content: ""; position: absolute; z-index: -1; right: -32px; bottom: -78px; width: 190px; height: 128px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,.025), 0 0 0 38px rgba(255,255,255,.018); transform: rotate(-12deg); }
.hl-banner i { opacity: .55; }
.hl-content { padding-top: 16px; background-image: none; }
.hl-public-title { margin-top: 16px; }

.hl-room-actions button, .hl-game, .hl-table { position: relative; isolation: isolate; overflow: hidden; }
.hl-friend-actions button, .hl-three-player-grid button { border-color: rgba(76,88,157,.16); background: linear-gradient(140deg, #fff 0%, #f5f7fd 66%, #edf0fb 100%); box-shadow: 0 9px 24px rgba(56,65,112,.10), inset 0 1px 0 rgba(255,255,255,.9); }
.hl-three-player-grid button::after { content: attr(data-watermark); position: absolute; z-index: -1; right: 8px; bottom: -11px; color: rgba(76,88,170,.13); font: 700 49px/1 Georgia,serif; letter-spacing: -5px; transform: rotate(-8deg); }
.hl-friend-actions button { min-height: 68px; padding: 11px 13px; border-color: rgba(79,91,170,.22); background: linear-gradient(135deg,#fff 0%,#f7f8fe 54%,#e9edfa 100%); box-shadow: 0 12px 28px rgba(56,65,112,.14), inset 0 1px 0 #fff; }
.hl-friend-actions button b, .hl-friend-actions button small { position: relative; z-index: 2; }
.hl-friend-actions button::before, .hl-friend-actions button::after { position: absolute; z-index: 1; width: 49px; height: 68px; border: 1px solid rgba(89,101,184,.23); border-radius: 8px; background: linear-gradient(150deg,rgba(255,255,255,.98),rgba(232,236,250,.94)); box-shadow: 0 5px 13px rgba(59,67,119,.13), inset 0 1px 0 #fff; color: rgba(75,88,176,.52); font: 700 15px/1.08 Georgia,serif; white-space: pre-wrap; }
.hl-friend-actions button::before { content: "♠"; right: -12px; bottom: -25px; padding: 10px 7px; transform: rotate(13deg); }
.hl-friend-actions button::after { content: attr(data-watermark); right: 17px; bottom: -31px; padding: 8px 6px; transform: rotate(-7deg); }
.hl-friend-actions .primary { border-color: rgba(255,255,255,.18); background: linear-gradient(135deg,#707de8 0%,#626fdc 48%,#4f5bc5 100%); box-shadow: 0 12px 28px rgba(70,80,178,.25), inset 0 1px 0 rgba(255,255,255,.25); }
.hl-friend-actions .primary::before, .hl-friend-actions .primary::after { border-color: rgba(255,255,255,.28); background: linear-gradient(150deg,rgba(255,255,255,.19),rgba(255,255,255,.08)); box-shadow: 0 5px 13px rgba(35,42,108,.20), inset 0 1px 0 rgba(255,255,255,.16); color: rgba(255,255,255,.64); }

.hl-public-tabs { position: relative; padding: 6px; border-color: rgba(70,82,156,.14); background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,242,250,.92)); box-shadow: 0 8px 22px rgba(63,72,118,.09), inset 0 1px 0 #fff; }
.hl-public-tab { position: relative; min-height: 38px; transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.hl-public-tab.active { background: linear-gradient(135deg, #7481ea 0%, #606dd9 48%, #515dc6 100%); box-shadow: 0 8px 18px rgba(68,78,174,.28), inset 0 1px 0 rgba(255,255,255,.28); color: #fff; transform: translateY(-1px); }
.hl-public-tab.active::after { content: ""; position: absolute; top: 3px; right: 10px; left: 10px; height: 1px; border-radius: 50%; background: rgba(255,255,255,.48); }
.hl-public-panel { min-height: 186px; padding: 17px; border-color: rgba(68,81,155,.15); background: linear-gradient(140deg, rgba(255,255,255,.98) 0%, rgba(243,246,253,.97) 62%, rgba(232,237,249,.98) 100%); box-shadow: 0 15px 34px rgba(55,64,108,.11), inset 0 1px 0 #fff; }
.hl-public-panel h3 { position: relative; z-index: 2; color: #252b48; font-size: 16px; }
.hl-public-panel::after { content: attr(data-watermark); position: absolute; z-index: -1; top: 17px; right: 18px; color: rgba(77,89,174,.105); font: 700 72px/.9 Georgia,serif; letter-spacing: -7px; transform: rotate(-9deg); }
.hl-public-panel::before { content: ""; position: absolute; z-index: -1; right: -43px; bottom: -52px; width: 245px; height: 142px; border: 2px solid rgba(76,90,172,.10); border-radius: 50%; box-shadow: 0 0 0 14px rgba(76,90,172,.025), inset 0 0 32px rgba(92,106,194,.025); transform: rotate(-7deg); }
.hl-game-texas.hl-public-panel { background: linear-gradient(140deg,#fff 0%,#f2f5fd 62%,#e8edf9 100%); }
.hl-game-zhajinhua.hl-public-panel { background: linear-gradient(140deg,#fff 0%,#f5f3fd 62%,#ece9f9 100%); }
.hl-game-niuniu.hl-public-panel { background: linear-gradient(140deg,#fff 0%,#f2f6fc 62%,#e7eef8 100%); }
.hl-game-shisanshui.hl-public-panel { background: linear-gradient(140deg,#fff 0%,#f5f4fc 62%,#ebeaf8 100%); }

.hl-table { grid-template-columns: minmax(0,1fr) 78px 48px; min-height: 72px; padding: 12px 12px 12px 15px; border: 1px solid rgba(73,85,150,.11); background: linear-gradient(110deg,rgba(255,255,255,.99),rgba(247,249,254,.98)); box-shadow: 0 7px 18px rgba(55,65,110,.085), inset 3px 0 0 #6875dc, inset 0 1px 0 #fff; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.hl-table:active { transform: translateY(1px) scale(.995); border-color: rgba(83,96,184,.22); box-shadow: 0 3px 10px rgba(55,65,110,.08), inset 3px 0 0 #6875dc; }
.hl-table::before { content: none; }
.hl-table::after { content: none; }
.hl-table-name { min-width: 0; }
.hl-table-name strong { overflow: hidden; color: #252b44; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.hl-table-status { display: inline-flex !important; width: fit-content; margin-top: 5px; padding: 3px 7px; border-radius: 999px; font-size: 9px !important; font-weight: 700; }
.hl-table-waiting .hl-table-status { background: rgba(74,164,125,.11); color: #398865; }
.hl-table-playing .hl-table-status { background: rgba(92,105,203,.11); color: #5360bd; }
.hl-table-stake { min-width: 0; padding-left: 10px; border-left: 1px solid rgba(70,82,145,.11); }
.hl-table-stake strong { color: #4653ba; font-family: DDIN,-apple-system,sans-serif; font-size: 15px; }
.hl-table-seats { display: grid; min-width: 0; min-height: 40px; padding: 4px 2px; place-content: center; border-radius: 8px; text-align: center; box-shadow: inset 0 0 0 1px rgba(87,99,187,.08); }
.hl-table-seats b { display: block; font: 700 14px/1 DDIN,-apple-system,sans-serif; }
.hl-table-seats small { display: block; margin-top: 2px; font-size: 7px; font-style: normal; }
.hl-table-playing .hl-table-seats { background: #e9ebff; color: #505dbc; }
.hl-table-waiting .hl-table-seats { background: #e8f5ef; color: #3c8968; }
.hl-three-player-section { padding-top: 2px; }
.hl-version { padding: 18px 0 2px; color: rgba(92,100,128,.62); font: 11px/1.4 DDIN,-apple-system,sans-serif; letter-spacing: .5px; text-align: center; }