/* ============================================================
   LUCKZOO NEW LOBBY BACKGROUND — 1870 × 841
   FINAL OVERRIDE
   ------------------------------------------------------------
   This file changes ONLY:
   - lobby artwork fit/scale
   - live Player/Balance overlays
   - invisible hotspot coordinates
   Existing lobby.js, account links, startup popups and modules remain intact.
   ============================================================ */

html,
body{
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#00150d!important;
}

/*
  Same principle as the game canvas:
  keep the artwork's exact 1870:841 geometry and scale the COMPLETE lobby
  as one unit.  On 2400×1080 landscape it almost exactly fills the screen.
*/
.lobby-stage{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  width:min(100vw, calc(100vh * 1870 / 841))!important;
  height:auto!important;
  aspect-ratio:1870 / 841!important;
  max-width:100vw!important;
  max-height:100vh!important;
  margin:0!important;
  padding:0!important;
  transform:translate(-50%,-50%)!important;
  overflow:visible!important;
  background:#00150d!important;
  z-index:1!important;
}

.lobby-background{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:fill!important;
  object-position:center!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  pointer-events:none!important;
}

/* The old visual online pill is not part of the new artwork.
   Keep the element in DOM because lobby.js still updates it. */
.lobby-stage > .status-pill{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* All image hotspots are transparent and scale WITH the artwork. */
.lobby-stage .hotspot{
  position:absolute!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:0!important;
  z-index:20!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
}

/* ---------------- LIVE PLAYER / BALANCE ---------------- */

/* Text area to the RIGHT of the avatar ring. */
.lobby-stage .identity-overlay{
  position:absolute!important;
  left:13.25%!important;
  top:10.25%!important;
  width:11.65%!important;
  height:9.05%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#fff!important;
  z-index:24!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  overflow:hidden!important;
  cursor:pointer!important;
}
.lobby-stage .identity-overlay span{
  display:block!important;
  width:100%!important;
  font-size:clamp(12px,1.18vw,22px)!important;
  line-height:1.05!important;
  font-weight:900!important;
  color:#fff!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:center!important;
  text-shadow:0 1px 2px #000!important;
}
.lobby-stage .identity-overlay small{
  display:block!important;
  width:100%!important;
  margin-top:2px!important;
  font-size:clamp(7px,.62vw,12px)!important;
  line-height:1!important;
  font-weight:800!important;
  color:#55dc7b!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:center!important;
  text-shadow:0 1px 1px #000!important;
}

/* Number area to the RIGHT of the gold coin icon. */
.lobby-stage .balance-overlay{
  position:absolute!important;
  left:30.55%!important;
  top:10.25%!important;
  width:11.20%!important;
  height:9.05%!important;
  margin:0!important;
  padding:0!important;
  z-index:24!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.lobby-stage .balance-overlay b{
  display:block!important;
  width:100%!important;
  color:#fff!important;
  font-size:clamp(13px,1.34vw,25px)!important;
  line-height:1!important;
  font-weight:900!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:0 1px 2px #000!important;
}

/* ---------------- TOP ICON HOTSPOTS ---------------- */
/* New source artwork: 1870 × 841 */

.hs-checkin{
  left:51.15%!important;
  top:8.15%!important;
  width:5.55%!important;
  height:13.20%!important;
}
.hs-vipgift{
  left:56.72%!important;
  top:8.05%!important;
  width:5.55%!important;
  height:13.35%!important;
}
.hs-history{
  left:62.74%!important;
  top:8.05%!important;
  width:5.50%!important;
  height:13.35%!important;
}
.hs-refer-top{
  left:68.90%!important;
  top:8.05%!important;
  width:5.55%!important;
  height:13.35%!important;
}
.hs-bind{
  left:75.12%!important;
  top:8.05%!important;
  width:5.25%!important;
  height:13.35%!important;
}
.hs-account{
  left:81.20%!important;
  top:8.05%!important;
  width:5.75%!important;
  height:13.35%!important;
}
.hs-settings{
  left:87.70%!important;
  top:8.05%!important;
  width:5.80%!important;
  height:13.35%!important;
}

/* ---------------- HERO PLAY ---------------- */
.hs-play{
  left:11.35%!important;
  top:58.55%!important;
  width:23.35%!important;
  height:12.55%!important;
}

/* ---------------- BOTTOM ICON HOTSPOTS ---------------- */
.hs-refer-bottom{
  left:10.95%!important;
  top:76.75%!important;
  width:8.45%!important;
  height:19.05%!important;
}
.hs-vip-bottom{
  left:23.90%!important;
  top:76.60%!important;
  width:8.50%!important;
  height:19.20%!important;
}
.hs-bonuses{
  left:38.75%!important;
  top:76.45%!important;
  width:9.25%!important;
  height:19.35%!important;
}
.hs-transactions{
  left:50.55%!important;
  top:76.45%!important;
  width:10.75%!important;
  height:19.35%!important;
}
.hs-withdraw{
  left:66.15%!important;
  top:76.45%!important;
  width:9.35%!important;
  height:19.35%!important;
}
.hs-deposit{
  left:80.55%!important;
  top:76.20%!important;
  width:9.35%!important;
  height:19.60%!important;
}

/* Keep accessibility text invisible without altering geometry. */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/*
  On portrait displays, still preserve the complete artwork instead of
  reflowing/repositioning individual buttons.  It scales as one canvas.
*/
@media (orientation:portrait){
  .lobby-stage{
    width:100vw!important;
    max-width:100vw!important;
  }
}


/* Guest lobby identity: show only the Guest display name, centered in the text box. */
.lobby-stage .identity-overlay.guest-name-only small{display:none!important}
.lobby-stage .identity-overlay.guest-name-only span{margin:0!important}