*{box-sizing:border-box;margin:0;padding:0;touch-action:manipulation;}
html,body{width:100%;height:100%;font-family:'Arial',sans-serif;background:#fff;color:#333;}
#brandSplash{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#000;z-index:9999;}
#brandLogo{width:40vmin;max-width:60vw;animation:logoPop 1.2s ease-out both;}
#brandName{margin-top:4vmin;font-size:10vmin;font-weight:700;color:#44cc55;letter-spacing:0.2em;animation:namePulse 1.2s ease-in-out infinite;}
@keyframes logoPop{0%{transform:scale(0);opacity:0;}70%{transform:scale(1.1);opacity:1;}100%{transform:scale(1);}}
@keyframes namePulse{0%,100%{opacity:.7;}50%{opacity:1;}}
#splash{position:fixed;inset:0;display:none;flex-direction:column;justify-content:center;align-items:center;background:rgba(0,0,0,.8);z-index:999;}
#splash img{max-width:70vw;max-height:60vh;border-radius:3vmin;object-fit:cover;box-shadow:0 0 20px rgba(0,0,0,.5);}
#childName{margin-top:4vmin;font-size:8vmin;color:#fff;animation:bounce 1s ease-in-out infinite alternate;}
@keyframes bounce{from{transform:translateY(0);}to{transform:translateY(-2vmin);}}
#menu{display:none;position:fixed;inset:0;padding:6vmin;gap:4vmin;flex-wrap:wrap;justify-content:center;align-items:center;overflow:auto;background:var(--bg,#fafafa);}
.btn{width:40vmin;height:26vmin;background:#44cc55;border-radius:2vmin;display:flex;align-items:center;justify-content:center;font-size:5vmin;color:#fff;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.2);user-select:none;}
.btn:active{transform:scale(.96);}
.bg-stars{background:#000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><circle cx="1" cy="1" r="1" fill="white" opacity="0.5"/></svg>') repeat;animation:twinkle 2s linear infinite;}
@keyframes twinkle{0%{background-position:0 0;}100%{background-position:100px 100px;}}
.bg-bubbles{background:#a0f0ff;overflow:hidden;}
.bg-bubbles::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 60%) 0 0/25vmin 25vmin repeat;}
footer{position:fixed;bottom:0;width:100%;text-align:center;padding:1vmin;font-size:3vmin;color:#666;}
/* ---------- Splash branding ---------- */
#brandLine{
  font-family: "Orbitron", sans-serif;   /* free Google font, looks retro-arcade */
  font-size:8vmin;
  color:#ffffff;
  letter-spacing:0.4vmin;
  text-align:center;
  margin-top:4vmin;
  animation:glowPulse 2.5s ease-in-out infinite;
}

@keyframes glowPulse{
  0%   {transform:scale(1);   text-shadow:0 0 6px #fff, 0 0 14px #2ec4ff;}
  50%  {transform:scale(1.05);text-shadow:0 0 12px #fff,0 0 32px #2ec4ff;}
  100% {transform:scale(1);   text-shadow:0 0 6px #fff, 0 0 14px #2ec4ff;}
}

/* loading line */
#loadingLine{
  font-size:5vmin;
  color:#cccccc;
  margin-top:6vmin;
  letter-spacing:0.3vmin;
  font-weight:600;
}

.loadingDot{
  opacity:0;
  animation:dotBlink 1.2s infinite;
}
.loadingDot:nth-child(1){animation-delay:0s;}
.loadingDot:nth-child(2){animation-delay:.3s;}
.loadingDot:nth-child(3){animation-delay:.6s;}

@keyframes dotBlink{
  0%  {opacity:0;}
  50% {opacity:1;}
  100%{opacity:0;}
}