/* kumite.css (Visual Impact Boost Version) */

/* ■■ テーマ変数 ■■ */
:root {
  --kumite-bg: #111;
  --kumite-switch-bg: #000;
  --kumite-switch-border: #333;
  --kumite-text-muted: #777;
  --kumite-card-bg: #222;
  --kumite-result-text: #fff;
  --text-highlight: #4a90e2; 
  --text-main: #eee;
  --border-color: #444;
  
  /* KUMITE専用カラー定義（発光レッド） */
  --kumite-red-core: #ff1744;
  --kumite-red-glow: rgba(255, 23, 68, 0.6);
}

[data-theme="light"] {
  --kumite-bg: #f5f5f7;
  --kumite-switch-bg: #fff;
  --kumite-switch-border: #ddd;
  --kumite-text-muted: #666;
  --kumite-card-bg: #fff;
  --kumite-result-text: #333;
  --text-highlight: #0369a1;
  --text-main: #333;
  --border-color: #ddd;
}

/* ■■ 共通設定・非表示制御 ■■ */
#kumite-screen:not(.active),
#kumite-result-screen:not(.active) {
  display: none !important;
}

.kumite-overlay[hidden] {
  display: none !important;
}

/* ■■ モード選択スイッチ (Impact Boost) ■■ */
.mode-switch-wrapper {
  margin: 10px auto 20px auto;
  text-align: center;
  width: 100%;
  max-width: 320px;
}

.mode-switch-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--kumite-text-muted);
  margin-bottom: 5px;
  text-transform: uppercase;
}

/* コンテナ: はみ出し許可を徹底 */
.mode-switch-container {
  display: flex;
  background: var(--kumite-switch-bg);
  border: 1px solid var(--kumite-switch-border);
  border-radius: 30px;
  padding: 4px;
  position: relative;
  overflow: visible !important; /* パルスを外に見せる絶対条件 */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
  z-index: 10;
}

.mode-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--kumite-text-muted);
  padding: 10px 0;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 25px;
  transition: all 0.2s ease-out; /* 反応を少しキビキビさせる */
  position: relative;
  z-index: 2;
  font-family: inherit;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* --- NORMALボタン (Active) --- */
.mode-btn.mode-normal.active {
  background: #32BAE7;
  color: #fff;
  box-shadow: 0 2px 10px rgba(50, 186, 231, 0.4);
  transform: scale(1.0);
}

/* --- KUMITEボタン (Active) : 演出強化 --- */
.mode-btn.mode-kumite.active {
  background: var(--kumite-red-core) !important; /* 強制適用 */
  color: #fff !important;
  
  /* 影を多重にして「発光」感を出す */
  box-shadow: 
    0 0 10px var(--kumite-red-core), 
    0 4px 20px var(--kumite-red-glow) !important;
    
  /* 文字自体も光らせる */
  text-shadow: 0 0 5px rgba(255,255,255,0.8);
  
  /* 鼓動アニメーション */
  animation: kumite-pulse-hard 1.5s infinite cubic-bezier(0.66, 0, 0, 1) !important;
  
  /* わずかに大きくして存在感を出す */
  transform: scale(1.05);
  z-index: 20; /* 前面に出す */
}

/* より激しい鼓動アニメーション */
@keyframes kumite-pulse-hard {
  0% {
    box-shadow: 0 0 0 0 var(--kumite-red-glow);
  }
  70% {
    /* 広がりながら透明になる */
    box-shadow: 0 0 0 15px rgba(255, 23, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 23, 68, 0);
  }
}

/* 説明文の切り替え */
.mode-description {
  margin-top: 18px; /* パルスと重ならないよう余白拡大 */
  font-size: 11px;
  color: var(--kumite-text-muted);
  min-height: 1.5em;
  transition: color 0.3s;
  font-weight: 500;
}
.mode-description.highlight-k { 
  color: var(--kumite-red-core);
  text-shadow: 0 0 8px rgba(255, 23, 68, 0.3); /* 文字も少し光らせる */
}
.mode-description.highlight-n { color: #32BAE7; }


/* ■■ ローディング画面 ■■ */
.kumite-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: #000; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: sans-serif;
}
.kumite-loader-content { text-align: center; width: 80%; max-width: 400px; }
.glitch-text { font-size: 2rem; font-weight: 900; letter-spacing: 2px; color: #0ff; margin-bottom: 20px; }
.kumite-progress-bar {
  height: 4px; background: #333; width: 100%; border-radius: 2px; overflow: hidden; margin-bottom: 10px;
}
.kumite-progress-fill {
  height: 100%; width: 0%; background: #0ff; transition: width 0.2s;
  box-shadow: 0 0 10px #0ff;
}
.blink-text { font-size: 0.9rem; color: #888; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }


/* ■■ KUMITE 戦闘画面 ■■ */
#kumite-screen {
  background: var(--kumite-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px; 
  margin: 0 auto; 
  min-height: 100vh;
  padding: 0 16px; 
  box-sizing: border-box;
}

.kumite-hud {
  width: 100%; 
  padding: 5px 16px; 
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: 5px;
}

.kumite-timer-bar {
  width: 100%; height: 8px; background: #333; border-radius: 4px; overflow: hidden;
}
#kumite-timer-fill {
  width: 100%; height: 100%; background: linear-gradient(90deg, #00e676, #ffea00, #ff1744);
  transform-origin: left; transition: transform 0.1s linear;
}

.kumite-score-board {
  display: flex; justify-content: space-between; align-items: flex-end;
  color: var(--kumite-result-text);
  font-weight: bold; font-size: 1.2rem;
}
[data-theme="dark"] .kumite-score-board { color: #fff; }

#kumite-combo {
  color: #ffea00; font-style: italic; font-size: 1.5rem; text-shadow: 0 0 5px #ffea00;
  transform: scale(1); transition: transform 0.1s;
}
#kumite-combo.pop { transform: scale(1.5); }
.hidden { opacity: 0; }

/* 動画エリア (高さ40vh制限) */
.kumite-stage {
  position: relative;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 40vh;
  aspect-ratio: 16/9;
  background: #000; 
  margin: 0 auto 10px auto;
  border-radius: 8px; 
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
#kumite-video { width: 100%; height: 100%; object-fit: contain; }

.feedback-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; display: flex; align-items: center; justify-content: center;
  font-size: 5rem; font-weight: 900; text-shadow: 0 0 20px rgba(0,0,0,0.8);
  opacity: 0; transition: opacity 0.2s;
}
.feedback-overlay.correct { color: #00e676; content: "O"; background: rgba(0,230,118, 0.2); }
.feedback-overlay.incorrect { color: #ff1744; content: "X"; background: rgba(255,23,68, 0.2); }

/* コントロールボタン群 */
.kumite-controls {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  width: 100%; 
  padding: 0; 
  box-sizing: border-box;
}
.kumite-btn {
  padding: 8px 4px; 
  font-size: 0.95rem;
  background: var(--kumite-card-bg);
  color: var(--kumite-text-muted);
  border: 1px solid var(--kumite-switch-border);
  border-radius: 6px; cursor: pointer;
  touch-action: manipulation;
  font-weight: bold;
  display: flex; align-items: center; justify-content: center;
}
.kumite-btn:active { background: #999; color: #fff; }
[data-theme="dark"] .kumite-btn { background: #333; color: #fff; border-color: #555; }


/* ■■ リザルト画面 ■■ */
#kumite-result-screen {
  width: 100%;
  max-width: 600px; 
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
}

.kumite-result-header {
  text-align: center;
  margin-bottom: 24px;
  width: 100%;
}
.kumite-result-header h3 {
  color: var(--kumite-result-text);
  margin-bottom: 4px; opacity: 0.7; font-size: 1rem;
}
.kumite-result-header h1 {
  color: var(--kumite-result-text); font-size: 3rem; margin: 0; line-height: 1;
}

.kumite-summary-box {
  display: flex; justify-content: center; gap: 24px;
  margin-top: 16px; padding: 12px;
  background: rgba(128, 128, 128, 0.1);
  border-radius: 12px;
  border: 1px solid var(--kumite-switch-border);
}
.kumite-summary-box div { text-align: center; line-height: 1.2; }
.kumite-summary-box div small {
  font-size: 0.75rem; text-transform: uppercase; color: var(--kumite-text-muted); font-weight: 700;
}
.kumite-summary-box div span {
  display: block; font-size: 1.4rem; font-weight: 900; color: var(--kumite-result-text); margin-top: 2px;
}

.kumite-analysis-msg {
  margin: 20px auto; width: 100%; text-align: left;
  background: rgba(128, 128, 128, 0.05);
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid var(--kumite-result-text);
  box-sizing: border-box;
}
.kumite-analysis-msg p {
  margin: 0; font-size: 1rem; color: var(--kumite-result-text); line-height: 1.5; font-weight: bold;
}
.kumite-analysis-msg p.sub {
  margin-top: 8px; font-size: 0.85rem; color: var(--kumite-text-muted); font-weight: normal;
}

/* グリッドレイアウト */
#kumite-grid, .kumite-grid {
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  width: 100%;
  margin: 0 auto 30px auto;
  padding: 0; 
  box-sizing: border-box;
  counter-reset: kumite-counter;
  justify-content: center;
}

.kumite-card {
  position: relative; aspect-ratio: 16/9;
  background: #000; border-radius: 8px; overflow: hidden;
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
  border: 2px solid transparent;
  counter-increment: kumite-counter;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.kumite-card:hover { transform: scale(1.02); z-index: 5; }
.kumite-card:active { transform: scale(0.98); }
.kumite-card img {
  width: 100%; height: 100%; object-fit: cover; filter: none; transition: filter 0.3s;
}
.kumite-card::before {
  content: counter(kumite-counter);
  position: absolute; top: 0; left: 0;
  background: rgba(0, 0, 0, 0.7); color: #fff;
  font-size: 12px; font-weight: bold; padding: 4px 10px;
  border-bottom-right-radius: 8px; z-index: 5;
  font-family: sans-serif; backdrop-filter: blur(2px);
}
.kumite-card.is-win { border-color: #00e676; box-shadow: 0 0 10px rgba(0, 230, 118, 0.2); }
.kumite-card.is-win::before { color: #00e676; }
.kumite-card.is-lose { border-color: #ff1744; }
.kumite-card.is-lose::before { color: #ff1744; }

.kumite-card-badge {
  position: absolute; bottom: 5px; right: 5px;
  padding: 2px 8px; font-size: 10px; font-weight: 900;
  text-transform: uppercase; border-radius: 4px; z-index: 5; letter-spacing: 1px;
}
.kumite-card.is-win .kumite-card-badge { background: #00e676; color: #000; box-shadow: 0 0 5px #00e676; }
.kumite-card.is-lose .kumite-card-badge { background: #ff1744; color: #fff; box-shadow: 0 0 5px #ff1744; }

/* ■■ モーダル用 Rich UI ■■ */
.vm-command-box {
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 16px; border-radius: 4px;
  font-size: 1.2rem; font-weight: bold;
  color: var(--text-highlight, #4a90e2);
  display: inline-block; margin-bottom: 12px;
  letter-spacing: 1px; border: 1px solid rgba(255, 255, 255, 0.1);
}
.vm-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px; padding: 10px; margin-bottom: 20px;
}
.vm-stat-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.vm-stat-label {
  font-size: 0.75rem; color: #aaa; margin-bottom: 4px; text-transform: uppercase;
}
.vm-stat-value {
  font-size: 1.2rem; font-weight: 900; color: #fff;
}
.vm-btn-group {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%;
}
.vm-btn {
  border: none; padding: 14px 0; border-radius: 30px;
  font-weight: 900; font-size: 1rem; cursor: pointer;
  transition: transform 0.1s, opacity 0.2s; width: 100%;
  color: #fff; text-transform: uppercase; letter-spacing: 0.5px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.vm-btn:active { transform: scale(0.96); box-shadow: 0 2px 3px rgba(0,0,0,0.3); }
.vm-btn-add { background: linear-gradient(135deg, #32BAE7 0%, #0369a1 100%); }
.vm-btn-close { background: #555; }