/* body要素のマージンをリセット */
body {
    margin: 0;
    display: flex; /* フレックスコンテナとして設定 */
    justify-content: center; /* 横方向の中央揃え */
    align-items: flex-start; /* 縦方向の上寄せに設定 */
    min-height: 100vh; /* ビューポートの高さいっぱいに表示 */
    
}

/* canvas要素を横幅100%に設定 */
canvas {
    width: 100%;
    display: block;
 border: 5px ridge rgb(0, 126, 6); 
    border-radius: 5px; /* 角丸を設定 */

}

/* ゲーム画面の要素 */
#game-screen {
    position: relative;
    /* 最大幅を設定 */ 
     /* max-width: 400px;  */
    /* 上から20%の位置に配置  */
     /* margin-top: 20vh;  */

   
}

/* 操作バーとボールを描くcanvasの要素 */
#bar-balls-canvas {
    position: absolute;
    left: 0;
    top: 0;
}

/* メッセージを表示させるコンテナ */
#message-container {
    position: absolute;
    top: 0;
    display: grid; /* フレックスコンテナとして設定 */
    justify-content: center; /* 横方向の中央揃え */
    align-content: center;/* 縦方向の中央揃え */
    width: 100%;
    height: 100%;
    pointer-events: none; /* マウスイベントを無効化 */
}

/* メッセージのスタイル */
#message {
    display: block; /* メッセージを表示 */
    color: rgb(10, 10, 10); /* 文字色を白に設定 */
    font-size: 2.0em; /* フォントサイズを1.4emに設定 */
    padding: 20px; /* パディングを20pxに設定 */
    background-color: rgb(255, 255, 255); /* 背景色を設定 */
    /* 境界線を設定 */
    border: 5px ridge rgba(0, 126, 6, 0.5); 
    /* border-radius: 5px; 角丸を設定 */
      display: none;
      
}

/* ラベルのスタイル */
.label {
    color: rgb(10, 10, 10);
    /* font-weight: bold; */

    border: 5px ridge rgba(0, 126, 6, 0.5);
    background-color: rgb(255, 255, 255);
    /* 下の文字を変えたい場合はここ */
    font-size: 120%;
    /* テキストを中央揃えにする */
    text-align: center; 

    width: 100%; /* 親要素の幅に合わせる */

}
/* ボールとブロックの数を表示するコンテナ */
#counts-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    width: 100%; /* 親要素の幅に合わせる */
}

/* ボールの数のスタイル */
#ball-count {
    color: rgb(0, 0, 0);
    font-size: 100%;
    margin-right: 20px;
}

/* ブロックの数のスタイル */
#block-count {
    color: rgb(0, 0, 0);
    font-size: 100%;
}
.message-visible {
    display: block  !important;
    text-align: center; /* テキストを中央揃えにする */
}

#Readme{
    position: relative; /* 相対配置に変更 */
    text-align: left;
    width: 100%;
    
}

#Credit{
    /* 要素の位置を絶対位置に設定 */
    position: absolute; 
    width: 100%;
    margin-top: 20px; /* Readmeからの間隔を設定 */
    text-align: center;
}