/* ========================================
   🎨 最適化ボタンスタイル - optimal-buttons.css
   最高のUI/UX体験のための色彩設計
   ======================================== */

/* ===== カラーパレット定義 ===== */
:root {
  /* Primary Action Colors - メイン操作（参加、設定変更など） */
  --btn-primary-bg: #4f46e5; /* Indigo 600 - 信頼感のある青紫 */
  --btn-primary-hover: #3730a3; /* Indigo 800 */
  --btn-primary-text: #ffffff;

  /* Success Colors - 作成・成功系アクション */
  --btn-success-bg: #059669; /* Emerald 600 - 成功・作成 */
  --btn-success-hover: #047857; /* Emerald 700 */
  --btn-success-text: #ffffff;

  /* Warning Colors - 重要・決定系アクション */
  --btn-warning-bg: #f59e0b; /* Amber 500 - 注意喚起の黄色 */
  --btn-warning-hover: #d97706; /* Amber 600 */
  --btn-warning-text: #1f2937; /* 濃いグレー - 見やすさ重視 */

  /* Danger Colors - 削除・危険系アクション */
  --btn-danger-bg: #dc2626; /* Red 600 - 明確な危険色 */
  --btn-danger-hover: #b91c1c; /* Red 700 */
  --btn-danger-text: #ffffff;

  /* Secondary Colors - サブアクション（キャンセル、戻るなど） */
  --btn-secondary-bg: #6b7280; /* Gray 500 - 中立的 */
  --btn-secondary-hover: #4b5563; /* Gray 600 */
  --btn-secondary-text: #ffffff;

  /* Neutral Colors - UI操作（トグル、表示切替など） */
  --btn-neutral-bg: #f3f4f6; /* Gray 100 - 軽い操作感 */
  --btn-neutral-hover: #e5e7eb; /* Gray 200 */
  --btn-neutral-text: #374151; /* Gray 700 */
  --btn-neutral-border: #d1d5db; /* Gray 300 */

  /* Game Action Colors - ゲーム内アクション */
  --btn-game-primary: #7c3aed; /* Violet 600 - ゲーム感 */
  --btn-game-primary-hover: #5b21b6; /* Violet 700 */
  --btn-game-secondary: #06b6d4; /* Cyan 500 - 爽やか */
  --btn-game-secondary-hover: #0891b2; /* Cyan 600 */
}

/* ===== ダークモード用カラー ===== */
@media (prefers-color-scheme: dark) {
  :root {
    /* ダークモードでは明度を上げてコントラストを確保 */
    --btn-primary-bg: #6366f1; /* Indigo 500 */
    --btn-primary-hover: #8b5cf6; /* Violet 500 */

    --btn-success-bg: #10b981; /* Emerald 500 */
    --btn-success-hover: #34d399; /* Emerald 400 */

    --btn-warning-bg: #fbbf24; /* Amber 400 */
    --btn-warning-hover: #fcd34d; /* Amber 300 */
    --btn-warning-text: #111827; /* Gray 900 */

    --btn-danger-bg: #ef4444; /* Red 500 */
    --btn-danger-hover: #f87171; /* Red 400 */

    --btn-secondary-bg: #9ca3af; /* Gray 400 */
    --btn-secondary-hover: #d1d5db; /* Gray 300 */
    --btn-secondary-text: #111827; /* Gray 900 */

    --btn-neutral-bg: #374151; /* Gray 700 */
    --btn-neutral-hover: #4b5563; /* Gray 600 */
    --btn-neutral-text: #f9fafb; /* Gray 50 */
    --btn-neutral-border: #6b7280; /* Gray 500 */

    --btn-game-primary: #8b5cf6; /* Violet 500 */
    --btn-game-primary-hover: #a78bfa; /* Violet 400 */
    --btn-game-secondary: #22d3ee; /* Cyan 400 */
    --btn-game-secondary-hover: #67e8f9; /* Cyan 300 */
  }
}

/* ===== 基本ボタンスタイル再定義 ===== */
.btn {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border: none !important;
  padding: 10px 15px;
  cursor: pointer;
  margin-top: 5px;
  border-radius: 8px; /* より現代的な角丸 */
  width: 100%;
  font-size: 16px;
  font-weight: 600; /* より強い文字 */
  transition: all 0.2s ease; /* 高速なレスポンス */
  display: inline-block;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover {
  background: var(--btn-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn:disabled {
  background: #9ca3af !important;
  color: #6b7280 !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.6;
}

/* ===== 特定用途ボタン ===== */

/* 成功・作成系ボタン */
.btn-success,
.btn[onclick*="createTable"],
.btn[onclick*="joinTable"] {
  background: var(--btn-success-bg) !important;
  color: var(--btn-success-text) !important;
}

.btn-success:hover,
.btn[onclick*="createTable"]:hover,
.btn[onclick*="joinTable"]:hover {
  background: var(--btn-success-hover) !important;
}

/* 重要・決定系ボタン */
.btn-primary,
.btn-warning,
#useCardBtn,
#endTurnBtn {
  background: var(--btn-warning-bg) !important;
  color: var(--btn-warning-text) !important;
  font-weight: 700;
}

.btn-primary:hover,
.btn-warning:hover,
#useCardBtn:hover:not(:disabled),
#endTurnBtn:hover:not(:disabled) {
  background: var(--btn-warning-hover) !important;
}

/* 危険・削除系ボタン */
.btn-danger,
.kick-btn {
  background: var(--btn-danger-bg) !important;
  color: var(--btn-danger-text) !important;
}

.btn-danger:hover,
.kick-btn:hover {
  background: var(--btn-danger-hover) !important;
}

/* セカンダリボタン */
.btn-secondary {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
  border: 1px solid var(--btn-secondary-bg) !important;
}

.btn-secondary:hover {
  background: var(--btn-secondary-hover) !important;
}

/* フローティングボタン（手札上のボタン） */
.floating-btn,
.toggle-btn {
  background: var(--btn-neutral-bg) !important;
  color: var(--btn-neutral-text) !important;
  border: 1px solid var(--btn-neutral-border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.floating-btn:hover,
.toggle-btn:hover {
  background: var(--btn-neutral-hover) !important;
  border-color: var(--btn-neutral-border) !important;
}

/* ゲーム専用アクションボタン */
.btn-game-primary {
  background: var(--btn-game-primary) !important;
  color: #ffffff !important;
}

.btn-game-primary:hover {
  background: var(--btn-game-primary-hover) !important;
}

.btn-game-secondary {
  background: var(--btn-game-secondary) !important;
  color: #ffffff !important;
}

.btn-game-secondary:hover {
  background: var(--btn-game-secondary-hover) !important;
}

/* 小さいボタン */
.btn-small {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
}

/* 特殊フォーカス状態 */
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.4);
}

.btn-danger:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.4);
}

.btn-success:focus {
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.4);
}

/* ===== 送信ボタン（チャット等）===== */
.btn[onclick*="sendChat"],
.btn[type="submit"] {
  background: var(--btn-game-secondary) !important;
  color: #ffffff !important;
  font-weight: 600;
}

.btn[onclick*="sendChat"]:hover,
.btn[type="submit"]:hover {
  background: var(--btn-game-secondary-hover) !important;
}

/* ===== ドローカードボタン ===== */
.deck,
.btn[onclick*="drawCard"] {
  background: var(--btn-game-primary) !important;
  color: #ffffff !important;
  border: 2px solid var(--btn-game-primary) !important;
}

.deck:hover,
.btn[onclick*="drawCard"]:hover {
  background: var(--btn-game-primary-hover) !important;
  border-color: var(--btn-game-primary-hover) !important;
}

/* ===== Pulse animation for ready buttons ===== */
.pulse-animation {
  animation: buttonPulse 1.5s ease-in-out infinite;
}

@keyframes buttonPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

/* ===== ノートPC向けレスポンシブ対応（1024px - 1599px）===== */
@media (max-width: 1599px) and (min-width: 1024px) {
  .btn {
    padding: 7px 10px;
    font-size: 12px;
    margin-top: 4px;
    border-radius: 6px;
  }

  .btn-small {
    padding: 4px 8px;
    font-size: 10px;
  }
}

/* ===== 小型ノートPC/タブレット向け（769px - 1023px）===== */
@media (max-width: 1023px) and (min-width: 769px) {
  .btn {
    padding: 6px 8px;
    font-size: 11px;
    margin-top: 3px;
    border-radius: 5px;
  }

  .btn-small {
    padding: 3px 6px;
    font-size: 9px;
  }
}

/* ===== レスポンシブ対応（768px以下） ===== */
@media (max-width: 768px) {
  .btn {
    padding: 8px 12px;
    font-size: 14px;
  }

  .btn-small {
    padding: 4px 8px;
    font-size: 12px;
  }
}

/* ===== アクセシビリティ強化 ===== */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before {
    transition: none !important;
  }
}

/* ===== 高コントラストモード ===== */
@media (prefers-contrast: high) {
  .btn {
    border: 2px solid currentColor !important;
    font-weight: 700 !important;
  }
}