:root{--site-w:534px;--brown:#302116;--panel:#291f16;--gold:#efd559}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}body{background:#4a362b;color:#fff}button,input{font:inherit}button{border:0}.page-shell{min-height:100vh;display:flex;justify-content:center}.phone{position:relative;width:min(100vw,var(--site-w));min-height:100vh;background:var(--brown);overflow:hidden}.top-shot{position:relative}.top-shot>img,.catalog>img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}.catalog>img{pointer-events:none}.catalog{position:relative;font-size:0;background:var(--brown)}.catalog>img{margin:0;padding:0}.hotspot{position:absolute;z-index:5;padding:0;background:transparent;cursor:pointer}.enter-hotspot{left:55%;top:1.8%;width:15.5%;height:4.7%}.register-hotspot{left:72.3%;top:1.8%;width:15.8%;height:4.7%}.safe-space{height:82px;background:var(--brown)}




/* Animated three-card promo row under the hero banner */
.mini-promos{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}
.mini-promo{
  position:absolute;
  top:36.1%;
  height:11.2%;
  border-radius:16px;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 6px 14px rgba(0,0,0,.18);
  animation:miniPromoCard 2.35s ease-in-out infinite;
  transform-origin:50% 60%;
}
.mini-promo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform-origin:50% 50%;
  animation:miniPromoImage 5.8s ease-in-out infinite;
  will-change:transform, filter;
}
.mini-promo::before{
  content:"";
  position:absolute;
  inset:-25% -35%;
  background:linear-gradient(112deg,
    transparent 36%,
    rgba(255,255,255,.04) 44%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.05) 56%,
    transparent 64%);
  transform:translateX(-135%);
  animation:miniPromoShine 3.9s linear infinite;
  mix-blend-mode:screen;
}
.mini-promo::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 18%, rgba(255,221,118,.20), transparent 44%);
  opacity:.35;
  animation:miniPromoGlow 2.35s ease-in-out infinite;
}
.promo-1{left:3.95%; width:26.8%; animation-delay:0s;}
.promo-2{left:36.35%; width:27.0%; animation-delay:.24s;}
.promo-3{left:68.35%; width:27.35%; animation-delay:.48s;}
.promo-1 img,.promo-1::before,.promo-1::after{animation-delay:0s}
.promo-2 img,.promo-2::before,.promo-2::after{animation-delay:.24s}
.promo-3 img,.promo-3::before,.promo-3::after{animation-delay:.48s}
@keyframes miniPromoCard{
  0%,100%{
    transform:translateY(0) scale(1);
    filter:brightness(1) saturate(1);
  }
  22%{
    transform:translateY(-1px) scale(1.008);
    filter:brightness(1.03) saturate(1.03);
  }
  50%{
    transform:translateY(-2px) scale(1.016);
    filter:brightness(1.06) saturate(1.06);
  }
  78%{
    transform:translateY(-1px) scale(1.008);
    filter:brightness(1.03) saturate(1.03);
  }
}
@keyframes miniPromoImage{
  0%,100%{transform:scale(1) translate3d(0,0,0)}
  50%{transform:scale(1.035) translate3d(0,-1px,0)}
}
@keyframes miniPromoGlow{
  0%,100%{opacity:.26}
  50%{opacity:.55}
}
@keyframes miniPromoShine{
  0%,14%{transform:translateX(-135%); opacity:0}
  20%,28%{opacity:1}
  52%{transform:translateX(0%); opacity:1}
  72%,100%{transform:translateX(135%); opacity:0}
}


/* Real homepage banner carousel over the original screenshot area */
.hero-carousel{
  position:absolute;
  left:21px;
  right:21px;
  top:84px;
  height:216px;
  border-radius:18px;
  overflow:hidden;
  z-index:4;
  background:#2b160c;
  box-shadow:0 0 0 1px rgba(255,255,255,.03);
}
.hero-track{
  position:relative;
  width:100%;
  height:100%;
}
.hero-carousel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:#2b160c;
  z-index:3;
}
.hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .45s ease;
  user-select:none;
  -webkit-user-drag:none;
}
.hero-slide.active{
  opacity:1;
}
.hero-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:14px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  z-index:2;
}
.hero-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(232,232,232,.42);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
  transition:background .22s ease, transform .22s ease, opacity .22s ease;
  opacity:.95;
}
.hero-dot.active{
  background:#ffffff;
  transform:scale(1.08);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 0 8px rgba(255,255,255,.18);
}
@media(max-width:420px){
  .mini-promo{
    border-radius:13px;
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 4px 10px rgba(0,0,0,.16);
  }
  .hero-carousel{
    left:16px;
    right:16px;
    top:69px;
    height:164px;
    border-radius:16px;
  }
  .hero-dots{
    bottom:10px;
    gap:7px;
  }
  .hero-dot{
    width:7px;
    height:7px;
  }
}


.bottom-nav{position:fixed;z-index:15;left:50%;bottom:0;transform:translateX(-50%);width:min(100vw,var(--site-w));height:76px;padding:7px 10px calc(5px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);align-items:end;background:linear-gradient(180deg,rgba(53,39,18,.97),rgba(34,25,13,.99));border-top:1px solid rgba(235,210,82,.6)}.nav-item{position:relative;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding:0;color:#ded49c;background:transparent;font-size:15px}.nav-item.active{color:#ffe55f}.nav-icon{font-size:27px;line-height:28px}.nav-item.active .nav-icon{width:65px;height:43px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(#fff59b,#e5bd3f);color:#17120b;font-size:32px;font-weight:700}.nav-item.center{padding-top:2px}.center-badge{position:absolute;top:-31px;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;border:2px solid #dfc24b;background:#695640;box-shadow:0 1px 0 #111;font-size:35px}
.overlay{position:fixed;z-index:50;left:50%;top:0;transform:translateX(-50%);width:min(100vw,var(--site-w));height:100dvh;background:rgba(0,0,0,.62);overflow:hidden}.login-panel{position:absolute;left:7.7%;top:7.65%;width:84.5%;border-radius:20px 20px 24px 24px;overflow:hidden}.login-panel img{display:block;width:100%;height:auto}.modal-hotspot{position:absolute;background:transparent;cursor:pointer;padding:0}.login-close{right:2%;top:2%;width:11%;height:8%}.switch-register{left:59%;top:5%;width:29%;height:12%}.register-panel{position:absolute;left:7.7%;top:7.65%;width:84.5%;border-radius:20px 20px 24px 24px;overflow:hidden}.auth-head{position:relative;height:123px;padding:49px 43px 0;display:flex;justify-content:space-between;align-items:flex-start;background:linear-gradient(90deg,#dfbd63 0%,#fffda7 48%,#dfbd62 100%)}.auth-tab{padding:0;background:transparent;color:#050505;font-size:26px;font-weight:700;cursor:pointer}.round-close{position:absolute;right:13px;top:13px;width:36px;height:36px;border-radius:50%;background:rgba(125,107,55,.53);cursor:pointer}.round-close span{position:absolute;left:9px;right:9px;top:17px;height:3px;border-radius:2px;background:#e8d06d}.round-close span:first-child{transform:rotate(45deg)}.round-close span:last-child{transform:rotate(-45deg)}.auth-body{position:relative;min-height:540px;padding:35px 21px 42px;background:#291f16}.pointer{position:absolute;top:-21px;left:65%;width:0;height:0;border-left:31px solid transparent;border-right:31px solid transparent;border-bottom:21px solid #291f16}.field{height:57px;margin-bottom:26px;padding:0 23px 0 25px;display:flex;align-items:center;gap:27px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:#31281f}.field svg{width:27px;height:27px;flex:0 0 27px;fill:none;stroke:#d7d4d0;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.field input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#ddd7d1;font-size:16px}.field input::placeholder{color:#756d66;opacity:1}.gold-btn{display:block;width:95%;height:59px;margin:41px auto 0;border-radius:10px;background:linear-gradient(180deg,#fffca0,#f2d04d 45%,#e7b936);box-shadow:inset 0 -2px 0 rgba(255,230,96,.65);color:#1c1710;font-size:21px;cursor:pointer}@media(max-width:420px){.bottom-nav{height:70px}.nav-item{font-size:12px;height:59px}.nav-icon{font-size:23px}.nav-item.active .nav-icon{width:58px;height:39px}.center-badge{width:61px;height:61px;top:-27px;font-size:31px}.auth-head{height:107px;padding-top:42px}.auth-tab{font-size:22px}.auth-body{padding:28px 18px 36px}.field{height:53px;margin-bottom:20px}}

/* Floating prize/chest promo: stays with the viewport while page content scrolls */
.floating-promo{
  position:fixed;
  z-index:35;
  right:max(calc((100vw - min(100vw,var(--site-w))) / 2 + 10px), 10px);
  bottom:95px;
  width:96px;
  height:192px;
  position:fixed;
  max-width:17vw;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));
  animation:promoFloat 2.4s ease-in-out infinite;
}
.floating-promo img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
}
.floating-promo{
  isolation:isolate;
}
.floating-promo .promo-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:auto;
  transform-origin:50% 20%;
}
.floating-promo .promo-closed{
  opacity:1;
  animation:promoClosedSwap 2.2s infinite ease-in-out;
}
.floating-promo .promo-open{
  opacity:0;
  animation:promoOpenSwap 2.2s infinite ease-in-out;
}
@keyframes promoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@media(max-width:420px){
  .floating-promo{
    width:78px;
    height:156px;
    bottom:86px;
    right:8px;
  }
}


.footer-copy{
  padding: 4px 20px 28px;
  background:#302116;
  color:#aaa09a;
  font-size:17px;
  line-height:1.7;
}
.footer-copy p{
  margin:0 0 18px;
}
.footer-copy p:nth-child(2){
  margin-bottom:0;
}
.footer-copy p:nth-child(3){
  margin-top:0;
}

@keyframes promoOpenSwap{
  0%,18%{opacity:0;transform:translateY(0) scale(0.985)}
  26%,74%{opacity:1;transform:translateY(-1px) scale(1)}
  82%,100%{opacity:0;transform:translateY(0) scale(0.985)}
}
@keyframes promoClosedSwap{
  0%,18%{opacity:1;transform:translateY(0) scale(1)}
  26%,74%{opacity:0;transform:translateY(-1px) scale(0.99)}
  82%,100%{opacity:1;transform:translateY(0) scale(1)}
}


/* Opening promotion: exact supplied artwork + bottom-centered close button */
.launch-promo{
  position:fixed;
  z-index:999;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:clamp(72px,14vh,132px);
  background:rgba(0,0,0,.66);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.launch-promo[hidden]{
  display:none !important;
}
.launch-promo-wrap{
  position:relative;
  width:min(451px, calc(100vw - 36px));
  overflow:visible;
  padding-bottom:28px;
}
.launch-promo-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:17px;
}
.launch-promo-close{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:0;
  transform:translate(-50%,50%);
  width:44px;
  height:44px;
  padding:0;
  border:4px solid #f59b45;
  border-radius:50%;
  background:#fff7eb;
  color:#e37a2c;
  font-size:31px;
  font-weight:700;
  line-height:34px;
  text-align:center;
  cursor:pointer;
  box-shadow:0 3px 9px rgba(0,0,0,.38);
}
@media(max-width:420px){
  .launch-promo{
    padding-top:clamp(54px,10vh,92px);
  }
  .launch-promo-wrap{
    width:min(451px, calc(100vw - 24px));
    padding-bottom:26px;
  }
  .launch-promo-close{
    width:42px;
    height:42px;
    border-width:4px;
    font-size:29px;
    line-height:32px;
  }
}


/* Click target for the top-left hamburger menu */
.menu-inner-hotspot{
  left:2.6%;
  top:1.15%;
  width:9.6%;
  height:6.3%;
  z-index:12;
}


/* Original-style left slide drawer */
.side-drawer-layer{
  position:fixed;
  z-index:700;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:min(100vw,var(--site-w));
  height:100dvh;
  overflow:hidden;
}
.side-drawer-layer[hidden]{display:none!important}
.side-drawer-scrim{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:rgba(0,0,0,.08);
  cursor:pointer;
}
.side-drawer{
  position:absolute;
  left:0;
  top:0;
  width:70.2%;
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  background:#24170f;
  box-shadow:7px 0 18px rgba(0,0,0,.28);
  transform:translateX(-102%);
  animation:drawerSlideIn .24s ease-out forwards;
  overscroll-behavior:contain;
}
.side-drawer img{
  display:block;
  width:100%;
  height:auto;
  min-height:100%;
  object-fit:cover;
  object-position:top left;
  user-select:none;
  -webkit-user-drag:none;
}
.drawer-back-hotspot{
  position:absolute;
  left:5.2%;
  top:2.3%;
  width:13.5%;
  height:5.7%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
@keyframes drawerSlideIn{
  from{transform:translateX(-102%)}
  to{transform:translateX(0)}
}
@media(max-width:420px){
  .side-drawer{width:70.2%}
}

/* Click target for the headset/customer-service icon in the homepage header */
.support-hotspot{
  left:89.6%;
  top:1.15%;
  width:8.0%;
  height:6.2%;
  z-index:12;
}

/* Header Registro button opens the register page */
.register-hotspot-link{
  left:78%;
  top:1.1%;
  width:14%;
  height:6.2%;
  z-index:20;
}


/* Dynamic marquee like the original site */
.news-marquee{
  position:absolute;
  left:3.93%;
  top:48.65%;
  width:77.34%;
  height:6.58%;
  padding:0;
  border:0;
  background:transparent;
  overflow:hidden;
  z-index:8;
  cursor:pointer;
}
.news-marquee-viewport{
  position:absolute;
  left:9.0%;
  right:1.4%;
  top:8%;
  bottom:8%;
  overflow:hidden;
  background:transparent;
}
.news-marquee-track{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  white-space:nowrap;
  min-width:max-content;
  animation:newsMarquee 22s linear infinite;
}
.news-marquee-copy{
  display:inline-flex;
  align-items:center;
  padding-right:60px;
  font-size:14px;
  font-weight:500;
  line-height:1;
  color:#d7cdc1;
  text-shadow:0 1px 1px rgba(0,0,0,.45);
}
@keyframes newsMarquee{
  0%{transform:translateY(-50%) translateX(0)}
  100%{transform:translateY(-50%) translateX(-50%)}
}
@media(max-width:420px){
  .news-marquee-copy{font-size:13px}
}

/* News popup */
.news-modal{
  position:fixed;
  z-index:850;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.news-modal[hidden]{display:none!important}
.news-modal-panel{
  width:min(92vw,420px);
  background:linear-gradient(180deg,#2f2016 0%, #20140e 100%);
  border:1px solid rgba(233,188,91,.45);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.42);
  overflow:hidden;
}
.news-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 16px;
  color:#fff;
  font-size:20px;
  background:linear-gradient(180deg,#5a4332 0%, #3b291d 100%);
}
.news-modal-title{font-weight:600;}
.news-modal-close{
  border:0;
  background:transparent;
  color:#f3eee8;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.news-modal-body{
  padding:18px 18px 10px;
  color:#f1ebe4;
  font-size:14px;
  line-height:1.45;
}
.news-modal-body p{margin:0 0 14px;}
.news-modal-ok{
  display:block;
  width:calc(100% - 32px);
  margin:8px 16px 16px;
  height:42px;
  border:0;
  border-radius:12px;
  background:linear-gradient(180deg,#f4eb8a 0%, #d6a637 100%);
  color:#4e2f08;
  font-size:18px;
  cursor:pointer;
  box-shadow:inset 0 -2px 0 rgba(109,64,9,.25);
}



/* Homepage Popular icon -> Slots inner page */
.popular-inner-hotspot{
  left:4.4%;
  top:54.2%;
  width:11.5%;
  height:10.3%;
  z-index:12;
}


/* Homepage PG icon -> PG inner page */
.pg-inner-hotspot{
  left:17.1%;
  top:54.2%;
  width:11.5%;
  height:10.3%;
  z-index:12;
}


/* Homepage provider icons -> inner pages */
.popok-inner-hotspot{left:29.8%;top:54.2%;width:11.5%;height:10.3%;z-index:12;}
.wg-inner-hotspot{left:42.5%;top:54.2%;width:11.5%;height:10.3%;z-index:12;}
.pp-inner-hotspot{left:55.2%;top:54.2%;width:11.5%;height:10.3%;z-index:12;}
.askme-inner-hotspot{left:67.9%;top:54.2%;width:11.5%;height:10.3%;z-index:12;}
.jdb-inner-hotspot{left:80.6%;top:54.2%;width:11.5%;height:10.3%;z-index:12;}


/* Home page product-display login hotspots */
.home-hero-login-hotspot,.home-mini-promos-login-hotspot,.home-catalog-login-hotspot{position:absolute;display:block;background:transparent;cursor:pointer;z-index:6}
.home-hero-login-hotspot{left:3.8%;top:21.2%;width:92.2%;height:15.9%;border-radius:18px}
.home-mini-promos-login-hotspot{left:3.8%;top:39.1%;width:92.2%;height:7.0%;border-radius:14px}
.home-catalog-login-hotspot{left:0;top:0;width:100%;height:100%;z-index:10}

.bottom-nav .nav-login-link{text-decoration:none;color:inherit}

.catalog-popular3-login-hotspot{position:absolute;left:4.2%;top:4.55%;width:91.6%;height:1.52%;display:block;background:transparent;cursor:pointer;z-index:11;border-radius:16px}

/* Exact homepage Fortune Horse / Fortune Ox / Fortune Dragon row */
.top-popular3-login-hotspot{
  left:4.1%;
  top:75.1%;
  width:92.0%;
  height:22.7%;
  z-index:18;
  display:block;
  background:transparent;
  cursor:pointer;
}

/* ==== Auth form extras (login / register) ==== */
.err-msg{color:#ff8a7d;font-size:13px;margin:-14px 0 12px 6px;min-height:16px}
.field.error{border-color:#e45b4b!important}
.agree{display:flex;align-items:flex-start;gap:10px;margin:4px 4px 14px;font-size:13px;color:#a49a8c;line-height:1.5;cursor:pointer;user-select:none}
.agree input{width:17px;height:17px;margin:1px 0 0;flex:0 0 17px;accent-color:#e7b936;cursor:pointer}
.agree a{color:#ffd95e;text-decoration:none}
.auth-modal{position:fixed;z-index:999;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.66);display:flex;align-items:center;justify-content:center;padding:22px}
.auth-modal[hidden]{display:none!important}
.modal-card{width:min(92vw,380px);background:#2a1d12;border:1px solid rgba(233,188,91,.5);border-radius:16px;box-shadow:0 20px 46px rgba(0,0,0,.5);padding:30px 24px 26px;text-align:center;color:#f1ebe4}
.modal-icon{width:64px;height:64px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,#fff59b,#e5bd3f);color:#1c1710;font-size:30px;font-weight:700}
.modal-title{font-size:21px;font-weight:700;margin-bottom:8px}
.modal-sub{font-size:14px;color:#b6aa9a;line-height:1.6;margin-bottom:18px}
.count-num{display:inline-block;min-width:84px;font-size:52px;font-weight:700;color:#ffd95e;line-height:1}
.count-label{font-size:15px;color:#b6aa9a;margin-top:4px}
.modal-bar{height:7px;margin:16px auto 6px;width:70%;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.modal-bar>span{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#f2d04d,#e7b936);transition:width 1s linear}
.modal-btn{display:block;width:100%;height:50px;margin-top:20px;border:0;border-radius:10px;background:linear-gradient(180deg,#fffca0,#f2d04d 45%,#e7b936);color:#1c1710;font-size:18px;font-weight:700;cursor:pointer}
.modal-btn.ghost{background:rgba(255,255,255,.08);color:#e8e2da;border:1px solid rgba(255,255,255,.16)}
@media(max-width:420px){
  .err-msg{margin-top:-12px}
  .modal-card{padding:26px 20px 22px}
}