/* homepage rail + light purple glass */
html.ngtpl-xcyl,
html.ngtpl-xcyl body,
html.woai-web-lobby,
html.woai-web-lobby body{
  background:var(--tpl-bg,#D9CCF8)!important
}
html.ngtpl-xcyl body #ngtpl-root{
  background-color:var(--tpl-bg,#D9CCF8)!important;
  background-image:
    radial-gradient(42% 16% at 100% 0%,rgba(var(--tpl-primary-rgb,118,80,232),.16),rgba(var(--tpl-primary-rgb,118,80,232),0) 72%)),
    linear-gradient(180deg,var(--tpl-bg,#D9CCF8) 0%,var(--tpl-bg-2,#D0C0F6) 50%,var(--tpl-bg-3,#E0D4FA) 100%)!important;
  background-size:100% 100%,100% 100%!important;
  background-repeat:no-repeat!important
}
html.ngtpl-xcyl body #ngtpl-root #xcyl{background:transparent!important}
html.ngtpl-xcyl #xcyl{
  --xc-p:var(--tpl-primary,#7650E8);
  --xc-p2:var(--tpl-primary-2,#936CFF);
  --xc-tx:var(--tpl-text,#332A4A);
  --xc-sub:var(--tpl-text-2,#8C84A0);
  color:var(--tpl-text,#332A4A)
}
html.ngtpl-xcyl #xcyl .xc-top,
html.ngtpl-xcyl body #ngtpl-root #xcyl .xc-top.xc-sc{
  background:var(--tpl-bar,rgba(217,204,248,.94))!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:none
}
html.ngtpl-xcyl #xcyl .xc-top .xc-logo{
  height:calc(30*var(--xu))!important;
  max-width:calc(156*var(--xu))!important;
  margin-left:0!important
}
html.ngtpl-xcyl #xcyl .xc-bal{
  background:var(--tpl-card,rgba(255,255,255,.72))!important;
  border:1px solid var(--tpl-line,rgba(139,99,246,.12))!important;
  box-shadow:var(--tpl-shadow,0 6px 16px rgba(80,60,120,.06))!important;
  color:var(--tpl-text,#332A4A)!important
}
html.ngtpl-xcyl #xcyl .xc-bal span{color:var(--tpl-text,#332A4A)}
html.ngtpl-xcyl #xcyl .xc-bal i{color:var(--tpl-primary,#7650E8)!important}
html.ngtpl-xcyl #xcyl .xc-btn{
  background:linear-gradient(180deg,var(--tpl-primary-2,#936CFF) 0%,var(--tpl-primary-dark,#7048E8) 100%)!important;
  box-shadow:0 4px 10px rgba(80,60,120,.12)!important;
  color:#fff!important;
  border:0!important
}
html.ngtpl-xcyl #xcyl .xc-split{
  display:flex;
  align-items:flex-start;
  gap:calc(8*var(--xu));
  padding:calc(2*var(--xu)) calc(10*var(--xu)) calc(12*var(--xu)) calc(8*var(--xu))
}
html.ngtpl-xcyl #xcyl .xc-rail{
  position:sticky;
  top:calc(60*var(--xu));
  z-index:3;
  flex:0 0 calc(64*var(--xu));
  width:calc(64*var(--xu));
  display:flex;
  flex-direction:column;
  gap:calc(8*var(--xu));
  align-self:flex-start;
  max-height:calc(100vh - 168px);
  overflow-y:auto;
  scrollbar-width:none;
  padding-bottom:calc(4*var(--xu))
}
html.ngtpl-xcyl #xcyl .xc-rail::-webkit-scrollbar{display:none}
html.ngtpl-xcyl #xcyl .xc-rail .xc-ct{
  position:relative;
  flex:0 0 auto;
  width:100%;
  height:auto;
  min-height:calc(58*var(--xu));
  margin:0;
  padding:calc(7*var(--xu)) 0 calc(6*var(--xu));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(1*var(--xu));
  border:1px solid rgba(255,255,255,.75);
  border-radius:calc(18*var(--xu));
  background:rgba(255,255,255,.88);
  box-shadow:0 4px 12px rgba(112,70,221,.06);
  color:var(--tpl-text-2,#8C84A0);
  font-size:calc(10*var(--xu));
  font-weight:600;
  line-height:1.15
}
html.ngtpl-xcyl #xcyl .xc-rail .xc-ct i{
  width:calc(24*var(--xu));
  height:calc(24*var(--xu));
  margin:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:#A99BC8
}
html.ngtpl-xcyl #xcyl .xc-rail .xc-ct svg{
  width:calc(22*var(--xu));
  height:calc(22*var(--xu));
  filter:none
}
html.ngtpl-xcyl #xcyl .xc-rail .xc-ct span{color:var(--tpl-text-2,#8C84A0);font-weight:600}
html.ngtpl-xcyl #xcyl .xc-rail .xc-ct.on{
  background:linear-gradient(180deg,#9A78FF 0%,var(--tpl-primary-dark,#7048E8) 100%);
  border-color:transparent;
  box-shadow:0 6px 12px rgba(80,60,120,.1);
  color:#fff
}
html.ngtpl-xcyl #xcyl .xc-rail .xc-ct.on i,
html.ngtpl-xcyl #xcyl .xc-rail .xc-ct.on span{color:#fff}
html.ngtpl-xcyl #xcyl .xc-rail .xc-ct:active{transform:scale(.96)}
html.ngtpl-xcyl #xcyl .xc-pane{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:calc(8*var(--xu))
}
html.ngtpl-xcyl #xcyl .xc-vc.xc-vcard{
  position:relative;
  display:block;
  width:100%;
  height:auto!important;
  aspect-ratio:1.72/1;
  padding:0;
  border:0;
  border-radius:calc(16*var(--xu));
  overflow:hidden;
  background:transparent;
  box-shadow:0 6px 16px rgba(80,40,140,.1);
  line-height:0
}
html.ngtpl-xcyl #xcyl .xc-vc.xc-vcard::before{display:none!important}
html.ngtpl-xcyl #xcyl .xc-vc.xc-hero{aspect-ratio:2.12/1}
html.ngtpl-xcyl #xcyl .xc-vc.xc-vcard img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
  transform:scale(1.08);
  border-radius:0
}
html.ngtpl-xcyl #xcyl .xc-vgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(8*var(--xu))
}
html.ngtpl-xcyl #xcyl .xc-vc.xc-vcard.na{filter:none}
html.ngtpl-xcyl #xcyl .xc-vc.xc-lotcard{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:calc(16*var(--xu));
  text-align:left;
  line-height:1.25;
  color:#fff;
  background:linear-gradient(145deg,#9A78FF 0%,var(--tpl-primary,#7650E8) 48%,var(--tpl-primary-dark,#7048E8) 100%)!important;
  box-shadow:0 6px 14px rgba(80,60,120,.12)
}
html.ngtpl-xcyl #xcyl .xc-lotcard b{font-size:calc(20*var(--xu));font-weight:700}
html.ngtpl-xcyl #xcyl .xc-lotcard span{margin-top:calc(4*var(--xu));font-size:calc(12*var(--xu));opacity:.88}
html.ngtpl-xcyl #xcyl .xc-roomcard{
  height:auto!important;
  min-height:calc(64*var(--xu));
  padding:calc(10*var(--xu)) calc(12*var(--xu));
  border-radius:calc(14*var(--xu));
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 4px 12px rgba(112,70,221,.06);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left;
  color:var(--tpl-text,#332A4A);
  line-height:1.25
}
html.ngtpl-xcyl #xcyl .xc-roomcard::before{display:none!important}
html.ngtpl-xcyl #xcyl .xc-roomcard b{font-size:calc(13*var(--xu));font-weight:700}
html.ngtpl-xcyl #xcyl .xc-roomcard small{margin-top:2px;color:var(--tpl-text-2,#8C84A0);font-size:calc(11*var(--xu))}
html.ngtpl-xcyl #xcyl .xc-soon{
  min-height:calc(220*var(--xu));
  border-radius:calc(16*var(--xu));
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.75);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(6*var(--xu));
  color:var(--tpl-text-2,#8C84A0)
}
html.ngtpl-xcyl #xcyl .xc-soon i{color:#A99BC8}
html.ngtpl-xcyl #xcyl .xc-soon b{color:var(--tpl-text,#332A4A);font-size:calc(16*var(--xu))}
html.ngtpl-xcyl #xcyl .xc-soon span{font-size:calc(12*var(--xu))}
html.ngtb-xcyl body #ngtb-bar{
  --tb-i1:#B7AEC8;
  --tb-i2:#B7AEC8;
  --tb-i3:#B7AEC8;
  --tb-txt:var(--tpl-text-2,#8C84A0);
  background:var(--tpl-bar,rgba(217,204,248,.94))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 -4px 16px rgba(80,60,120,.05)!important
}
html.ngtb-xcyl body #ngtb-bar .tb-i1,
html.ngtb-xcyl body #ngtb-bar .tb-i2,
html.ngtb-xcyl body #ngtb-bar .tb-i3{stop-color:#B7AEC8!important}
html.ngtb-xcyl body #ngtb-bar .tb-a1{stop-color:var(--tpl-primary-2,#936CFF)!important}
html.ngtb-xcyl body #ngtb-bar .tb-a2{stop-color:var(--tpl-primary-dark,#7048E8)!important}
html.ngtb-xcyl body #ngtb-bar .tb-a3{stop-color:var(--tpl-primary,#7650E8)!important}
html.ngtb-xcyl body #ngtb-bar .ngtb-i.on,
html.ngtb-xcyl body #ngtb-bar .ngtb-i.on .ngtb-t{color:var(--tpl-primary,#7650E8)!important}
html.ngtb-xcyl body #ngtb-bar .ngtb-fab{
  background:linear-gradient(165deg,var(--tpl-primary-2,#936CFF) 0%,var(--tpl-primary,#7650E8) 46%,var(--tpl-primary-dark,#7048E8) 100%)!important;
  box-shadow:0 6px 14px rgba(80,60,120,.16)!important
}
html.ngtb-xcyl body #ngtb-bar .ngtb-glow{background:radial-gradient(ellipse at 50% 55%,rgba(var(--tpl-primary-rgb,118,80,232),.08) 0%,rgba(var(--tpl-primary-rgb,118,80,232),0) 70%)!important}
html.ngtb-xcyl body #ngtb-bar .ngtb-i.on .ngtb-ic svg{filter:none!important}
html.ngtb-xcyl body #ngtb-bar .ngtb-i.on .ngtb-ic::before{opacity:0!important}

html.ngtpl-xcyl #xcyl .xc-cats{
  height:auto;
  align-items:stretch;
  gap:calc(2*var(--xu));
  margin:calc(6*var(--xu)) calc(-8*var(--xu)) calc(2*var(--xu));
  padding:0 calc(8*var(--xu)) calc(4*var(--xu));
  scroll-padding-right:calc(28*var(--xu))
}
html.ngtpl-xcyl #xcyl .xc-ct{
  flex:0 0 calc(46*var(--xu));
  width:calc(46*var(--xu));
  height:auto;
  min-height:calc(58*var(--xu));
  margin:0;
  padding:calc(7*var(--xu)) 0 calc(5*var(--xu));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(2*var(--xu));
  border:0;
  border-radius:calc(18*var(--xu));
  background:transparent;
  box-shadow:none;
  color:var(--tpl-text-2,#8C84A0);
  font-size:calc(11*var(--xu));
  font-weight:600
}
html.ngtpl-xcyl #xcyl .xc-ct i{
  width:calc(24*var(--xu));
  height:calc(24*var(--xu));
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:var(--tpl-primary-2,#936CFF)
}
html.ngtpl-xcyl #xcyl .xc-ct svg{width:calc(22*var(--xu));height:calc(22*var(--xu));filter:none}
html.ngtpl-xcyl #xcyl .xc-ct span{color:var(--tpl-text-2,#8C84A0);font-weight:600}
html.ngtpl-xcyl #xcyl .xc-ct.on{
  background:linear-gradient(180deg,#9A78FF 0%,var(--tpl-primary-dark,#7048E8) 100%);
  border-color:transparent;
  box-shadow:0 6px 12px rgba(80,60,120,.1);
  color:#fff
}
html.ngtpl-xcyl #xcyl .xc-ct.on i,
html.ngtpl-xcyl #xcyl .xc-ct.on span{color:#fff;background:none;border-color:transparent;box-shadow:none}
html.ngtpl-xcyl #xcyl .xc-cmore{
  position:sticky;
  right:0;
  z-index:2;
  flex:0 0 calc(28*var(--xu));
  align-self:stretch;
  margin-left:calc(-6*var(--xu));
  color:#A99BC8;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  background:linear-gradient(90deg,rgba(217,204,248,0),var(--tpl-bg,#D9CCF8) 46%)
}

/* vendor area: left rail + logo glass cards. layout only; logos are official files */
html.ngtpl-xcyl #xcyl .xc-split{
  display:flex;
  align-items:flex-start;
  gap:calc(8*var(--xu));
  padding:calc(8*var(--xu)) calc(10*var(--xu)) calc(16*var(--xu));
}
html.ngtpl-xcyl #xcyl .xc-rail{
  position:sticky;
  top:calc(62*var(--xu));
  z-index:4;
  flex:0 0 calc(64*var(--xu));
  width:calc(64*var(--xu));
  display:flex;
  flex-direction:column;
  gap:calc(8*var(--xu));
  max-height:calc(100vh - 150px);
  max-height:calc(100dvh - 150px);
  overflow-y:auto;
  scrollbar-width:none;
  padding-bottom:calc(8*var(--xu));
}
html.ngtpl-xcyl #xcyl .xc-rail::-webkit-scrollbar{display:none}
html.ngtpl-xcyl #xcyl .xc-rail .xc-ct{
  flex:0 0 auto;
  width:100%;
  min-height:calc(58*var(--xu));
  margin:0;
  padding:calc(7*var(--xu)) 0 calc(6*var(--xu));
  border:1px solid var(--tpl-line,rgba(139,99,246,.12));
  border-radius:calc(16*var(--xu));
  background:rgba(255,255,255,.72);
  box-shadow:0 4px 12px rgba(80,60,120,.05);
  color:var(--tpl-text-2,#8C84A0);
}
html.ngtpl-xcyl #xcyl .xc-rail .xc-ct i{color:var(--tpl-primary-2,#936CFF)}
html.ngtpl-xcyl #xcyl .xc-rail .xc-ct span{color:var(--tpl-text-2,#8C84A0)}
html.ngtpl-xcyl #xcyl .xc-rail .xc-ct.on{
  background:linear-gradient(180deg,#9A78FF 0%,var(--tpl-primary-dark,#7048E8) 100%);
  border-color:transparent;
  box-shadow:0 6px 12px rgba(80,60,120,.12);
  color:#fff;
}
html.ngtpl-xcyl #xcyl .xc-rail .xc-ct.on i,
html.ngtpl-xcyl #xcyl .xc-rail .xc-ct.on span{color:#fff}
html.ngtpl-xcyl #xcyl .xc-pane{flex:1 1 auto;min-width:0}
html.ngtpl-xcyl #xcyl .xc-pane .xc-sec{display:none}
html.ngtpl-xcyl #xcyl .xc-pane .xc-sec.xc-on{display:block}
html.ngtpl-xcyl #xcyl .xc-pane .xc-h{display:none}
html.ngtpl-xcyl #xcyl .xc-sec[data-k="slot"] .xc-sb,
html.ngtpl-xcyl #xcyl .xc-sec[data-k="fish"] .xc-sb,
html.ngtpl-xcyl #xcyl .xc-sec[data-k="live"] .xc-sb{
  display:flex!important;
  flex-direction:column!important;
  gap:calc(8*var(--xu));
}
html.ngtpl-xcyl #xcyl .xc-vpair{
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:calc(8*var(--xu));
}
html.ngtpl-xcyl #xcyl .xc-soon{
  min-height:calc(180*var(--xu));
  border-radius:calc(16*var(--xu));
  background:rgba(255,255,255,.72);
  border:1px solid var(--tpl-line,rgba(139,99,246,.12));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(6*var(--xu));
  color:var(--tpl-text-2,#8C84A0);
}
html.ngtpl-xcyl #xcyl .xc-soon b{color:var(--tpl-text,#332A4A);font-size:calc(16*var(--xu))}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  height:calc(74*var(--xu));
  margin:0;
  padding:0 calc(10*var(--xu)) 0 calc(12*var(--xu));
  border:1px solid rgba(255,255,255,.8);
  border-radius:calc(16*var(--xu));
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(236,228,255,.62));
  box-shadow:0 6px 16px rgba(80,60,120,.06);
}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand::before{display:none}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand.xc-hero{
  width:100%!important;
  height:calc(132*var(--xu));
  padding-left:calc(16*var(--xu));
}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand .xc-wm{
  position:absolute;
  top:0; right:0; bottom:0; left:auto;
  width:52%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  opacity:.16;
  pointer-events:none;
}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand .xc-wm img{
  width:92%;
  height:86%;
  object-fit:contain;
  object-position:right center;
  transform:none;
}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand.xc-hero .xc-wm{width:56%;opacity:.18}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand .xc-mark{
  position:relative;
  z-index:1;
  width:auto;
  height:auto;
  max-width:62%;
  max-height:64%;
  margin-right:auto;
  object-fit:contain;
  object-position:left center;
  background:transparent;
}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand.xc-hero .xc-mark{max-width:46%;max-height:58%}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand.is-light .xc-mark{
  background:rgba(92,62,168,.55);
  border-radius:calc(8*var(--xu));
  padding:calc(4*var(--xu)) calc(8*var(--xu));
  box-sizing:content-box;
}

/* glass cards: beat the 92px rule, keep the logo left of the watermark */
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand:not(.xc-room):not(.xc-sk){
  height:calc(74*var(--xu))!important;
  aspect-ratio:auto!important;
}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand.xc-hero:not(.xc-room):not(.xc-sk){
  height:calc(128*var(--xu))!important;
  aspect-ratio:auto!important;
}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand::after{display:none!important}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand .xc-mark{
  max-width:46%;
  max-height:62%;
}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand.xc-hero .xc-mark{
  max-width:40%;
  max-height:56%;
}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand .xc-wm{
  width:38%;
  opacity:.13;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);
  mask-image:linear-gradient(90deg,transparent,#000 34%);
}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand.xc-hero .xc-wm{
  width:42%;
  opacity:.15;
}
html.ngtpl-xcyl #xcyl .xc-vc.xc-brand.is-light .xc-mark{
  box-sizing:border-box;
  max-width:48%;
  padding:calc(3*var(--xu)) calc(6*var(--xu));
}

/* page field is lilac; beat a stale --tpl-bg that still resolves near white */
html.ngtpl-xcyl{
  --tpl-bg:#D9CCF8!important;
  --tpl-bg-2:#D0C0F6!important;
  --tpl-bg-3:#E0D4FA!important;
  --tpl-bar:rgba(217,204,248,.94)!important;
}

/* hot covers: picture only, name underneath, two columns */
html.ngtpl-xcyl #xcyl .xc-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:calc(10*var(--xu))!important;
}
html.ngtpl-xcyl #xcyl .xc-grid .xc-g{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:calc(5*var(--xu));
  min-width:0;
  margin:0;
  padding:calc(6*var(--xu)) calc(6*var(--xu)) calc(7*var(--xu));
  border-radius:calc(14*var(--xu));
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 6px 16px rgba(80,60,120,.06);
}
html.ngtpl-xcyl #xcyl .xc-grid .xc-g>.xc-gi{
  aspect-ratio:1/1!important;
  width:100%;
  border-radius:calc(10*var(--xu));
}
html.ngtpl-xcyl #xcyl .xc-grid .xc-gi::after,
html.ngtpl-xcyl #xcyl .xc-grid .xc-sup,
html.ngtpl-xcyl #xcyl .xc-grid .xc-tag,
html.ngtpl-xcyl #xcyl .xc-grid .xc-heat{display:none!important}
html.ngtpl-xcyl #xcyl .xc-grid .xc-gi p,
html.ngtpl-xcyl #xcyl .xc-grid .xc-g>p{
  position:static!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:auto;
  margin:0;
  padding:0 calc(22*var(--xu)) 0 calc(2*var(--xu));
  color:var(--tpl-text,#332A4A)!important;
  text-shadow:none!important;
  text-align:left!important;
  font-size:calc(12*var(--xu))!important;
  font-weight:650;
  line-height:1.3;
}
html.ngtpl-xcyl #xcyl .xc-grid .xc-g>.xc-star{
  top:auto!important;
  bottom:calc(6*var(--xu))!important;
  right:calc(4*var(--xu))!important;
  width:calc(22*var(--xu));
  height:calc(22*var(--xu));
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#B7A8D6;
}

/* keep the title under the picture, star beside the title */
html.ngtpl-xcyl #xcyl .xc-grid .xc-g{
  padding:calc(6*var(--xu)) calc(6*var(--xu)) calc(28*var(--xu))!important;
}
html.ngtpl-xcyl #xcyl .xc-grid .xc-gi{
  position:static!important;
}
html.ngtpl-xcyl #xcyl .xc-grid .xc-gi p,
html.ngtpl-xcyl #xcyl .xc-grid .xc-g>p{
  position:absolute!important;
  top:auto!important;
  left:calc(10*var(--xu))!important;
  right:calc(28*var(--xu))!important;
  bottom:calc(6*var(--xu))!important;
  margin:0!important;
  padding:0!important;
  color:#332A4A!important;
  text-shadow:none!important;
  text-align:left!important;
  font-size:calc(12*var(--xu))!important;
  font-weight:650!important;
  z-index:3;
}
html.ngtpl-xcyl #xcyl .xc-grid .xc-g>.xc-star{
  top:auto!important;
  bottom:calc(4*var(--xu))!important;
  right:calc(4*var(--xu))!important;
  z-index:4;
}

/* homepage covers: horizontal row, badge on the picture, name underneath */
html.ngtpl-xcyl #xcyl .xc-chips{
  display:flex;
  gap:calc(6*var(--xu));
  overflow-x:auto;
  scrollbar-width:none;
  padding:calc(8*var(--xu)) 0 calc(4*var(--xu));
}
html.ngtpl-xcyl #xcyl .xc-chips::-webkit-scrollbar{display:none}
html.ngtpl-xcyl #xcyl .xc-tabs[data-t="recent"]+.xc-chips,
html.ngtpl-xcyl #xcyl .xc-tabs[data-t="fav"]+.xc-chips{display:none!important}
html.ngtpl-xcyl #xcyl .xc-chip{
  flex:0 0 auto;
  height:calc(26*var(--xu));
  min-height:26px;
  padding:0 calc(12*var(--xu));
  border-radius:999px;
  border:1px solid rgba(139,99,246,.16);
  background:rgba(255,255,255,.78);
  color:#6d6488;
  font-size:calc(12*var(--xu));
  font-weight:650;
}
html.ngtpl-xcyl #xcyl .xc-chip.on{
  background:linear-gradient(180deg,#9A78FF,#7048E8);
  color:#fff;
  border-color:transparent;
}
html.ngtpl-xcyl #xcyl .xc-grid{
  display:flex!important;
  flex-wrap:nowrap!important;
  grid-template-columns:none!important;
  gap:calc(8*var(--xu))!important;
  overflow-x:auto!important;
  overflow-y:hidden;
  scrollbar-width:none;
  padding:calc(2*var(--xu)) 0 calc(6*var(--xu))!important;
  scroll-snap-type:x mandatory;
}
html.ngtpl-xcyl #xcyl .xc-grid::-webkit-scrollbar{display:none}
html.ngtpl-xcyl #xcyl .xc-grid .xc-g{
  flex:0 0 calc((100% - calc(16 * var(--xu))) / 3.05)!important;
  width:calc((100% - calc(16 * var(--xu))) / 3.05)!important;
  min-width:0;
  scroll-snap-align:start;
  display:flex!important;
  flex-direction:column!important;
  gap:calc(4*var(--xu))!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  position:relative;
}
html.ngtpl-xcyl #xcyl .xc-grid .xc-gi{
  position:relative!important;
  aspect-ratio:1/1!important;
  width:100%!important;
  height:auto!important;
  border-radius:calc(12*var(--xu))!important;
  overflow:hidden!important;
}
html.ngtpl-xcyl #xcyl .xc-grid .xc-sup{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  position:absolute!important;
  left:calc(5*var(--xu))!important;
  top:calc(5*var(--xu))!important;
  right:auto!important;
  bottom:auto!important;
  z-index:3;
  height:calc(16*var(--xu));
  padding:0 calc(5*var(--xu))!important;
  border-radius:calc(5*var(--xu));
  background:rgba(20,12,40,.72);
  color:#fff!important;
  font-size:calc(9*var(--xu))!important;
  font-weight:800;
  line-height:1;
}
html.ngtpl-xcyl #xcyl .xc-sup-PG{background:#1f9d55!important}
html.ngtpl-xcyl #xcyl .xc-sup-JDB{background:#7a3ff2!important}
html.ngtpl-xcyl #xcyl .xc-sup-FC{background:#e8891a!important}
html.ngtpl-xcyl #xcyl .xc-sup-PP{background:#ff5a36!important}
html.ngtpl-xcyl #xcyl .xc-sup-CQ9{background:#5b4bdb!important}
html.ngtpl-xcyl #xcyl .xc-grid .xc-g>p{
  position:static!important;
  display:block!important;
  width:100%;
  margin:0!important;
  padding:0!important;
  color:var(--tpl-text,#332A4A)!important;
  text-shadow:none!important;
  text-align:center!important;
  font-size:calc(11*var(--xu))!important;
  font-weight:650!important;
  line-height:1.3!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html.ngtpl-xcyl #xcyl .xc-grid .xc-g>.xc-star{
  position:absolute!important;
  top:calc(4*var(--xu))!important;
  right:calc(4*var(--xu))!important;
  bottom:auto!important;
  width:calc(18*var(--xu))!important;
  height:calc(18*var(--xu))!important;
  border-radius:50%;
  background:rgba(20,12,40,.4)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:none!important;
  z-index:4;
}
html.ngtpl-xcyl #xcyl .xc-grid .xc-tag,
html.ngtpl-xcyl #xcyl .xc-grid .xc-heat,
html.ngtpl-xcyl #xcyl .xc-grid .xc-gi::after{display:none!important}
html.ngtpl-xcyl #xcyl .xc-grid .xc-empty{flex:1 0 100%}

/* hot: name inside the cover, no vendor row */
html.ngtpl-xcyl #xcyl .xc-hot .xc-chips{display:none!important}
html.ngtpl-xcyl #xcyl .xc-grid .xc-sup{display:none!important}
html.ngtpl-xcyl #xcyl .xc-grid .xc-gi>p{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  top:auto!important;
  z-index:2;
  display:block!important;
  box-sizing:border-box;
  width:100%!important;
  margin:0!important;
  padding:calc(18*var(--xu)) calc(4*var(--xu)) calc(6*var(--xu))!important;
  background:linear-gradient(180deg,rgba(20,10,40,0),rgba(20,10,40,.78))!important;
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.45)!important;
  text-align:center!important;
  font-size:calc(11*var(--xu))!important;
  font-weight:700!important;
  line-height:1.2!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}

/* hot title overlays the cover even if cached JS still puts the name under the image */
html.ngtpl-xcyl #xcyl .xc-grid .xc-g>p,
html.ngtpl-xcyl #xcyl .xc-grid .xc-gi>p{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  top:auto!important;
  z-index:3;
  display:block!important;
  box-sizing:border-box;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  padding:calc(18*var(--xu)) calc(4*var(--xu)) calc(6*var(--xu))!important;
  background:linear-gradient(180deg,rgba(20,10,40,0),rgba(20,10,40,.78))!important;
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.45)!important;
  text-align:center!important;
  font-size:calc(11*var(--xu))!important;
  font-weight:700!important;
  line-height:1.2!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}

html.ngtpl-xcyl #xcyl .xc-banner{
  aspect-ratio:1400/601!important;
}

html.ngtpl-xcyl #xcyl .xc-slide img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;background:#D9CCF8}/*bak-20260929b: was object-fit:contain*/
html.ngtpl-xcyl #xcyl .xc-banner:not(.xc-one) .xc-dots{display:flex!important}
/*grid-20260929: 热门/最近/收藏 as 3-col grid listed downward (was 1-row horizontal scroller); card width unchanged*/
html.ngtpl-xcyl #xcyl .xc-hot .xc-grid:not(.xc-vbanners){display:grid!important;grid-template-columns:repeat(3,calc((100% - calc(16 * var(--xu))) / 3.05))!important;justify-content:space-between!important;row-gap:calc(8*var(--xu))!important;column-gap:0!important;overflow:visible!important;scroll-snap-type:none!important}
html.ngtpl-xcyl #xcyl .xc-hot .xc-grid:not(.xc-vbanners) .xc-g{flex:none!important;width:auto!important;scroll-snap-align:none}
html.ngtpl-xcyl #xcyl .xc-hot .xc-grid:not(.xc-vbanners) .xc-empty{grid-column:1/-1}
/*side3-20260929: 游戏分类侧栏·浅紫珍珠版 compact — rail = original 64px footprint, tiles 64x46 (capped), icon left / text right; replaces side2-20260929*/
html.ngtpl-xcyl #xcyl .xc-split .xc-rail{flex:0 0 calc(min(calc(64*var(--xu)),68px) + min(calc(20*var(--xu)),21px));width:calc(min(calc(64*var(--xu)),68px) + min(calc(20*var(--xu)),21px));box-sizing:border-box;margin-left:calc(-1*min(calc(12*var(--xu)),13px));margin-right:calc(-1*min(calc(8*var(--xu)),8px));padding:2px min(calc(8*var(--xu)),8px) min(calc(12*var(--xu)),13px) min(calc(12*var(--xu)),13px);gap:min(calc(6*var(--xu)),6.5px)}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct{flex:none;width:100%;height:clamp(44px,calc(46*var(--xu)),48px);min-height:0;margin:0;padding:0 min(calc(4*var(--xu)),4px);box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:min(calc(3*var(--xu)),3.5px);border:1px solid rgba(255,255,255,.94);border-radius:min(calc(13*var(--xu)),14px);background:linear-gradient(151deg,#faf7ff 1%,#eee7fa 48%,#e6daf6 100%);box-shadow:0 min(calc(4*var(--xu)),4px) min(calc(9*var(--xu)),10px) rgba(105,67,151,.11),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(131,93,180,.08);color:#79599b;overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct::after{content:"";position:absolute;inset:min(calc(2.5*var(--xu)),3px);border-radius:min(calc(10.5*var(--xu)),11px);border:1px solid rgba(255,255,255,.42);pointer-events:none}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct i{position:relative;flex:0 0 auto;width:min(calc(22*var(--xu)),23px);height:min(calc(22*var(--xu)),23px);margin:0;padding:0;box-sizing:border-box;border-radius:min(calc(7.5*var(--xu)),8px);display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#fff,#e0d2f2);border:1px solid rgba(255,255,255,.98);box-shadow:0 1px min(calc(3.5*var(--xu)),4px) rgba(110,74,159,.13),inset 0 1px 1px #fff;color:#8b66b6}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct:is([data-k="hot"],[data-k="slot"],[data-k="fish"],[data-k="live"],[data-k="lottery"],[data-k="sports"],[data-k="esports"],[data-k="chess"]) i svg{display:none}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct:is([data-k="hot"],[data-k="slot"],[data-k="fish"],[data-k="live"],[data-k="lottery"],[data-k="sports"],[data-k="esports"],[data-k="chess"]) i::before{content:"";width:min(calc(14.5*var(--xu)),15px);height:min(calc(14.5*var(--xu)),15px);background:currentColor;-webkit-mask:var(--xc-ic2) center/contain no-repeat;mask:var(--xc-ic2) center/contain no-repeat}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct span{margin:0;color:inherit;font-size:min(calc(10*var(--xu)),10.5px);font-weight:700;line-height:1;letter-spacing:.3px;text-shadow:0 1px #fff;white-space:nowrap}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct[data-k="hot"]{--xc-ic2:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 2c1 5-4 6-2 10 2-1 3-4 3-5 5 4 7 10 4 14-2 3-5 4-8 3-5-2-7-7-5-11 1-3 4-5 5-7 0 3 1 5 3 6%22/%3E%3C/svg%3E")}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct[data-k="slot"]{--xc-ic2:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%226%22 width=%2218%22 height=%2214%22 rx=%223%22/%3E%3Cpath d=%22M7 10h2m2 0h2m2 0h2M6 16h12M21 8h2v9%22/%3E%3C/svg%3E")}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct[data-k="fish"]{--xc-ic2:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 13c4-6 10-8 16-4l3-3v14l-3-3c-6 4-12 2-16-4Z%22/%3E%3Ccircle cx=%2210%22 cy=%2211%22 r=%221%22 fill=%22%23000%22 stroke=%22none%22/%3E%3C/svg%3E")}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct[data-k="live"]{--xc-ic2:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2216%22 rx=%224%22/%3E%3Cpath d=%22m10 8 6 4-6 4V8Z%22/%3E%3C/svg%3E")}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct[data-k="lottery"]{--xc-ic2:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%225%22/%3E%3Cpath d=%22M10 10c0-2 4-2 4 0 0 1-4 1-4 3s4 2 4 0%22/%3E%3C/svg%3E")}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct[data-k="sports"]{--xc-ic2:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m12 7 4 3-1 5H9l-1-5 4-3ZM5 9l3 1m8 0 3-1M9 15l-2 4m8-4 2 4%22/%3E%3C/svg%3E")}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct[data-k="esports"]{--xc-ic2:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 8h10c3 0 4 2 5 7l1 4c0 2-2 3-4 2l-4-3H9l-4 3c-2 1-4 0-4-2l1-4c1-5 2-7 5-7Z%22/%3E%3Cpath d=%22M8 12v5m-2.5-2.5h5M16 13h.01M19 15h.01%22/%3E%3C/svg%3E")}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct[data-k="chess"]{--xc-ic2:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%225%22 width=%2212%22 height=%2216%22 rx=%222%22 transform=%22rotate(-12 10 13)%22/%3E%3Crect x=%2210%22 y=%224%22 width=%2212%22 height=%2216%22 rx=%222%22 transform=%22rotate(8 16 12)%22/%3E%3Cpath d=%22m16 11 2 2-2 2-2-2 2-2Z%22/%3E%3C/svg%3E")}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct.on{background:linear-gradient(148deg,#b99add 0%,#9a74cc 50%,#7c54b7 100%);border-color:#d7c1f2;color:#fff;box-shadow:0 min(calc(5*var(--xu)),5px) min(calc(12*var(--xu)),12px) rgba(105,59,160,.32),inset 0 1px 0 rgba(255,255,255,.72),inset 0 -2px 0 rgba(66,26,126,.13)}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct.on::before{content:"";position:absolute;left:-2px;top:50%;width:2.5px;height:min(calc(20*var(--xu)),21px);transform:translateY(-50%);border-radius:5px;background:#faf5ff;box-shadow:0 0 min(calc(5*var(--xu)),5px) 1.5px rgba(246,235,255,.9);pointer-events:none}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct.on i{background:linear-gradient(145deg,#eee3fb,#b495db);border-color:rgba(255,255,255,.65);color:#624090;box-shadow:inset 0 1px 1px #fff,0 1px min(calc(4.5*var(--xu)),5px) rgba(68,28,117,.24)}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct.on span{color:#fff;text-shadow:0 1px 2px rgba(70,29,121,.35)}
/*side3 tabs: keep 全部游戏 inside the pane*/
html.ngtpl-xcyl #xcyl .xc-split .xc-pane .xc-tabs button{margin-right:calc(22*var(--xu))}
html.ngtpl-xcyl #xcyl .xc-split .xc-pane .xc-tabs{max-width:100%;box-sizing:border-box}
/*side4-20260929: 热门搜索 + 全部游戏 buttons in the 浅紫珍珠 sidebar style (same gradient/border/shadow; pressed = sidebar .on gradient)*/
html.ngtpl-xcyl #xcyl .xc-hs,html.ngtpl-xcyl #xcyl .xc-all{background:linear-gradient(151deg,#faf7ff 1%,#eee7fa 48%,#e6daf6 100%);border:1px solid rgba(255,255,255,.94);box-shadow:0 min(calc(3*var(--xu)),3.5px) min(calc(8*var(--xu)),9px) rgba(105,67,151,.12),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(131,93,180,.08);color:#6f4f94;font-weight:700;text-shadow:0 1px #fff;transition:transform .15s,background .15s,color .15s}
html.ngtpl-xcyl #xcyl .xc-hs svg path:first-of-type{fill:#8b66b6}
html.ngtpl-xcyl #xcyl .xc-hs svg path:last-of-type{fill:#f1e8fc}
html.ngtpl-xcyl #xcyl .xc-all svg{color:#8b66b6}
html.ngtpl-xcyl #xcyl .xc-hs:active,html.ngtpl-xcyl #xcyl .xc-all:active{background:linear-gradient(148deg,#b99add 0%,#9a74cc 50%,#7c54b7 100%);border-color:#d7c1f2;color:#fff;text-shadow:0 1px 2px rgba(70,29,121,.35);box-shadow:0 min(calc(4*var(--xu)),4.5px) min(calc(10*var(--xu)),11px) rgba(105,59,160,.3),inset 0 1px 0 rgba(255,255,255,.72),inset 0 -2px 0 rgba(66,26,126,.13)}
html.ngtpl-xcyl #xcyl .xc-hs:active svg path:first-of-type{fill:#fff}
html.ngtpl-xcyl #xcyl .xc-hs:active svg path:last-of-type{fill:#9a74cc}
html.ngtpl-xcyl #xcyl .xc-all:active svg{color:#fff}
@media (hover:hover){html.ngtpl-xcyl #xcyl .xc-hs:hover,html.ngtpl-xcyl #xcyl .xc-all:hover{border-color:#e3d3f7;color:#5d3f86}}

/*flame-20260929: 热门 flame recolored to the light-purple pearl palette*/
html.ngtpl-xcyl #xcyl .xc-tabs button[data-t="hot"] .xc-ti svg path[fill^="url"]{fill:#8b66b6!important}
html.ngtpl-xcyl #xcyl .xc-split .xc-rail .xc-ct[data-k="hot"] i{color:#8b66b6}