body {
  background-color: #e6e6fa; /*　背景色　*/
  color: #000000; /* 文字色 */
  font-family: sans-serif; /* フォント */
  text-align: center; /* 中央揃え */
}

/*　帯　*/
h1 {
  font-family: 'Zen Kurenaido', sans-serif; /* タイトルフォント */
  font-size: 2rem;
  color: white;
  -webkit-text-stroke: 3px black;
  paint-order: stroke fill;
  font-weight: bold;
  padding: 0.5rem;
  line-height: 1.1;
  margin-top: 0.1rem;
  margin-bottom: 0.3rem;
  background-color: #ffffe0;
}

/* --- 1行目：ボタンとプルダウンの並び --- */
.target-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px; /* 隙間を詰めたい場合はここを調整 */
}

/* 親：ボタン1個分のスペースを確保 */
.inputWrapper {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 46px;
    vertical-align: middle;
}

/* 普段見えているボタン */
.targetSelectBtn {
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 6px;
    padding: 0 12px;
    text-align: left;
    font-size: 16px;
    cursor: pointer;
    color: #333;
}

/* 浮き出るメニュー全体（検索窓＋リスト） */
.targetMenu {
    position: absolute;
    top: 48px; /* ボタンのすぐ下 */
    left: 0;
    width: 300px;
    background: white;
    border: 1px solid #aaa;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 9999;
    padding: 8px;
    box-sizing: border-box;
}

/* メニュー内の入力欄 */
.targetInput {
    width: 100% !important; /* 前回の 100px ミスを防ぐ */
    height: 36px;
    font-size: 16px;
    padding: 0 8px;
    margin-bottom: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* リスト部分（5個分スクロール） */
.targetSuggestions {
    max-height: 200px;
    overflow-y: auto;
}

/* 候補1行のデザイン */
.targetSuggestions div {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.targetSuggestions div:hover {
    background-color: #f0f0ff;
}

.target-toggle-btn {
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    gap: clamp(0.1px, 1vw, 5px);
    line-height: 1.4;
    border: 2px;
    background-color: #444;
    cursor: pointer;
    font-weight: bold;
    color: #fff;
    padding: 10px;
    white-space: nowrap;
}

/* 候補リストの中の1項目ごとのデザイン */
.targetSuggestions div {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    text-align: left;
    color: #333;
    height: 40px;         /* 高さを固定してスクロール計算を正確に */
    box-sizing: border-box;
}

.targetSuggestions div:hover {
    background-color: #f0f0ff; /* マウスを乗せた時に色を変える */
}

.enemy-select {
    font-size: 16px;
    width: 220px;
    padding: 12px 8px; /* 上下を少し広げて見やすく */
    border: 1px solid #aaa;
    border-radius: 4px;
    background-color: #fff;
    margin-top: 1em;
    cursor: pointer;
    outline: none;
}

/* --- 2行目：詳細ステータスの箱 --- */
/* ステータス箱本体（大元の箱） */
.enemy-status-box {
    margin: 10px auto;      /* 上下10px、左右中央 */
    padding: 15px 15px;          /* 箱の内側の余白 */
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    /* 画面両端に1%ずつの余白 ＝ 幅98% */
    width: 98%; 
    box-sizing: border-box; /* paddingやborderを幅に含める設定（必須） */

    display: flex;
    flex-direction: column;
    gap: 12px;              /* 項目間の隙間 */
}

/* 各ステータス項目（属性、Staminaなどの行） */
.status-item {
    display: flex;
    align-items: center;    /* 上下中央 */
    justify-content: flex-start; /* 左詰め（幅指定で調整するため） */
    width: 100%;            /* 親の98%幅をフルに使う */
}

/* 左側のラベル */
.status-item label {
    font-size: 16px;
    font-weight: bold;
    color: #555;
    flex: 1;                /* 残りの40%エリアを占有 */
    white-space: nowrap;    /* ラベルの途中で改行させない */
}

/* 右側の入力・選択欄（箱のさらに60%に固定） */
.status-item input, 
.status-item select {
    font-size: 16px;        /* 16px固定でズーム防止 */
    height: 36px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fafafa;
    text-align: left;
    
    /* 大元の箱に対して「60%」の幅を死守する */
    width: 70%;
    min-width: 70%;         /* スマホで縮まないように固定 */
    max-width: 70%;
    box-sizing: border-box; /* これがないとpadding分で60%を超えてはみ出す */

    /* --- 中央寄せの設定 --- */
    text-align: left;      /* 数値入力用 */
    text-align-last: left; /* プルダウンの選択前・選択後の文字用 */
    
}

/* 戦績結果の表について */
.result-container {
    margin: 10px auto;
    width: 100%;
    max-width: 500px;
}

.result-table {
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid #333;
    table-layout: fixed; /* これが最重要です */
}

/* --- 縦横のラインを綺麗に揃えるための微調整（追加） --- */
/* 右端の列は右線を消す（外枠があるため） */
.result-table td:last-child {
    border-right: none;
}
/* 一番下の行は下線を消す（外枠があるため） */
.result-table tr:last-child th,
.result-table tr:last-child td {
    border-bottom: none;
}

/* --- 四隅の背景が角丸を上書きしないように個別に丸める（追加） --- */
.result-table tr:first-child th:first-child { border-top-left-radius: 10px; }
.result-table tr:first-child td:last-child { border-top-right-radius: 10px; }
.result-table tr:last-child th:first-child { border-bottom-left-radius: 10px; }
.result-table tr:last-child td:last-child { border-bottom-right-radius: 10px; }

/* 列ごとの幅を強制固定（これで縦ラインが揃います） */
.result-table th.label-cell { width: 25%; }
.result-table td.value-cell { width: 45%; }
.result-table td.action-cell, 
.result-table td.stacked-cell { width: 30%; }

.result-table th, .result-table td {
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    height: 48px;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden; /* はみ出し防止 */
}

/* --- 背景色の設定 --- */
.label-cell {
    background-color: #eee !important;
    font-weight: bold;
}

.value-cell {
    background-color: #fff !important;
    font-weight: bold;
}

/* --- 上下分割セルの設定 --- */
.stacked-cell {
    /* 背景色はあえて指定せず、中身のdivに塗ります */
    vertical-align: top; 
}

.stack-label {
    height: 50%; /* ちょうど半分 */
    background-color: #eee; /* ラベルのグレーを復活 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    border-bottom: 1px solid #333; /* 中の仕切り線 */
    box-sizing: border-box;
}

.stack-value {
    height: 50%; /* ちょうど半分 */
    background-color: #fff; /* 数値の白を復活 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

/* --- リセットボタン --- */
.action-cell {
    padding: 8px !important;
    background-color: #fff; /* ボタンの背景も白に */
}

.reset-btn {
    width: 100%;
    height: 100%;
    background-color: #666;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.reset-btn:hover {
    background-color: #333;
}


/*　自分の幻獣の設定　*/
/* --- 全体コンテナ --- */
.my-phantom-manager {
    max-width: 500px;
    margin: 12px auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- 幻獣ユニット外枠 --- */
.phantom-unit {
    border: 2px solid #333;
    border-radius: 24px; /* 強めの角丸 */
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* --- ヘッダー --- */
.phantom-header {
    display: flex;
    height: 48px;
    background-color: #fff;
}

.phantom-toggle-btn {
    width: 90px;
    background-color: #444;
    color: #fff;
    border: none;
    border-right: 2px solid #333;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.phantom-toggle-btn:hover { background-color: #222; }

.phantom-name-display {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 18px;
    font-weight: bold;
    cursor: pointer;
    background-color: #fff;
}

.arrow-icon { font-size: 10px; color: #888; }

/* --- 詳細入力エリア --- */
.phantom-detail-area {
    border-top: 2px solid #333;
    padding: 12px;
    background-color: #f9f9f9;
}

/* --- 入力行（表形式風） --- */
.input-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.input-row:last-of-type { border-bottom: none; }

.input-label {
    width: 70px;
    font-size: 12px;
    font-weight: bold;
    color: #555;
}

.input-label.sub { width: 70px; font-size: 12px; }

/* 入力フィールド */
.input-field.full { flex: 1; }
.input-field.short { width: 90px; }
.input-field.mid { flex: 1; margin-right: 8px; }

.input-field input, .input-field select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
}

/* --- 計算結果表示 --- */
.calc-res {
    flex: 1;
    margin-left: 12px;
    background-color: #eee;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: bold;
    font-size: 16px;
    color: #333;
    border: 1px solid #ccc;
}

/* --- 装備選択と強化値 --- */
.flex-col { flex-direction: column; align-items: stretch; gap: 4px; }
.sub-row { display: flex; align-items: center; width: 100%; }

.select-box {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    min-height: 18px;
    display: flex;
    align-items: center;
}

.item-name { flex: 1; margin-right: 8px; }

/* 親の箱は、位置を整えるだけにします */
.plus-select {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 本体のデザイン（ここを以前のボタン風のデザインに統一） */
.plus-select select {
    width: 70px;
    height: 32px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    text-align-last: center; /* 文字を中央に寄せる */
    outline: none;
    appearance: none; /* ブラウザ標準の矢印を消す */
    -webkit-appearance: none;
}

/* --- ボタン類 --- */
.btn-group { display: flex;
             gap: 5px;
             width: 70px;
           }

.small-btn {
    width: 70px;
    padding: 6px 0;
    font-size: 12px;
    background-color: #666;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-group .small-btn {
    width: 100%;         /* 親（group）の幅に対して計算させる */
    flex: 1;             /* これを入れると、2つのボタンが均等に並びます */
}

.save-row{
    display: flex;
    gap: 10px;
    width: 100%;
}

.main-save-btn {
    flex: 1;
    width: 100%;
    margin-top: 15px;
    padding: 10px;
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.main-save-btn:hover { background-color: #222; }

/* 武器・防具・アビリティリスト */
.dropdown-menu {
    position: absolute; /* 浮かせる */
    z-index: 2000;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    width: 250px;
    padding: 10px;
}

#dropdown-search {
    font-size: 16px;
    width: 100%;
    padding: 8px;
    margin-bottom: 5px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#dropdown-items {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 240px; /* 4行分 */
    overflow-y: auto;
}

#dropdown-items li {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-size: 16px;
}

#dropdown-items li:hover {
    background-color: #f0f7ff;
}

/* 参加幻獣について */
.participant-selector {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 10px;
}
.participant-selector label {
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 討伐開始ボタン */
.btn-group-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

.sim-btn {
    flex: 1;
    padding: 12px;
    background-color: #e67e22; /* 攻撃的なオレンジ色 */
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.sim-btn:hover {
    background-color: #d35400;
}

/* ログ表示エリア */
.battle-log-container {
    background: transparent;
    color: #333;
    text-align: left;
    padding: 10px;
    margin-top: 20px;
    height: 300px;
    overflow-y: auto;
    font-family: monospace;
    border: none; /* 枠線を消去 */
}

/* ==========================================================================
   追加：マイ武器・マイ防具 カスタム装備機能の専用スタイル
   ========================================================================== */

/* --- 1. マイ武器・マイ防具の選択行 --- */
.my-weapon-container {
    height: 36px;
    display: flex;
    align-items: stretch;
    border: 1px solid #d3381c;
    border-radius: 7px;
    box-sizing: border-box;
}

.my-armor-container {
    height: 36px;
    display: flex;
    align-items: stretch;
    border: 1px solid #5a79ba;
    border-radius: 7px;
    box-sizing: border-box;
}

.my-weapon-container .input-label {
    background-color: #d3381c;
    color: #ffffff;
    border-right: 2px solid #d3381c;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.my-armor-container .input-label {
    background-color: #5a79ba;
    color: #ffffff;
    border-right: 2px solid #5a79ba;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

/* マイ装備のプルダウンボックス（後からデザイン変更しやすいよう個別に指定可能） */
.custom-weapon-box,
.custom-armor-box {
    flex: 1 !important;
    width: auto !important;
    cursor: pointer;
    background-color: #fff;
    color: #333333;
    font-weight: bold;
    padding: 0 8px 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    border: none;
    margin-right: 0 !important;
}

.custom-weapon-box::after,
.custom-armor-box::after {
    content: "▼";
    font-size: 10px;
    color: #888888;
}

/* --- 2. 管理ボタン行（保存・上書き） --- */
/* 左側のラベル文字を無くしたため、横幅いっぱいに広げる */
.weapon-management-row,
.armor-management-row {
    width: 80%;
    margin: 0 auto;
    display: block; /* 確実に横幅一杯に使う */
}

/* ボタンを2つ均等に横並びにするためのコンテナ */
.weapon-save-box,
.armor-save-row {
    display: flex;
    gap: 10px;       /* ボタンとボタンの間の隙間 */
    width: 100%;    /* 行全体の幅いっぱいに広げる */
    box-sizing: border-box;
}

/* 保存・上書きボタン自体のデザイン */
.weapon-save-btn,
.weapon-overwrite-btn,
.armor-save-btn,
.armor-overwrite-btn {
    flex: 1;            /* 2つのボタンを50%ずつ、均等な幅にする */
    width: 100%;        /* 親要素に対して一杯に広げる */
    padding: 8px 0;     /* ボタンの上下の押しやすさ（高さ）の調整 */
    font-size: 14px;    /* 文字サイズ */
    font-weight: bold;
    cursor: pointer;
    border-radius: 24px; /* 角丸の調整 */
    white-space: nowrap;/* ボタン内の文字を改行させない */
}

/* 武器用のボタン色（後から個別で変えられるように分離） */
.weapon-save-btn {
    background-color: #555;
    color: #fff;
    border: 1px solid #444;
}
.weapon-overwrite-btn {
    background-color: #666;
    color: #fff;
    border: 1px solid #555;
}

/* 防具用のボタン色（後から個別で変えられるように分離） */
.armor-save-btn {
    background-color: #555;
    color: #fff;
    border: 1px solid #444;
}
.armor-overwrite-btn {
    background-color: #555;
    color: #fff;
    border: 1px solid #444;
}