:root{--gold:#ffd13e;--green:#19d873;--bg:#011008;--panel:#071b10}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:#fff;background:#010b06}
body{overflow-x:hidden;background:#010b06 url("login-background.webp") center center / cover no-repeat fixed}
button,input{font:inherit}.hide{display:none!important}
.stage{min-height:100vh;display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(360px,.95fr);align-items:center;width:min(1180px,100%);margin:auto;padding:30px 5vw;position:relative}
.ambient{position:fixed;border-radius:50%;filter:blur(70px);opacity:.2;pointer-events:none}.a1{width:420px;height:420px;background:#1bff84;left:-160px;bottom:-180px}.a2{width:340px;height:340px;background:#d9b52c;right:-140px;top:-130px}
.character{height:650px;position:relative;display:grid;place-items:center}.character .halo{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,#37ff9560 0,#25ce6630 38%,transparent 70%);filter:blur(8px)}
.character img{position:relative;width:min(430px,86%);max-height:520px;object-fit:contain;filter:drop-shadow(0 25px 28px #000c) drop-shadow(0 0 25px #21cf6d55);transform:scale(1.05)}

.auth-card{position:relative;width:min(480px,100%);justify-self:center;border:1px solid #9f7a1b;border-radius:24px;background:linear-gradient(145deg,#0b2718ee,#06160dee);box-shadow:0 30px 80px #000b,0 0 0 1px #1b522f inset;padding:28px;backdrop-filter:blur(15px)}
.brand{font-weight:1000;font-size:34px;letter-spacing:1px;color:#fff}.brand span{color:var(--gold)}.brand small{display:block;color:#57e68b;font-size:8px;letter-spacing:4px;margin-top:3px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:22px 0 18px}.tabs button{height:45px;border:1px solid #3d6147;border-radius:11px;background:#07190f;color:#81998a;font-weight:1000}.tabs button.active{background:linear-gradient(#ffda5e,#ad7608);border-color:#f7c23d;color:#171006}
.pane>label,.modal label{display:block;color:#91aa99;font-size:10px;margin:12px 0 6px}.phone-field,.password{display:flex;height:48px;border:1px solid #436249;border-radius:11px;background:#03120a;overflow:hidden}.phone-field span{display:flex;align-items:center;padding:0 12px;border-right:1px solid #2e4835;color:#65e892;font-size:10px;font-weight:900}.phone-field input,.password input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;padding:0 12px}.password button{width:48px;border:0;background:transparent;color:#62d984}.helper{display:flex;align-items:center;margin:10px 0 14px;font-size:9px;color:#8da293}.helper label{margin:0}.helper button{margin-left:auto;border:0;background:transparent;color:#eac34d}.primary,.guest{width:100%;height:48px;border:0;border-radius:12px;font-weight:1000}.primary{background:linear-gradient(#ffd95e,#b07808);color:#181006;box-shadow:0 8px 20px #b8821640}.primary.blue{background:linear-gradient(#4ee69a,#0a9852);color:#032012}.guest{background:#082015;border:1px solid #4a6650!important;color:#eaf7ee}.or{display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:center;margin:14px 0}.or span{height:1px;background:#294332}.or b{font-size:8px;color:#62796a}.agree{display:flex!important;gap:7px;align-items:center}.auth-card footer{margin-top:18px;border-top:1px solid #24402e;padding-top:12px;display:flex;font-size:8px;color:#728778}.auth-card footer b{margin-left:auto;color:#d2b64f}
.modal{position:fixed;inset:0;z-index:20;background:#000c;display:grid;place-items:center;padding:15px}.modal section{position:relative;width:min(430px,100%);border:1px solid #936f1b;border-radius:18px;background:#071b10;padding:22px}.modal h2{color:#ffd34c;margin-top:0}.modal p{font-size:10px;color:#8fa394;line-height:1.5}.modal input{width:100%;height:46px;border:1px solid #436249;border-radius:10px;background:#03120a;color:#fff;padding:0 12px}.modal .close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#ffd34b;font-size:25px}.dev-otp{border:1px solid #725818;border-radius:9px;background:#171508;color:#ffe178;padding:10px;margin-bottom:8px;font-size:10px}
.loader{position:fixed;inset:0;z-index:40;background:#010b06eF;display:grid;place-items:center;align-content:center;gap:10px}.loader .lz{width:72px;height:72px;border:3px solid #d8a520;border-radius:50%;display:grid;place-items:center;color:#ffd34b;font-size:24px;font-weight:1000;animation:pulse 1s infinite}.loader b{color:#84dd9f;font-size:11px}@keyframes pulse{50%{transform:scale(1.08);box-shadow:0 0 25px #1ee77d66}}
#toast{position:fixed;z-index:50;left:50%;bottom:24px;transform:translateX(-50%) translateY(15px);opacity:0;background:#102019;border:1px solid #9c781c;border-radius:10px;padding:10px 16px;transition:.2s;font-size:11px}#toast.show{opacity:1;transform:translateX(-50%)}#toast.error{border-color:#9b3a31;color:#ffaaa0}
@media(max-width:800px){.stage{grid-template-columns:1fr;padding:18px;align-content:center}.character{height:200px;margin-bottom:-38px}.character .halo{width:260px;height:260px}.character img{width:190px;max-height:210px}.chip-stack{display:none}.auth-card{padding:20px;border-radius:19px}.brand{font-size:28px}}
@media(max-width:450px){.character{height:150px}.character img{width:150px}.auth-card{padding:16px}.tabs{margin:15px 0}.stage{padding:10px 12px 22px}.primary,.guest,.phone-field,.password{height:44px}}


/* =========================================================
   LuckZoo fixed auth viewport
   Keeps the login screen inside one browser viewport.
   ========================================================= */

html,
body{
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
}

body{
  position:relative;
}

.stage{
  width:min(1180px,100%);
  height:100dvh;
  min-height:0;
  max-height:100dvh;
  margin:0 auto;
  padding:12px clamp(20px,4vw,54px);
  display:grid;
  grid-template-columns:minmax(300px,1.05fr) minmax(360px,.95fr);
  gap:clamp(18px,3vw,48px);
  align-items:center;
  overflow:hidden;
}

.character{
  height:calc(100dvh - 24px);
  min-height:0;
  max-height:680px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:visible;
}

.character .halo{
  width:min(42vw,500px);
  height:min(42vw,500px);
}

.character img{
  width:auto;
  height:auto;
  max-width:min(520px,94%);
  max-height:min(88dvh,650px);
  object-fit:contain;
  transform:none;
}

.auth-card{
  width:min(480px,100%);
  max-height:calc(100dvh - 24px);
  padding:24px 28px;
  overflow-y:auto;
  scrollbar-width:none;
}

.auth-card::-webkit-scrollbar{
  display:none;
}

/* Compact only when browser height is limited (common laptop screens). */
@media (min-width:801px) and (max-height:720px){
  .auth-card{padding:18px 24px}
  .brand{font-size:30px}
  .tabs{margin:14px 0 12px}
  .tabs button{height:41px}
  .pane>label,.modal label{margin:8px 0 4px}
  .phone-field,.password{height:43px}
  .helper{margin:7px 0 10px}
  .primary,.guest{height:43px}
  .or{margin:9px 0}
  .auth-card footer{margin-top:11px;padding-top:9px}
  .character img{max-height:min(88dvh,590px)}
}

/* Mobile remains one fixed screen. The card itself may scroll internally
   on very short devices so the browser page never becomes a long webpage. */
@media(max-width:800px){
  html,body{height:100%;overflow:hidden}

  .stage{
    height:100dvh;
    max-height:100dvh;
    min-height:0;
    grid-template-columns:1fr;
    grid-template-rows:minmax(105px,28dvh) minmax(0,1fr);
    gap:0;
    padding:8px 12px 10px;
    align-content:stretch;
    overflow:hidden;
  }

  .character{
    height:auto;
    min-height:0;
    max-height:none;
    margin:0;
    overflow:hidden;
  }

  .character .halo{
    width:230px;
    height:230px;
  }

  .character img{
    width:auto;
    max-width:270px;
    max-height:27dvh;
  }

  .auth-card{
    align-self:center;
    width:min(480px,100%);
    max-height:calc(72dvh - 12px);
    padding:15px 18px;
    border-radius:18px;
    overflow-y:auto;
  }

  .brand{font-size:26px}
  .tabs{margin:12px 0 10px}
  .tabs button{height:40px}
  .pane>label,.modal label{margin:7px 0 4px}
  .phone-field,.password{height:42px}
  .helper{margin:7px 0 9px}
  .primary,.guest{height:42px}
  .or{margin:8px 0}
  .auth-card footer{margin-top:9px;padding-top:8px}
}

@media(max-width:450px){
  .stage{
    padding:6px 9px 8px;
    grid-template-rows:minmax(90px,24dvh) minmax(0,1fr);
  }

  .character img{
    max-width:220px;
    max-height:23dvh;
  }

  .auth-card{
    max-height:calc(76dvh - 10px);
    padding:13px 14px;
  }
}


/* Promo artwork bottom alignment */
.character{
  align-self:stretch;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:0;
}

.character img{
  display:block;
  margin-top:auto;
  margin-bottom:0;
  object-position:center bottom;
  transform:none;
}

@media(max-width:800px){
  .character{
    align-items:flex-end;
    overflow:hidden;
  }
  .character img{
    margin-top:auto;
    margin-bottom:0;
    object-position:center bottom;
  }
}


/* Final bottom-edge correction: no visible gap below promo artwork */
.stage{
  padding-bottom:0 !important;
}

.character{
  height:100dvh !important;
  max-height:100dvh !important;
  align-self:end !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
  overflow:visible !important;
}

.character img{
  margin-bottom:0 !important;
  align-self:flex-end !important;
  object-position:center bottom !important;
  transform:translateY(0) !important;
}

/* Keep right login panel centered independently. */
.auth-card{
  align-self:center !important;
}

@media(max-width:800px){
  .stage{
    padding-bottom:0 !important;
  }

  .character{
    height:28dvh !important;
    max-height:28dvh !important;
    align-self:end !important;
    margin-bottom:0 !important;
  }

  .character img{
    margin-bottom:0 !important;
  }
}

@media(max-width:450px){
  .character{
    height:24dvh !important;
    max-height:24dvh !important;
  }
}


/* PKR 80 promo: center complete artwork between top and bottom */
.character{
  height:100dvh !important;
  max-height:100dvh !important;
  align-self:stretch !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  overflow:visible !important;
}

.character img{
  display:block !important;
  margin:auto 0 !important;
  align-self:center !important;
  object-position:center center !important;
  transform:none !important;
  max-height:min(88dvh,650px) !important;
}

@media(max-width:800px){
  .character{
    height:28dvh !important;
    max-height:28dvh !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .character img{
    margin:auto !important;
    align-self:center !important;
    object-position:center center !important;
    max-height:27dvh !important;
  }
}

@media(max-width:450px){
  .character{
    height:24dvh !important;
    max-height:24dvh !important;
  }
  .character img{
    max-height:23dvh !important;
  }
}


/* LuckZoo auth: promo artwork removed; login/register card centered. */
.stage{
  grid-template-columns:1fr !important;
  grid-template-rows:1fr !important;
  place-items:center !important;
  align-content:center !important;
  justify-content:center !important;
}
.auth-card{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:center !important;
  align-self:center !important;
}
@media(max-width:800px){
  .stage{
    grid-template-columns:1fr !important;
    grid-template-rows:1fr !important;
    place-items:center !important;
  }
  .auth-card{
    max-height:calc(100dvh - 20px) !important;
  }
}

/* LuckZoo auth: compact responsive card for all viewport heights. */
.auth-card{
  width:min(440px,calc(100vw - 24px)) !important;
  max-height:calc(100dvh - 20px) !important;
  padding:clamp(12px,2.1vh,20px) clamp(14px,2vw,22px) !important;
  border-radius:18px !important;
}
.brand{font-size:clamp(24px,4.3vh,31px) !important}
.tabs{margin:clamp(8px,1.5vh,13px) 0 clamp(7px,1.3vh,11px) !important}
.tabs button{height:clamp(36px,5.8vh,42px) !important}
.pane>label,.modal label{margin:clamp(5px,.9vh,8px) 0 4px !important}
.phone-field,.password{height:clamp(38px,6vh,43px) !important}
.helper{margin:clamp(5px,.9vh,8px) 0 clamp(7px,1.2vh,10px) !important}
.primary,.guest{height:clamp(38px,6vh,43px) !important}
.or{margin:clamp(6px,1vh,9px) 0 !important}
.auth-card footer{margin-top:clamp(7px,1.1vh,10px) !important;padding-top:clamp(6px,1vh,9px) !important}

@media(max-height:620px){
  .auth-card{width:min(410px,calc(100vw - 20px)) !important;padding:10px 16px !important}
  .brand{font-size:23px !important}
  .tabs{margin:7px 0 6px !important}
  .tabs button,.phone-field,.password,.primary,.guest{height:36px !important}
  .pane>label,.modal label{margin:4px 0 3px !important}
  .helper{margin:4px 0 6px !important}
  .or{margin:5px 0 !important}
  .auth-card footer{margin-top:6px !important;padding-top:5px !important}
}

/* LuckZoo auth: final compact auto-fit sizing for phones, WebView and short screens. */
.auth-card{
  width:min(380px,calc(100vw - 24px)) !important;
  max-height:calc(100dvh - 16px) !important;
  padding:10px 14px !important;
  border-radius:16px !important;
  overflow-y:auto !important;
}
.brand.brand-logo > img{
  width:min(220px,72vw) !important;
  max-width:78% !important;
}
.tabs{margin:8px 0 7px !important;gap:7px !important}
.tabs button{height:34px !important;font-size:14px !important;border-radius:9px !important}
.pane>label,.modal label{font-size:9px !important;margin:5px 0 3px !important}
.phone-field,.password{height:35px !important;border-radius:9px !important}
.phone-field span{padding:0 9px !important;font-size:9px !important}
.phone-field input,.password input{padding:0 9px !important;font-size:13px !important}
.password button{width:38px !important}
.helper{margin:5px 0 7px !important;font-size:8px !important}
.primary,.guest{height:35px !important;border-radius:9px !important;font-size:13px !important}
.or{margin:5px 0 !important;gap:7px !important}
.auth-card footer{margin-top:7px !important;padding-top:6px !important;font-size:7px !important}

@media(max-height:620px), (max-width:450px){
  .auth-card{
    width:min(350px,calc(100vw - 18px)) !important;
    max-height:calc(100dvh - 10px) !important;
    padding:8px 12px !important;
    border-radius:14px !important;
  }
  .brand.brand-logo > img{width:min(185px,66vw) !important;max-width:72% !important}
  .tabs{margin:6px 0 5px !important}
  .tabs button{height:31px !important;font-size:12px !important}
  .pane>label,.modal label{margin:4px 0 2px !important;font-size:8px !important}
  .phone-field,.password{height:32px !important}
  .phone-field input,.password input{font-size:12px !important}
  .helper{margin:4px 0 5px !important;font-size:7px !important}
  .primary,.guest{height:32px !important;font-size:12px !important}
  .or{margin:4px 0 !important}
  .auth-card footer{margin-top:5px !important;padding-top:4px !important}
}

@media(max-height:520px){
  .auth-card{width:min(330px,calc(100vw - 14px)) !important;padding:6px 10px !important}
  .brand.brand-logo > img{width:min(155px,58vw) !important}
  .tabs{margin:4px 0 !important}
  .tabs button,.phone-field,.password,.primary,.guest{height:29px !important}
  .pane>label,.modal label{margin:3px 0 2px !important}
  .helper{margin:3px 0 4px !important}
  .or{margin:3px 0 !important}
  .auth-card footer{margin-top:4px !important;padding-top:3px !important}
}


/* LuckZoo APK/auth startup cover: hides the auth card until session check finishes. */
.loader{z-index:9999!important;background:#010b06 url("login-background.webp") center center/cover no-repeat fixed!important}
.loader-box{width:min(360px,82vw);text-align:center;display:flex;flex-direction:column;align-items:center}
.loader-box .lz{margin:0 auto 12px}
.loader-box b{font-size:13px!important;letter-spacing:.2px}
.loader-box small{display:block;margin-top:6px;color:#7da48b;font-size:9px}
.loader-track{width:min(280px,72vw);height:7px;margin-top:16px;border:1px solid rgba(255,209,62,.48);border-radius:999px;background:rgba(0,0,0,.42);overflow:hidden}
.loader-track i{display:block;width:18%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b07808,#ffd95e,#34df83);transition:width .32s ease;animation:lzLoaderDrift 1.35s ease-in-out infinite alternate}
@keyframes lzLoaderDrift{from{filter:brightness(.82)}to{filter:brightness(1.25)}}


/* =========================================================
   LuckZoo professional progress loader v6
   ========================================================= */
.loader{
  position:fixed!important;
  inset:0!important;
  z-index:2147483647!important;
  display:grid!important;
  place-items:center!important;
  background:#020d08!important;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.loader.hide{
  display:grid!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .18s ease,visibility 0s linear .18s!important;
}
.loader-box{
  width:min(520px,82vw)!important;
  text-align:center!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
.loader-brand{
  margin:0 0 20px!important;
  color:#fff!important;
  font-size:clamp(30px,5vw,48px)!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.5px!important;
  text-shadow:0 4px 18px #000!important;
}
.loader-brand span{color:#ffd13e!important}
.loader-progress-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin:0 2px 8px!important;
}
.loader-progress-head b{
  color:#dfece3!important;
  font-size:clamp(11px,1.5vw,14px)!important;
  font-weight:800!important;
  letter-spacing:.2px!important;
}
.loader-progress-head strong{
  min-width:44px!important;
  color:#ffd13e!important;
  font-size:clamp(12px,1.6vw,15px)!important;
  font-weight:1000!important;
  text-align:right!important;
}
.loader-track{
  position:relative!important;
  width:100%!important;
  height:17px!important;
  overflow:hidden!important;
  border:2px solid #d6a52d!important;
  border-radius:999px!important;
  background:#06140d!important;
  box-shadow:inset 0 0 9px #000,0 0 18px #d6a52d2e!important;
}
.loader-track i{
  display:block!important;
  width:0;
  height:100%!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#20be63 0%,#69e783 48%,#ffe05b 100%)!important;
  box-shadow:0 0 14px #55e98580!important;
  transition:width .18s ease!important;
}
.loader-box>small{
  display:block!important;
  margin-top:10px!important;
  color:#7fa18d!important;
  font-size:clamp(10px,1.35vw,12px)!important;
  font-weight:700!important;
  letter-spacing:.2px!important;
}