/* zzz.gameh.css 2026-10-04
   ukuk.bot / uk8.bot game lobby only (html.uk-nofirst #l02ng).
   Match homepage phone density from the 390px layout (screenshot is that
   viewport at 472px image width). Same unit as #xcyl: --u = min(100vw,430px)/390.
   Square tiles, 8px gap, rail 62x56, header 58. Does not swap templates.
   Does not hide #bottom-menu / #ngtb-bar / #woai-tz-tabbar.
   Rollback: rm -f /www/wwwroot/baobei2/vue/ng-fix/zzz.gameh.css
*/
html.uk-nofirst.l02ng-on{--u:calc(min(100vw, 430px) / 390)}

html.uk-nofirst #l02ng .ng-hd{
  height:calc(58 * var(--u))!important;
  min-height:0!important;
  padding:0 calc(12 * var(--u))!important;
  box-sizing:border-box!important;
}
html.uk-nofirst #l02ng .ng-logo{
  height:calc(34 * var(--u))!important;
  max-width:calc(130 * var(--u))!important;
  width:auto!important;
}
html.uk-nofirst #l02ng .ng-bal{
  font-size:calc(14 * var(--u))!important;
  line-height:1!important;
  margin:0 calc(4 * var(--u))!important;
  max-width:calc(120 * var(--u))!important;
}
html.uk-nofirst #l02ng .ng-dep{
  width:calc(18 * var(--u))!important;
  height:calc(18 * var(--u))!important;
  min-width:18px!important;
  min-height:18px!important;
  line-height:calc(18 * var(--u))!important;
  font-size:calc(12 * var(--u))!important;
}
html.uk-nofirst #l02ng .ng-ref{
  font-size:calc(12 * var(--u))!important;
  line-height:1!important;
  gap:calc(4 * var(--u))!important;
}
html.uk-nofirst #l02ng .ng-ref svg{
  width:calc(14 * var(--u))!important;
  height:calc(14 * var(--u))!important;
}

html.uk-nofirst #l02ng .ng-body{
  gap:8px!important;
  padding:0 calc(18 * var(--u)) 0 calc(15 * var(--u))!important;
}
html.uk-nofirst #l02ng .ng-menu{
  flex:0 0 calc(62 * var(--u))!important;
  width:calc(62 * var(--u))!important;
  margin:0!important;
  padding:2px 0 calc(72 * var(--u))!important;
  gap:calc(8 * var(--u))!important;
}
html.uk-nofirst #l02ng .ng-menu .ng-mi{
  flex-direction:column!important;
  width:100%!important;
  height:calc(56 * var(--u))!important;
  min-height:0!important;
  margin:0!important;
  padding:calc(6 * var(--u)) 0!important;
  gap:calc(2 * var(--u))!important;
  border-radius:calc(16 * var(--u))!important;
}
html.uk-nofirst #l02ng .ng-menu .ng-mic{
  width:calc(18 * var(--u))!important;
  height:calc(18 * var(--u))!important;
  flex:0 0 auto!important;
}
html.uk-nofirst #l02ng .ng-menu .ng-mic svg{
  width:calc(18 * var(--u))!important;
  height:calc(18 * var(--u))!important;
}
html.uk-nofirst #l02ng .ng-menu .ng-mi .ng-mt,
html.uk-nofirst #l02ng .ng-menu .ng-mt{
  font-size:calc(10 * var(--u))!important;
  line-height:1.15!important;
  font-weight:650!important;
  margin:0!important;
}
html.uk-nofirst #l02ng .ng-con{
  margin-left:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
html.uk-nofirst #l02ng .ng-list{
  padding:0 0 calc(96px + env(safe-area-inset-bottom, 0px))!important;
}
html.uk-nofirst #l02ng .ng-search{
  height:calc(37 * var(--u))!important;
  min-height:40px!important;
  margin:0 0 8px!important;
  padding:0 calc(12 * var(--u))!important;
  border-radius:calc(20 * var(--u))!important;
}
html.uk-nofirst #l02ng .ng-firms{
  margin:0 0 8px!important;
  padding:0!important;
}
html.uk-nofirst #l02ng .ng-firm-in{
  width:calc(64 * var(--u))!important;
  height:calc(32 * var(--u))!important;
  min-height:0!important;
}

html.uk-nofirst #l02ng .ng-grid{
  display:grid!important;
  grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  column-gap:8px!important;
  row-gap:8px!important;
  gap:8px!important;
}
html.uk-nofirst #l02ng .ng-card.ng-gc{
  position:relative!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  width:100%!important;
  overflow:hidden!important;
  border-radius:calc(12 * var(--u))!important;
  display:block!important;
}
html.uk-nofirst #l02ng .ng-gc>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
}
html.uk-nofirst #l02ng .ng-gc .ng-cap{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  top:auto!important;
  padding:calc(18 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u))!important;
  background:linear-gradient(180deg, rgba(20,10,40,0), rgba(20,10,40,.78))!important;
}
html.uk-nofirst #l02ng .ng-gc .ng-ct,
html.uk-nofirst #l02ng .ng-cap .ng-ct{
  display:block!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  -webkit-line-clamp:unset!important;
  font-size:calc(11 * var(--u))!important;
  font-weight:650!important;
  line-height:1.3!important;
  height:auto!important;
  max-height:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-align:center!important;
}
html.uk-nofirst #l02ng .ng-gc .ng-cs{
  height:calc(9 * var(--u))!important;
  margin-top:calc(2 * var(--u))!important;
}


/* 20261004-height homepage (#xcyl) only.
   Match the phone screenshot (472px image of a 390 CSS viewport):
   header, banner, 日榜/周榜, ticker, notice, search, two game rows
   and a sliver of the third above the live tab bar.
   Does not swap templates. Does not hide #ngtb-bar / #woai-tz-tabbar.
   Rollback: cp -a zzz.gameh.css.bak-20261004-height zzz.gameh.css */
html.uk-nofirst.ngtpl-xcyl #xcyl{
  --hh:calc(min(100vw, 430px) / 390);
}
html.uk-nofirst.ngtpl-xcyl #xcyl .xc-top{
  height:calc(56 * var(--hh))!important;
  min-height:0!important;
  padding:0 calc(10 * var(--hh))!important;
  box-sizing:border-box!important;
}
html.uk-nofirst.ngtpl-xcyl #xcyl .xc-main{
  padding:0 calc(10 * var(--hh)) 0!important;
}
html.uk-nofirst.ngtpl-xcyl #xcyl .xc-banner{
  aspect-ratio:1400/601!important;
  height:auto!important;
  margin:calc(4 * var(--hh)) 0 0!important;
}
html.uk-nofirst.ngtpl-xcyl #xcyl-rank{
  margin:calc(6 * var(--hh)) 0 calc(2 * var(--hh))!important;
}
html.uk-nofirst.ngtpl-xcyl #xcyl-rank .xr-card{
  padding:calc(6 * var(--hh)) calc(8 * var(--hh)) calc(4 * var(--hh))!important;
}
html.uk-nofirst.ngtpl-xcyl #xcyl-rank header{
  margin-bottom:calc(2 * var(--hh))!important;
}
html.uk-nofirst.ngtpl-xcyl #xcyl-rank .xr-view{
  height:calc(66 * var(--hh))!important;
}
html.uk-nofirst.ngtpl-xcyl #xcyl-rank .xr-mq{
  height:calc(30 * var(--hh))!important;
  margin-top:calc(6 * var(--hh))!important;
}
html.uk-nofirst.ngtpl-xcyl #xcyl .xc-notice{
  height:calc(32 * var(--hh))!important;
  min-height:0!important;
  margin-top:calc(6 * var(--hh))!important;
}
html.uk-nofirst.ngtpl-xcyl #xcyl .xc-search,
html.uk-nofirst.ngtpl-xcyl #xcyl .xc-hs{
  height:calc(34 * var(--hh))!important;
  min-height:0!important;
  margin-top:calc(6 * var(--hh))!important;
}
html.uk-nofirst.ngtpl-xcyl #xcyl .xc-split{
  gap:8px!important;
  margin-top:calc(6 * var(--hh))!important;
  padding:0!important;
}
html.uk-nofirst.ngtpl-xcyl #xcyl .xc-split .xc-rail{
  flex:0 0 calc(62 * var(--hh))!important;
  width:calc(62 * var(--hh))!important;
  gap:8px!important;
  max-height:none!important;
}
html.uk-nofirst.ngtpl-xcyl #xcyl .xc-hot .xc-grid,
html.uk-nofirst.ngtpl-xcyl #xcyl .xc-grid{
  gap:8px!important;
  row-gap:8px!important;
  column-gap:8px!important;
}
html.uk-nofirst.ngtpl-xcyl #ngtpl-root{
  padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px))!important; /* navup-20261007: was 76px */
}
html.uk-nofirst #l02ng .ng-grid.ng-grid-big{
  grid-template-columns:minmax(0,1fr)!important;
}
html.uk-nofirst #l02ng .ng-big{
  width:100%!important;
  aspect-ratio:268.08/144.58!important;
  height:auto!important;
}
html.uk-nofirst #l02ng .ng-big.ng-sport{
  aspect-ratio:1.2/1!important;
  background:#14120f!important;
}
html.uk-nofirst #l02ng .ng-big.ng-sport img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
html.uk-nofirst #l02ng .ng-big-t,
html.uk-nofirst #l02ng .ng-big-t b{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}