/* 全体のスタイル */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f0f8ff;
text-align: center;
}

/* ゲームコンテナ */
#game-container {
padding: 20px;
}

/* スコア表示 */
h1 {
font-size: 2em;
color: #333;
}

/* ゲームエリア */
#game-area {
width: 100%;
height: 80vh;
border: 2px solid #333;
position: relative;
background-color: #e0f7fa;
overflow: hidden;
}

/* 水たまり */
.puddle {
width: 50px;
height: 50px;
background-color: rgba(0, 150, 255, 0.7);
position: absolute;
border-radius: 50%;
animation: movePuddle 5s linear infinite;
cursor: pointer;
transition: background-color 0.3s;
}

.puddle:hover {
background-color: rgba(0, 200, 255, 0.9);
}

/* 水たまりのアニメーション */
@keyframes movePuddle {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}