/* KheloBhai public landing — 3D depth, no WebGL on mobile */
.atmosphere {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 12% -10%, rgba(61, 207, 154, .18), transparent 55%),
    radial-gradient(ellipse 55% 40% at 92% 8%, rgba(240, 197, 106, .14), transparent 50%);
}
.atmosphere canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: .55;
}

.hero {
  padding-bottom: 0 !important;
}
.hero-copy { position: relative; z-index: 2; }
.hero-stage {
  min-height: 460px !important;
  perspective: 1400px;
  transform-style: preserve-3d;
}
.kb-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.scene-3d {
  position: relative;
  z-index: 1;
  height: 460px;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-12deg);
  transition: transform .35s ease;
  will-change: transform;
}
.scene-3d.is-live { transition: transform .12s ease-out; }

.phone-3d {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 430px;
  margin: -215px 0 0 -105px;
  transform: translateZ(40px);
  transform-style: preserve-3d;
  filter: drop-shadow(0 28px 40px rgba(0, 0, 0, .55));
}
.phone-bezel {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #06110c;
  border: 2px solid rgba(244, 215, 138, .45);
  box-shadow:
    inset 0 0 0 3px #0b1a14,
    0 0 0 1px rgba(61, 207, 154, .25),
    0 24px 50px rgba(0, 0, 0, .45);
}
.phone-bezel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.phone-3d::after {
  content: "";
  position: absolute;
  inset: 10% -18% auto auto;
  width: 70%;
  height: 70%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.16), transparent);
  transform: rotateY(-70deg) translateZ(30px);
  pointer-events: none;
}

.orbit {
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, #1c3428, #0a1410);
  border: 1px solid rgba(240, 197, 106, .35);
  box-shadow: 0 16px 28px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255,255,255,.18);
  animation: floatY 5.2s ease-in-out infinite;
}
.orbit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
}
.orbit-a { left: 4%; top: 8%; animation-delay: 0s; transform: translateZ(90px) rotate(-8deg); }
.orbit-b { right: 2%; top: 18%; animation-delay: .6s; transform: translateZ(70px) rotate(10deg); }
.orbit-c { left: 8%; bottom: 6%; animation-delay: 1.1s; transform: translateZ(110px) rotate(6deg); }

.dice-3d {
  position: absolute;
  right: 10%;
  bottom: 12%;
  width: 56px;
  height: 56px;
  transform-style: preserve-3d;
  transform: translateZ(130px);
  animation: diceSpin 9s linear infinite;
}
.cube { width: 56px; height: 56px; position: relative; transform-style: preserve-3d; }
.cube .face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  background: linear-gradient(145deg, #fff8e8, #f0c56a);
  color: #102016;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(16, 32, 22, .18);
}
.cube .f1 { transform: rotateY(0deg) translateZ(28px); }
.cube .f2 { transform: rotateY(90deg) translateZ(28px); }
.cube .f3 { transform: rotateY(180deg) translateZ(28px); }
.cube .f4 { transform: rotateY(-90deg) translateZ(28px); }
.cube .f5 { transform: rotateX(90deg) translateZ(28px); }
.cube .f6 { transform: rotateX(-90deg) translateZ(28px); }

.token {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: 0 8px 16px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.4);
  animation: floatY 4.4s ease-in-out infinite;
}
.token.t1 { left: 22%; top: 22%; background: radial-gradient(circle at 35% 30%, #ffd4d4, #e23b3b); animation-delay: .2s; transform: translateZ(160px); }
.token.t2 { right: 18%; top: 48%; background: radial-gradient(circle at 35% 30%, #d4f0ff, #2b7de9); animation-delay: .8s; transform: translateZ(150px); }
.token.t3 { right: 28%; bottom: 22%; background: radial-gradient(circle at 35% 30%, #e4ffd4, #2db85a); animation-delay: 1.4s; transform: translateZ(140px); }

@keyframes floatY {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@keyframes diceSpin {
  from { transform: translateZ(130px) rotateX(0) rotateY(0); }
  to { transform: translateZ(130px) rotateX(360deg) rotateY(420deg); }
}

.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
  padding: 0 0 2.2rem;
  position: relative;
  z-index: 2;
}
.proof li {
  list-style: none;
  padding: .85rem .95rem;
  border-radius: 16px;
  background: rgba(18, 36, 28, .72);
  border: 1px solid rgba(240, 197, 106, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.proof b {
  display: block;
  font-family: var(--font-d);
  font-size: 1.05rem;
  color: var(--gold-2);
  letter-spacing: -.02em;
}
.proof span { color: var(--muted); font-size: .82rem; font-weight: 600; }

.gvis {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-top: 1.05rem !important;
}
.gvis-art {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: .85rem;
  background: #0b1612;
  border: 1px solid rgba(240, 197, 106, .28);
  box-shadow: 0 10px 20px rgba(0,0,0,.28);
  transform: rotateX(8deg) rotateY(-12deg);
  transform-style: preserve-3d;
}
.gvis-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.game.gvis:hover .gvis-art {
  transform: rotateX(0) rotateY(0) translateY(-4px) scale(1.06);
  transition: transform .28s cubic-bezier(.2,.9,.2,1);
}
.game.gvis .gvis-art { transition: transform .28s cubic-bezier(.2,.9,.2,1); }

.games-grid .game {
  transform-style: preserve-3d;
}

.host-band {
  display: grid;
  gap: 1.2rem;
  align-items: center;
  padding: 1.6rem 1.5rem;
  border-radius: 28px;
  border: 1px solid rgba(240, 197, 106, .28);
  background:
    radial-gradient(ellipse 80% 120% at 0% 0%, rgba(61, 207, 154, .16), transparent 55%),
    linear-gradient(165deg, #183026, #0c1a14);
  box-shadow: var(--shadow);
}
@media (min-width: 800px) {
  .host-band { grid-template-columns: 1.4fr auto; }
}
.host-band h3 {
  font-family: var(--font-d);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--gold-2);
  margin-bottom: .35rem;
}
.host-band p { color: var(--muted); max-width: 36rem; }

@media (max-width: 900px) {
  .hero-stage { min-height: 340px !important; }
  .scene-3d { height: 340px; transform: rotateX(4deg) rotateY(-6deg); }
  .phone-3d { width: 150px; height: 308px; margin: -154px 0 0 -75px; }
  .phone-bezel { border-radius: 24px; }
  .orbit { width: 62px; height: 62px; border-radius: 16px; }
  .dice-3d { width: 42px; height: 42px; }
  .cube, .cube .face { width: 42px; height: 42px; }
  .cube .f1 { transform: rotateY(0deg) translateZ(21px); }
  .cube .f2 { transform: rotateY(90deg) translateZ(21px); }
  .cube .f3 { transform: rotateY(180deg) translateZ(21px); }
  .cube .f4 { transform: rotateY(-90deg) translateZ(21px); }
  .cube .f5 { transform: rotateX(90deg) translateZ(21px); }
  .cube .f6 { transform: rotateX(-90deg) translateZ(21px); }
  .proof { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit, .token, .dice-3d { animation: none; }
  .scene-3d { transform: none; }
}