body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

footer {
    background-color: #333; /* 少し黒めの背景色 */
    color: #fff; /* テキストの色を白に */
    padding: 10px;
    text-align: center;
    margin-top: 20px; /* 上に空間を追加 */
}

footer a {
    color: #fff; /* リンクの色を白に */
    text-decoration: none; /* 下線を消す */
}

footer a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
}

#range-inputs {
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    gap: 10px; /* 要素間の間隔 */
    margin-bottom: 20px;
    font-size: xx-large;
}

#range-inputs p {
    margin: 0;
    font-weight: bold;
    font-family: 'Comic Sans MS', cursive, sans-serif; /* 可愛いフォントに変更 */
    font-size: 48px; /* フォントサイズを大きく */
    /* color: #ff69b4; 可愛いピンク色に変更 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 影を追加 */
}

#range-inputs button {
    padding: 10px 20px;
    font-size: 32px;
    cursor: pointer;
    border: none;
    border-radius: 20px; /* 角を丸くする */
    background: linear-gradient(45deg, #6bffb6, #65f0a5); /* 緑を基調としたグラデーション背景 */
    color: gray;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加 */
    transition: background 0.3s ease; /* 背景色の変化にアニメーションを追加 */
}

#range-inputs button:hover {
    background: linear-gradient(45deg, #65f0a5, #6bffb6); /* ホバー時の背景色 */
}

#range-inputs input {
    width: 90px; /* 60pxの1.5倍 */
    padding: 7.5px; /* 5pxの1.5倍 */
    font-size: 24px; /* 16pxの1.5倍 */
}

#main-container {
    display: flex;
    gap: 20px; /* 要素間の間隔 */
    margin-top: 20px;
    /* background-color: #0ff; */
    width: 100%; /* 全幅を親コンテナに設定 */
    box-sizing: border-box; /* 幅計算に余白を含む */
}

#bingo-draw {
    flex: 3; /* 親コンテナ幅の3割 */
    text-align: center;
    /* background-color: crimson; */
    width: 100%;
}

#generate-btn {
    padding: 15px 30px; /* 1.5倍に調整 */
    font-size: 24px; /* 1.5倍に調整 */
    cursor: pointer;
    border: none;
    border-radius: 20px; /* 角を丸くする */
    background: linear-gradient(45deg, #6ba5ff, #6595f0); /* 青を基調としたグラデーション背景 */
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加 */
    transition: background 0.3s ease; /* 背景色の変化にアニメーションを追加 */
    margin: 5px;
}

#generate-btn:hover {
    background: linear-gradient(45deg, #6595f0, #6ba5ff); /* ホバー時の背景色 */
}

#reset-btn {
    padding: 15px 30px; /* 1.5倍に調整 */
    font-size: 24px; /* 1.5倍に調整 */
    cursor: pointer;
    border: none;
    border-radius: 20px; /* 角を丸くする */
    background: linear-gradient(45deg, #ff6b6b, #f06565); /* 赤を基調としたグラデーション背景 */
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加 */
    transition: background 0.3s ease; /* 背景色の変化にアニメーションを追加 */
    margin: 5px;
}

#reset-btn:hover {
    background: linear-gradient(45deg, #f06565, #ff6b6b); /* ホバー時の背景色 */
}


#current-number {
    font-weight: bold;
    margin: 20px 0;
    width: 100%; /* 親要素の幅に合わせる */
    text-align: center; /* 中央揃え */
    font-size: 36px; /* 基本フォントサイズ */
}

#current-number.small-font {
    font-size: 24px; /* 3桁の場合のフォントサイズ */
}


#draw-history {
    flex: 7; /* 親コンテナ幅の7割 */
    background-color: white;
    border: 2px solid #000;
    padding: 10px;
    text-align: left;
    box-sizing: border-box; /* 幅計算にパディングを含む */
}

#number-grid {
    /* background-color: blueviolet; */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box; /* 幅計算にパディングを含む */
}

.number-item {
    width: 70px; /* 35pxの2倍 */
    height: 70px; /* 35pxの2倍 */
    line-height: 70px; /* 35pxの2倍 */
    text-align: center;
    font-size: 36px; /* 18pxの2倍 */
    font-weight: bold;
    background-color: lightgray; /* 薄い色 */
    color: darkgray; /* 薄い文字色 */
    border: 2px solid #000;
    border-radius: 50%;
    opacity: 0.5; /* 薄く表示 */
    overflow: hidden; /* テキストがはみ出さないようにする */

}

.number-item.highlighted {
    background-color: lightyellow; /* ハイライトの色 */
    color: black; /* 通常の文字色 */
    opacity: 1; /* 通常表示 */
}

.number-item.small-font {
    font-size: 24px; /* 3桁の場合のフォントサイズ */
}