/* Play Cloud — design tokens */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --c1:#7c3aed;--c2:#06b6d4;--c3:#f59e0b;--c4:#ec4899;--c5:#10b981;
  --glow-purple:rgba(124,58,237,.6);--glow-cyan:rgba(6,182,212,.6);
  --glow-gold:rgba(245,158,11,.6);--glow-pink:rgba(236,72,153,.6);
  --glow-green:rgba(16,185,129,.6);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.25,.46,.45,.94);
}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Nunito',sans-serif;background:#020510}
canvas#cosmos{position:fixed;inset:0;z-index:0;display:block}
/* Screens + top bar */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.screen.gone{opacity:0;pointer-events:none;transform:scale(1.05)}
.screen.slide-left{transform:translateX(-100%)}

.top-bar{
  display:flex;align-items:center;gap:12px;
  padding:clamp(12px,3vw,20px) clamp(16px,4vw,28px);
  padding-top:max(14px,calc(env(safe-area-inset-top) + 14px));
  flex-shrink:0;
}
.back-btn{
  width:clamp(40px,9vw,52px);height:clamp(40px,9vw,52px);border-radius:50%;
  border:1.5px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:clamp(18px,4vw,22px);
  transition:all .3s var(--ease-spring);color:white;flex-shrink:0;
}
.back-btn:hover{transform:scale(1.12);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.bar-title{
  font-family:'Baloo 2',cursive;font-size:clamp(15px,4vw,22px);font-weight:700;color:#fff;flex:1;
  text-shadow:0 0 20px rgba(255,255,255,.4)
}
.stella-float{
  width:clamp(40px,9vw,54px);height:clamp(40px,9vw,54px);cursor:pointer;flex-shrink:0;
  animation:stellaIdle 3s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(245,158,11,.8))
}
@keyframes stellaIdle{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(6deg)}}
/* ═══ INTRO SPLASH — CINEMATIC REDESIGN ═══ */
#intro{
  z-index:100;align-items:center;justify-content:center;overflow:hidden;
}

/* Layered aurora pulse behind everything */
.intro-aurora-layer{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.intro-aurora-band{
  position:absolute;width:180%;height:40%;border-radius:50%;
  filter:blur(60px);opacity:0;
  animation:auroraPulse var(--dur,8s) var(--del,0s) ease-in-out infinite alternate;
}
.iab-1{background:radial-gradient(ellipse,rgba(124,58,237,.35),transparent 70%);top:-5%;left:-40%;--dur:9s;--del:0s}
.iab-2{background:radial-gradient(ellipse,rgba(6,182,212,.25),transparent 70%);top:15%;left:20%;--dur:11s;--del:2s}
.iab-3{background:radial-gradient(ellipse,rgba(16,185,129,.2),transparent 70%);bottom:-5%;right:-30%;--dur:13s;--del:4s}
@keyframes auroraPulse{0%{opacity:0;transform:scaleX(.85) translateY(10px)}100%{opacity:1;transform:scaleX(1) translateY(0)}}

/* Orbiting ring system */
.intro-portal{
  position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(540px,85vw);height:min(540px,85vw);
  pointer-events:none;z-index:0;
}
.portal-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid transparent;
  animation:portalSpin var(--spd,20s) linear infinite;
}
.pr-1{
  inset:8%;
  border-image:conic-gradient(rgba(124,58,237,.6) 0deg,transparent 80deg,rgba(6,182,212,.4) 180deg,transparent 260deg,rgba(124,58,237,.6) 360deg) 1;
  border-radius:50%!important;
  border:1px solid rgba(124,58,237,.3);
  box-shadow:0 0 20px rgba(124,58,237,.12) inset, 0 0 20px rgba(124,58,237,.12);
  --spd:18s;
}
.pr-2{
  inset:3%;
  border:1px solid rgba(6,182,212,.15);
  box-shadow:0 0 30px rgba(6,182,212,.07) inset;
  --spd:28s;animation-direction:reverse;
}
.pr-3{
  inset:20%;
  border:1px solid rgba(236,72,153,.12);
  --spd:22s;
}
@keyframes portalSpin{to{transform:rotate(360deg)}}

/* Zone orbs orbiting the logo */
.zone-orb{
  position:absolute;
  width:clamp(52px,9vw,72px);height:clamp(52px,9vw,72px);
  border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  font-family:'Orbitron',monospace;font-size:clamp(6px,1.2vw,8px);
  font-weight:700;letter-spacing:.5px;
  cursor:pointer;
  transition:transform .3s var(--ease-spring),box-shadow .3s;
  animation:orbFloat var(--of,4s) var(--od,0s) ease-in-out infinite alternate, orbReveal .8s var(--or,0s) var(--ease-spring) both;
  top:50%;left:50%;
  text-align:center;line-height:1.2;
}
.zone-orb:hover{transform:translate(-50%,-50%) scale(1.18)!important;z-index:5}
@keyframes orbFloat{0%{margin-top:-4px}100%{margin-top:4px}}
@keyframes orbReveal{from{opacity:0;transform:translate(-50%,-50%) scale(0)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.zo-emoji{font-size:clamp(18px,4vw,26px);line-height:1}
.zo-label{color:rgba(255,255,255,.75);font-size:clamp(5.5px,1vw,7.5px)}

/* Position orbs in a cross/diamond at the cardinal points */
.zo-1{--of:4.2s;--od:0s;--or:.9s;
  background:radial-gradient(circle at 35% 35%,rgba(16,185,129,.4),rgba(5,46,22,.7));
  box-shadow:0 0 22px rgba(16,185,129,.4),0 0 6px rgba(16,185,129,.2) inset;
  border:1.5px solid rgba(16,185,129,.4);
  top:calc(50% - min(210px,34vw));left:50%;
  transform:translate(-50%,-50%);
}
.zo-2{--of:5.1s;--od:.8s;--or:1.1s;
  background:radial-gradient(circle at 35% 35%,rgba(6,182,212,.4),rgba(12,74,92,.7));
  box-shadow:0 0 22px rgba(6,182,212,.4),0 0 6px rgba(6,182,212,.2) inset;
  border:1.5px solid rgba(6,182,212,.4);
  top:50%;left:calc(50% + min(210px,34vw));
  transform:translate(-50%,-50%);
}
.zo-3{--of:4.7s;--od:1.4s;--or:1.3s;
  background:radial-gradient(circle at 35% 35%,rgba(236,72,153,.4),rgba(131,24,67,.7));
  box-shadow:0 0 22px rgba(236,72,153,.4),0 0 6px rgba(236,72,153,.2) inset;
  border:1.5px solid rgba(236,72,153,.4);
  top:calc(50% + min(210px,34vw));left:50%;
  transform:translate(-50%,-50%);
}
.zo-4{--of:3.9s;--od:2s;--or:1.5s;
  background:radial-gradient(circle at 35% 35%,rgba(245,158,11,.4),rgba(120,53,15,.7));
  box-shadow:0 0 22px rgba(245,158,11,.4),0 0 6px rgba(245,158,11,.2) inset;
  border:1.5px solid rgba(245,158,11,.4);
  top:50%;left:calc(50% - min(210px,34vw));
  transform:translate(-50%,-50%);
}

/* Connector lines from orbs to center */
.intro-connector{
  position:absolute;top:50%;left:50%;
  pointer-events:none;z-index:0;
  width:min(540px,85vw);height:min(540px,85vw);
  margin-left:calc(min(540px,85vw) / -2);
  margin-top:calc(min(540px,85vw) / -2);
}

/* Central logo container */
.intro-center{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  animation:centerReveal 1.4s .2s var(--ease-spring) both;
}
@keyframes centerReveal{from{transform:scale(.5);opacity:0;filter:blur(12px)}to{transform:scale(1);opacity:1;filter:blur(0)}}

.intro-wordmark{
  font-family:'Baloo 2',cursive;font-size:clamp(42px,9vw,88px);font-weight:800;
  background:linear-gradient(135deg,#fff 0%,#e2d9ff 25%,#a78bfa 55%,#06b6d4 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;letter-spacing:-2px;
  filter:drop-shadow(0 0 50px rgba(124,58,237,.7)) drop-shadow(0 0 20px rgba(6,182,212,.4));
  animation:wordmarkPulse 4s ease-in-out infinite alternate;
}
@keyframes wordmarkPulse{
  0%{filter:drop-shadow(0 0 40px rgba(124,58,237,.6)) drop-shadow(0 0 16px rgba(6,182,212,.3))}
  100%{filter:drop-shadow(0 0 70px rgba(124,58,237,.9)) drop-shadow(0 0 30px rgba(6,182,212,.6))}
}

.intro-sub{
  font-family:'Nunito',sans-serif;font-size:clamp(11px,2vw,15px);
  color:rgba(255,255,255,.45);letter-spacing:5px;text-transform:uppercase;
  margin-top:6px;animation:introIn 1.2s .5s var(--ease-spring) both;
}
.intro-tagline{
  font-family:'Baloo 2',cursive;font-size:clamp(13px,2.5vw,18px);
  color:rgba(255,255,255,.65);margin-top:14px;
  animation:introIn 1.2s .65s var(--ease-spring) both;
}

/* Enter button — cosmic portal style */
.intro-enter{
  margin-top:clamp(20px,3.5vh,32px);
  position:relative;
  background:transparent;border:none;cursor:pointer;
  animation:introIn 1.2s .8s var(--ease-spring) both;
  padding:12px;
}
.enter-inner{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,rgba(124,58,237,.9),rgba(6,182,212,.9));
  border-radius:60px;
  padding:clamp(13px,2.5vw,18px) clamp(32px,6vw,56px);
  font-family:'Baloo 2',cursive;font-size:clamp(17px,3.5vw,22px);font-weight:700;
  color:#fff;position:relative;z-index:1;
  box-shadow:0 8px 40px rgba(124,58,237,.5),0 0 80px rgba(6,182,212,.15);
  transition:transform .3s var(--ease-spring),box-shadow .3s;
}
.enter-inner::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 55%);
  pointer-events:none;
}
.enter-orbit{
  position:absolute;inset:-8px;border-radius:60px;
  border:none;
  animation:enterOrbit 3s linear infinite;
}
.enter-orbit::after{
  content:'';position:absolute;width:8px;height:8px;
  background:#fff;border-radius:50%;top:-4px;left:50%;
  box-shadow:0 0 10px #7c3aed,0 0 20px rgba(124,58,237,.6);
}
@keyframes enterOrbit{to{transform:rotate(360deg)}}
.intro-enter:hover .enter-inner{transform:scale(1.06) translateY(-3px);box-shadow:0 16px 60px rgba(124,58,237,.7),0 0 120px rgba(6,182,212,.4)}
.intro-enter:active .enter-inner{transform:scale(.96)}

/* Time badge */
.time-badge{
  position:absolute;top:clamp(18px,3.5vw,28px);right:clamp(18px,3.5vw,28px);
  background:rgba(255,255,255,.06);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12);border-radius:40px;
  padding:7px 16px;font-family:'Orbitron',monospace;font-size:clamp(9px,1.8vw,12px);
  color:rgba(255,255,255,.6);animation:introIn 1.2s .9s var(--ease-spring) both;
  z-index:5;
}

/* Floating stardust particles */
.intro-dust{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.i-dust{
  position:absolute;border-radius:50%;
  animation:dustFloat var(--dd,12s) var(--do,0s) ease-in-out infinite alternate;
}
@keyframes dustFloat{
  0%{transform:translate(0,0) scale(1);opacity:var(--da,.4)}
  50%{transform:translate(var(--dx,10px),var(--dy,-15px)) scale(1.2);opacity:calc(var(--da,.4) + .2)}
  100%{transform:translate(var(--dx2,-8px),var(--dy2,8px)) scale(.8);opacity:calc(var(--da,.4) - .1)}
}

@keyframes introIn{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
/* ═══════════════════════════════════════════
   HUB — UNIFIED PLANET CAROUSEL WORLD
═══════════════════════════════════════════ */
#hub{
  justify-content:flex-start;overflow:hidden;
}

/* top bar floats above everything */
#hub .top-bar{
  position:absolute;top:0;left:0;right:0;z-index:30;
  padding-top:max(14px,calc(env(safe-area-inset-top)+14px));
  background:linear-gradient(to bottom,rgba(1,2,12,.8) 0%,rgba(1,2,12,.3) 70%,transparent 100%);
}

/* ── SCROLL SNAP CONTAINER ── */
.hub-carousel{
  position:absolute;inset:0;
  overflow:hidden;
  scrollbar-width:none;
}

/* Each zone takes the full viewport */
.hub-slide{
  height:100vh;height:100dvh;
  min-height:-webkit-fill-available;
  width:100%;
  flex-shrink:0;
  position:relative;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  overflow:hidden;
  cursor:pointer;
}

/* per-zone background atmosphere */
.hub-slide.z1{background:radial-gradient(ellipse at 50% 45%,rgba(16,185,129,.18) 0%,rgba(2,4,16,.0) 65%)}
.hub-slide.z2{background:radial-gradient(ellipse at 50% 45%,rgba(6,182,212,.18) 0%,rgba(2,4,16,.0) 65%)}
.hub-slide.z3{background:radial-gradient(ellipse at 50% 45%,rgba(236,72,153,.18) 0%,rgba(2,4,16,.0) 65%)}
.hub-slide.z4{background:radial-gradient(ellipse at 50% 45%,rgba(245,158,11,.18) 0%,rgba(2,4,16,.0) 65%)}

/* nebula bloom behind planet */
.hs-nebula{
  position:absolute;
  width:min(460px,110vw);height:min(460px,110vw);
  border-radius:50%;filter:blur(70px);
  top:50%;left:50%;transform:translate(-50%,-55%);
  pointer-events:none;opacity:.22;
  z-index:1;
  animation:hsNeb var(--hn,9s) var(--hd,0s) ease-in-out infinite alternate;
}
@keyframes hsNeb{0%{transform:translate(-50%,-55%) scale(.88)}100%{transform:translate(-50%,-55%) scale(1.08)}}
.z1 .hs-nebula{background:radial-gradient(circle,#10b981 0%,#064e3b 50%,transparent 75%)}
.z2 .hs-nebula{background:radial-gradient(circle,#06b6d4 0%,#164e63 50%,transparent 75%)}
.z3 .hs-nebula{background:radial-gradient(circle,#ec4899 0%,#831843 50%,transparent 75%)}
.z4 .hs-nebula{background:radial-gradient(circle,#f59e0b 0%,#78350f 50%,transparent 75%)}

/* drifting mini star field */
.hs-stars{
  position:absolute;inset:0;pointer-events:none;
  z-index:2;
  background-image:
    radial-gradient(1.3px 1.3px at 8% 14%,rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 82% 9%,rgba(255,255,255,.4) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 91% 58%,rgba(255,255,255,.55) 0%,transparent 100%),
    radial-gradient(1px 1px at 19% 76%,rgba(255,255,255,.35) 0%,transparent 100%),
    radial-gradient(1.2px 1.2px at 47% 88%,rgba(255,255,255,.4) 0%,transparent 100%),
    radial-gradient(1px 1px at 36% 32%,rgba(255,255,255,.3) 0%,transparent 100%),
    radial-gradient(1.4px 1.4px at 65% 65%,rgba(255,255,255,.45) 0%,transparent 100%),
    radial-gradient(1px 1px at 5% 50%,rgba(255,255,255,.3) 0%,transparent 100%),
    radial-gradient(1.1px 1.1px at 75% 40%,rgba(255,255,255,.35) 0%,transparent 100%),
    radial-gradient(1px 1px at 55% 20%,rgba(255,255,255,.25) 0%,transparent 100%);
  animation:hsDrift var(--hs,100s) linear infinite;
  opacity:.65;
}
@keyframes hsDrift{to{background-position:180px 160px}}

/* ── PLANET STAGE ── */
.hs-planet-stage{
  position:relative;
  width:min(220px,52vw);height:min(220px,52vw);
  flex-shrink:0;
  margin-bottom:clamp(28px,5vh,44px);
  animation:hsPlanetBob var(--pb,5s) ease-in-out var(--pd,0s) infinite;
  transition:transform .4s var(--ease-spring);
  z-index:5;
  isolation:isolate;
}
.hub-slide:active .hs-planet-stage{transform:scale(.93)}
@media(min-height:700px){
  .hs-planet-stage{width:min(260px,55vw);height:min(260px,55vw);}
}
@keyframes hsPlanetBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* planet glow halo */
.hs-planet-stage::before{
  content:'';position:absolute;inset:-35%;border-radius:50%;
  opacity:.4;filter:blur(22px);transition:opacity .5s;
  pointer-events:none;z-index:1;
}
.hub-slide:hover .hs-planet-stage::before{opacity:.65}
.z1 .hs-planet-stage::before{background:radial-gradient(#10b981,transparent 68%)}
.z2 .hs-planet-stage::before{background:radial-gradient(#06b6d4,transparent 68%)}
.z3 .hs-planet-stage::before{background:radial-gradient(#ec4899,transparent 68%)}
.z4 .hs-planet-stage::before{background:radial-gradient(#f59e0b,transparent 68%)}

/* planet body — reusing existing planet classes */
.hs-planet-stage .zone-planet{
  width:100%;height:100%;
  position:relative;
  z-index:2;
  display:block;
}

/* ring on z2 and z4 */
.hs-ring-wrap{
  position:absolute;
  width:155%;height:35%;
  top:50%;left:-27.5%;
  transform:translateY(-50%) rotateX(72deg);
  pointer-events:none;border-radius:50%;
  border:3px solid transparent;z-index:6;
}
.z2 .hs-ring-wrap{border-color:rgba(6,182,212,.55);box-shadow:0 0 12px rgba(6,182,212,.25)}
.z4 .hs-ring-wrap{border-color:rgba(245,158,11,.5);box-shadow:0 0 12px rgba(245,158,11,.22)}

/* moon */
.hs-moon{
  position:absolute;inset:0;border-radius:50%;
  animation:moonOrbit var(--mo,6s) linear infinite;
  pointer-events:none;z-index:7;
}
.hs-moon::after{
  content:'';position:absolute;
  width:clamp(10px,2.5vw,15px);height:clamp(10px,2.5vw,15px);
  border-radius:50%;top:-6px;left:50%;transform:translateX(-50%);
}
.z1 .hs-moon::after{background:#6ee7b7;box-shadow:0 0 10px #10b981,0 0 20px rgba(16,185,129,.5)}
.z2 .hs-moon::after{background:#a5f3fc;box-shadow:0 0 10px #06b6d4,0 0 20px rgba(6,182,212,.5)}
.z3 .hs-moon::after{background:#fbcfe8;box-shadow:0 0 10px #ec4899,0 0 20px rgba(236,72,153,.5)}
.z4 .hs-moon::after{background:#fde68a;box-shadow:0 0 10px #f59e0b,0 0 20px rgba(245,158,11,.5)}

/* ── INFO CARD ── */
.hs-info{
  position:relative;z-index:5;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(6px,1.2vh,10px);
  text-align:center;
  padding:clamp(16px,4vw,28px) clamp(20px,6vw,44px);
  background:rgba(3,4,18,.45);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  max-width:min(400px,86vw);
  box-shadow:0 8px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
  transition:background .3s,border-color .3s,transform .3s var(--ease-spring);
}
.hub-slide:hover .hs-info{background:rgba(3,4,18,.6);transform:translateY(-4px)}
.z1 .hs-info{border-color:rgba(16,185,129,.22)}
.z2 .hs-info{border-color:rgba(6,182,212,.22)}
.z3 .hs-info{border-color:rgba(236,72,153,.22)}
.z4 .hs-info{border-color:rgba(245,158,11,.22)}

.hs-name{
  font-family:'Baloo 2',cursive;
  font-size:clamp(18px,4.5vw,26px);font-weight:800;
  color:#fff;line-height:1;
}
.z1 .hs-name{color:#6ee7b7;text-shadow:0 0 24px rgba(16,185,129,.7)}
.z2 .hs-name{color:#a5f3fc;text-shadow:0 0 24px rgba(6,182,212,.7)}
.z3 .hs-name{color:#fbcfe8;text-shadow:0 0 24px rgba(236,72,153,.7)}
.z4 .hs-name{color:#fde68a;text-shadow:0 0 24px rgba(245,158,11,.7)}

.hs-desc{
  font-size:clamp(11px,2.4vw,14px);color:rgba(255,255,255,.6);line-height:1.45;
}
.hs-badge{
  font-family:'Orbitron',monospace;font-size:clamp(7px,1.5vw,9px);
  padding:4px 14px;border-radius:20px;letter-spacing:1.5px;
  backdrop-filter:blur(6px);
}
.z1 .hs-badge{background:rgba(16,185,129,.18);color:#6ee7b7;border:1px solid rgba(16,185,129,.35)}
.z2 .hs-badge{background:rgba(6,182,212,.18);color:#a5f3fc;border:1px solid rgba(6,182,212,.35)}
.z3 .hs-badge{background:rgba(236,72,153,.18);color:#fbcfe8;border:1px solid rgba(236,72,153,.35)}
.z4 .hs-badge{background:rgba(245,158,11,.18);color:#fde68a;border:1px solid rgba(245,158,11,.35)}

.hs-enter-btn{
  display:flex;align-items:center;gap:8px;
  padding:clamp(10px,2.2vh,13px) clamp(22px,6vw,36px);
  border-radius:50px;border:none;cursor:pointer;
  font-family:'Baloo 2',cursive;font-size:clamp(13px,3vw,16px);font-weight:700;
  color:#fff;transition:transform .3s var(--ease-spring),box-shadow .3s;
  position:relative;overflow:hidden;
}
.hs-enter-btn::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 55%);
  pointer-events:none;
}
.hs-enter-btn:hover{transform:scale(1.07) translateY(-2px)}
.hs-enter-btn:active{transform:scale(.95)!important}
.z1 .hs-enter-btn{background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 6px 28px rgba(16,185,129,.45)}
.z2 .hs-enter-btn{background:linear-gradient(135deg,#0891b2,#06b6d4);box-shadow:0 6px 28px rgba(6,182,212,.45)}
.z3 .hs-enter-btn{background:linear-gradient(135deg,#be185d,#ec4899);box-shadow:0 6px 28px rgba(236,72,153,.45)}
.z4 .hs-enter-btn{background:linear-gradient(135deg,#b45309,#f59e0b);box-shadow:0 6px 28px rgba(245,158,11,.45)}

/* ── SCROLL DOTS INDICATOR ── */
.hub-dots{
  position:absolute;right:clamp(12px,3vw,20px);top:50%;transform:translateY(-50%);
  z-index:40;display:flex;flex-direction:column;gap:clamp(8px,1.5vh,12px);
  pointer-events:none;
}
.hub-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.25);
  transition:background .3s,transform .3s,box-shadow .3s;
}
.hub-dot.active{
  background:#fff;transform:scale(1.5);
  box-shadow:0 0 8px rgba(255,255,255,.6);
}

/* ── SCROLL CHEVRON INDICATORS ── */
.hub-chevron{
  position:absolute;left:50%;transform:translateX(-50%);
  z-index:40;display:flex;flex-direction:column;align-items:center;gap:clamp(3px,0.7vh,6px);
  pointer-events:none;
  opacity:0;transition:opacity .7s ease;
}
.hub-chevron.show{opacity:1}
.hub-chevron-up{top:clamp(130px,22vh,170px);}
.hub-chevron-down{bottom:clamp(18px,4vh,32px);}

/* 3 staggered chevron shapes */
.hub-chevron svg{
  display:block;
  width:clamp(22px,5vw,32px);
  height:auto;
}
.hc-v1{animation:chevronPulse 1.4s ease-in-out infinite}
.hc-v2{animation:chevronPulse 1.4s ease-in-out .22s infinite}
.hc-v3{animation:chevronPulse 1.4s ease-in-out .44s infinite}

@keyframes chevronPulse{
  0%{opacity:.12;transform:translateY(0)}
  50%{opacity:.75;transform:translateY(4px)}
  100%{opacity:.12;transform:translateY(0)}
}
.hub-chevron-up .hc-v1{animation:chevronPulseUp 1.4s ease-in-out .44s infinite}
.hub-chevron-up .hc-v2{animation:chevronPulseUp 1.4s ease-in-out .22s infinite}
.hub-chevron-up .hc-v3{animation:chevronPulseUp 1.4s ease-in-out 0s infinite}
@keyframes chevronPulseUp{
  0%{opacity:.12;transform:translateY(0)}
  50%{opacity:.75;transform:translateY(-4px)}
  100%{opacity:.12;transform:translateY(0)}
}

/* slide-in animation for each zone card */
/* planets and cards always visible - bob/breathing animations provide the motion */

/* ── HUB GREETING PILL ── */
.hub-greeting-pill{
  position:absolute;
  top:max(72px,calc(env(safe-area-inset-top)+60px));
  left:50%;transform:translateX(-50%);
  z-index:25;
  background:rgba(3,4,18,.55);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:50px;
  padding:clamp(6px,1.2vh,9px) clamp(16px,4vw,28px);
  display:flex;align-items:center;gap:10px;
  pointer-events:none;white-space:nowrap;
  animation:pillIn .6s .4s var(--ease-spring) both;
}
@keyframes pillIn{from{opacity:0;transform:translateX(-50%) translateY(-12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.pill-greeting{font-family:'Baloo 2',cursive;font-size:clamp(11px,2.4vw,15px);font-weight:700;color:#fff}
.pill-sub{font-family:'Orbitron',monospace;font-size:clamp(6px,1.2vw,8px);color:rgba(255,255,255,.4);letter-spacing:2px}
.pill-dot{width:6px;height:6px;border-radius:50%;background:#7c3aed;box-shadow:0 0 8px #7c3aed;animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
@keyframes ringRotate{to{transform:rotate(360deg)}}
@keyframes moonOrbit{to{transform:rotate(360deg)}}

/* ── PLANET BODY CLASSES (shared) ── */
.zone-planet{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;}
.planet-z1{background:radial-gradient(circle at 32% 30%,#a7f3d0 0%,#10b981 38%,#064e3b 75%,#021c0d);box-shadow:inset -10px -10px 24px rgba(0,0,0,.4),inset 5px 5px 14px rgba(255,255,255,.15),0 0 0 2px rgba(16,185,129,.3);}
.planet-z2{background:radial-gradient(circle at 32% 30%,#e0f7ff 0%,#06b6d4 38%,#0c4a6e 75%,#021824);box-shadow:inset -10px -10px 24px rgba(0,0,0,.4),inset 5px 5px 14px rgba(255,255,255,.15),0 0 0 2px rgba(6,182,212,.3);}
.planet-z3{background:radial-gradient(circle at 32% 30%,#fce7f3 0%,#ec4899 38%,#831843 75%,#2d0518);box-shadow:inset -10px -10px 24px rgba(0,0,0,.4),inset 5px 5px 14px rgba(255,255,255,.15),0 0 0 2px rgba(236,72,153,.3);}
.planet-z4{background:radial-gradient(circle at 32% 30%,#fef9c3 0%,#f59e0b 38%,#78350f 75%,#1c0800);box-shadow:inset -10px -10px 24px rgba(0,0,0,.4),inset 5px 5px 14px rgba(255,255,255,.15),0 0 0 2px rgba(245,158,11,.3);}
.planet-z1::after,.planet-z3::after{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(170deg,transparent 0%,transparent 18%,rgba(0,0,0,.07) 19%,rgba(0,0,0,.07) 22%,transparent 23%);}

/* ═══ CONTENT SCREENS ═══ */
.scroll-area{
  flex:1;overflow-y:auto;padding:0 clamp(14px,4vw,28px) 20px;
  scrollbar-width:thin;scrollbar-color:rgba(124,58,237,.3) transparent
}
.scroll-area::-webkit-scrollbar{width:4px}
.scroll-area::-webkit-scrollbar-thumb{background:rgba(124,58,237,.4);border-radius:2px}

/* ═══ GAMES GRID ═══ */
.games-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(140px,38vw,200px),1fr));
  gap:clamp(10px,2.5vw,16px);
}
.game-tile{
  border-radius:clamp(16px,4vw,22px);
  padding:clamp(14px,3.5vw,22px) clamp(12px,3vw,16px);
  cursor:pointer;position:relative;overflow:hidden;
  border:1.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:8px;
  transition:all .3s var(--ease-spring);
  animation:tileIn .45s var(--ease-spring) both;
}
@keyframes tileIn{from{transform:scale(.75) translateY(18px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.game-tile::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 55%);border-radius:inherit}
.game-tile:hover{transform:scale(1.05) translateY(-4px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.game-tile:active{transform:scale(.96)!important}
.game-tile.coming{opacity:.4;cursor:default}
.t-icon{font-size:clamp(30px,8vw,42px);line-height:1}
.t-name{font-family:'Baloo 2',cursive;font-size:clamp(12px,3vw,16px);font-weight:700;color:#fff;line-height:1.2}
.t-desc{font-size:clamp(9px,2.2vw,11px);color:rgba(255,255,255,.45);line-height:1.4}
.t-badge{
  font-family:'Orbitron',monospace;font-size:clamp(7px,1.8vw,9px);letter-spacing:1px;
  padding:3px 10px;border-radius:8px;display:inline-block;
  background:rgba(16,185,129,.15);color:#6ee7b7
}
.t-badge.coming{background:rgba(255,255,255,.07);color:rgba(255,255,255,.3)}

/* ═══ GAME WRAPPER ═══ */
.game-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(8px,2vw,20px) clamp(14px,4vw,24px);overflow:hidden;gap:clamp(8px,2vh,16px)}

/* ═══ MEMORY MATCH ═══ */
.mem-grid{display:grid;gap:clamp(6px,1.5vw,10px);width:100%;max-width:440px}
.mem-card{aspect-ratio:1;border-radius:clamp(10px,2.5vw,14px);cursor:pointer;position:relative;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.4,.2,.2,1);border:1.5px solid rgba(255,255,255,.1)}
.mem-card.flipped,.mem-card.matched{transform:rotateY(180deg)}
.mem-card.matched{border-color:rgba(16,185,129,.5)}
.mem-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:inherit;display:flex;align-items:center;justify-content:center}
.mem-front{background:rgba(124,58,237,.15);font-family:'Orbitron',monospace;font-size:clamp(16px,4.5vw,24px);color:rgba(124,58,237,.4)}
.mem-back{background:rgba(255,255,255,.1);backdrop-filter:blur(8px);transform:rotateY(180deg);font-size:clamp(22px,6vw,32px)}
.mem-card.matched .mem-back{background:rgba(16,185,129,.15)}
.mem-stats{display:flex;gap:clamp(14px,4vw,28px);align-items:center}
.mem-stat{font-family:'Baloo 2',cursive;font-size:clamp(12px,3vw,16px);color:rgba(255,255,255,.55)}
.mem-stat span{color:#6ee7b7}

/* ═══ TRIVIA ═══ */
.trivia-q{font-family:'Baloo 2',cursive;font-size:clamp(15px,4vw,22px);font-weight:700;color:#fff;text-align:center;line-height:1.4;max-width:500px}
.trivia-score{font-family:'Orbitron',monospace;font-size:clamp(11px,2.8vw,14px);color:#fde68a;text-shadow:0 0 10px rgba(245,158,11,.5);letter-spacing:2px}
.trivia-opts{display:flex;flex-direction:column;gap:clamp(7px,1.8vh,12px);width:100%;max-width:460px}
.trivia-opt{
  padding:clamp(10px,2.5vw,16px) clamp(14px,3.5vw,22px);
  border-radius:clamp(12px,3vw,18px);border:1.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);backdrop-filter:blur(8px);
  cursor:pointer;font-family:'Baloo 2',cursive;font-size:clamp(13px,3.2vw,17px);font-weight:600;
  color:#fff;transition:all .3s var(--ease-spring);text-align:center;
}
.trivia-opt:hover:not([disabled]){transform:scale(1.03) translateX(6px);background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.4)}
.trivia-opt.correct{background:rgba(16,185,129,.2);border-color:#10b981;color:#6ee7b7}
.trivia-opt.wrong{background:rgba(236,72,153,.2);border-color:#ec4899;color:#fbcfe8;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.trivia-bar{width:100%;max-width:460px;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.trivia-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#7c3aed,#06b6d4);transition:width .5s}

/* ═══ WORD SEARCH ═══ */
.ws-wrap{overflow:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.ws-grid{display:inline-grid;border:1.5px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.03);gap:1px}
.ws-cell{
  width:clamp(28px,6.5vw,36px);height:clamp(28px,6.5vw,36px);
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',cursive;font-size:clamp(12px,3vw,16px);font-weight:700;
  color:#fff;cursor:pointer;transition:all .15s;user-select:none;
  background:rgba(255,255,255,.02)
}
.ws-cell:hover{background:rgba(6,182,212,.1)}
.ws-cell.sel{background:rgba(6,182,212,.2);color:#a5f3fc}
.ws-cell.found{background:rgba(16,185,129,.2);color:#6ee7b7}
.ws-words{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:380px}
.ws-word{
  font-family:'Orbitron',monospace;font-size:clamp(9px,2.2vw,11px);letter-spacing:1px;
  padding:4px 12px;border-radius:10px;border:1.5px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.6);transition:all .3s;
}
.ws-word.hit{background:rgba(16,185,129,.18);color:#6ee7b7;border-color:rgba(16,185,129,.4);text-decoration:line-through}

/* ═══ CRAFTS ═══ */
.crafts-list{display:flex;flex-direction:column;gap:clamp(14px,3.5vh,24px)}
.craft-section-h{font-family:'Baloo 2',cursive;font-size:clamp(14px,3.5vw,18px);font-weight:700;color:#fbcfe8;text-shadow:0 0 12px rgba(236,72,153,.4);margin-bottom:8px}
.craft-row{display:flex;gap:clamp(10px,2.5vw,16px);overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.craft-row::-webkit-scrollbar{display:none}
.craft-card{
  flex-shrink:0;width:clamp(130px,32vw,165px);
  border-radius:clamp(14px,3.5vw,22px);
  padding:clamp(14px,3.5vw,20px) clamp(12px,3vw,16px);
  border:1.5px solid rgba(236,72,153,.2);background:rgba(236,72,153,.06);
  cursor:pointer;display:flex;flex-direction:column;gap:6px;
  transition:all .3s var(--ease-spring);animation:tileIn .4s var(--ease-spring) both;
}
.craft-card:hover{transform:scale(1.05) translateY(-4px);background:rgba(236,72,153,.12);border-color:rgba(236,72,153,.45);box-shadow:0 8px 24px rgba(236,72,153,.22)}
.craft-card:active{transform:scale(.96)}
.craft-card.soon{opacity:.4;cursor:default}
.cc-icon{font-size:clamp(28px,7vw,36px)}
.cc-name{font-family:'Baloo 2',cursive;font-size:clamp(12px,3vw,15px);font-weight:700;color:#fff;line-height:1.2}
.cc-desc{font-size:clamp(9px,2.2vw,11px);color:rgba(255,255,255,.45);line-height:1.4}
.cc-tag{font-family:'Orbitron',monospace;font-size:clamp(7px,1.8vw,9px);letter-spacing:1px;padding:3px 9px;border-radius:8px;display:inline-block;background:rgba(236,72,153,.15);color:#fbcfe8}
.cc-tag.soon{background:rgba(255,255,255,.06);color:rgba(255,255,255,.3)}

/* ═══ COLORING ═══ */
.color-pal{display:flex;gap:clamp(6px,1.5vw,10px);padding:0 clamp(14px,4vw,24px) clamp(8px,2vh,12px);flex-wrap:wrap;justify-content:center;flex-shrink:0}
.swatch{
  width:clamp(28px,7vw,38px);height:clamp(28px,7vw,38px);border-radius:50%;cursor:pointer;
  border:3px solid transparent;transition:all .25s var(--ease-spring);box-shadow:0 2px 8px rgba(0,0,0,.4)
}
.swatch:hover{transform:scale(1.2)}
.swatch.on{border-color:#fff;transform:scale(1.25);box-shadow:0 0 12px rgba(255,255,255,.4)}
.canvas-holder{flex:1;display:flex;align-items:center;justify-content:center;padding:0 clamp(10px,2.5vw,20px)}
#colorCanvas{border-radius:12px;border:1.5px solid rgba(255,255,255,.1);cursor:crosshair;background:#fff;max-width:min(400px,90vw);max-height:min(340px,50vh);touch-action:none}
.brush-row{display:flex;align-items:center;gap:10px;padding:clamp(6px,1.5vh,10px) clamp(14px,4vw,24px);justify-content:center;flex-shrink:0;flex-wrap:wrap}
.brush-btn{
  font-family:'Baloo 2',cursive;font-size:clamp(11px,2.8vw,13px);font-weight:700;
  padding:6px 14px;border-radius:12px;border:1.5px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.07);color:#fff;cursor:pointer;transition:all .25s;
}
.brush-btn:hover,.brush-btn.on{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35)}
.brush-size{width:clamp(70px,18vw,100px);accent-color:#ec4899}

/* ═══ ACTIVITIES ═══ */
.act-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(140px,38vw,200px),1fr));
  gap:clamp(10px,2.5vw,16px);
}
.act-card{
  border-radius:clamp(16px,4vw,22px);
  padding:clamp(14px,3.5vw,20px) clamp(12px,3vw,16px);
  cursor:pointer;position:relative;overflow:hidden;
  border:1.5px solid rgba(245,158,11,.2);background:rgba(245,158,11,.07);
  display:flex;flex-direction:column;gap:8px;
  transition:all .3s var(--ease-spring);animation:tileIn .4s var(--ease-spring) both;
}
.act-card:hover{transform:scale(1.04) translateY(-4px);background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.4);box-shadow:0 8px 24px rgba(245,158,11,.2)}
.act-card:active{transform:scale(.96)!important}
.a-icon{font-size:clamp(28px,7vw,38px)}
.a-name{font-family:'Baloo 2',cursive;font-size:clamp(12px,3vw,16px);font-weight:700;color:#fff;line-height:1.2}
.a-desc{font-size:clamp(9px,2.2vw,11px);color:rgba(255,255,255,.45);line-height:1.4}
.a-tag{font-family:'Orbitron',monospace;font-size:clamp(7px,1.8vw,9px);letter-spacing:1px;padding:3px 9px;border-radius:8px;display:inline-block;background:rgba(245,158,11,.15);color:#fde68a}

/* ═══ SHARED COMPONENTS ═══ */
.cta-btn{
  font-family:'Baloo 2',cursive;font-size:clamp(14px,3.5vw,18px);font-weight:700;
  padding:clamp(10px,2.5vw,14px) clamp(24px,6vw,40px);
  border-radius:60px;border:none;cursor:pointer;transition:all .3s var(--ease-spring);
}
.cta-primary{background:linear-gradient(135deg,#7c3aed,#06b6d4);color:#fff;box-shadow:0 6px 28px rgba(124,58,237,.4)}
.cta-primary:hover{transform:scale(1.06) translateY(-2px);box-shadow:0 10px 40px rgba(124,58,237,.6)}
.cta-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.18)}
.cta-ghost:hover{background:rgba(255,255,255,.14)}
.cta-btn:active{transform:scale(.96)!important}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;flex-shrink:0;padding-bottom:clamp(8px,2vh,14px)}

/* result */
.result-burst{display:flex;flex-direction:column;align-items:center;gap:12px;animation:burstIn .6s var(--ease-spring)}
@keyframes burstIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.result-mega{font-size:clamp(55px,16vw,80px);animation:spinBig .7s var(--ease-spring)}
@keyframes spinBig{from{transform:rotate(-180deg) scale(0)}to{transform:rotate(0) scale(1)}}
.result-h{font-family:'Baloo 2',cursive;font-size:clamp(20px,5.5vw,32px);font-weight:800;color:#fde68a;text-shadow:0 0 24px rgba(245,158,11,.6);text-align:center}
.result-p{font-size:clamp(13px,3.2vw,16px);color:rgba(255,255,255,.6);text-align:center}

/* stella tip */
#stella-tip{
  position:fixed;bottom:clamp(55px,11vh,80px);right:clamp(14px,4vw,24px);z-index:200;
  background:rgba(20,10,40,.7);backdrop-filter:blur(16px);
  border:1.5px solid rgba(245,158,11,.35);border-radius:18px;
  padding:10px 16px;font-family:'Baloo 2',cursive;font-weight:700;
  font-size:clamp(10px,2.5vw,13px);color:#fff;max-width:200px;
  opacity:0;transform:scale(0) translateY(10px);transform-origin:bottom right;
  transition:all .35s var(--ease-spring);pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,.6)
}
#stella-tip.show{opacity:1;transform:scale(1) translateY(0)}

/* sparkle fx */
.spark{position:fixed;pointer-events:none;z-index:999;border-radius:50%;animation:sparkPop .65s ease-out forwards}
@keyframes sparkPop{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(0);opacity:0}}

/* clock badge bottom */
#clock-badge{
  position:fixed;bottom:clamp(14px,3vw,22px);left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.06);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);border-radius:40px;
  padding:6px 16px;font-family:'Orbitron',monospace;font-size:clamp(9px,2vw,12px);
  color:rgba(255,255,255,.4);z-index:5;pointer-events:none;
  transition:opacity .5s;letter-spacing:2px
}

/* responsive */
@media(max-width:420px){
  .games-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:700px){
  .game-wrap{max-width:700px;margin:0 auto;width:100%}
}

/* ═══ SPACE ARCADE ═══ */
.arcade-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(160px,42vw,240px),1fr));
  gap:clamp(12px,3vw,20px);
}
.arcade-tile{
  border-radius:clamp(18px,4.5vw,26px);
  padding:clamp(20px,5vw,32px) clamp(16px,4vw,24px);
  cursor:pointer;position:relative;overflow:hidden;
  border:1.5px solid rgba(6,182,212,.18);
  background:linear-gradient(145deg,rgba(6,182,212,.08),rgba(124,58,237,.06));
  backdrop-filter:blur(12px);
  display:flex;flex-direction:column;gap:10px;
  transition:all .35s var(--ease-spring);
  animation:tileIn .5s var(--ease-spring) both;
}
.arcade-tile::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,transparent 55%);
  pointer-events:none;
}
.arcade-tile:hover{
  transform:scale(1.04) translateY(-5px);
  border-color:rgba(6,182,212,.5);
  box-shadow:0 14px 50px rgba(6,182,212,.2),0 0 0 1px rgba(6,182,212,.2);
}
.arcade-tile:active{transform:scale(.96)!important}
.at-icon{font-size:clamp(36px,9vw,52px);line-height:1;filter:drop-shadow(0 0 12px rgba(6,182,212,.5))}
.at-name{font-family:'Baloo 2',cursive;font-size:clamp(15px,3.5vw,20px);font-weight:800;color:#fff;line-height:1.2}
.at-desc{font-size:clamp(9px,2.2vw,12px);color:rgba(255,255,255,.5);line-height:1.5}
.at-badge{
  font-family:'Orbitron',monospace;font-size:clamp(7px,1.8vw,9px);letter-spacing:1.5px;
  padding:4px 12px;border-radius:20px;margin-top:auto;display:inline-block;
  background:rgba(6,182,212,.15);color:#a5f3fc;border:1px solid rgba(6,182,212,.25);
}
/* Arcade game canvas wrapper */
.arcade-game-wrap{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(6px,1.5vw,14px);overflow:hidden;gap:clamp(6px,1.5vh,12px);
  position:relative;
}
.arcade-game-wrap canvas{
  display:block;max-width:100%;max-height:100%;
  border-radius:14px;touch-action:none;
}
@keyframes verseIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes cdPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes crossGlow{0%,100%{filter:drop-shadow(0 0 18px rgba(167,139,250,.6))}50%{filter:drop-shadow(0 0 40px rgba(167,139,250,1))}}