body {
    margin: 0;
    overflow: hidden; /* 画面外に出てもスクロールバーが出ないように */
    background-color: #f0f0f0;
    min-height: 100vh; /* 画面いっぱいに広げる */
    position: relative; /* 魚を絶対位置で配置するため */

    -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用 */
}

#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#animatedFish {
    position: absolute; /* JavaScriptで動かすために絶対位置指定が必須 */
    width: 40%; /* 魚の幅（必要に応じて調整） */
    height: auto; /* 魚の高さ（必要に応じて調整） */
    /* transform-origin: left center; <--- ここはJSで動的に設定するのでCSSからは削除またはコメントアウト */

    overflow: hidden; /* ★重要: ゲームエリア内のスクロールも禁止 */
    touch-action: manipulation; /* ここにも適用することで、ゲームエリア内でのタッチ操作を最適化 */
}

/* ★ここからスプラッシュ画面のスタイル追加★ */
#splash-screen {
    position: fixed; /* 画面全体に固定 */
    top: 0;
    left: 0;
    width: 100vw; /* ビューポート幅いっぱいに */
    height: 100vh; /* ビューポート高さっぱいに */
    background-color: #121212; /* スプラッシュ画面の背景色（例: 青） */
    display: flex; /* Flexboxで中央配置 */
    flex-direction: column; /* 縦方向に並べる */
    justify-content: center; /* 垂直方向の中央揃え */
    align-items: center; /* 水平方向の中央揃え */
    z-index: 1000; /* 最前面に表示 */
    opacity: 1; /* 初期は完全に表示 */
    transition: opacity 1s ease-out; /* フェードアウトのアニメーション */
    color: rgb(0, 0, 0); /* テキストの色 */
    font-family: Arial, sans-serif;
    font-size: 1.5em;
}

#splash-screen.fade-out {
    opacity: 0; /* フェードアウト後の状態 */
    pointer-events: none; /* フェードアウト後にクリックを受け付けないようにする */
}

.splash-logo {
    max-width: 100%; /* ロゴの最大幅 */
    height: auto;
}
/* ★ここまでスプラッシュ画面のスタイル追加★ */

/* ★追加: タイマー表示のスタイル★ */
#timer-display {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 1em;
    font-family: Arial, sans-serif;
    color: #ffffff; /* 青色の文字 */
    background-color: #000000;
    padding: 3px 5px;
    z-index: 500;
}
#best-time-display{
    position: absolute;
    top: 45px; /* タイマーの下に配置 */
    left: 20px;
    font-size: 0.8em;
    font-family: Arial, sans-serif;
    color: #333; /* 青色の文字 */
    padding: 3px 5px;
    z-index: 500;
}
#best-time-display.hidden {
    display: none; /* 非表示にするためのクラス */
}

/* ★追加: メッセージ表示のスタイル★ */
#message-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央に配置 */
    font-family: Arial, sans-serif;
    font-size: 1em;
    text-align: center;
    color: #ffffff; /* 青色の文字 */
    background-color: #000000;
    padding: 3px 5px;
    z-index: 900;
    line-height: 1.3;
    /*transition: opacity 0.5s ease-out;*/
}
#message-display .elapsed-time {
    font-size: 2em;
    font-weight: bold;
}
#message-display.hidden {
    opacity: 0;
    pointer-events: none; /* 非表示時にクリックイベントを受け付けない */
}