/* ===========================================================
   Ludo Sultan — in-page hero banners (Royal Roll, Coronation,
   Royal Court 3D, Brilliant, Jackpot). Black + gold luxe.
   =========================================================== */

.banner{position:relative; width:100%; height:440px; border-radius:24px; overflow:hidden; cursor:pointer;
  border:1px solid rgba(232,181,71,0.2); box-shadow:0 34px 80px -30px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(232,181,71,0.04);}
.banner .bcopy{position:absolute; top:50%; left:56px; transform:translateY(-50%); z-index:20; max-width:46%;}
.banner .eyebrow{font-family:var(--regal); color:var(--gold); letter-spacing:4px; font-size:11px; text-transform:uppercase; display:block; margin-bottom:14px;}
.banner .eyebrow::before,.banner .eyebrow::after{display:none;}
.banner h2{font-family:var(--disp); font-size:clamp(30px,3.6vw,48px); color:var(--cream); line-height:1.04; letter-spacing:.5px; margin:0;}
.banner p{color:var(--cream-dim); font-size:14.5px; line-height:1.55; margin:14px 0 22px; max-width:340px;}
.banner .bbtn{display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:14px; color:#23170a; border-radius:13px; padding:13px 24px;
  background:linear-gradient(180deg,var(--gold-light),var(--gold) 55%,var(--gold-deep)); box-shadow:0 4px 0 #a87f24, 0 10px 22px rgba(232,181,71,0.3); transition:transform .18s, box-shadow .18s;}
.banner .bbtn:hover{transform:translateY(-2px); box-shadow:0 6px 0 #a87f24, 0 16px 30px rgba(232,181,71,0.42);}
.banner .bbtn svg{width:17px; height:17px;}
.banner .bbtn .lbl-sm{display:none;}
.banner .pattern{position:absolute; inset:0; opacity:0.06; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23E8B547' stroke-width='0.6'><path d='M60 10 L70 50 L110 60 L70 70 L60 110 L50 70 L10 60 L50 50 Z'/><circle cx='60' cy='60' r='40'/></g></svg>"); background-size:170px;}

.die{position:absolute; filter:drop-shadow(0 16px 24px rgba(0,0,0,0.6));}
.die svg{width:100%; height:100%; display:block; overflow:visible;}

.bok{position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(232,181,71,0.5), transparent 70%); filter:blur(7px); z-index:6; pointer-events:none; animation:bokdrift 13s ease-in-out infinite;}
@keyframes bokdrift{0%,100%{transform:translateY(0) scale(1); opacity:.5;}50%{transform:translateY(-30px) scale(1.15); opacity:.85;}}

/* ===== mobile: stack copy on top, centre the visual ===== */
@media(max-width:860px){
  .banner{height:auto; padding-bottom:20px;}
  .banner .bcopy{position:relative; top:auto; left:auto; transform:none; max-width:100%; padding:34px 24px 4px; text-align:center;}
  .banner .bcopy p{margin-left:auto; margin-right:auto;}
  /* slimmer banner CTA, matched to the header "Get the App" button; never wrap to 2 lines */
  .banner .bbtn{padding:9px 16px; font-size:13px; border-radius:11px; white-space:nowrap;}
  .banner .bbtn svg{width:15px; height:15px;}
  .banner .eyebrow{display:block;}
  #b1 .b1-stage,#b5 .b5-stage,#b8 .b8-stage,.b3-stage,#b7 .b7-stage{position:relative; inset:auto; right:auto; left:auto; top:auto; width:100%; height:300px;}
  /* b7 mobile: hide the dice and sit the shrunk 3D board neatly on the right side.
     (Base #b7 rules are declared later in the file, so these carry extra .b7-stage/.b7-scene
     weight to win the cascade.) */
  #b7 .b7-stage .b7-scene{width:235px; height:235px; right:-10%; top:68%;}
  #b7 .b7-scene .b7-die{display:none;}
  /* b8 prism/mandala/glow centred */
  #b8 .b8-mandala{top:50%; left:50%; width:300px; height:300px; animation:b8spinM 44s linear infinite;}
  #b8 .b8-prism{top:50%; left:50%; width:280px; height:280px; animation:b8spinMr 15s linear infinite;}
  #b8 .b8-glow{top:50%; left:50%; transform:translate(-50%,-50%); width:220px; height:220px;}
  @keyframes b8spinM{from{transform:translate(-50%,-50%) rotate(0);}to{transform:translate(-50%,-50%) rotate(360deg);}}
  @keyframes b8spinMr{from{transform:translate(-50%,-50%) rotate(360deg);}to{transform:translate(-50%,-50%) rotate(0);}}
  #b8 .b8-pawn{width:150px;}
  /* b3 rays/glow centred */
  .b3-rays{top:50%; left:50%; width:300px; height:300px; animation:b3raysM 7s linear infinite;}
  @keyframes b3raysM{0%,18%{opacity:0; transform:translate(-50%,-50%) rotate(0);}30%{opacity:.6;}84%{opacity:.5;}100%{opacity:0; transform:translate(-50%,-50%) rotate(40deg);}}
  .b3-glow{top:50%; left:50%; transform:translate(-50%,-50%); width:240px; height:240px;}
  .b3-pawn{width:170px;}
  .b3-crest{top:30px;}
  .k1{top:80px;} .k2{top:120px;} .k3{top:180px;} .k4{top:100px;}
  /* b5 leaderboard: centre medallion, crest in pawn centre, counter clearly below */
  #b5 .b5-stage{height:340px;}
  #b5 .b3-pawn{width:146px;}
  #b5 .b5-pot{bottom:14px; left:50%; transform:translateX(-50%); text-align:center; width:100%;}  /* counter centred below the pawn */
}
@media(max-width:480px){
  #b1 .b1-stage,#b5 .b5-stage,#b8 .b8-stage,.b3-stage,#b7 .b7-stage{height:260px;}
  #b5 .b5-stage{height:340px;}  /* taller so the medallion + counter don't overlap on phones */
  #b7 .b7-stage .b7-scene{width:210px; height:210px;}  /* board smaller still on narrow phones */
  .banner h2{font-size:26px;}
  #b1 .die,#b5 .die{width:90px;height:90px;}
  #b1 .b1-d1{left:calc(50% - 42px);} #b1 .b1-d2{left:calc(50% + 4px);}
  #b5 .b5-d1{left:calc(50% - 78px);} #b5 .b5-d2{left:calc(50% + 0px);}
  .banner .bbtn .lbl-full{display:none;} .banner .bbtn .lbl-sm{display:inline;}
}

/* ============ B1 — ROYAL ROLL ============ */
#b1{background:radial-gradient(ellipse 72% 82% at 75% 48%, #221a0a 0%, #100b06 55%, #07060a 100%);}
#b1 .b1-stage{position:absolute; right:0; top:0; bottom:0; width:54%; z-index:10;}
#b1 .die{width:118px; height:118px; top:calc(50% - 59px); left:calc(50% - 50px);}
#b1 .b1-d2{left:calc(50% + 8px);}
#b1 .b1-d1{animation:b1roll1 7s cubic-bezier(.2,.8,.2,1) infinite;}
#b1 .b1-d2{animation:b1roll2 7s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes b1roll1{0%{transform:translateX(440px) rotate(380deg) scale(.7);opacity:0;}8%{opacity:1;}26%{transform:translateX(0) rotate(-8deg) scale(1.05);}30%,80%{transform:translateX(0) rotate(-7deg) scale(1);opacity:1;}90%,100%{transform:translateX(60px) rotate(40deg) scale(.8);opacity:0;}}
@keyframes b1roll2{0%,4%{transform:translateX(480px) rotate(-340deg) scale(.7);opacity:0;}12%{opacity:1;}30%{transform:translateX(0) rotate(10deg) scale(1.05);}34%,80%{transform:translateX(0) rotate(8deg) scale(1);opacity:1;}90%,100%{transform:translateX(50px) rotate(-46deg) scale(.8);opacity:0;}}
#b1 .b1-ring{position:absolute; top:50%; left:50%; width:30px; height:30px; border-radius:50%; transform:translate(-50%,-50%); border:3px solid var(--gold); opacity:0; z-index:9; animation:b1ring 7s ease-out infinite;}
@keyframes b1ring{0%,28%{opacity:0; width:30px; height:30px;}30%{opacity:.9; width:60px; height:60px;}55%{opacity:0; width:320px; height:320px; border-width:1px;}100%{opacity:0;}}
#b1 .b1-spark{position:absolute; top:50%; left:50%; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle,#fff,rgba(232,181,71,0.8) 50%,transparent); opacity:0; z-index:11; animation:b1spark 7s ease-out infinite;}
#b1 .s2{animation-delay:.08s;} #b1 .s3{animation-delay:.05s;} #b1 .s4{animation-delay:.12s;}
@keyframes b1spark{0%,29%{opacity:0; transform:translate(-50%,-50%) translate(0,0) scale(0);}33%{opacity:1; transform:translate(-50%,-50%) translate(var(--dx,60px),var(--dy,-50px)) scale(1.2);}48%{opacity:0; transform:translate(-50%,-50%) translate(calc(var(--dx,60px)*1.6),calc(var(--dy,-50px)*1.6)) scale(.4);}100%{opacity:0;}}

/* ============ B3 — THE CORONATION ============ */
#b3{background:radial-gradient(ellipse 70% 90% at 74% 60%, #20183a 0%, #100c20 46%, #07060f 100%);}
.b3-stage{position:absolute; right:2%; top:0; bottom:0; width:52%; z-index:10; display:flex; align-items:center; justify-content:center;}
.b3-rays{position:absolute; width:460px; height:460px; z-index:8; opacity:0;
  background:repeating-conic-gradient(from 0deg, rgba(244,207,124,0.16) 0deg 1.3deg, transparent 1.3deg 10deg);
  -webkit-mask:radial-gradient(circle, transparent 22%, #000 26%, rgba(0,0,0,.4) 58%, transparent 72%);
  mask:radial-gradient(circle, transparent 22%, #000 26%, rgba(0,0,0,.4) 58%, transparent 72%);
  animation:b3rays 7s linear infinite;}
@keyframes b3rays{0%,18%{opacity:0; transform:rotate(0);}30%{opacity:.6;}84%{opacity:.5;}100%{opacity:0; transform:rotate(40deg);}}
.b3-glow{position:absolute; width:320px; height:320px; border-radius:50%; z-index:8; background:radial-gradient(circle,rgba(232,181,71,0.4),rgba(160,107,255,0.18) 42%,transparent 66%); filter:blur(8px); animation:b3breathe 4s ease-in-out infinite;}
@keyframes b3breathe{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.1);opacity:1;}}
.b3-pawn{position:relative; width:210px; z-index:12; opacity:0; transform-origin:50% 92%; animation:b3rise 7s cubic-bezier(.2,.9,.2,1) infinite;}
.b3-pawn img{width:100%; display:block; filter:drop-shadow(0 22px 30px rgba(0,0,0,0.55)) drop-shadow(0 0 24px rgba(232,181,71,0.5));}
@keyframes b3rise{0%,16%{transform:translateY(60px) scale(.4);opacity:0;}28%{transform:translateY(-12px) scale(1.1);opacity:1;}36%{transform:translateY(0) scale(1);}50%{transform:translateY(-6px);}68%{transform:translateY(2px);}84%{transform:translateY(0) scale(1);opacity:1;}93%,100%{transform:translateY(34px) scale(.6);opacity:0;}}
.b3-crest{position:absolute; top:46px; width:74px; height:74px; z-index:13; opacity:0; animation:b3crest 7s ease infinite;}
@keyframes b3crest{0%,30%{opacity:0; transform:translateY(14px) scale(.6);}40%{opacity:1; transform:translateY(0) scale(1.05);}48%{transform:scale(1);}84%{opacity:1;}93%,100%{opacity:0;}}
.b3-spark{position:absolute; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle,#fff,rgba(232,181,71,0.85) 45%,transparent); opacity:0; z-index:14; animation:b3spark 7s ease infinite;}
.k1{top:120px; left:46%;} .k2{top:180px; right:42%; animation-delay:.2s;} .k3{top:240px; left:40%; animation-delay:.1s;} .k4{top:150px; right:38%; animation-delay:.3s;}
@keyframes b3spark{0%,30%{opacity:0; transform:scale(0);}40%{opacity:1; transform:scale(1.2);}55%{opacity:0; transform:scale(.5);}100%{opacity:0;}}

/* ============ B5 — JACKPOT ============ */
#b5{background:radial-gradient(ellipse 70% 90% at 74% 50%, #1f1808 0%, #100b06 52%, #07060a 100%);}
#b5 .b3-crest{display:none;}  /* blue crown crest hidden on b5 (web + mobile) */
#b5 .b5-stage{position:absolute; right:0; top:0; bottom:0; width:52%; z-index:10; display:flex; align-items:center; justify-content:center;}
#b5 .die{width:104px; height:104px; top:calc(50% - 84px);}
#b5 .b5-d1{left:calc(50% - 92px); animation:b5die 6.5s ease infinite;}
#b5 .b5-d2{left:calc(50% + 0px); animation:b5die 6.5s ease infinite; animation-delay:.12s;}
@keyframes b5die{0%{transform:translateY(-50px) rotate(-160deg) scale(.6);opacity:0;}12%{opacity:1;}24%{transform:translateY(6px) rotate(6deg) scale(1.05);}28%,84%{transform:translateY(0) rotate(0) scale(1);opacity:1;}93%,100%{transform:translateY(-20px) scale(.7);opacity:0;}}
#b5 .b5-pot{position:absolute; left:50%; bottom:26px; top:auto; transform:translateX(-50%); z-index:13; text-align:center; opacity:0; animation:b5pot 6.5s ease infinite;}
#b5 .b5-pot small{display:block; font-family:var(--regal); font-size:11px; letter-spacing:2px; color:var(--gold); text-transform:uppercase;}
#b5 .b5-pot b{font-family:'JetBrains Mono',monospace; font-size:36px; color:var(--cream);}
@keyframes b5pot{0%,28%{opacity:0; transform:translateX(-50%) translateY(12px);}38%{opacity:1; transform:translateX(-50%) translateY(0);}84%{opacity:1;}93%,100%{opacity:0;}}
#b5 .b5-coin{position:absolute; top:-40px; width:24px; height:24px; border-radius:50%; z-index:11;
  background:radial-gradient(circle at 36% 30%, #fff0bf, #E8B547 55%, #a87b1f); border:1px solid #8a6a18; box-shadow:0 3px 6px rgba(0,0,0,0.4); opacity:0;
  animation:b5coin 2.8s cubic-bezier(.4,0,.7,1) infinite;}
@keyframes b5coin{0%{opacity:0; transform:translateY(-40px) rotate(0);}8%{opacity:1;}80%{opacity:1;}100%{opacity:0; transform:translateY(360px) rotate(380deg);}}

/* ============ B7 — ROYAL COURT IN 3D ============ */
#b7{background:radial-gradient(ellipse 95% 85% at 60% 130%, #1a1606 0%, #100b06 50%, #07060a 100%);}
#b7 .b7-stage{position:absolute; inset:0; z-index:10; perspective:1100px; overflow:hidden;}
#b7 .b7-scene{position:absolute; right:4%; top:50%; width:360px; height:360px; transform:translateY(-50%); transform-style:preserve-3d; animation:b7drift 11s ease-in-out infinite;}
@keyframes b7drift{0%,100%{transform:translateY(-50%) scale(1);}50%{transform:translateY(-53%) scale(1.04);}}
#b7 .b7-board{position:absolute; inset:0; transform:rotateX(54deg) rotateZ(-34deg); transform-style:preserve-3d; border-radius:16px;
  box-shadow:0 60px 80px rgba(0,0,0,0.62); animation:b7tilt 10s ease-in-out infinite;}
#b7 .b7-board img{width:100%; display:block; border-radius:16px; border:1px solid rgba(232,181,71,0.32);}
@keyframes b7tilt{0%,100%{transform:rotateX(54deg) rotateZ(-34deg);}50%{transform:rotateX(49deg) rotateZ(-27deg);}}
#b7 .b7-die{position:absolute; width:80px; z-index:13; filter:drop-shadow(0 22px 20px rgba(0,0,0,0.55));}
#b7 .b7-die.d1{top:8%; left:26%; animation:b7hover 4.4s ease-in-out infinite;}
#b7 .b7-die.d2{top:18%; left:54%; animation:b7hover 5.2s ease-in-out infinite; animation-delay:.4s;}
@keyframes b7hover{0%,100%{transform:translateY(0) rotate(-6deg);}50%{transform:translateY(-16px) rotate(6deg);}}
#b7 .b7-spot{position:absolute; top:50%; left:54%; width:360px; height:360px; transform:translate(-50%,-50%); z-index:1; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, rgba(232,181,71,0.17), rgba(232,181,71,0.05) 45%, transparent 68%); animation:b7spot 16s ease-in-out infinite;}
@keyframes b7spot{0%,100%{transform:translate(-50%,-50%) scale(.9); opacity:.6;}50%{transform:translate(-50%,-50%) scale(1.12); opacity:1;}}

/* ============ B8 — BRILLIANT ============ */
#b8{background:radial-gradient(ellipse 70% 95% at 72% 50%, #181232 0%, #0c0a1c 52%, #06050f 100%);}
#b8 .b8-stage{position:absolute; right:3%; top:0; bottom:0; width:50%; z-index:10; display:flex; align-items:center; justify-content:center;}
#b8 .b8-mandala{position:absolute; width:440px; height:440px; z-index:6; opacity:.16; animation:b8spin 44s linear infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='0 0 440 440'><g fill='none' stroke='%23E8B547' stroke-width='1' transform='translate(220 220)'><circle r='200'/><circle r='150'/><circle r='100'/><polygon points='0,-200 48,-100 200,0 48,100 0,200 -48,100 -200,0 -48,-100'/><polygon points='141,-141 200,0 141,141 0,200 -141,141 -200,0 -141,-141 0,-200'/></g></svg>");}
@keyframes b8spin{to{transform:rotate(360deg);}}
#b8 .b8-prism{position:absolute; width:400px; height:400px; z-index:7; opacity:.6; mix-blend-mode:screen;
  background:conic-gradient(from 0deg, transparent 0%, rgba(160,107,255,0.3) 8%, transparent 18%, rgba(232,181,71,0.3) 34%, transparent 46%, rgba(110,200,255,0.26) 62%, transparent 74%, rgba(255,140,200,0.22) 86%, transparent 96%);
  -webkit-mask:radial-gradient(circle, transparent 24%, #000 30%, rgba(0,0,0,.4) 64%, transparent 76%); mask:radial-gradient(circle, transparent 24%, #000 30%, rgba(0,0,0,.4) 64%, transparent 76%);
  animation:b8spin 15s linear infinite reverse;}
#b8 .b8-glow{position:absolute; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(199,170,255,0.34), rgba(232,181,71,0.16) 45%, transparent 66%); filter:blur(11px); z-index:7; animation:b3breathe 5s ease-in-out infinite;}
#b8 .b8-pawn{position:relative; width:182px; z-index:11; animation:b8float 6.5s ease-in-out infinite;}
#b8 .b8-pawn img{width:100%; display:block; filter:drop-shadow(0 24px 30px rgba(0,0,0,0.6)) drop-shadow(0 0 28px rgba(199,170,255,0.55));}
@keyframes b8float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
#b8 .b8-spark{position:absolute; width:14px; height:14px; z-index:13; opacity:0;
  background:radial-gradient(circle, #fff, rgba(199,170,255,0.85) 45%, transparent 70%); border-radius:50%; animation:b8spark 3.4s ease-in-out infinite;}
#b8 .b8-spark::before{content:""; position:absolute; inset:-7px; background:linear-gradient(#fff,transparent) no-repeat 50% 0/2px 100%, linear-gradient(90deg,#fff,transparent) no-repeat 0 50%/100% 2px; opacity:.8;}
#b8 .x1{top:26%; left:40%;} #b8 .x2{top:40%; right:36%; animation-delay:.7s;} #b8 .x3{top:62%; left:44%; animation-delay:1.1s;} #b8 .x4{top:50%; right:40%; width:10px; height:10px; animation-delay:.4s;}
@keyframes b8spark{0%,70%{opacity:0; transform:scale(0);}80%{opacity:1; transform:scale(1.2);}90%{opacity:0; transform:scale(.5);}100%{opacity:0;}}

@media(prefers-reduced-motion:reduce){
  .banner *{animation:none !important;}
  #b1 .die,#b5 .die,#b7 .b7-die,.b3-pawn,.b3-crest,#b8 .b8-pawn,#b5 .b5-pot{opacity:1 !important; transform:none !important;}
  #b1 .b1-ring,#b1 .b1-spark,.b3-rays,.b3-spark,#b5 .b5-coin,#b8 .b8-spark{opacity:0 !important;}
}