/* =========================================================
   GAMER.CSS — Neon arcade layer for Shriyan Infotech
   Kinetic animations, particle effects, gamer UI elements
   ========================================================= */

/* ── SCANLINE OVERLAY ─────────────────────────────────── */
body::after{
  content:'';pointer-events:none;
  position:fixed;inset:0;z-index:9999;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,.04) 3px,
    rgba(0,0,0,.04) 4px
  );
  opacity:.4;
}

/* ════════════════════════════════════════════════════════
   REDESIGNED HERO PHONE MOCKUP
   ════════════════════════════════════════════════════════ */

/* Neon glow halo behind the phone */
.phone-halo{
  position:absolute;
  width:340px;height:480px;
  border-radius:60px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%,rgba(168,85,247,.28),transparent 70%),
    radial-gradient(ellipse 50% 40% at 30% 30%,rgba(0,229,255,.12),transparent 60%),
    radial-gradient(ellipse 50% 40% at 70% 70%,rgba(224,64,251,.12),transparent 60%);
  filter:blur(28px);
  pointer-events:none;
  z-index:0;
  animation:halo-breathe 3.5s ease-in-out infinite;
}
@keyframes halo-breathe{
  0%,100%{opacity:.65;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}

/* Floating decorative orbs — look like real game balls */
.deco-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:3;
}
.dorb-1{
  width:52px;height:52px;
  top:6%;left:-4%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),var(--gold) 42%,rgba(180,110,0,.9));
  box-shadow:0 0 22px rgba(255,214,0,.65),inset 0 5px 9px rgba(255,255,255,.5);
  animation:orb-float-a 4.2s ease-in-out infinite;
}
.dorb-2{
  width:40px;height:40px;
  top:22%;right:-4%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),var(--cyan) 42%,rgba(0,160,200,.9));
  box-shadow:0 0 18px rgba(0,229,255,.65),inset 0 4px 8px rgba(255,255,255,.5);
  animation:orb-float-b 5.1s ease-in-out infinite .7s;
}
.dorb-3{
  width:36px;height:36px;
  bottom:22%;left:-3%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),var(--primary) 42%,rgba(100,30,180,.9));
  box-shadow:0 0 16px rgba(168,85,247,.65),inset 0 4px 8px rgba(255,255,255,.5);
  animation:orb-float-a 3.8s ease-in-out infinite 1.3s;
}
.dorb-4{
  width:28px;height:28px;
  bottom:8%;right:-3%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),var(--neon-green) 42%,rgba(40,160,0,.9));
  box-shadow:0 0 14px rgba(105,255,71,.65),inset 0 3px 7px rgba(255,255,255,.5);
  animation:orb-float-b 4.6s ease-in-out infinite .4s;
}
@keyframes orb-float-a{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  40%{transform:translateY(-14px) rotate(8deg) scale(1.04)}
  70%{transform:translateY(6px) rotate(-4deg) scale(.97)}
}
@keyframes orb-float-b{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  35%{transform:translateY(10px) rotate(-6deg) scale(.96)}
  65%{transform:translateY(-12px) rotate(5deg) scale(1.03)}
}

/* Phone camera notch */
.phone-notch{
  position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:110px;height:28px;
  background:rgba(2,1,8,.99);
  border-radius:0 0 20px 20px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  z-index:5;
  box-shadow:inset 0 -1px 0 rgba(168,85,247,.2);
}
.phone-notch-speaker{
  width:34px;height:4px;
  border-radius:99px;
  background:rgba(80,60,120,.8);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.phone-notch-cam{
  width:9px;height:9px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#1a1a3a,#0a0a1a);
  border:1.5px solid rgba(168,85,247,.5);
  box-shadow:0 0 7px rgba(168,85,247,.4);
}

/* Live game badge */
.phone-game-label{
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:rgba(168,85,247,.1);
  border:1px solid rgba(168,85,247,.28);
  border-radius:99px;
  padding:5px 13px;
  font-size:.65rem;font-weight:900;
  letter-spacing:.12em;color:var(--cyan);
  margin:0 auto 10px;
  width:fit-content;
  text-transform:uppercase;
  font-family:'Orbitron',sans-serif;
}
.phone-live-dot{
  width:7px;height:7px;flex:0 0 7px;
  border-radius:50%;
  background:var(--neon-green);
  box-shadow:0 0 8px rgba(105,255,71,.8);
  animation:live-dot-pulse 1.3s ease-in-out infinite;
}
@keyframes live-dot-pulse{
  0%,100%{opacity:1;box-shadow:0 0 8px rgba(105,255,71,.8)}
  50%{opacity:.45;box-shadow:0 0 3px rgba(105,255,71,.3)}
}

/* Android home bar */
.phone-home-bar{
  margin:14px auto 2px;
  width:72px;height:4px;
  border-radius:99px;
  background:rgba(255,255,255,.18);
}

/* Reduced-motion: kill decorative animations */
@media(prefers-reduced-motion:reduce){
  .phone-halo,.deco-orb,.phone-live-dot{animation:none!important}
  .phone-halo{opacity:.5}
}
@media(max-width:600px){
  .dorb-1,.dorb-2,.dorb-3,.dorb-4{display:none}
  .phone-halo{width:260px;height:380px}
}


/* ════════════════════════════════════════════════════════
   BALL SORT MINI-GAME
   ════════════════════════════════════════════════════════ */

.ball-sort-game{
  position:relative;z-index:1;
  width:100%;max-width:430px;
  border:2px solid var(--border-bright);
  border-radius:26px;
  background:linear-gradient(155deg,rgba(10,4,24,.97),rgba(4,4,18,.99));
  box-shadow:var(--glow-primary),0 40px 80px rgba(0,0,0,.55);
  padding:20px 18px 16px;
  backdrop-filter:blur(12px);
}

/* ── Header */
.bsg-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:14px;
}
.bsg-live-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(168,85,247,.12);
  border:1px solid rgba(168,85,247,.3);
  border-radius:99px;padding:3px 10px;
  font-size:.6rem;font-weight:900;
  letter-spacing:.14em;color:var(--cyan);
  font-family:'Orbitron',sans-serif;
  margin-bottom:5px;
}
.bsg-live-dot{
  width:6px;height:6px;flex:0 0 6px;
  border-radius:50%;
  background:var(--neon-green);
  box-shadow:0 0 7px rgba(105,255,71,.8);
  animation:live-dot-pulse 1.3s ease-in-out infinite;
}
.bsg-title{
  font-family:'Orbitron',sans-serif;
  font-size:.95rem;font-weight:800;
  margin:0;color:var(--text);
}
.bsg-score-box{
  display:flex;flex-direction:column;align-items:center;
  background:rgba(168,85,247,.1);
  border:1px solid rgba(168,85,247,.25);
  border-radius:14px;
  padding:8px 16px;min-width:60px;
}
.bsg-score-label{
  font-size:.55rem;font-weight:900;
  letter-spacing:.15em;color:var(--muted);
  font-family:'Orbitron',sans-serif;
}
.bsg-score-value{
  font-size:1.6rem;font-weight:900;
  color:var(--cyan);line-height:1;
  font-family:'Orbitron',sans-serif;
}

/* ── Tubes row */
.bsg-tubes{
  display:flex;gap:8px;justify-content:center;align-items:flex-end;
  padding:8px 0 12px;
}

/* Individual tube */
.bsg-tube{
  position:relative;
  display:flex;flex-direction:column-reverse; /* balls stack up from bottom */
  gap:3px;
  width:52px;min-height:190px;
  background:rgba(255,255,255,.03);
  border:2px solid rgba(168,85,247,.2);
  border-top:none;
  border-radius:0 0 26px 26px;
  padding:5px 4px 8px;
  cursor:pointer;
  transition:transform .2s,border-color .2s,box-shadow .2s;
  outline:none;
}
/* Tube rim / top opening */
.bsg-tube::before{
  content:'';
  position:absolute;top:-10px;left:-4px;right:-4px;height:10px;
  border:2px solid rgba(168,85,247,.2);
  border-bottom:none;
  border-radius:6px 6px 0 0;
}
.bsg-tube:hover{transform:translateY(-4px)}
.bsg-tube:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* Selected state — lifted with cyan glow */
.bsg-tube.is-selected{
  transform:translateY(-12px);
  border-color:var(--cyan);
  box-shadow:0 0 0 2px var(--cyan),0 0 24px rgba(0,229,255,.45);
}
.bsg-tube.is-selected::before{border-color:var(--cyan)}

/* Completed tube — all same color */
.bsg-tube.is-complete{
  border-color:var(--neon-green);
  box-shadow:0 0 0 2px var(--neon-green),0 0 20px rgba(105,255,71,.4);
  cursor:default;
}
.bsg-tube.is-complete::before{border-color:var(--neon-green)}

/* Invalid move shake */
.bsg-tube.is-invalid{animation:bsg-shake .35s ease}
@keyframes bsg-shake{
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

/* ── Balls */
.bsg-ball{
  width:100%;aspect-ratio:1;
  border-radius:50%;
  flex:0 0 auto;
  transition:transform .18s;
}
.bsg-ball-violet{
  background:radial-gradient(circle at 33% 28%,rgba(255,255,255,.9),var(--primary) 44%,rgba(80,15,140,.9));
  box-shadow:inset 0 4px 8px rgba(255,255,255,.4),0 2px 8px rgba(168,85,247,.6);
}
.bsg-ball-cyan{
  background:radial-gradient(circle at 33% 28%,rgba(255,255,255,.9),var(--cyan) 44%,rgba(0,140,180,.9));
  box-shadow:inset 0 4px 8px rgba(255,255,255,.4),0 2px 8px rgba(0,229,255,.6);
}
.bsg-ball-gold{
  background:radial-gradient(circle at 33% 28%,rgba(255,255,255,.9),var(--gold) 44%,rgba(160,100,0,.9));
  box-shadow:inset 0 4px 8px rgba(255,255,255,.4),0 2px 8px rgba(255,214,0,.6);
}
.bsg-ball-green{
  background:radial-gradient(circle at 33% 28%,rgba(255,255,255,.9),var(--neon-green) 44%,rgba(25,130,0,.9));
  box-shadow:inset 0 4px 8px rgba(255,255,255,.4),0 2px 8px rgba(105,255,71,.6);
}

/* ── Message */
.bsg-message{
  text-align:center;
  font-size:.8rem;font-weight:700;
  color:var(--muted);
  min-height:22px;
  margin:4px 0 12px;
  transition:color .25s;
}
.bsg-message.is-win{color:var(--neon-green);font-weight:900;font-size:.88rem}
.bsg-message.is-error{color:var(--hot)}

/* ── Controls */
.bsg-controls{
  display:flex;gap:8px;align-items:center;
}
.bsg-new-btn{
  background:linear-gradient(135deg,rgba(168,85,247,.25),rgba(224,64,251,.18))!important;
}
.bsg-undo-btn{
  min-height:36px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:99px;
  background:rgba(255,255,255,.05);
  color:var(--muted);
  padding:6px 14px;font-size:.8rem;font-weight:800;
  cursor:pointer;
  transition:background .2s,color .2s,transform .15s;
  font-family:'Nunito',sans-serif;
}
.bsg-undo-btn:hover{
  background:rgba(255,255,255,.1);
  color:var(--text);
  transform:translateY(-2px);
}
.bsg-undo-btn:disabled{opacity:.35;pointer-events:none}

/* ── Win celebration */
.ball-sort-game.is-won{
  border-color:rgba(105,255,71,.7);
  box-shadow:0 0 0 4px rgba(105,255,71,.1),0 0 60px rgba(105,255,71,.25),0 40px 80px rgba(0,0,0,.55);
  animation:win-pulse .6s ease 3;
}
@keyframes win-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.015)}
}

/* Confetti pieces */
.bsg-confetti{
  position:fixed;
  pointer-events:none;z-index:9997;
  width:8px;height:8px;
  border-radius:2px;
  animation:bsg-confetti-fall 1s ease-out forwards;
}
@keyframes bsg-confetti-fall{
  0%{opacity:1;transform:translateY(0) rotate(0deg) scale(1)}
  100%{opacity:0;transform:translateY(180px) rotate(540deg) scale(.2)}
}

/* Responsive */
@media(max-width:500px){
  .bsg-tube{width:44px;min-height:165px}
  .ball-sort-game{padding:16px 12px 14px}
}
@media(prefers-reduced-motion:reduce){
  .bsg-tube{transition:none}
  .bsg-tube.is-selected{transform:none;box-shadow:0 0 0 2px var(--cyan)}
  .ball-sort-game.is-won{animation:none}
  .bsg-confetti{display:none}
}

/* ── Ball flight keyframes ── */
@keyframes bsg-land-flash{
  0%  {opacity:.85;transform:scale(1)}
  40% {opacity:.5;transform:scale(2.2)}
  100%{opacity:0;transform:scale(3.5)}
}
@keyframes bsg-line-fade{
  0%  {opacity:.8;transform-origin:left center;scaleX(1)}
  100%{opacity:0;transform:scaleX(0.2)}
}

/* ── ANIMATED HERO BACKGROUND ─────────────────────────── */
.hero{background:
  radial-gradient(ellipse 70% 60% at 60% 30%,rgba(168,85,247,.12),transparent 65%),
  radial-gradient(ellipse 50% 40% at 20% 70%,rgba(0,229,255,.08),transparent 60%),
  radial-gradient(ellipse 60% 50% at 90% 10%,rgba(224,64,251,.1),transparent 55%);
}

/* Particle canvas behind hero content */
#hero-particles{
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
}
.hero .container{position:relative;z-index:1}

/* ── GLITCH TEXT EFFECT ─────────────────────────────────── */
.glitch-text{
  position:relative;
  animation:glitch-flicker 4s infinite;
}
.glitch-text::before,.glitch-text::after{
  content:attr(data-text);
  position:absolute;inset:0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.glitch-text::before{
  background:linear-gradient(100deg,transparent,rgba(0,229,255,.8));
  animation:glitch-shift-a 4s infinite;
  clip-path:polygon(0 20%,100% 20%,100% 40%,0 40%);
}
.glitch-text::after{
  background:linear-gradient(100deg,transparent,rgba(224,64,251,.8));
  animation:glitch-shift-b 4s infinite;
  clip-path:polygon(0 60%,100% 60%,100% 80%,0 80%);
}

/* ── HERO BADGE ROW ─────────────────────────────────── */
.hero-badges{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;margin-bottom:8px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:99px;
  font-size:.78rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid;animation:badge-pulse 2.5s ease-in-out infinite alternate;
}
.hero-badge.badge-free{
  color:var(--neon-green);border-color:rgba(105,255,71,.4);
  background:rgba(105,255,71,.08);
  box-shadow:0 0 12px rgba(105,255,71,.2);
  --pulse-color:rgba(105,255,71,.35);
}
.hero-badge.badge-levels{
  color:var(--gold);border-color:rgba(255,214,0,.4);
  background:rgba(255,214,0,.08);
  box-shadow:0 0 12px rgba(255,214,0,.2);
  --pulse-color:rgba(255,214,0,.35);
  animation-delay:.6s;
}
.hero-badge.badge-free:hover,.hero-badge.badge-levels:hover{
  background:rgba(255,255,255,.1);
}

/* ── NEON PULSE BUTTON ─────────────────────────────────── */
.button.pulse-glow{
  animation:btn-pulse 2s ease-in-out infinite;
}
@keyframes btn-pulse{
  0%,100%{box-shadow:0 0 20px rgba(168,85,247,.5),0 0 60px rgba(168,85,247,.2)}
  50%{box-shadow:0 0 30px rgba(224,64,251,.7),0 0 80px rgba(224,64,251,.3),0 0 120px rgba(168,85,247,.15)}
}

/* ── STATS STRIP ─────────────────────────────────── */
.stats-strip{
  display:flex;flex-wrap:wrap;gap:0;
  border:1px solid var(--border);border-radius:20px;overflow:hidden;
  background:rgba(5,5,15,.6);backdrop-filter:blur(10px);
  margin:40px 0;
}
.stat-block{
  flex:1;min-width:150px;padding:24px 20px;text-align:center;
  border-right:1px solid var(--border);
  transition:background .3s;
  position:relative;overflow:hidden;
}
.stat-block:last-child{border-right:none}
.stat-block::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(168,85,247,.06),transparent);
  opacity:0;transition:opacity .3s;
}
.stat-block:hover::before{opacity:1}
.stat-value{
  display:block;
  font-family:'Orbitron',sans-serif;
  font-size:2.2rem;font-weight:900;
  background:linear-gradient(135deg,var(--cyan),var(--primary));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
  line-height:1.1;
}
.stat-label{
  display:block;color:var(--muted);font-size:.82rem;
  font-weight:700;margin-top:4px;text-transform:uppercase;letter-spacing:.07em;
}

/* ── GAMER FEATURE CARDS ─────────────────────────────── */
.gamer-features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.gamer-feat{
  border:1px solid var(--border);border-radius:18px;
  padding:26px 20px;text-align:center;
  background:rgba(255,255,255,.03);backdrop-filter:blur(8px);
  transition:transform .25s,border-color .25s,box-shadow .25s;
  position:relative;overflow:hidden;
}
.gamer-feat::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(168,85,247,.07),rgba(0,229,255,.04));
  opacity:0;transition:opacity .3s;
}
.gamer-feat:hover{transform:translateY(-6px);border-color:var(--border-bright);box-shadow:var(--glow-primary)}
.gamer-feat:hover::before{opacity:1}
.feat-emoji{font-size:2.4rem;display:block;margin-bottom:12px;line-height:1}
.feat-title{font-family:'Orbitron',sans-serif;font-size:.95rem;font-weight:800;margin:0 0 6px;color:var(--text)}
.feat-desc{color:var(--muted);font-size:.88rem;line-height:1.5;margin:0}

/* ── LEVEL PROGRESSION ─────────────────────────────────── */
.level-track{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin-top:42px;position:relative;
}
.level-track::before{
  content:'';position:absolute;
  left:calc(12.5%);right:calc(12.5%);top:30px;
  height:3px;border-radius:99px;
  background:linear-gradient(90deg,var(--hot),var(--primary),var(--cyan),var(--neon-green));
  box-shadow:0 0 16px rgba(0,229,255,.3);
  z-index:0;
}
.level-step{
  position:relative;z-index:1;text-align:center;
  border:1px solid var(--border);border-radius:20px;
  background:rgba(10,5,25,.8);padding:20px 14px;
  backdrop-filter:blur(8px);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.level-step:hover{transform:translateY(-6px);border-color:var(--border-bright);box-shadow:var(--glow-hot)}
.level-badge{
  width:60px;height:60px;border-radius:50%;margin:0 auto 16px;
  display:grid;place-items:center;
  font-size:1.5rem;
  border:3px solid;
  position:relative;
}
.level-step:nth-child(1) .level-badge{border-color:rgba(105,255,71,.5);background:rgba(105,255,71,.1);box-shadow:0 0 16px rgba(105,255,71,.3)}
.level-step:nth-child(2) .level-badge{border-color:rgba(0,229,255,.5);background:rgba(0,229,255,.1);box-shadow:0 0 16px rgba(0,229,255,.3)}
.level-step:nth-child(3) .level-badge{border-color:rgba(168,85,247,.5);background:rgba(168,85,247,.1);box-shadow:0 0 16px rgba(168,85,247,.3)}
.level-step:nth-child(4) .level-badge{border-color:rgba(255,214,0,.5);background:rgba(255,214,0,.1);box-shadow:0 0 16px rgba(255,214,0,.3)}
.level-rank{font-family:'Orbitron',sans-serif;font-size:.95rem;font-weight:800;margin:0 0 5px;color:var(--text)}
.level-desc{color:var(--muted);font-size:.83rem;margin:0;line-height:1.5}

/* ── GAME CARDS EXTRA ─────────────────────────────────── */
.game-card-glow-orbloom:hover{
  box-shadow:0 0 40px rgba(255,214,0,.3),0 20px 60px rgba(0,0,0,.4)!important;
}
.game-card-glow-prism:hover{
  box-shadow:0 0 40px rgba(0,229,255,.3),0 20px 60px rgba(0,0,0,.4)!important;
}

/* Rating stars */
.game-rating{display:flex;align-items:center;gap:6px;margin:8px 0}
.stars{color:var(--gold);font-size:1rem;letter-spacing:.05em;text-shadow:0 0 8px rgba(255,214,0,.5)}
.rating-count{color:var(--muted);font-size:.82rem;font-weight:700}

/* ── WHY PLAY FEATURES ─────────────────────────────────── */
.why-card{
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:20px;padding:28px 22px;
  transition:transform .25s,border-color .25s,box-shadow .25s;
  position:relative;overflow:hidden;
}
.why-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.why-card:hover{transform:translateY(-5px);border-color:var(--border-bright)}
.why-card:hover::after{transform:scaleX(1)}
.why-icon{font-size:2rem;margin-bottom:14px;display:block}
.why-card h3{font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:800;margin:0 0 8px}
.why-card p{color:var(--muted);font-size:.9rem;margin:0}

/* ── TRUST STRIP GAMER STYLE ─────────────────────────── */
.trust-strip-gamer{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;margin-top:36px;
}
.trust-strip-gamer div{
  background:rgba(5,5,15,.9);padding:20px 12px;text-align:center;
  font-size:.85rem;font-weight:800;transition:background .2s;
  cursor:default;
}
.trust-strip-gamer div:hover{background:rgba(168,85,247,.1)}

/* ── CTA SECTION EXTRA ─────────────────────────────────── */
.cta-emoji{font-size:3.5rem;display:block;margin-bottom:12px;animation:bounce-cta 1.5s ease-in-out infinite}
@keyframes bounce-cta{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-12px) rotate(5deg)}}

/* ── HERO PUZZLE OVERRIDES ─────────────────────────────── */
.hero-puzzle{position:relative;z-index:2;display:flex;min-height:100%;flex-direction:column;gap:20px}
.hero-art .float-chip{pointer-events:none}
.hero-puzzle-head{display:flex;min-height:48px;align-items:center;justify-content:space-between;gap:12px}
.puzzle-status{max-width:220px;color:var(--muted);font-size:.88rem;font-weight:700}
.puzzle-reset{
  min-height:40px;border:1px solid var(--border-bright);border-radius:999px;
  background:rgba(168,85,247,.1);color:var(--text);padding:7px 13px;cursor:pointer;
  font-weight:800;
}
.orb-tray{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  justify-items:center;padding:12px;
  border:1px solid var(--border-bright);border-radius:22px;
  background:rgba(5,5,20,.6);backdrop-filter:blur(10px);
}
.puzzle-orb{
  --orb:var(--primary);
  width:56px;height:56px;border:0;border-radius:50%;
  background:radial-gradient(circle at 32% 25%,#fff 0 7%,var(--orb) 10% 62%,color-mix(in srgb,var(--orb) 64%,#050510));
  box-shadow:inset 0 4px 8px rgba(255,255,255,.35),0 0 18px color-mix(in srgb,var(--orb) 40%,transparent);
  cursor:pointer;transition:transform .22s,box-shadow .22s,opacity .22s;
  position:relative;color:#fff;
}
.puzzle-orb[data-color="teal"]{--orb:var(--cyan)}
.puzzle-orb[data-color="amber"]{--orb:var(--gold)}
.puzzle-orb:hover{transform:translateY(-5px) scale(1.06)}
.puzzle-orb.is-selected{
  transform:translateY(-7px) scale(1.1);
  box-shadow:0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--orb) 65%,transparent),0 0 30px color-mix(in srgb,var(--orb) 50%,transparent);
}
.puzzle-orb.is-placed{pointer-events:none;transform:translateY(55px) scale(.2);opacity:0}
.puzzle-orb:after{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.78rem;font-weight:950;text-shadow:0 2px 5px rgba(0,0,0,.55)}
.puzzle-orb[data-color="violet"]:after{content:"V"}
.puzzle-orb[data-color="teal"]:after{content:"T"}
.puzzle-orb[data-color="amber"]:after{content:"A"}
.puzzle-gates{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto}
.puzzle-gate{
  --gate:var(--primary);
  min-height:78px;
  border:1px solid color-mix(in srgb,var(--gate) 50%,var(--border));
  border-radius:16px;
  background:color-mix(in srgb,var(--gate) 10%,rgba(5,5,20,.88));
  color:var(--text);padding:10px 6px;cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
.puzzle-gate[data-color="teal"]{--gate:var(--cyan)}
.puzzle-gate[data-color="amber"]{--gate:var(--gold)}
.puzzle-gate span,.puzzle-gate b{display:block}
.puzzle-gate span{font-size:.74rem;color:var(--muted)}
.puzzle-gate b{font-size:1.05rem}
.puzzle-gate.is-ready{
  box-shadow:0 0 0 2px color-mix(in srgb,var(--gate) 40%,transparent),0 0 16px color-mix(in srgb,var(--gate) 30%,transparent);
  transform:translateY(-2px);
}
.puzzle-gate.is-wrong{animation:gate-shake .32s ease}
.phone-board.is-solved{
  border-color:rgba(105,255,71,.6);
  box-shadow:0 0 40px rgba(105,255,71,.3),0 0 80px rgba(105,255,71,.1);
}
.phone-board.is-solved:after{
  content:"🎉 SOLVED!";
  position:absolute;inset:auto 22px 22px;z-index:5;
  border:1px solid rgba(105,255,71,.5);border-radius:14px;
  background:rgba(5,20,10,.95);color:var(--neon-green);
  padding:11px;text-align:center;font-weight:900;letter-spacing:.06em;
  font-family:'Orbitron',sans-serif;font-size:.85rem;
  text-shadow:0 0 12px rgba(105,255,71,.6);
}
.puzzle-burst{pointer-events:none;position:absolute;inset:50% auto auto 50%;width:8px;height:8px}
.phone-board.is-solved .puzzle-burst:before,.phone-board.is-solved .puzzle-burst:after{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--gold);
  box-shadow:58px -72px 0 var(--cyan),-68px -52px 0 var(--primary),84px 12px 0 var(--gold),-86px 24px 0 var(--neon-green),42px 80px 0 var(--hot),-44px 73px 0 var(--cyan);
  animation:burst-pop .7s ease-out both;
}
.phone-board.is-solved .puzzle-burst:after{transform:rotate(28deg);animation-delay:.08s}

/* ── FLOATING CONFETTI ─────────────────────────────────── */
.confetti-piece{
  position:absolute;pointer-events:none;
  width:8px;height:8px;border-radius:2px;
  animation:confetti-fall 1.2s ease-out forwards;
}
@keyframes confetti-fall{
  0%{transform:translateY(0) rotate(0) scale(1);opacity:1}
  100%{transform:translateY(80px) rotate(360deg) scale(.3);opacity:0}
}

/* ── SCROLL REVEAL ─────────────────────────────────── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* ── JOURNEY / BLOCKED / DELIGHT COMPAT ─────────────────── */
.journey-section{
  position:relative;overflow:hidden;
  background:radial-gradient(circle at 10% 20%,rgba(168,85,247,.1),transparent 30%),var(--bg2);
}
.journey-track.is-enhanced .journey-step{border-color:var(--border);opacity:.5;transform:translateY(10px)}
.journey-step.is-lit,.journey-track.is-enhanced .journey-step.is-lit{opacity:1;transform:none;border-color:rgba(0,229,255,.35)}
@media(max-width:980px){
  .journey-track{grid-template-columns:repeat(2,1fr)}
  .level-track{grid-template-columns:repeat(2,1fr)}
  .level-track::before{display:none}
  .gamer-features{grid-template-columns:repeat(2,1fr)}
  .trust-strip-gamer{grid-template-columns:repeat(2,1fr)}
  .journey-line{display:none}
  .stats-strip{flex-wrap:wrap}
  .stat-block{min-width:45%;flex:none}
}
@media(max-width:600px){
  .phone-board{transform:none}
  .hero-puzzle{gap:14px}
  .puzzle-orb{width:46px;height:46px}
  .puzzle-gates{gap:7px}
  .puzzle-gate{min-height:68px}
  .journey-track{display:grid;grid-template-columns:1fr;padding-left:28px}
  .journey-line{display:block;left:9px;right:auto;top:12px;bottom:12px;width:3px;height:auto}
  .journey-line:after{transform:scaleY(var(--journey-progress));transform-origin:top}
  .journey-node{position:absolute;left:-50px;top:16px;width:42px;height:42px;border-width:4px;margin:0}
  .journey-step{padding:20px 18px}
  .game-card[data-game]{transform:none!important}
  .gamer-features{grid-template-columns:1fr 1fr}
  .level-track{grid-template-columns:1fr 1fr}
  .hero-badges{gap:7px}
  .hero-badge{font-size:.7rem;padding:5px 10px}
  .stat-value{font-size:1.7rem}
  .stats-strip{flex-direction:column}
  .stat-block{border-right:none;border-bottom:1px solid var(--border)}
  .stat-block:last-child{border-bottom:none}
  .trust-strip-gamer{grid-template-columns:1fr}
  body::after{display:none}/* remove scanlines on mobile for perf */
}

/* ── KEYFRAMES ─────────────────────────────────── */
@keyframes gate-shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
@keyframes burst-pop{0%{opacity:0;transform:scale(.2)}45%{opacity:1}100%{opacity:0;transform:scale(1.8)}}
@keyframes badge-pulse{0%{box-shadow:0 0 10px var(--pulse-color,rgba(168,85,247,.3))}100%{box-shadow:0 0 20px var(--pulse-color,rgba(168,85,247,.5)),0 0 40px var(--pulse-color,rgba(168,85,247,.2))}}
@keyframes glitch-flicker{0%,94%,96%,98%,100%{opacity:1}95%,97%,99%{opacity:.9}}
@keyframes glitch-shift-a{0%,94%,100%{clip-path:none;transform:none}95%{clip-path:polygon(0 20%,100% 20%,100% 38%,0 38%);transform:translate(-3px,1px)}97%{clip-path:polygon(0 55%,100% 55%,100% 70%,0 70%);transform:translate(2px,-1px)}}
@keyframes glitch-shift-b{0%,93%,100%{clip-path:none;transform:none}94%{clip-path:polygon(0 62%,100% 62%,100% 78%,0 78%);transform:translate(3px,2px)}96%{clip-path:polygon(0 30%,100% 30%,100% 48%,0 48%);transform:translate(-2px,0)}}
@keyframes orb-drift{to{transform:rotate(7deg) translateY(-7px)}}
@keyframes arrow-drift{to{transform:rotate(-14deg) translate(8px,-5px)}}

/* ── MOTION-PREVIEW COMPAT ─────────────────────────────── */
.motion-preview{pointer-events:none;position:absolute;z-index:4;inset:0;display:grid;place-items:center;overflow:hidden;background:rgba(4,4,16,.94);opacity:0;transform:scale(1.025);transition:opacity .22s,transform .32s}
.game-card:hover .motion-preview,.game-card:focus-within .motion-preview,.game-card.is-preview-visible .motion-preview{opacity:1;transform:none}
.motion-preview-label{position:absolute;left:12px;top:12px;z-index:4;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(5,5,20,.76);color:#fff;padding:5px 8px;font-size:.66rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.orb-motion{background:radial-gradient(circle at 50% 20%,rgba(255,214,0,.1),transparent 35%),#060616}
.orb-motion-board{position:relative;display:grid;grid-template-columns:repeat(3,44px);gap:14px;align-items:end;height:128px}
.mini-tube{position:relative;display:flex;height:116px;flex-direction:column-reverse;align-items:center;gap:4px;border:2px solid rgba(168,85,247,.25);border-top:0;border-radius:0 0 18px 18px;padding:7px}
.mini-orb{display:block;width:27px;height:27px;flex:0 0 auto;border-radius:50%;background:var(--mini-orb,var(--primary));box-shadow:inset 0 3px 5px rgba(255,255,255,.34),0 0 10px color-mix(in srgb,var(--mini-orb,var(--primary)) 40%,transparent)}
.mini-orb.teal{--mini-orb:var(--cyan)}.mini-orb.amber{--mini-orb:var(--gold)}.mini-orb.violet{--mini-orb:var(--primary)}
.orb-motion-board .mini-tube:first-child .mini-orb:first-child{animation:orb-preview 2.4s ease-in-out infinite}
.prism-motion{background:radial-gradient(circle at 75% 20%,rgba(0,229,255,.1),transparent 35%),#060619}
.prism-motion-board{position:relative;width:190px;height:125px;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:25px 25px}
.mini-path{position:absolute;height:7px;border-radius:99px;background:var(--path-color,var(--cyan));box-shadow:0 0 14px color-mix(in srgb,var(--path-color,var(--cyan)) 40%,transparent)}
.mini-path.path-a{--path-color:var(--cyan);left:10px;top:25px;width:112px}.mini-path.path-b{--path-color:var(--primary);right:12px;top:72px;width:95px;transform:rotate(90deg)}.mini-path.path-c{--path-color:var(--gold);left:40px;bottom:12px;width:132px}
.mini-arrow{position:absolute;z-index:2;left:8px;top:6px;color:#fff;font-size:1.55rem;font-style:normal;text-shadow:0 0 12px var(--cyan);animation:prism-preview 2.2s ease-in-out infinite}
.motion-preview *{animation-play-state:paused!important}
.game-card:hover .motion-preview *,.game-card:focus-within .motion-preview *,.game-card.is-preview-visible .motion-preview *{animation-play-state:running!important}
.game-item[hidden] .motion-preview *{animation-play-state:paused!important}

/* ── REDUCED MOTION ─────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .puzzle-orb,.journey-step,.journey-node,.game-card[data-game],.reveal{transition:none}
  .puzzle-gate.is-wrong,.phone-board.is-solved .puzzle-burst:before,.phone-board.is-solved .puzzle-burst:after,.game-card[data-game]:hover .game-visual:after{animation:none!important}
  .journey-track.is-enhanced{--journey-progress:1}
  .journey-step{opacity:1;transform:none}
  .reveal{opacity:1;transform:none}
  .hero-badge,.button.pulse-glow,.cta-emoji,.glitch-text::before,.glitch-text::after{animation:none!important}
  body::after{display:none}
}