/* YOUR ORIGINAL CSS — NOT CHANGED (only font improved) */

body{
margin:0;
height:100vh;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;

/* Added emoji support */
font-family:'Baloo 2', Arial, sans-serif, "Segoe UI Emoji", "Noto Color Emoji";

background:linear-gradient(135deg,#ffecd2,#fcb69f);
}

/* (ALL YOUR CSS REMAINS SAME BELOW) */

/* FLOATING STARS */
.star{
position:absolute;
width:8px;
height:8px;
background:white;
border-radius:50%;
opacity:0.8;
animation: twinkle 2s infinite alternate;
}

@keyframes twinkle{
from{opacity:0.3;}
to{opacity:1;}
}

/* CLOUDS */
.cloud{
position:absolute;
width:120px;
height:60px;
background:white;
border-radius:50px;
opacity:0.9;
animation:cloudMove linear infinite;
}

.cloud::before,
.cloud::after{
content:'';
position:absolute;
background:white;
width:70px;
height:70px;
border-radius:50%;
}

.cloud::before{ top:-30px; left:10px; }
.cloud::after{ top:-20px; right:10px; }

@keyframes cloudMove{
0%{transform:translateX(-150px);}
100%{transform:translateX(110vw);}
}

/* HOME SCREEN */
#home{
position:absolute;
width:100%;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
background: linear-gradient(135deg,#ff6f61,#ffcc70,#6a11cb,#2575fc);
background-size: 300% 300%;
animation: bgMove 8s infinite alternate;
z-index:2;
color:white;
}

@keyframes bgMove{
0%{background-position:0% 50%;}
100%{background-position:100% 50%;}
}

.title{
font-size:60px;
animation:bounce 2s infinite;
}

.subtitle{
font-size:22px;
}

/* CHARACTERS */
.characters{
display:flex;
gap:20px;
margin:30px 0;
}

.char{
width:80px;
}

/* FLOAT */
.float{
animation: float 3s ease-in-out infinite;
}
.delay1{ animation-delay:0.5s; }
.delay2{ animation-delay:1s; }

@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0);}
}

/* BUTTON */
#startBtn{
margin-top:20px;
padding:18px 50px;
font-size:26px;
border:none;
border-radius:50px;
cursor:pointer;
font-weight:bold;
background: linear-gradient(45deg,#ff006e,#ffbe0b,#3a86ff);
color:white;
}

/* GAME */
#game{ display:none; }

#bigDisplay{
position:absolute;
top:70px;
left:50%;
transform:translateX(-50%);
text-align:center;
}

#bigLetter{ font-size:140px; color:#ff4d6d; }
#bigWord{ font-size:65px; }

#bigImage{ width:220px; }

/* BALLOONS */
.balloon{
position:absolute;
bottom:-120px;
width:110px;
height:130px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
color:white;
font-size:40px;
cursor:pointer;
animation:fly linear forwards;
box-shadow: inset -5px -10px rgba(0,0,0,0.2);
}

.balloon img{
width:45px;
}

.balloon::after{
content:'';
position:absolute;
bottom:-30px;
width:2px;
height:40px;
background:#444;
}

@keyframes fly{
0%{transform:translateY(0);}
100%{transform:translateY(-110vh);}
}

.pop{
animation:pop .3s forwards;
}

/* KEYS */
#mobileKeys{
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
width:90%;
}

.key{
padding:10px 14px;
border-radius:12px;
cursor:pointer;
font-size:18px;
color:white;
font-weight:bold;
box-shadow:0 4px 8px rgba(0,0,0,0.2);
transition:0.2s;
}

/* Different colors for each key */
.key:nth-child(1){background:#ff595e;}
.key:nth-child(2){background:#ff924c;}
.key:nth-child(3){background:#ffca3a;}
.key:nth-child(4){background:#8ac926;}
.key:nth-child(5){background:#52b788;}
.key:nth-child(6){background:#1982c4;}
.key:nth-child(7){background:#6a4c93;}
.key:nth-child(8){background:#f72585;}
.key:nth-child(9){background:#b5179e;}
.key:nth-child(10){background:#7209b7;}
.key:nth-child(11){background:#560bad;}
.key:nth-child(12){background:#480ca8;}
.key:nth-child(13){background:#3a0ca3;}
.key:nth-child(14){background:#3f37c9;}
.key:nth-child(15){background:#4361ee;}
.key:nth-child(16){background:#4895ef;}
.key:nth-child(17){background:#4cc9f0;}
.key:nth-child(18){background:#00b4d8;}
.key:nth-child(19){background:#0096c7;}
.key:nth-child(20){background:#0077b6;}
.key:nth-child(21){background:#023e8a;}
.key:nth-child(22){background:#ff006e;}
.key:nth-child(23){background:#fb5607;}
.key:nth-child(24){background:#ffbe0b;}
.key:nth-child(25){background:#8338ec;}
.key:nth-child(26){background:#3a86ff;}

.key:hover{
transform:scale(1.25) rotate(5deg);
}
@keyframes pop{
0%{transform:scale(0)}
100%{transform:scale(1)}
}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-15px)}
100%{transform:translateY(0)}
}


/* ❌ Hide default cursor */
body {
  cursor: none;
}

/* ⭐ STAR CURSOR */
#cursorStar {
  position: fixed;
  width: 26px;
  height: 26px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

/* ✨ SPARKLES */
.spark {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  animation: sparkle 0.8s linear forwards;
}

/* ✨ ANIMATION */
@keyframes sparkle {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.2) translateY(-20px) translateX(10px);
  }
}