/* ═══════════════════════════════════════════════
   GenZ4T — Platform Styles (Single Curtain)
═══════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --gold:#FFD700;--fire:#FF4500;--pink:#e4007c;--green:#1a6b3c;--ink:#0a0a14;
  --velvet:#6b0f0f;--velvet-dark:#4a0808;--velvet-light:#8B1a1a;--velvet-shine:#a02020;
}
html,body{height:100%;overflow:hidden;background:var(--ink);font-family:'DM Sans',sans-serif;color:#fff;touch-action:none}

/* ── SHELL ── */
#shell{width:100vw;height:100svh;display:flex;flex-direction:column;overflow:hidden}

/* ── HEADER ── */
#hdr{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  padding:0.5rem 1rem 0.4rem;
  background:linear-gradient(180deg,rgba(0,0,0,0.92),rgba(0,0,0,0.75));
  border-bottom:1.5px solid rgba(255,215,0,0.2);
  position:relative;z-index:5;
}
.h-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(1.9rem,6.5vw,2.8rem);
  letter-spacing:6px;line-height:1;
  background:linear-gradient(135deg,#00e5ff 0%,#FFD700 40%,#FF4500 70%,#e4007c 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.h-sub{font-size:0.5rem;letter-spacing:4px;color:rgba(255,255,255,0.4);margin-top:0.08rem}

/* ── STAGE ── */
#stage{flex:1;position:relative;overflow:hidden;background:#050208}

/* ── CONTENT BEHIND CURTAIN ── */
#stage-content{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
}
.content-half{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:0.85rem 1.1rem;
  pointer-events:none;
}
#top-behind{
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%,rgba(255,100,0,0.28) 0%,transparent 65%),
    linear-gradient(180deg,#1c0e06,#120808);
}
#bot-behind{
  background:
    radial-gradient(ellipse 90% 70% at 50% 55%,rgba(228,0,124,0.24) 0%,transparent 65%),
    linear-gradient(180deg,#12080e,#0e0612);
}
.content-half.revealed{pointer-events:all}

/* Stage divider */
#stage-divider{
  height:2px;flex-shrink:0;
  background:linear-gradient(90deg,transparent,rgba(255,215,0,0.4),rgba(255,215,0,0.8),rgba(255,215,0,0.4),transparent);
  position:relative;z-index:2;
}
#mid-badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;pointer-events:none;
  width:50px;height:50px;border-radius:50%;
  background:#0a0008;
  border:2px solid rgba(255,215,0,0.4);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px rgba(0,0,0,0.8);
}
.mb-text{font-family:'Tiro Telugu',serif;font-size:0.5rem;color:rgba(255,215,0,0.5);text-align:center;line-height:1.4}

/* ── REVEAL CONTENT ── */
.rv-tag{font-size:0.52rem;letter-spacing:4px;color:rgba(255,255,255,0.55);margin-bottom:0.3rem}
.rv-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,7vw,3rem);letter-spacing:3px;line-height:1;margin-bottom:0.15rem}
.rv-title.fire{background:linear-gradient(135deg,#FFD700,#FF6500);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rv-title.pink{background:linear-gradient(135deg,#ff4db8,#e4007c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rv-te{font-family:'Tiro Telugu',serif;font-size:0.75rem;color:rgba(255,255,255,0.55);margin-bottom:0.55rem}
.rv-desc{font-size:0.7rem;font-weight:500;color:rgba(255,255,255,0.65);line-height:1.55;max-width:280px;text-align:center;margin-bottom:0.7rem}

/* ── GAME CHIPS ── */
/* ── GAME CAROUSEL ── */
.game-carousel{
  width:100%;max-width:320px;
  pointer-events:all;
  position:relative;
}
.gc-track-wrap{
  overflow:hidden;border-radius:14px;
  width:100%;
}
.gc-track{
  display:flex;
  transition:transform 0.45s cubic-bezier(0.4,0,0.2,1);
  will-change:transform;
}
.gc{
  min-width:100%;
  border-radius:14px;
  padding:1rem 1.1rem 0.9rem;
  cursor:pointer;touch-action:manipulation;
  display:flex;align-items:center;gap:0.9rem;
  position:relative;overflow:hidden;
  border:1.5px solid rgba(255,255,255,0.12);
}
.gc:active,.gc.tapped{transform:scale(0.98);filter:brightness(0.9)}
/* Shine overlay */
.gc::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,transparent 60%);
  pointer-events:none;border-radius:14px;
}
.gc-em{
  font-size:2.8rem;line-height:1;flex-shrink:0;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  pointer-events:none;
}
.gc-info{flex:1;min-width:0;pointer-events:none}
.gc-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.3rem;letter-spacing:2px;
  color:#fff;line-height:1;margin-bottom:0.15rem;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}
.gc-te{
  font-family:'Tiro Telugu',serif;
  font-size:0.65rem;color:rgba(255,255,255,0.55);
  margin-bottom:0.25rem;
}
.gc-desc{font-size:0.68rem;color:rgba(255,255,255,0.85);line-height:1.35;font-weight:600}
.gc-play{
  flex-shrink:0;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,0.2);
  border:1.5px solid rgba(255,255,255,0.4);
  display:flex;align-items:center;justify-content:center;
  font-size:0.8rem;color:#fff;pointer-events:none;
}
/* Carousel dots */
.gc-dots{
  display:flex;justify-content:center;gap:5px;
  margin-top:0.45rem;pointer-events:all;
}
.gc-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,0.25);
  cursor:pointer;transition:all 0.2s;touch-action:manipulation;
}
.gc-dot.active{
  background:rgba(255,215,0,0.8);
  width:18px;border-radius:3px;
}
/* Nav arrows */
.gc-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.2);
  color:#fff;font-size:0.7rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;touch-action:manipulation;z-index:2;
}
.gc-prev{left:-13px}
.gc-next{right:-13px}

/* ── DRIVE BUTTON ── */
.drive-btn{
  display:inline-flex;align-items:center;gap:0.5rem;
  border:2px solid rgba(255,80,180,0.6);border-radius:100px;
  padding:0.6rem 1.4rem;font-size:0.85rem;font-weight:700;
  color:#ff80cc;background:rgba(228,0,124,0.15);
  cursor:pointer;touch-action:manipulation;transition:all 0.2s;pointer-events:all;
  font-family:'DM Sans',sans-serif;
}
.drive-btn:active{transform:scale(0.97);background:rgba(228,0,124,0.3)}

/* ══════════════════════════════════════════
   SINGLE VELVET CURTAIN
══════════════════════════════════════════ */
#main-curtain{
  position:absolute;inset:0;
  z-index:10;
  display:flex;flex-direction:column;
  transform:translateY(0);
  /* Slow theatrical rise */
  transition:transform 4.5s cubic-bezier(0.25,0,0.1,1);
  will-change:transform;
}
#main-curtain.rising{
  transform:translateY(-110%);
}

/* ── Curtain body (fabric) ── */
#curtain-body{
  flex:1;
  position:relative;
  overflow:hidden;
  /* Deep velvet — layered gradients for sheen */
  background:
    /* Vertical fold highlights — shiny peaks */
    repeating-linear-gradient(
      90deg,
      transparent           0px,
      transparent           34px,
      rgba(255,255,255,0.06) 35px,
      rgba(255,255,255,0.09) 38px,
      rgba(255,255,255,0.04) 41px,
      transparent           42px,
      transparent           68px,
      rgba(0,0,0,0.12)       69px,
      rgba(0,0,0,0.08)       72px,
      transparent           73px
    ),
    /* Horizontal subtle sheen sweep */
    linear-gradient(
      175deg,
      #8B1a1a 0%,
      #6b0f0f 15%,
      #a02020 30%,
      #7a1515 45%,
      #6b0f0f 55%,
      #9a1c1c 70%,
      #6b0f0f 85%,
      #550c0c 100%
    );
  /* Top rod line */
  border-top:6px solid #c8920a;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.4),
    inset 0 0 20px rgba(180,20,20,0.3),
    0 4px 20px rgba(0,0,0,0.8);
}

/* Fabric fold divs — subtle depth shadows */
.fold{
  position:absolute;top:0;bottom:40px;width:14px;
  background:linear-gradient(90deg,rgba(0,0,0,0.25),rgba(0,0,0,0),rgba(255,255,255,0.06),rgba(0,0,0,0));
  pointer-events:none;
}
.fold:nth-child(1){left:6%}
.fold:nth-child(2){left:18%}
.fold:nth-child(3){left:30%}
.fold:nth-child(4){left:42%}
.fold:nth-child(5){left:55%}
.fold:nth-child(6){left:67%}
.fold:nth-child(7){left:79%}
.fold:nth-child(8){left:91%}

/* Curtain brand text */
#curtain-brand{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);
  text-align:center;pointer-events:none;
}
.cb-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3rem,12vw,5rem);
  letter-spacing:8px;
  background:linear-gradient(135deg,rgba(255,215,0,0.9),rgba(200,146,10,0.6),rgba(255,215,0,0.8));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-shadow:none;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.8));
  line-height:1;
}
.cb-te{
  font-family:'Tiro Telugu',serif;
  font-size:clamp(0.9rem,3vw,1.2rem);
  color:rgba(255,255,255,0.9);
  margin-top:0.3rem;letter-spacing:2px;
  text-shadow:0 1px 6px rgba(0,0,0,0.7);
}
.cb-sub{
  font-size:0.52rem;letter-spacing:4px;
  color:rgba(255,255,220,0.75);margin-top:0.4rem;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
}

/* ── Wavy hem ── */
#curtain-hem{
  position:absolute;bottom:0;left:0;right:0;
  height:40px;pointer-events:none;
}
#curtain-hem svg{width:100%;height:100%;display:block}

/* ── Cord + Tassel ── */
#cord-wrap{
  position:absolute;
  /* Hangs from bottom edge of curtain body */
  bottom:-120px;
  left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  cursor:pointer;touch-action:manipulation;
  z-index:11;
}
#cord-line{
  width:3px;height:60px;
  background:linear-gradient(180deg,#c8920a,#FFD700,#c8920a);
  border-radius:2px;
  box-shadow:0 0 6px rgba(255,215,0,0.4);
}
#cord-knot{
  width:36px;height:36px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#FFD700,#a06800);
  display:flex;align-items:center;justify-content:center;
  font-size:0.85rem;color:rgba(0,0,0,0.5);
  box-shadow:0 3px 12px rgba(0,0,0,0.6),inset 0 1px 3px rgba(255,255,255,0.3),0 0 12px rgba(255,215,0,0.3);
  animation:cordSway 3s ease-in-out infinite;
  transition:transform 0.1s;
}
#cord-knot:active{transform:scale(1.15)}
@keyframes cordSway{
  0%,100%{transform:rotate(-4deg)}
  25%{transform:rotate(4deg)}
  50%{transform:rotate(-3deg)}
  75%{transform:rotate(3deg)}
}
#cord-ring{pointer-events:none}
#cord-fringe{
  display:flex;gap:3px;margin-top:2px;
}
#cord-fringe span{
  width:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(180deg,rgba(200,146,10,0.9),rgba(180,130,0,0.4));
  animation:fringeSway 2.8s ease-in-out infinite;
}
#cord-fringe span:nth-child(1){height:16px;animation-delay:0s}
#cord-fringe span:nth-child(2){height:22px;animation-delay:0.1s}
#cord-fringe span:nth-child(3){height:26px;animation-delay:0.2s}
#cord-fringe span:nth-child(4){height:28px;animation-delay:0s}
#cord-fringe span:nth-child(5){height:26px;animation-delay:0.15s}
#cord-fringe span:nth-child(6){height:22px;animation-delay:0.05s}
#cord-fringe span:nth-child(7){height:16px;animation-delay:0.1s}
@keyframes fringeSway{
  0%,100%{transform:rotate(-2deg)}
  50%{transform:rotate(2deg)}
}
#cord-label{
  font-size:0.5rem;letter-spacing:2px;
  color:rgba(255,215,0,0.5);margin-top:8px;
  white-space:nowrap;font-family:'DM Sans',sans-serif;
  animation:labelPulse 2s ease infinite;
}
@keyframes labelPulse{0%,100%{opacity:0.4}50%{opacity:0.9}}

/* ── LAUNCHER ── */
#launcher{position:fixed;inset:0;z-index:100;display:none;background:#000}
#launcher.on{display:block}
#lframe{width:100%;height:100%;border:none;display:block}
#back-btn{
  position:fixed;top:0.6rem;left:0.6rem;z-index:200;
  width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.18);color:#fff;font-size:1.1rem;
  display:none;align-items:center;justify-content:center;
  cursor:pointer;touch-action:manipulation;
}
#back-btn.on{display:flex}

@keyframes cpop{from{opacity:0;transform:scale(0.8) translateY(5px)}to{opacity:1;transform:scale(1) translateY(0)}}