/* --- 全体レイアウト用のコンテナ --- */
.battle-container {
    display: flex; /* Flexboxを有効化 */
    flex-direction: column; /* ★★★これを追加：要素を縦に並べる */
    /*align-items: center; /* 要素を水平方向の中央に揃える */
    gap: 25px; /* ★★★要素間の垂直方向の隙間を指定 */
    
    /* 以下は見栄えを良くするためのスタイル */
    width: 100%;
    max-width: 800px;
    margin: 40px auto; /* 上下に余白、左右は自動で中央寄せ */
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
}

/* --- 左 (挑戦者) --- */
.challenger p {
    font-size: 1.8em;
    font-weight: bold;
    margin: 0; /* pタグのデフォルトマージンをリセット */
}

/* --- 中央 (VS) --- */
.vs-text p {
    font-size: 2.5em;
    font-weight: 900;
    color: #cc0000;
    margin: 0;
}

/* --- 右 (相手フォーム) --- */
.opponent-form form {
    display: flex; /* 入力欄とボタンを横並びに */
    gap: 8px; /* 要素間の隙間 */
}


/* --- フォーム部品のスタイル (前回のものを流用・調整) --- */
.opponent-form input[type="text"] {
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.opponent-form .btn {
    padding: 10px 15px;
    font-size: 1em;
    color: #fff;
    background-color: #333;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.opponent-form .btn:hover {
    background-color: #555;
}