/* zzz.games-ref.css 2026-10-07 — ukuk.bot 「游戏」lobby (#l02ng) restyle to owner reference (games-ref.jpeg).
   Overlay only: no template forcing, bottom nav untouched, balances/maintenance untouched, lobby JS untouched.
   Scope: html.uk-nofirst.l02ng-on #l02ng (double-id for specificity over lane02/gameh/zgamecover/zlotui/zzuk-theme).
   Art: vue/ng-fix/assets/gamesref/* (cropped from owner reference).
   Rollback: rm -f /www/wwwroot/baobei2/vue/ng-fix/zzz.games-ref.css   (assets dir is inert without this file)
*/
html.uk-nofirst.l02ng-on #l02ng#l02ng{
  --gr:var(--u, 1px);
  --gr-bg:#f8f2e6;
  --gr-ink:#3b2814;
  --gr-gold:#c99a52;
  background:var(--gr-bg)!important;
  color:var(--gr-ink)!important;
}

/* ---------- header: logo + slogan left, brown balance pill right ---------- */
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-hd{
  height:calc(56 * var(--gr))!important;
  min-height:0!important;
  padding:0 calc(12 * var(--gr))!important;
  background:var(--gr-bg)!important;
  border:0!important;
  box-shadow:none!important;
  align-items:center!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-brand{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  height:auto!important;
  gap:0!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-logo{
  height:calc(36 * var(--gr))!important;
  width:auto!important;
  max-width:calc(150 * var(--gr))!important;
  object-fit:contain!important;
  object-position:left center!important;
  /* owner: 「UK国际 logo 有黑底」 — site PNG has opaque black fills (K counter, 国/际 gaps, extrusions).
     Swap to a matted copy with black keyed to alpha; thin brown shadow restores letter edges. */
  content:url(/vue/ng-fix/assets/gamesref/logo-uk-clean.webp);
  background:transparent!important;
  filter:drop-shadow(0 1px 0 rgba(96,60,18,.45))!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-slogan{
  display:block!important;
  margin:calc(1 * var(--gr)) 0 0!important;
  padding-left:calc(52 * var(--gr))!important;
  font-size:0!important;
  line-height:1!important;
  color:#7b5a2c!important;
  white-space:nowrap!important;
  background:none!important;
  -webkit-text-fill-color:currentColor!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-slogan::after{
  content:"精彩不止一种";
  font-size:calc(9.5 * var(--gr));
  letter-spacing:calc(3 * var(--gr));
  font-weight:600;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-hr{
  height:calc(26 * var(--gr))!important;
  min-width:calc(121 * var(--gr))!important;
  padding:0 calc(8 * var(--gr)) 0 calc(2 * var(--gr))!important;
  gap:calc(4 * var(--gr))!important;
  align-items:center!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#8a643a 0%,#6c4a24 55%,#5a3c18 100%)!important;
  border:1px solid #5e3f1a!important;
  box-shadow:inset 0 1px 0 rgba(255,226,170,.35),0 1px 2px rgba(90,60,20,.25)!important;
  color:#fde3bd!important;
  box-sizing:border-box!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-dep{
  width:calc(22 * var(--gr))!important;
  height:calc(22 * var(--gr))!important;
  min-width:0!important;min-height:0!important;
  flex:0 0 auto!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-dep svg{width:100%!important;height:100%!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-bal{
  font-size:calc(17 * var(--gr))!important;
  font-weight:500!important;
  color:#fde3bd!important;
  -webkit-text-fill-color:#fde3bd!important;
  margin:0 calc(2 * var(--gr))!important;
  letter-spacing:.2px!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-ref{
  color:#f3d9b0!important;
  -webkit-text-fill-color:#f3d9b0!important;
  font-size:calc(13 * var(--gr))!important;
  gap:calc(3 * var(--gr))!important;
  background:none!important;border:0!important;box-shadow:none!important;
  padding:0!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-ref svg{
  width:calc(16 * var(--gr))!important;height:calc(16 * var(--gr))!important;
  color:#f3d9b0!important;fill:currentColor;
}

/* ---------- body: kill black backdrop, rail + content on cream ---------- */
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-body{
  background:var(--gr-bg)!important;
  background-image:none!important;
  padding:0 calc(6 * var(--gr)) 0 calc(7 * var(--gr))!important;
  gap:calc(4 * var(--gr))!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu{
  flex:0 0 calc(65 * var(--gr))!important;
  width:calc(65 * var(--gr))!important;
  padding:calc(4 * var(--gr)) calc(4 * var(--gr)) calc(96px + env(safe-area-inset-bottom,0px)) 0!important;
  gap:calc(4 * var(--gr))!important;
  background:var(--gr-bg)!important;
  background-image:none!important;
  box-shadow:inset -1px 0 0 rgba(200,176,136,.45), inset -3px 0 3px -2px rgba(160,128,80,.18)!important;
  border:0!important;
  box-sizing:border-box!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi{
  position:relative!important;
  flex:0 0 auto!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:calc(61 * var(--gr))!important;
  height:calc(60 * var(--gr))!important;
  min-height:0!important;
  margin:0!important;
  padding:calc(9 * var(--gr)) 0 0!important;
  gap:calc(3 * var(--gr))!important;
  border-radius:calc(10 * var(--gr))!important;
  border:1px solid rgba(232,214,180,.9)!important;
  background:linear-gradient(180deg,#fffcf4 0%,#f9f2e3 60%,#f3e9d4 100%)!important;
  box-shadow:inset 0 1px 0 #fff, 0 2px 4px rgba(150,112,56,.13)!important;
  color:#5a3d1c!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi::before,
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi::after{display:none!important;content:none!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi.active{
  border:1px solid #4a2f12!important;
  background:linear-gradient(180deg,#9a7238 0%,#6a4a24 18%,#4b331b 55%,#5c3f1d 82%,#86602c 100%)!important;
  box-shadow:0 0 0 1px rgba(222,180,104,.85), 0 0 7px 1px rgba(226,176,92,.55), inset 0 1px 0 rgba(255,220,150,.45), inset 0 -1px 0 rgba(255,214,140,.25)!important;
  color:#fbf0d6!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mic{
  width:calc(30 * var(--gr))!important;
  height:calc(27 * var(--gr))!important;
  flex:0 0 auto!important;
  border:0!important;border-radius:0!important;
  background:transparent center/contain no-repeat!important;
  box-shadow:none!important;
  color:#a2702c!important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mic svg{
  width:calc(22 * var(--gr))!important;height:calc(22 * var(--gr))!important;
  color:#a2702c!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi[data-k="lottery"] .ng-mic{background-image:url(/vue/ng-fix/assets/gamesref/cat-lottery.webp)!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi[data-k="electronic"] .ng-mic{background-image:url(/vue/ng-fix/assets/gamesref/cat-electronic.webp)!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi[data-k="sports"] .ng-mic{background-image:url(/vue/ng-fix/assets/gamesref/cat-sports.webp)!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi[data-k="live"] .ng-mic{background-image:url(/vue/ng-fix/assets/gamesref/cat-live.webp)!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi[data-k="fishing"] .ng-mic{background-image:url(/vue/ng-fix/assets/gamesref/cat-fishing.webp)!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi[data-k="movie"] .ng-mic{background-image:url(/vue/ng-fix/assets/gamesref/cat-movie.webp)!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi[data-k="chess"] .ng-mic{background-image:url(/vue/ng-fix/assets/gamesref/cat-chess.webp)!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi[data-k="esports"] .ng-mic{background-image:url(/vue/ng-fix/assets/gamesref/cat-esports.webp)!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi[data-k="hot"] .ng-mic{background-image:url(/vue/ng-fix/assets/gamesref/cat-hot.webp)!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi[data-k="all"] .ng-mic{background-image:url(/vue/ng-fix/assets/gamesref/cat-all.webp)!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi:is([data-k="lottery"],[data-k="electronic"],[data-k="sports"],[data-k="live"],[data-k="fishing"],[data-k="movie"],[data-k="chess"],[data-k="esports"],[data-k="hot"],[data-k="all"]) .ng-mic svg{opacity:0!important;visibility:hidden!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi.active .ng-mic{
  color:#f1c879!important;
  filter:brightness(1.18) saturate(1.1) drop-shadow(0 0 2px rgba(255,214,140,.35))!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi.active .ng-mic svg{color:#f1c879!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi[data-k="lottery"].active .ng-mic{filter:drop-shadow(0 0 2px rgba(255,214,140,.35))!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mt,
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi .ng-mt{
  font-size:calc(12.5 * var(--gr))!important;
  line-height:1.1!important;
  font-weight:600!important;
  letter-spacing:.5px!important;
  color:#5a3d1c!important;
  -webkit-text-fill-color:#5a3d1c!important;
  background:none!important;
  text-shadow:none!important;
  white-space:nowrap!important;
  margin:0!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-menu .ng-mi.active .ng-mt{
  color:#fbf0d6!important;-webkit-text-fill-color:#fbf0d6!important;
}

/* ---------- content column ---------- */
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-con{
  background:var(--gr-bg)!important;
  background-image:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-list{
  padding:calc(1 * var(--gr)) 0 calc(96px + env(safe-area-inset-bottom,0px))!important;
  background:transparent!important;
}

/* hot-lottery banner: owner art (title text baked in) */
html.uk-nofirst.l02ng-on #l02ng#l02ng[data-menu="lottery"] .ng-lotban{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:308/116!important;
  min-height:0!important;
  margin:0 0 calc(13 * var(--gr))!important;
  padding:0!important;
  border:0!important;
  border-radius:calc(8 * var(--gr))!important;
  overflow:hidden!important;
  background:#2a1c10 url(/vue/ng-fix/assets/gamesref/banner-hotlot.webp) center/cover no-repeat!important;
  box-shadow:0 2px 6px rgba(80,52,18,.18)!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-lotban>*{display:none!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-lotban::before,
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-lotban::after{display:none!important;content:none!important}

/* grid: 3 columns, 10px gutters (lottery menu only; sports/live big cards keep their own layout) */
html.uk-nofirst.l02ng-on #l02ng#l02ng[data-menu="lottery"] .ng-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  column-gap:calc(10 * var(--gr))!important;
  row-gap:calc(10 * var(--gr))!important;
  gap:calc(10 * var(--gr))!important;
  padding:0 0 0 calc(2 * var(--gr))!important;
}

/* lottery cards: square-ish art + cream caption + gold multiplier pill */
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-card.ng-lotL{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  height:calc(122 * var(--gr))!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  padding:0!important;
  border:1px solid #e6d3b6!important;
  border-radius:calc(7 * var(--gr))!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#fdf8ef 0%,#f8efe1 60%,#f3e6d3 100%)!important;
  box-shadow:0 2px 4px rgba(150,110,54,.14), inset 0 -1px 0 rgba(255,255,255,.6)!important;
  transform:none!important;
  box-sizing:border-box!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-card.ng-lotL::before,
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-card.ng-lotL::after{display:none!important;content:none!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-card.ng-lotL>img{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  flex:0 0 auto!important;
  width:100%!important;
  height:calc(80 * var(--gr))!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:50% 0!important;
  border-radius:0!important;
  margin:0!important;
  transform:none!important;
  filter:none!important;
}
/* swap to owner art per room (src is chosen by lane02 from gameid) */
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-card.ng-lotL>img[src$="/r2L/lot1.webp"]{content:url(/vue/ng-fix/assets/gamesref/lot-k28-20.webp)}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-card.ng-lotL>img[src$="/r2L/lot6.webp"]{content:url(/vue/ng-fix/assets/gamesref/lot-k28-28.webp)}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-card.ng-lotL>img[src$="/r2L/lot2.webp"]{content:url(/vue/ng-fix/assets/gamesref/lot-k28-32.webp)}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-card.ng-lotL>img[src$="/r2L/lot7.webp"]{content:url(/vue/ng-fix/assets/gamesref/lot-lhc.webp)}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-lotL-t{
  position:relative!important;
  inset:auto!important;
  z-index:1!important;
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:calc(6 * var(--gr)) calc(4 * var(--gr)) 0!important;
  margin:0!important;
  background:transparent!important;
  font-size:calc(12.5 * var(--gr))!important;
  line-height:calc(16 * var(--gr))!important;
  font-weight:600!important;
  color:var(--gr-ink)!important;
  -webkit-text-fill-color:var(--gr-ink)!important;
  text-shadow:none!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-lotL-t br{display:none!important}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-lotL-t em{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:calc(3 * var(--gr)) 0 0!important;
  min-width:calc(56 * var(--gr))!important;
  height:calc(15 * var(--gr))!important;
  padding:0 calc(8 * var(--gr))!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#d8b071 0%,#ecd39f 50%,#d4ad73 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,244,214,.7), 0 1px 1px rgba(140,100,40,.18)!important;
  font-style:normal!important;
  font-size:calc(11.5 * var(--gr))!important;
  line-height:1!important;
  font-weight:700!important;
  color:#3f2810!important;
  -webkit-text-fill-color:#3f2810!important;
  box-sizing:border-box!important;
}
html.uk-nofirst.l02ng-on #l02ng#l02ng .ng-card.ng-lotL:active{transform:scale(.98)!important}