/* --- ★V8: 全体・ダークモード設定 --- */
body {
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    line-height: 1.6;
    background-color: #1a1c20; /* 濃い背景色 */
    color: #e0e0e0; /* 明るい文字色 */
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    background-color: #2c2f36; /* 少し明るい背景 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border: 1px solid #444;
}

h1 {
    color: #ffb3007a; /* グラブルの金に近い色 */
    border-bottom: 2px solid #ffb400;
    padding-bottom: 5px;
    margin-top: 0;
}
h2 {
    color: #68aeff; /* 明るい青 */
    border-bottom: 2px solid #68aeff;
    padding-bottom: 5px;
}

/* --- ★V8: フォーム要素 (ダークモード) --- */
fieldset {
    border: 1px solid #555;
    border-radius: 4px;
    margin-bottom: 15px;
}
legend {
    font-weight: bold;
    padding: 0 10px;
    color: #ccc;
}

input[type="text"],
select,
textarea {
    background-color: #222;
    color: #e0e0e0;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 8px;
    font-family: inherit;
    font-size: 0.95em;
}

input[type="text"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #4a90e2; /* フォーカス時に青く */
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}

::placeholder {
    color: #777;
}

/* --- ★V8: ボタン共通スタイル --- */
.btn {
    padding: 10px 15px;
    font-size: 1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    color: rgb(255, 255, 255);
    transition: filter 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn:hover {
    filter: brightness(110%);
}
.btn:active {
    filter: brightness(90%);
    box-shadow: none;
}
.btn:disabled {
    background-color: #555 !important;
    color: #999;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}


/* --- ★V8: ボタン個別スタイル --- */

/* メイン・リセット系 */
#setup-complete-btn { background-color: #4a90e2; } /* プライマリ青 */
.reset-btn { background-color: #6c757d; } /* グレー */
#clear-all-data-btn { background-color: #e53935; } /* 警告赤 */

/* 保存/ロード系 */
#save-btn { background-color: #4CAF50; padding: 8px; } /* 緑 */
#load-btn { background-color: #4a90e2; padding: 8px; } /* 青 */
#delete-btn { background-color: #f0ac4ea8; padding: 8px; } /* オレンジ */

/* アクションパネル */
.action-btn {
    padding: 10px;
    word-break: break-all;
    background-color: #ffb300c0; /* アビリティ (黄) */
    color: #1a1c20; /* 暗い文字色 */
}
.summon-btn {
    padding: 10px;
    word-break: break-all;
    background-color: #9b59b6; /* 召喚 (紫) */
    color: white;
}
[data-action="ガード"] { background-color: #0288d1; color: white; } /* ガード (青) */
.attack-btn-off { background-color: #d9534f; } /* 攻撃OFF (赤) */
.attack-btn-on { background-color: #5cb85c; } /* 攻撃ON (緑) */
#goto-playback-btn { background-color: #28a745; } /* 再生 (緑) */
#copy-history-btn { background-color: #5bc0de; } /* コピー (水色) */


/* キャラ選択 */
.char-btn {
    padding: 8px;
    background-color: #444;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    word-break: break-all;
    color: #ddd;
    transition: all 0.2s;
}
.char-btn.is-sub {
    background-color: #3a3a3a;
    color: #999;
    font-style: italic;
}
.char-btn:hover {
    border-color: #888;
}
.char-btn.selected {
    background-color: #4a90e2;
    color: white;
    font-weight: bold;
    border-color: #68aeff;
}

/* --- ★V8: グリッド・レイアウト (V7と同じ) --- */
#extra-sub-inputs {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    grid-column: 1 / -1;
    margin-top: 10px;
}
.move-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
}
#move-phase.playback-mode .move-grid {
    grid-template-columns: 1fr;
}
#move-phase.playback-mode .action-panel {
    display: none;
}
.action-panel {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#turn-counter {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    color: #e57373; /* ターン (赤系) */
}
.char-select-buttons,
.action-buttons,
.summon-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.reset-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}

/* --- ★V8: 履歴・再生 (ダークモード) --- */
#move-history {
    width: 100%;
    height: 400px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 0.9em;
    padding: 10px;
    box-sizing: border-box;
    background-color: #111; /* ターミナル風の黒 */
    color: #b0c4de; /* 明るい青 */
    resize: vertical;
}

#export-area {
    text-align: right;
    margin-top: 10px;
}
.feedback-success {
    font-size: 0.9em;
    color: #4CAF50;
    margin-left: 10px;
}
.feedback-error {
    font-size: 0.9em;
    color: #e53935;
    margin-left: 10px;
}

/* 再生モード */
.history-panel { display: block; }
.playback-panel { display: none; }
#move-phase.playback-mode .history-panel { display: none; }
#move-phase.playback-mode .playback-panel { display: block; }

#playback-area {
    height: 400px;
    overflow-y: auto;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 10px;
    background-color: #262930;
}
.playback-turn {
    background-color: #333;
    border: 1px solid #444;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 10px;
    transition: background-color 0.3s, border-color 0.3s;
}
.playback-turn.active-turn {
    background-color: #4a402a; /* ハイライト (黄土色) */
    border-color: #ffb30085; /* ハイライト (金) */
}
.playback-turn h3 {
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px dashed #666;
    color: #ffb3005e;
}
.playback-turn ul {
    margin: 0;
    padding-left: 20px;
}
.playback-turn li {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 1.1em;
    list-style: square;
    color: #ddd;
}
.playback-memo {
    background-color: #2a3947; /* メモ (青系) */
    border: 1px solid #4a90e2;
    border-radius: 4px;
    padding: 8px;
    margin-top: 10px;
    font-size: 0.95em;
    white-space: pre-wrap;
    color: #e0e0e0;
}

#playback-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
#playback-nav-center {
    font-size: 1.2em;
    font-weight: bold;
    color: #e57373;
}
#mode-toggle-area {
    margin: 10px 0;
    text-align: right;
}

/* --- ★V11: インポート/エクスポートボタン --- */

/* 保存/ロードエリアのレイアウトを調整 */
#save-load-section {
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 4列に変更 */
    gap: 10px 15px;
}

/* ファイル入力ボタンを隠す */
#import-file-input {
    display: none;
}

/* ファイル入力をボタンのように見せる */
.import-btn-label {
    grid-column: 1 / -1; /* 横幅いっぱいに広げる */
    background-color: #3f51b5; /* インポート (藍色) */
    text-align: center;
    padding: 10px 15px;
}

#export-btn {
    grid-column: 1 / -1; /* 横幅いっぱいに広げる */
    background-color: #00796b; /* エクスポート (緑系) */
}

/* --- ★V14: ボタンの色調整 --- */
/* ムーブ表を画像で保存ボタンの色を変更 */
#save-playback-image-btn {
    background-color: #f44336; /* 赤系 (マゼンタに近い) */
    color: white; /* テキストを白に */
    font-weight: bold; /* 少し太字に */
}

/* 画像生成中のボタンの色 */
#save-playback-image-btn[disabled] {
    background-color: #b71c1c; /* 生成中は少し暗い赤に */
    cursor: not-allowed;
}

/* --- ★V12: 編成情報（メモ・画像） --- */
/* 全体メモ */
#overall-memo-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 80px; /* 少し大きめに */
    font-size: 0.95em;
    resize: vertical; /* 縦方向だけリサイズ可能に */
}

/* 画像アップロード */
#weapon-image-upload-area {
    margin-top: 15px;
    border: 2px dashed #555; /* 点線枠 */
    border-radius: 5px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    background-color: #3a3a3a;
    transition: background-color 0.2s;
}
#weapon-image-upload-area:hover {
    background-color: #4a4a4a;
    border-color: #777;
}
#weapon-image-preview {
    max-width: 100%;
    max-height: 200px; /* プレビューの高さを制限 */
    margin-top: 10px;
    border-radius: 4px;
    display: none; /* JSで表示制御 */
}
#clear-weapon-image-btn {
    margin-top: 5px;
    background-color: #e53935; /* 赤 */
    display: none; /* JSで表示制御 */
}
#upload-feedback {
    font-size: 0.8em;
    color: #aaa;
    margin-top: 5px;
}

/* --- ★V19: ペーストボタン --- */
#paste-image-btn {
    margin-top: 5px;
    margin-left: 10px; /* 画像削除ボタンとの間隔 */
    background-color: #03a9f4; /* 水色系 */
}

.reset-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}