/* 基本スタイル */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 10px;
    text-align: center;
}

header h1 {
    color: #555;
    font-size: 1.0em;
}

/* プレイヤー全体のコンテナ */
.player-container {
    display: flex;
    flex-wrap: wrap; /* スマホなどで折り返すようにする */
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

/* 各プレイヤーのエリア */
.player-area {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 100px;
     flex: 1 1 0; /* flex-grow, flex-shrink, flex-basis を設定 */
}

.player-name {
    width: 100%;
    padding: 8px;
    margin-bottom: 0px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.7em;
}

/* チップ入力部分 */
.chip-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}

.chip-label {
    font-weight: bold;
    flex-basis: 80px; /* ラベルの幅を固定 */
    text-align: left;
}

.chip-buttons {
    display: flex; /* これで中の要素が横並びになる */
    align-items: center; /* 上下中央揃えにする */
}

.chip-buttons button {
    width: 35px;
    height: 35px;
    font-size: 1.2em;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 5px;
}
.chip-buttons button:hover {
    background-color: #e0e0e0;
}

.chip-count {
    font-size: 1.4em;
    font-weight: bold;
    margin: 0 15px;
    min-width: 30px; /* 数字が変動してもレイアウトが崩れないように */
    display: inline-block;
}



/* ボタン */
.clear-btn {
    margin-top: 3px;
    padding: 10px 15px;
    border: none;
    background-color: #ffc107;
    color: white;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
}
.clear-btn:hover {
    background-color: #e0a800;
}

.global-controls button {
    padding: 10px 23px;
    border: none;
    background-color: #dc3545;
    color: white;
    font-size: 1.1em;
    border-radius: 5px;
    cursor: pointer;
}
.global-controls button:hover {
    background-color: #c82333;
}
/* 数字入力ボックスのスタイル */
.chip-count {
    font-size: 1.2em; /* 少しフォントを小さくしてボックスに収める */
    font-weight: bold;
    margin: 0 10px; /* ボタンとの間隔を調整 */
    width: 60px; /* ボックスの幅を固定 */
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}

/* ブラウザが自動で表示する入力ボックスの矢印（スピナー）を非表示にする */
/* Chrome, Safari, Edge */
.chip-count::-webkit-outer-spin-button,
.chip-count::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
.chip-count[type=number] {
    -moz-appearance: textfield;
    appearance: none;
}
/* 全体コントロールエリアのスタイル */
.global-controls {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* ボタンと合計の間のスペース */
    flex-wrap: wrap; /* スマホなどで折り返す */
}

#grand-total {
    display: flex; /* ★重要: これで中の要素が横並びになる */
    align-items: baseline; /* テキストのベースラインで揃える */
    justify-content: center; /* 中央寄せ */
    gap: 30px; /* 各要素の間のスペース */

    background-color: #fff;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    flex-wrap: wrap; /* 画面が狭いときは折り返す */
}

/* 各合計アイテムの共通スタイル */
.total-item {
    font-weight: bold;
    color: #555;
    font-size: 1.2em; /* 基本の文字サイズ */
}

/* 1つ目のアイテム（総合計）だけを大きく目立たせる */
.total-item:first-child {
    font-size: 1.5em; /* 他より大きく */
    color: #333;
}

/* 金額の数字部分のスタイル */
.total-item span {
    margin-left: 8px;
}
#grand-total-amount {
    color: #dc3545; /* 赤色 */
}
#grand-total-x2, #grand-total-x3 {
    color: #007bff; /* 青色 */
}

.total-36x {
    color: #e0a800; /* 目立つ金色系の色 */
    font-weight: bold; /* 数字を太字にして強調 */
}

/* レスポンシブ対応: 画面幅が600px以下（スマホなど）の場合 */
@media (max-width: 600px) {
    #grand-total {
        flex-direction: column; /* 縦並びに変更 */
        gap: 10px; /* 隙間を狭くする */
        align-items: center;
    }
}



/* 2倍、3倍の配当表示エリア */
.total-payouts {
    display: flex;
    justify-content: center;
    gap: 30px; /* 「2倍」と「3倍」の間のスペース */
    font-size: 1.2em; /* 少し小さく */
    color: #555;
    border-top: 1px solid #eee;
    padding-top: 8px;
}

.total-payouts span span { /* 実際の数字部分 */
    color: #007bff; /* 青色にする */
    margin-left: 8px;
}

/* 各プレイヤーの合計表示エリア */
.total-amount-container {
    display: flex;
    justify-content: space-around; /* 要素を均等に配置 */
    align-items: baseline;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    gap: 10px; /* 要素間の最小の隙間 */
    flex-wrap: wrap; /* 狭い画面では折り返す */
}

/* 各合計アイテム（合計, 2倍, 3倍） */
.total-item-player {
    font-size: 1.2em;
    font-weight: bold;
    color: #555;
    white-space: nowrap; /* 折り返しを防ぐ */
}

/* 1つ目のアイテム（メインの合計）を目立たせる */
.total-item-player:first-child {
    font-size: 1.5em; /* 他より大きく */
    color: #333;
}

/* 金額の数字部分 */
.total-item-player span {
    margin-left: 5px;
}

.total-1x {
    color: #007bff; /* 青色 */
}

.total-2x, .total-3x {
    color: #43494e; /* 少し控えめなグレー */
}