/* タグラグビー作戦ボード - スタイル */
/* プレフィックス: ffb- (Flag Football Board) */

/* ========== 全体ラッパー ========== */
.ffb-wrapper {
  display: flex !important;
  width: 100% !important;
  height: 600px !important;
  background: #4CAF50 !important;
  font-family: Arial, sans-serif !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 20px 0 !important;
  box-sizing: border-box !important;
}

/* ========== コントロールパネル ========== */
.ffb-controls {
  padding: 20px !important;
  width: 320px !important;
  background: #f5f5f5 !important;
  border-right: 3px solid #333 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  overflow-y: auto !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
}

/* スクロールバーのカスタマイズ */
.ffb-controls::-webkit-scrollbar {
  width: 12px !important;
}

.ffb-controls::-webkit-scrollbar-track {
  background: #e0e0e0 !important;
  border-radius: 6px !important;
}

.ffb-controls::-webkit-scrollbar-thumb {
  background: #888 !important;
  border-radius: 6px !important;
}

.ffb-controls::-webkit-scrollbar-thumb:hover {
  background: #555 !important;
}

/* Firefox用スクロールバー */
.ffb-controls {
  scrollbar-width: thin !important;
  scrollbar-color: #888 #e0e0e0 !important;
}

/* ========== ボタンレイアウト ========== */
.ffb-button-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.ffb-button-row.ffb-single {
  grid-template-columns: 1fr !important;
}

/* ========== ボタンスタイル ========== */
.ffb-controls button {
  padding: 10px 8px !important;
  font-size: 14px !important;
  border: none !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  background: #2196F3 !important;
  color: white !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: background 0.2s !important;
}

.ffb-controls button:hover {
  background: #1976D2 !important;
}

.ffb-controls button:disabled {
  background: #ccc !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* ========== 特殊ボタン ========== */
#ffb-edit-names {
  background: #4CAF50 !important;
}

#ffb-edit-names:hover {
  background: #45a049 !important;
}

#ffb-export-gif {
  background: #FF9800 !important;
}

#ffb-export-gif:hover {
  background: #F57C00 !important;
}

#ffb-export-gif:disabled {
  background: #ccc !important;
}

#ffb-restart-setup {
  background: #f44336 !important;
}

#ffb-restart-setup:hover {
  background: #d32f2f !important;
}

/* ========== 速度コントロール ========== */
.ffb-speed-control {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 5px 0 !important;
}

.ffb-speed-control label {
  font-size: 14px !important;
  font-weight: bold !important;
  color: #333 !important;
}

.ffb-speed-control input[type=range] {
  flex: 1 !important;
}

.ffb-speed-control span {
  font-size: 14px !important;
  font-weight: bold !important;
  color: #2196F3 !important;
  min-width: 45px !important;
  text-align: right !important;
}

/* ========== コート ========== */
.ffb-court {
  position: relative !important;
  flex: 1 !important;
  background: #4a9d5f !important;
  border: 4px solid white !important;
  overflow: hidden !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.ffb-court-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

/* ========== 選手マーカー ========== */
.ffb-court .player {
  position: absolute !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  line-height: 40px !important;
  text-align: center !important;
  color: white !important;
  font-weight: bold !important;
  font-size: 14px !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
  z-index: 10 !important;
  transition: transform 0.1s !important;
  box-sizing: border-box !important;
}

.ffb-court .player:hover {
  transform: scale(1.1) !important;
}

.ffb-court .player.dragging {
  cursor: grabbing !important;
  transform: scale(1.2) !important;
  z-index: 20 !important;
}

/* 攻撃側 */
.ffb-court .player.offense {
  background: linear-gradient(45deg, #FF6B6B, #FF8E53) !important;
  border: 3px solid #FF4757 !important;
}

/* 守備側 */
.ffb-court .player.defense {
  background: linear-gradient(45deg, #4ECDC4, #44A08D) !important;
  border: 3px solid #26C6DA !important;
}

/* ========== 情報ボックス ========== */
.ffb-info {
  font-size: 13px !important;
  color: #666 !important;
  padding: 10px !important;
  background: #e8f5e8 !important;
  border-radius: 5px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

.ffb-info strong {
  color: #2e7d32 !important;
}

.ffb-info small {
  font-size: 12px !important;
  line-height: 1.6 !important;
}

/* ========== 記録中インジケーター ========== */
.ffb-recording-indicator {
  color: #FF4757 !important;
  font-weight: bold !important;
  display: none !important;
  text-align: center !important;
  padding: 10px !important;
  background: #ffe6e6 !important;
  border-radius: 5px !important;
  margin: 0 !important;
  animation: ffb-pulse 1s infinite !important;
}

@keyframes ffb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ========== フレームメッセージ ========== */
.ffb-frame-message {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: white !important;
  padding: 20px 40px !important;
  border-radius: 10px !important;
  font-size: 18px !important;
  font-weight: bold !important;
  z-index: 10000 !important;
  display: none !important;
  text-align: center !important;
  pointer-events: none !important;
}

/* ========== 選手名編集モーダル ========== */
.ffb-name-edit-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,0.5) !important;
  display: none !important;
  z-index: 9999 !important;
  justify-content: center !important;
  align-items: center !important;
}

.ffb-name-edit-content {
  background: white !important;
  padding: 30px !important;
  border-radius: 10px !important;
  max-width: 500px !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

.ffb-name-edit-content h3 {
  margin: 0 0 20px 0 !important;
  text-align: center !important;
  color: #333 !important;
}

.ffb-name-edit-content h4 {
  margin: 20px 0 10px 0 !important;
  color: #333 !important;
}

.ffb-name-input-group {
  margin: 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.ffb-name-input-group label {
  min-width: 80px !important;
  font-weight: bold !important;
}

.ffb-name-input-group label.ffb-offense-label {
  color: #FF4757 !important;
}

.ffb-name-input-group label.ffb-defense-label {
  color: #26C6DA !important;
}

.ffb-name-input-group input {
  padding: 8px !important;
  border: 2px solid #ddd !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  flex: 1 !important;
  box-sizing: border-box !important;
}

/* ========== 進捗モーダル ========== */
.ffb-progress-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,0.7) !important;
  display: none !important;
  z-index: 10001 !important;
  justify-content: center !important;
  align-items: center !important;
}

.ffb-progress-content {
  background: white !important;
  padding: 30px !important;
  border-radius: 10px !important;
  text-align: center !important;
  min-width: 300px !important;
  box-sizing: border-box !important;
}

.ffb-progress-content h3 {
  margin: 0 0 20px 0 !important;
  color: #333 !important;
}

.ffb-progress-bar {
  width: 100% !important;
  height: 30px !important;
  background: #e0e0e0 !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  margin-bottom: 15px !important;
}

.ffb-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #4CAF50, #8BC34A) !important;
  width: 0% !important;
  transition: width 0.3s !important;
}

.ffb-progress-content p {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #4CAF50 !important;
  margin: 0 !important;
}

/* ========== レスポンシブ対応 ========== */
@media (max-width: 768px) {
  .ffb-wrapper {
    flex-direction: column !important;
    height: auto !important;
    min-height: 600px !important;
  }
  
  .ffb-controls {
    width: 100% !important;
    max-height: 300px !important;
    border-right: none !important;
    border-bottom: 3px solid #333 !important;
  }
  
  .ffb-court {
    min-height: 400px !important;
  }
}