/* 基本設定とCSS変数 */
:root {
    --home-color: #1e3e7d;
    --away-color: #7c0002;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background-color: #1a1a1a; color: #ffffff; display: flex; justify-content: center; }
.app-container { width: 100%; max-width: 900px; padding: 10px; display: flex; flex-direction: column; gap: 15px; }
header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; padding-bottom: 10px; }
.header-title { display: flex; align-items: center; gap: 10px; }
.icon-btn { background-color: #555; color: white; border: none; border-radius: 50%; width: 26px; height: 26px; font-weight: bold; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 14px; }
.icon-btn:hover { background-color: #777; }
.btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; background-color: #444; color: white; }
.btn.primary { background-color: #007bff; }
.btn.reset-btn { background-color: #555; padding: 6px 12px; font-size: 13px; }

/* チーム情報ヘッダー */
.pitch-header { display: flex; justify-content: space-between; margin-bottom: -5px; padding: 0 10px; }
.team-info { display: flex; align-items: center; gap: 10px; }
.team-name-input { background: transparent; border: none; border-bottom: 1px solid #555; color: white; font-size: 18px; font-weight: bold; padding: 4px; width: 160px; }
.team-name-input:focus { outline: none; border-bottom-color: #007bff; }
.color-picker { -webkit-appearance: none; border: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; padding: 0; background: transparent; }
.color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker::-webkit-color-swatch { border: 2px solid #555; border-radius: 50%; }

/* --- ピッチのテーマ設定 --- */
.pitch {
    --pitch-bg: #2a2d34;
    --line-color: #555;
    --slot-border: rgba(255, 255, 255, 0.4);
    --slot-text: rgba(255, 255, 255, 0.3);
    
    position: relative; width: 100%; aspect-ratio: 16 / 9; 
    background: var(--pitch-bg); border: 2px solid var(--line-color); 
    overflow: hidden; touch-action: none;
    transition: background 0.3s, border-color 0.3s;
}
.pitch[data-theme="grass"] {
    --pitch-bg: repeating-linear-gradient(to bottom, #4c9a3f, #4c9a3f 10%, #458c39 10%, #458c39 20%);
    --line-color: rgba(255, 255, 255, 0.7);
    --slot-border: rgba(255, 255, 255, 0.6);
    --slot-text: rgba(255, 255, 255, 0.5);
}
.pitch[data-theme="whiteboard"] {
    --pitch-bg: #f4f6f9;
    --line-color: #2c3e50;
    --slot-border: rgba(44, 62, 80, 0.4);
    --slot-text: rgba(44, 62, 80, 0.4);
}

/* ピッチ内のライン描画 */
.line { position: absolute; border: 2px solid var(--line-color); transition: border-color 0.3s; }
.halfway-line { top: 0; bottom: 0; left: 50%; transform: translateX(-50%); border-width: 0 2px 0 0; z-index: 1; }
.center-circle { top: 50%; left: 50%; width: 120px; height: 120px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 1; }
.penalty-area { top: 20%; bottom: 20%; width: 15%; z-index: 2; background: transparent; }
.penalty-area.left { left: 0; border-width: 2px 2px 2px 0; }
.penalty-area.right { right: 0; border-width: 2px 0 2px 2px; }
.goal-area { top: 35%; bottom: 35%; width: 5%; z-index: 3; background: transparent; }
.goal-area.left { left: 0; border-width: 2px 2px 2px 0; }
.goal-area.right { right: 0; border-width: 2px 0 2px 2px; }
.penalty-arc { top: 50%; width: 45px; height: 90px; z-index: 1; transform: translateY(-50%); }
.penalty-arc.left { left: 15%; border-radius: 0 90px 90px 0; border-width: 2px 2px 2px 0; }
.penalty-arc.right { right: 15%; border-radius: 90px 0 0 90px; border-width: 2px 0 2px 2px; }
.corner-arc { width: 40px; height: 40px; border-radius: 50%; z-index: 1; }
.corner-arc.top-left { top: -20px; left: -20px; }
.corner-arc.bottom-left { bottom: -20px; left: -20px; }
.corner-arc.top-right { top: -20px; right: -20px; }
.corner-arc.bottom-right { bottom: -20px; right: -20px; }

/* ピッチ上の配置枠（点線） */
.pitch-slot { 
    position: absolute; width: 60px; height: 60px; 
    border: 2px dashed var(--slot-border); border-radius: 50%; 
    transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; z-index: 5; 
    transition: border-color 0.3s;
}
.pitch-slot::after { content: attr(data-pos); position: absolute; color: var(--slot-text); font-weight: bold; z-index: 0; transition: color 0.3s; }

/* 選手アイコン */
.player-icon { display: flex; flex-direction: column; align-items: center; cursor: grab; user-select: none; touch-action: none; width: 50px; z-index: 10; }
.player-icon:active { cursor: grabbing; }
.player-number { width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; margin-bottom: 4px; position: relative; z-index: 2; transition: background-color 0.2s; color: white; }
.home .player-number { background-color: var(--home-color); }
.away .player-number { background-color: var(--away-color); }
.player-name { font-size: 12px; white-space: nowrap; position: relative; z-index: 2; text-shadow: 1px 1px 2px #000; color: white; }
#pitch > .player-icon { position: absolute; transform: translate(-50%, -50%); }
.pitch-slot .player-icon { position: static; transform: none; }

/* サブ・ベンチエリア */
.sub-area-wrapper { display: flex; gap: 10px; }
.team-sub, .team-bench { flex: 1; display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; background-color: #222; border-radius: 8px; min-height: 70px; }
.team-sub { border: 2px dashed #555; position: relative; }
.team-sub::before { content: attr(data-label); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #333; font-size: 24px; font-weight: bold; pointer-events: none; z-index: 0; white-space: nowrap; }

/* 入力・コントロールパネル */
.formation-controls { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; background-color: #222; padding: 10px 15px; border-radius: 8px; margin-bottom: 15px; }
.team-control { display: flex; align-items: center; gap: 10px; }
.formation-controls select { padding: 6px; background-color: #444; color: white; border: 1px solid #666; border-radius: 4px; }
.control-panel { display: flex; gap: 10px; margin-bottom: 15px; }
.input-group { flex: 1; display: flex; flex-direction: column; gap: 5px; }
textarea { background-color: #333; color: #fff; border: 1px solid #555; border-radius: 4px; padding: 8px; resize: vertical; }
textarea.dragover { background-color: #444; border: 2px dashed #007bff; }
.action-group { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.sort-toggle-label { font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 5px; user-select: none; }

/* --- モーダル (ヘルプ) --- */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); justify-content: center; align-items: center; }
.modal-content { background-color: #2a2a2a; color: #fff; padding: 25px; border-radius: 8px; width: 90%; max-width: 600px; position: relative; max-height: 80vh; overflow-y: auto; border: 1px solid #444; }
.close { position: absolute; top: 10px; right: 20px; color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; }
.close:hover { color: #fff; }
#help-content { white-space: pre-wrap; font-family: inherit; margin-top: 15px; line-height: 1.6; font-size: 14px; color: #ddd; }