body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden; /* スクロールバーが出ないように */
    background-color: white; /* ゲームエリアの背景を白に */
    cursor: pointer; /* マウスカーソルをポインターに */

    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent; /* WebKit系ブラウザ（Chromeなど）のタップハイライトを透明にする */
    user-select: none; /* テキスト選択を無効にする（関連する効果を抑制） */
    -webkit-user-select: none; /* WebKit系ブラウザ用 */
    -moz-user-select: none; /* Firefox用 */
    -ms-user-select: none; /* Edge/IE用 */

}

/* スプラッシュ画面のスタイル */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(95, 255, 26); /* 黒い背景 */
    display: flex; /* 中央寄せのため */
    justify-content: center; /* 水平方向中央 */
    align-items: center; /* 垂直方向中央 */
    color: white; /* 文字色を白に */
    font-size: 3em; /* 文字の大きさ */
    z-index: 1000; /* 最前面に表示 */
    opacity: 1;
    transition: opacity 1s ease-out; /* フェードアウトのアニメーション */
    text-align: center;
}

#splash-screen img {
    max-width: 100%; /* 画像が画面幅を超えないように */
    max-height: 100%; /* 画像が画面高さを超えないように */
    object-fit: contain; /* アスペクト比を維持しつつ収める */
    text-align: center;
}

#splash-screen.hidden {
    opacity: 0;
    pointer-events: none; /* フェードアウト後、クリック不可にする */
}

#game-area {
    width: 100vw;
    height: 100vh;
    position: relative;
    /* スプラッシュ画面表示中は見えないように */
    opacity: 0;
    transition: opacity 1s ease-in;
    background-color: #ecf5d7;
    overflow: hidden; /* ★重要: ゲームエリア内のスクロールも禁止 */
    touch-action: manipulation; /* ここにも適用することで、ゲームエリア内でのタッチ操作を最適化 */

}

#game-area.active {
    opacity: 1;
}

.bird {
    position: absolute;
    max-width: 200px; /* 鳥のサイズ調整 */
    height: auto;
    cursor: pointer;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* フェードアウトと移動のアニメーション */
    opacity: 1;
    pointer-events: auto; /* クリック可能にする */
}

.bird.escaping {
    opacity: 0; /* フェードアウト */
    transform: scale(0.8); /* 少し縮むアニメーションなど */
    pointer-events: none; /* クリック不可にする */
}
.bird.flipped {
    transform: scaleX(-1);
}

/* クリック回数表示のスタイル */
.click-count-display {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 25px;
    font-weight: bold;
    color: #005d0d;
    z-index: 100;
    font-family: Arial, sans-serif;
    width: 218px;
    text-align: right;
}

#click-count-images{
    padding: 5px 0 0 0;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: 2px;
}