:root{--hl-bg:#f4f2ee;--hl-panel:#fff;--hl-text:#222738;--hl-muted:#7c8295;--hl-accent:#5966d9;--hl-line:rgba(44,52,76,.12)}
*{box-sizing:border-box}#HtmlLobby{display:none;position:fixed;z-index:10;inset:0;overflow:auto;background:radial-gradient(circle at 8% 4%,rgba(123,134,236,.16),transparent 28%),linear-gradient(180deg,#f9f7f3,var(--hl-bg) 42%);color:var(--hl-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif}.html-lobby-active #HtmlLobby{display:block}.html-lobby-active #GameDiv{visibility:hidden;pointer-events:none}.hl-header,.hl-content{width:min(100%,520px);margin:auto}.hl-header{padding:calc(env(safe-area-inset-top) + 18px) 16px 0}.hl-account{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center}.hl-avatar{display:grid;width:58px;height:58px;overflow:hidden;place-items:center;border:2px solid var(--hl-accent);border-radius:50%;background:linear-gradient(145deg,#7581ed,#4c57c9);color:#fff;font-size:22px;font-weight:800}.hl-avatar img{width:100%;height:100%;object-fit:cover}.hl-identity{min-width:0}.hl-identity strong,.hl-identity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hl-identity strong{font-size:17px}.hl-identity small{margin-top:5px;color:var(--hl-muted);font-size:11px}.hl-balance{min-width:116px;padding:9px 13px;border:1px solid var(--hl-line);border-radius:13px;background:#ffffffc7;text-align:right}.hl-balance small,.hl-balance strong{display:block}.hl-balance small{color:var(--hl-muted);font-size:10px}.hl-balance strong{color:#3945ba;font-size:18px}.hl-banner{position:relative;min-height:142px;margin-top:18px;padding:24px 22px;overflow:hidden;border-radius:22px;background:linear-gradient(130deg,#6875e4,#4e59c5 68%);box-shadow:0 14px 36px #2b30481f;color:#fff}.hl-banner small{font-size:9px;letter-spacing:2px}.hl-banner h1{margin:10px 0 6px;font-size:24px}.hl-banner p{margin:0;color:#e3e6ff;font-size:12px}.hl-banner i{position:absolute;right:20px;bottom:-44px;color:#ffffff20;font:150px Georgia;font-style:normal;transform:rotate(13deg)}.hl-content{padding:26px 14px 100px}.hl-title{display:flex;align-items:end;justify-content:space-between;margin:0 4px 13px}.hl-title h2{margin:0;font-size:21px}.hl-title span,.hl-title small{color:var(--hl-muted);font-size:10px}.hl-title button{border:0;background:none;color:var(--hl-accent)}.hl-friend-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hl-friend-game,.hl-room-actions button{border:1px solid var(--hl-line);border-radius:16px;background:#fff;text-align:left}.hl-friend-game{position:relative;min-height:132px;padding:16px;overflow:hidden}.hl-friend-game b,.hl-friend-game small{position:relative;z-index:1;display:block}.hl-friend-game small,.hl-room-actions small{margin-top:5px;color:var(--hl-muted);font-size:9px}.hl-friend-game i{position:absolute;right:8px;bottom:-5px;color:#5966d91b;font:50px Georgia;font-style:normal}.hl-room-actions{display:grid;gap:8px}.hl-room-actions button{padding:11px}.hl-room-actions b,.hl-room-actions small{display:block}.hl-room-actions .primary{background:linear-gradient(135deg,#6875e4,#4c57c5);color:#fff}.hl-room-actions .primary small{color:#e1e4ff}.hl-public-title{margin-top:27px}.hl-public-title>div small{letter-spacing:2px}.hl-games{display:grid;gap:16px}.hl-game{padding:15px;border:1px solid var(--hl-line);border-radius:18px;background:#ffffffe6}.hl-game h3{margin:0 0 11px}.hl-table{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;width:100%;margin-top:8px;padding:13px;border:0;border-radius:13px;background:#f7f8fb;text-align:left}.hl-table strong,.hl-table small{display:block}.hl-table small{color:var(--hl-muted);font-size:9px}.hl-table em{padding:7px 8px;border-radius:9px;background:#e8eaff;color:#4d58c1;font-size:11px;font-style:normal}.hl-empty{padding:18px;color:var(--hl-muted);text-align:center}.hl-nav{position:fixed;z-index:12;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(5,1fr);width:min(100%,520px);margin:auto;padding:9px 8px calc(env(safe-area-inset-bottom) + 9px);border-top:1px solid var(--hl-line);background:#fffffff0;backdrop-filter:blur(16px)}.hl-nav button{display:grid;gap:3px;justify-items:center;border:0;background:none;color:var(--hl-accent);font-size:18px}.hl-nav small{color:var(--hl-muted);font-size:10px}.hl-modal{position:fixed;z-index:30;inset:0;display:grid;padding:20px;place-items:center;background:#000a}.hl-modal[hidden]{display:none}.hl-modal>section{position:relative;width:min(100%,360px);max-height:80vh;overflow:auto;padding:28px 22px;border-radius:22px;background:#fff;text-align:center}.hl-close{position:absolute;top:8px;right:10px;border:0;background:none;color:var(--hl-muted);font-size:28px}.hl-modal h2{margin:0 0 8px}.hl-modal p{color:var(--hl-muted);font-size:12px}.hl-choice,.hl-confirm{width:100%;margin-top:9px;padding:13px;border:1px solid var(--hl-line);border-radius:12px;background:#f5f6fa}.hl-confirm{background:var(--hl-accent);color:#fff}.hl-room-input{width:100%;padding:14px;border:1px solid #5966d955;border-radius:12px;font-size:20px;letter-spacing:5px;text-align:center}.hl-toast{position:fixed;z-index:40;top:calc(env(safe-area-inset-top) + 14px);left:50%;padding:9px 15px;border-radius:18px;background:#272c40;color:#fff;font-size:12px;opacity:0;transform:translate(-50%,-10px);transition:.2s}.hl-toast.show{opacity:1;transform:translate(-50%,0)}