/* Lobby (首页) match to owner's reference screenshot, 2026-10-07.
   Scoped to html.uk-nofirst.hm-home (homepage only) except the bottom-nav
   recolor at the end (restyle only, nav stays visible/clickable).
   Rollback: delete zzz.lobbyref.css + zzz.lobbyref.js (+ assets/lobbyref/). */
html.uk-nofirst.hm-home,
html.uk-nofirst.hm-home body,
html.uk-nofirst.hm-home #ngtpl-root,
html.uk-nofirst.hm-home #xcyl{background:#f8f6f1!important}

/* first-paint guard (see zzz.lobbyref.js, auto-removed within 3s) */
html.lr-pre:not(.hm-home) #xcyl .xc-top,
html.lr-pre:not(.hm-home) #xcyl .xc-main{visibility:hidden!important}

/* ---------- 1. header ---------- */
html.uk-nofirst.hm-home #xcyl .xc-top{padding:6px 10px 4px!important;background:#f8f6f1!important}
html.uk-nofirst.hm-home #xcyl .hm-bar{gap:5px!important;min-height:46px!important}
html.uk-nofirst.hm-home #xcyl .hm-div{display:none!important}
html.uk-nofirst.hm-home #xcyl .hm-brand{flex:0 0 auto!important;margin-right:4px!important;align-items:flex-start!important}
html.uk-nofirst.hm-home #xcyl .hm-brand,
html.uk-nofirst.hm-home #xcyl .hm-bar{background:transparent!important;mix-blend-mode:normal!important;filter:none!important}
html.uk-nofirst.hm-home #xcyl .hm-brand img{height:27px!important;max-width:110px!important;background:transparent!important;mix-blend-mode:normal!important;filter:none!important;box-shadow:none!important;border:0!important}
html.uk-nofirst.hm-home #xcyl .hm-brand .lr-cn,
html.uk-nofirst.hm-home #xcyl .hm-brand em{
  display:flex!important;align-items:center;gap:3px;margin:1px 0 0 34px!important;padding:0!important;
  font-style:normal;font-size:9.5px!important;line-height:1.1;letter-spacing:.06em;color:#6d5532!important;font-weight:600}
html.uk-nofirst.hm-home #xcyl .hm-brand .lr-cn::before,
html.uk-nofirst.hm-home #xcyl .hm-brand .lr-cn::after{content:"";width:9px;height:1px;background:#a98a55}
html.uk-nofirst.hm-home #xcyl .hm-brand .lr-en{
  display:block;width:0;overflow:visible;margin:2px 0 0 30px;font-size:7.6px;line-height:1;letter-spacing:.04em;color:#6d5532;white-space:nowrap;font-weight:600;transform:scale(.7);transform-origin:left center}
html.uk-nofirst.hm-home #xcyl .hm-chan,
html.uk-nofirst.hm-home #xcyl .hm-app,
html.uk-nofirst.hm-home #xcyl .hm-bell,
html.uk-nofirst.hm-home #xcyl .hm-user{
  background:linear-gradient(180deg,#fffefb 0%,#f6efe2 100%)!important;
  border:1px solid rgba(205,168,104,.55)!important;
  box-shadow:0 2px 6px rgba(150,108,40,.16),inset 0 1px 0 #fff!important;
  color:#2f2416!important}
html.uk-nofirst.hm-home #xcyl .hm-chan{flex:0 0 auto;height:32px;padding:0 7px 0 5px;border-radius:10px!important;gap:4px!important;margin-left:auto}
html.uk-nofirst.hm-home #xcyl .hm-chan svg{width:20px!important;height:20px!important}
html.uk-nofirst.hm-home #xcyl .hm-chan b{font-size:10.5px!important;color:#2a1f12!important;font-weight:700!important}
html.uk-nofirst.hm-home #xcyl .hm-chan small{font-size:9.5px!important;color:#5e5446!important}
html.uk-nofirst.hm-home #xcyl .hm-app{margin-left:0!important;height:32px!important;padding:0 9px!important;border-radius:999px!important;font-size:11px!important;gap:3px!important}
html.uk-nofirst.hm-home #xcyl .hm-bell,
html.uk-nofirst.hm-home #xcyl .hm-user{flex:0 0 31px!important;width:31px!important;height:31px!important}
html.uk-nofirst.hm-home #xcyl .hm-bell svg,
html.uk-nofirst.hm-home #xcyl .hm-user svg{width:17px!important;height:17px!important}

/* ---------- 2. banner (reference VIP晋级活动 art; carousel kept underneath for clicks) ---------- */
html.uk-nofirst.hm-home #xcyl .xc-main{padding:0 8px 10px!important}
html.uk-nofirst.hm-home #xcyl .xc-banner{
  position:relative!important;margin:4px 0 0!important;aspect-ratio:566/275!important;height:auto!important;
  border:0!important;border-radius:14px!important;overflow:hidden!important;
  background:#efe7d8 url(/vue/ng-fix/assets/lobbyref/banner.jpg?v=lr1) center/cover no-repeat!important;
  box-shadow:0 3px 10px rgba(140,100,40,.14)!important}
html.uk-nofirst.hm-home #xcyl .xc-banner .xc-track,
html.uk-nofirst.hm-home #xcyl .xc-banner .xc-dots{visibility:hidden!important}
html.uk-nofirst.hm-home #xcyl .lr-vip{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:pointer}
#xcyl .lr-vip{display:none}
html.uk-nofirst.hm-home #xcyl .lr-vip{display:block}

/* ---------- 3. marquee ---------- */
html.uk-nofirst.hm-home #xcyl .xc-notice{
  height:30px!important;margin:7px 0 0!important;padding:0 10px 0 6px!important;border-radius:10px!important;
  background:rgba(255,255,255,.62)!important;border:1px solid rgba(214,190,150,.45)!important;
  box-shadow:0 1px 4px rgba(150,110,50,.08)!important;color:#2f2416!important;font-size:12px!important}
html.uk-nofirst.hm-home #xcyl .xc-notice > i{
  flex:0 0 20px!important;width:20px!important;height:20px!important;margin-right:7px!important;border-radius:50%!important;
  display:flex!important;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#fff8ea,#f1e1c2)!important;color:#7a5520!important}
html.uk-nofirst.hm-home #xcyl .xc-notice > i svg{width:12px!important;height:12px!important}
html.uk-nofirst.hm-home #xcyl .xc-notice .xc-nrun{color:#2f2416!important}
html.uk-nofirst.hm-home #xcyl .hm-more{color:#7a5520!important;font-size:12px!important}

/* ---------- 4. user row ---------- */
html.uk-nofirst.hm-home #xcyl .hm-guest{margin-top:9px!important;padding:0!important;gap:0!important;align-items:center!important;min-height:44px}
html.uk-nofirst.hm-home #xcyl .lr-ava{
  flex:0 0 39px;width:39px;height:39px;box-sizing:border-box;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  border:2px solid #dcbc80;background:linear-gradient(180deg,#fffaf0,#f1e3c6);box-shadow:0 2px 6px rgba(150,108,40,.2)}
html.uk-nofirst.hm-home #xcyl .lr-ava img{width:100%;height:100%;object-fit:cover;display:block}
html.uk-nofirst.hm-home #xcyl .lr-ava svg{width:30px;height:30px;margin-top:6px}
html.uk-nofirst.hm-home #xcyl .hm-gtx{flex:1 1 0!important;min-width:0!important;align-items:flex-start!important;gap:4px!important;margin:0 4px 0 6px!important}
html.uk-nofirst.hm-home #xcyl .hm-name{font-size:15px!important;color:#2a1f12!important;font-weight:700!important}
html.uk-nofirst.hm-home #xcyl .hm-sub{gap:0!important}
html.uk-nofirst.hm-home #xcyl .hm-idpill{height:auto!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;gap:4px!important}
html.uk-nofirst.hm-home #xcyl .hm-idtxt{font-size:11.5px!important;color:#4a4034!important;font-weight:500!important}
html.uk-nofirst.hm-home #xcyl .hm-copyid{color:#5e5446!important}
html.uk-nofirst.hm-home #xcyl .hm-balpill{
  flex:0 0 105px;box-sizing:border-box;height:34px!important;padding:0 7px 0 4px!important;gap:5px!important;justify-content:flex-start;
  border-radius:999px!important;border:1px solid rgba(201,160,90,.6)!important;
  background:linear-gradient(180deg,#fffdf8,#f4ead8)!important;box-shadow:0 2px 6px rgba(150,108,40,.16),inset 0 1px 0 #fff!important}
html.uk-nofirst.hm-home #xcyl .hm-balpill .hm-t{flex:0 0 25px!important;width:25px!important;height:25px!important}
html.uk-nofirst.hm-home #xcyl .hm-amt{flex:1 1 auto;min-width:0;font-size:17px!important;color:#9a6a1e!important;font-weight:800!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.uk-nofirst.hm-home #xcyl .hm-rf{color:#6d5532!important;width:16px!important;height:16px!important}
html.uk-nofirst.hm-home #xcyl .hm-acts{gap:6px!important;margin-left:6px!important}
html.uk-nofirst.hm-home #xcyl .hm-dep,
html.uk-nofirst.hm-home #xcyl .hm-wd,
html.uk-nofirst.hm-home #xcyl .hm-share{
  width:44px!important;height:41px!important;border-radius:11px!important;gap:3px!important;
  border:1px solid rgba(205,168,104,.55)!important;background:linear-gradient(180deg,#fffefb,#f4ebdb)!important;
  box-shadow:0 2px 6px rgba(150,108,40,.16),inset 0 1px 0 #fff!important}
html.uk-nofirst.hm-home #xcyl .hm-dep svg,
html.uk-nofirst.hm-home #xcyl .hm-wd svg,
html.uk-nofirst.hm-home #xcyl .hm-share svg{width:16px!important;height:16px!important;color:#2f2416!important}
html.uk-nofirst.hm-home #xcyl .hm-dep b,
html.uk-nofirst.hm-home #xcyl .hm-wd b,
html.uk-nofirst.hm-home #xcyl .hm-share b{font-size:11px!important;color:#2f2416!important;font-weight:700!important}

/* ---------- 5. game grid (reference art) ---------- */
html.uk-nofirst.hm-home #xcyl .hm-mosaic{margin-top:7px!important}
html.uk-nofirst.hm-home #xcyl .hm-top{grid-template-columns:216fr 153fr!important;gap:5px!important;align-items:stretch!important}
html.uk-nofirst.hm-home #xcyl .hm-col{gap:6px!important}
html.uk-nofirst.hm-home #xcyl .hm-row{gap:5px!important;margin-top:6px!important;grid-template-columns:1.683fr 1.674fr 1.676fr!important;align-items:start!important}
html.uk-nofirst.hm-home #xcyl .hm-card{
  border:0!important;border-radius:10px!important;background-color:#efe6d4!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important;
  box-shadow:0 2px 8px rgba(140,100,40,.14)!important}
html.uk-nofirst.hm-home #xcyl .hm-card img{visibility:hidden!important}
html.uk-nofirst.hm-home #xcyl .hm-card[data-go="live"]{aspect-ratio:auto!important;height:auto!important;align-self:stretch!important;background-size:cover!important;background-image:url(/vue/ng-fix/assets/lobbyref/live.jpg?v=lr1)!important}
html.uk-nofirst.hm-home #xcyl .hm-card[data-go="lottery"]{aspect-ratio:1648/721!important;background-image:url(/vue/ng-fix/assets/lobbyref/hd-lottery.webp?v=hd1)!important}
html.uk-nofirst.hm-home #xcyl .hm-card[data-go="slot"]{aspect-ratio:1679/937!important;background-image:url(/vue/ng-fix/assets/lobbyref/hd-pg.webp?v=hd1)!important}
html.uk-nofirst.hm-home #xcyl .hm-card[data-go="sports"]{aspect-ratio:1602/952!important;background-image:url(/vue/ng-fix/assets/lobbyref/hd-sport.webp?v=hd1)!important}
html.uk-nofirst.hm-home #xcyl .hm-card[data-go="fish"]{aspect-ratio:1604/958!important;background-image:url(/vue/ng-fix/assets/lobbyref/hd-fish.webp?v=hd1)!important}
/* HD originals (2026-10-07): art carries its own rounded gold frame + transparent corners */
html.uk-nofirst.hm-home #xcyl .hm-card[data-go="lottery"],
html.uk-nofirst.hm-home #xcyl .hm-card[data-go="slot"],
html.uk-nofirst.hm-home #xcyl .hm-card[data-go="sports"],
html.uk-nofirst.hm-home #xcyl .hm-card[data-go="fish"]{border-radius:5px!important;background-color:transparent!important;box-shadow:0 2px 6px rgba(140,100,40,.16)!important}
html.uk-nofirst.hm-home #xcyl .hm-card[data-go="chess"]{aspect-ratio:181/108!important;background-image:url(/vue/ng-fix/assets/lobbyref/chess.jpg?v=lr1)!important}

/* ---------- 6. quick shortcuts ---------- */
html.uk-nofirst.hm-home #xcyl .hm-quick{margin-top:11px!important;gap:0!important}
html.uk-nofirst.hm-home #xcyl .hm-quick button{gap:0!important;padding:0!important}
html.uk-nofirst.hm-home #xcyl .hm-quick i{
  width:42px!important;height:42px!important;border-radius:12px!important;margin-bottom:9px;
  border:1px solid rgba(220,190,140,.55)!important;background:linear-gradient(180deg,#fffdf8 0%,#f6ead4 100%)!important;
  box-shadow:0 3px 8px rgba(150,108,40,.18),inset 0 1px 0 #fff!important;color:#7a5520!important}
html.uk-nofirst.hm-home #xcyl .hm-quick svg{width:20px!important;height:20px!important}
html.uk-nofirst.hm-home #xcyl .hm-quick b{font-size:13px!important;color:#2a1f12!important;font-weight:700!important;line-height:1.2}
html.uk-nofirst.hm-home #xcyl .hm-quick small{font-size:10.5px!important;color:#7d7266!important;margin-top:5px;line-height:1.2}

/* ---------- 7. bottom nav recolor (global, restyle only) ---------- */
html.uk-nofirst.ngtb-xcyl body #ngtb-bar{background:linear-gradient(180deg,#fffefb,#f8f3ea)!important}
html.uk-nofirst.ngtb-xcyl body #ngtb-bar .ngtb-i .ngtb-fab{
  width:66px!important;height:66px!important;margin-left:-33px!important;top:-24px!important;padding-top:12px!important;
  background:radial-gradient(circle at 50% 28%,#ffffff 0%,#fbf5ea 48%,#f0e0c0 100%)!important;
  border:2px solid #d8b26a!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 4px 14px rgba(176,128,48,.35),inset 0 -3px 6px rgba(200,160,90,.22)!important}
html.uk-nofirst.ngtb-xcyl body #ngtb-bar .ngtb-i .ngtb-fab::before{opacity:.35!important}
html.uk-nofirst.ngtb-xcyl body #ngtb-bar .ngtb-i .ngtb-fab svg{width:26px!important;height:26px!important;filter:none!important}
html.uk-nofirst.ngtb-xcyl body #ngtb-bar .ngtb-i .ngtb-fab svg rect{fill:#8a5a17!important}
html.uk-nofirst.ngtb-xcyl body #ngtb-bar .ngtb-i .ngtb-fab svg ellipse{stroke:#8a5a17!important}
html.uk-nofirst.ngtb-xcyl body #ngtb-bar .ngtb-i .ngtb-fab b{font-size:13px!important;color:#4a3214!important;-webkit-text-fill-color:#4a3214!important;text-shadow:none!important;font-weight:700!important}
html.uk-nofirst.ngtb-xcyl body #ngtb-bar .ngtb-i.is-dep.on .ngtb-fab{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 5px #d8b26a,0 4px 14px rgba(176,128,48,.35)!important}
html.uk-nofirst.ngtb-xcyl body #ngtb-bar .ngtb-i:not(.on):not(.is-dep) .ngtb-ic .tb-m{fill:#aeadb3!important}
html.uk-nofirst.ngtb-xcyl body #ngtb-bar .ngtb-i:not(.on):not(.is-dep) .ngtb-t{color:#4f4a44!important}