body {
    font-family: sans-serif;
    margin: 20px auto; /* Centering body */
    max-width: 1700px;
    padding: 0 20px;
    background-color: #f4f4f4;
    color: #333;
}

/* Common button styles */
#add-race-btn,
#copy-json-btn,
#paste-json-btn,
#reset-btn,
.copy-trainer-data-btn,
.paste-trainer-data-btn,
.clear-trainer-data-btn,
.delete-race-btn,
.modal-buttons button {
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Button sizes and shapes */
#add-race-btn,
#copy-json-btn,
#paste-json-btn,
#reset-btn,
.modal-buttons button {
    padding: 10px 15px;
    font-size: 1em;
    border-radius: 5px;
}

.copy-trainer-data-btn,
.paste-trainer-data-btn,
.clear-trainer-data-btn {
    padding: 5px 10px;
    font-size: 0.8em;
    border-radius: 4px;
}

.delete-race-btn {
    border-radius: 50%; /* Make it round */
    width: 25px;
    height: 25px;
    font-size: 1.2em;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

h1 {
    color: #0056b3;
}

/* Background colors and hover effects */
#add-race-btn {
    background-color: #28a745;
}
#add-race-btn:hover {
    background-color: #218838;
}

#copy-json-btn,
#paste-json-btn,
#modal-paste-btn,
.copy-trainer-data-btn,
.paste-trainer-data-btn {
    background-color: #007bff;
}
#copy-json-btn:hover,
#paste-json-btn:hover,
#modal-paste-btn:hover,
.copy-trainer-data-btn:hover,
.paste-trainer-data-btn:hover {
    background-color: #0056b3;
}

#reset-btn,
.clear-trainer-data-btn,
.delete-race-btn {
    background-color: #dc3545;
}
#reset-btn:hover,
.clear-trainer-data-btn:hover,
.delete-race-btn:hover {
    background-color: #c82333;
}

#modal-cancel-btn {
    background-color: #6c757d;
}
#modal-cancel-btn:hover {
    background-color: #5a6268;
}

.header-container {
    display: flex;
    flex-direction: column; /* Stack h1 and buttons vertically */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

#add-race-btn {
}

.header-buttons {
    display: flex;
    gap: 10px;
}

#copy-json-btn,
#paste-json-btn {
}

#reset-btn {
}


.total-scores {
    background-color: #e9ecef;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
}

.total-scores h2 {
    margin: 0 0 10px 0;
}

#total-score-details-container {
    display: flex;
    flex-direction: column; /* Stack trainers vertically */
    align-items: center; /* Center items */
    gap: 10px; /* Space between trainers */
    font-size: 1.2em;
    font-weight: bold;
}

.score-entry {
    display: flex;
    align-items: baseline; /* Align items nicely */
    gap: 15px; /* Add some gap */
    width: 80%;
    max-width: 400px;
    padding: 8px 15px; /* A bit more padding */
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.score-entry .rank {
    color: #6c757d; /* A neutral color */
    min-width: 20px; /* Ensure alignment */
    text-align: right;
}

.score-entry .trainer-name {
    color: #0056b3;
    flex-grow: 1; /* Allow name to take up space */
}

.score-entry .trainer-score {
    color: #d9534f;
    width: 60px;
    text-align: right;
}

.race-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    position: relative; /* Add this */
}

.race-number {
    background-color: #6c757d;
    color: white;
    width: 30px;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

.race-info {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    gap: 5px; /* Space between race number and delete button */
}

.delete-race-btn:hover {
    background-color: #c82333;
}

.race-container {
    display: flex;
    gap: 20px;
    flex-grow: 1;
}

.trainer-section {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex: 1;
}

.trainer-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    position: relative; /* Add this */
    padding-right: 160px; /* Adjust this value as needed to prevent overlap */
}

.trainer-header h2 {
    margin: 0;
    color: #007bff;
}

.trainer-header input[type="text"] {
    margin: 0;
}

.trainer-header p {
    margin: 0;
    font-weight: bold;
    color: #d9534f;
    font-size: 1.2em;
    padding-right: 15px;
}

.trainer-header .tie-error-message {
    color: orange;
    font-size: 0.8em;
}

.trainer-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 5px;
}

/* Add styles for the new buttons */
.copy-trainer-data-btn,
.paste-trainer-data-btn {
}

.clear-trainer-data-btn {
}

.score-and-error-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    align-items: baseline; /* Align items nicely */
    gap: 5px; /* Small gap between score and error message */
}

input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.uma-ranks-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.uma-rank-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.uma-rank-group label {
    font-weight: bold;
    min-width: 20px;
}

.rank-radio-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.rank-radio-buttons input[type="radio"] {
    display: none; /* ラジオボタンのデフォルト表示を消す */
}

.rank-radio-buttons label {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    background-color: #f9f9f9;
    transition: background-color 0.3s, color 0.3s;
    font-weight: normal;
    width: 24px; /* Set a fixed width */
    text-align: center; /* Center the text */
}

.clear-rank-button {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    background-color: #6c757d; /* ダークグレーに変更 */
    color: white;
    transition: background-color 0.3s, color 0.3s;
    font-weight: normal;
    width: 36px; /* Set a fixed width */
    text-align: center; /* Center the text */
    margin-left: 5px; /* ラジオボタンとの間隔 */
}

.clear-rank-button:hover {
    background-color: #5a6268; /* ホバー時の色も変更 */
}

.rank-radio-buttons input[type="radio"]:checked + label {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

/* 追加するスタイル */
.rank-radio-buttons input[type="radio"]:checked + label.error-rank {
    background-color: #dc3545; /* Red background */
    color: white;
    border-color: #dc3545;
}

.uma-name {
    width: 150px; /* Adjust width as needed */
}

.uma-name-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}



/* Responsive adjustments */
@media (max-width: 1700px) {
    .race-container {
        flex-direction: column;
    }
    .race-wrapper {
        flex-direction: column;
        width: fit-content; /* コンテンツの幅に合わせる */
        margin: 0 auto 20px auto; /* 上マージン0、左右自動、下マージン20px */
    }
    .race-info {
        margin-bottom: 10px; /* レース情報とレースコンテナの間にスペースを追加 */
        flex-direction: row; /* 縦並びから横並びへ変更 */
        align-items: center; /* 縦方向の中央揃え */
        justify-content: center; /* 横方向の中央揃え */
        gap: 10px; /* 要素間のスペースを調整 */
    }
}

@media (max-width: 768px) {
    .trainer-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .uma-rank-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .trainer-actions {
        flex-direction: column; /* ボタンを縦に並べる */
        align-items: flex-end; /* 右寄せにする */
    }

    .modal-content {
        width: 95%;
    }

    #add-race-btn,
    #copy-json-btn,
    #paste-json-btn,
    #reset-btn {
        font-size: 0.9em; /* フォントサイズを小さくする */
        padding: 8px 12px; /* パディングも調整してボタンサイズを小さくする */
        white-space: nowrap; /* 改行を防ぐ */
    }

    h1 {
        font-size: 1.8em; /* h1のフォントサイズを小さくする */
        margin-top: 10px; /* 上マージンを小さくする */
        margin-bottom: 10px; /* 下マージンを小さくする */
    }
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fefefe;
    margin: auto; /* Centered */
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 80%; /* Could be more specific, e.g., 500px */
    max-width: 600px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#json-input-textarea {
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    min-height: 200px; /* Multi-line textarea */
    resize: vertical;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-buttons button {
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

#modal-paste-btn {
    background-color: #007bff;
    color: white;
}

#modal-paste-btn:hover {
    background-color: #0056b3;
}

#modal-cancel-btn {
    background-color: #6c757d;
    color: white;
}

#modal-cancel-btn:hover {
    background-color: #5a6268;
}

@media (max-width: 768px) {
    .modal-content {
        width: 95%;
    }
}

.github-fixed-button {
    position: fixed;
    bottom: 20px; /* ページ下からの距離 */
    right: 20px; /* ページ右からの距離 */
    width: 50px; /* アイコンの幅 */
    height: 50px; /* アイコンの高さ */
    background-color: #333; /* 背景色 */
    border-radius: 50%; /* 円形にする */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 影 */
    z-index: 100; /* 他の要素の上に表示 */
    transition: background-color 0.3s ease;
}

.github-fixed-button:hover {
    background-color: #555;
}

.github-fixed-button svg {
    fill: white; /* アイコンの色 */
    width: 60%; /* SVGのサイズ調整 */
    height: 60%;
}