body{

margin:0;

font-family:Arial,sans-serif;

background:#87ceeb;

text-align:center;

}

.container{

padding:20px;

}

h1{

color:#fff;

text-shadow:2px 2px 4px #000;

}

.scoreboard{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-bottom:20px;

}
.scoreboard div{

padding:12px 20px;

border-radius:15px;

background:rgba(255,255,255,.20);

backdrop-filter:blur(4px);

-webkit-backdrop-filter:blur(4px);

color:white;

font-size:22px;

font-weight:bold;

text-shadow:
2px 2px 4px rgba(0,0,0,.5);

box-shadow:
0 4px 10px rgba(0,0,0,.25);

min-width:140px;

}
.scoreboard div:hover{

transform:scale(1.05);

transition:.2s ease;

}
@media (max-width:600px){

.scoreboard{

gap:10px;

}

.scoreboard div{

font-size:18px;

min-width:110px;

padding:10px 15px;

}

}
#gameArea{

height:350px;

position:relative;

overflow:hidden;

}

#balloon{

width:140px;

height:170px;

background:#ff4d6d;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:60px;

font-weight:bold;

color:white;

position:absolute;

left:50%;

transform:translateX(-50%);

bottom:-200px;

animation:floatUp 8s linear forwards;

box-shadow:0 4px 10px rgba(0,0,0,.3);

transition:
background .3s ease,
box-shadow .3s ease;
}

#balloon::after{

content:"";

width:2px;

height:50px;

background:#444;

position:absolute;

bottom:-50px;

}

.instructions{

font-size:22px;

font-weight:bold;

color:#333;

}

@keyframes floatUp{

from{

bottom:-200px;

}

to{

bottom:450px;

}

}
.star{

position:absolute;

font-size:40px;

pointer-events:none;

animation:
starFloat 2s linear forwards;

z-index:999;

}

@keyframes starFloat{

0%{

opacity:1;

transform:
translateY(0);

}

100%{

opacity:0;

transform:
translateY(-200px);

}

}
.confetti{

position:absolute;

width:10px;

height:10px;

pointer-events:none;

z-index:1000;

animation:
confettiBlast 1.5s linear forwards;

}

@keyframes confettiBlast{

0%{

opacity:1;

transform:
translate(0,0);

}

100%{

opacity:0;

transform:
translate(
var(--x),
var(--y)
);

}

}
.goldBalloon{

background:gold !important;

color:#000 !important;

box-shadow:
0 0 25px gold;

}
#balloon:hover{

transform:
translateX(-50%)
scale(1.05);

}
#bonusBanner{

position:absolute;

top:40%;

left:50%;

transform:
translate(-50%,-50%);

font-size:48px;

font-weight:bold;

color:gold;

text-shadow:
3px 3px 6px #000;

background:
rgba(0,0,0,.75);

padding:20px 40px;

border-radius:20px;

display:none;

z-index:5000;

animation:none;

}

@keyframes bonusFlash{

0%{

transform:
translate(-50%,-50%)
scale(.5);

opacity:0;

}

50%{

transform:
translate(-50%,-50%)
scale(1.2);

opacity:1;

}

100%{

transform:
translate(-50%,-50%)
scale(1);

opacity:1;

}

}
#achievementBanner{

position:absolute;

top:25%;

left:50%;

transform:translate(-50%,-50%);

background:
linear-gradient(
135deg,
#2c3e50,
#34495e
);

color:white;

padding:25px 50px;

border-radius:20px;

font-size:42px;

font-weight:bold;

display:none;

z-index:6000;

text-align:center;

box-shadow:
0 0 30px rgba(0,0,0,.5);

}
#visitor{

position:absolute;

bottom:20px;

left:-150px;

font-size:80px;

z-index:4000;

display:none;

pointer-events:none;

}

.visitorRun{

animation:
visitorRun 6s linear forwards;

}

@keyframes visitorRun{

from{

left:-150px;

}

to{

left:110%;

}

}
#typingTracker{

font-size:28px;

font-weight:bold;

margin-top:20px;

color:white;

text-shadow:
2px 2px 4px rgba(0,0,0,.5);

}

#typedText{

color:#ffd43b;

font-size:36px;

margin-left:10px;

text-shadow:
0 0 8px rgba(255,212,59,.7);

}
#spaceStars{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

pointer-events:none;

z-index:1;

display:none;

}
.gameButtons{

display:flex;

justify-content:center;

gap:15px;

margin-bottom:20px;

flex-wrap:wrap;

}
.gameButtons a,
.gameButtons button{

padding:12px 20px;

border:none;

border-radius:12px;

background:#2563eb;

color:white;

font-size:18px;

font-weight:bold;

text-decoration:none;

cursor:pointer;

box-shadow:
0 4px 10px rgba(0,0,0,.25);

transition:.2s ease;

}
.gameButtons a:hover,
.gameButtons button:hover{

transform:scale(1.05);

background:#1d4ed8;

}