/* 優化後的 CSS 文件 - 中國撲克遊戲 */

/* ===== 全局變量定義 ===== */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --danger-color: #e74c3c;
  --dark-color: #2c3e50;
  --light-color: #ecf0f1;
  --gray-color: #95a5a6;
  --card-color: #fff;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --success-color: #27ae60;
  --submitted-card-border: 2px solid var(--success-color);
  --lightest-color: #cfd9db;
  --light-gray-color: #b4bbbe;
  --ai-enabled-color: #27ae60;
  --ai-disabled-color: #e74c3c;
}

/* ===== 重置樣式 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== 基礎元素樣式 ===== */
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: var(--dark-color);
  background-color: var(--light-color);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* ===== 頭部樣式 ===== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-color);
  margin-bottom: 30px;
}

header h1 {
  color: var(--primary-color);
}

#user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

#username {
  font-weight: bold;
}

/* ===== 通用按鈕樣式 ===== */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.btn.primary {
  background-color: var(--primary-color);
  color: white;
}

.btn.danger {
  background-color: var(--danger-color);
  color: white;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* ===== 表單樣式 ===== */
.auth-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-color);
  border-radius: 4px;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-input:focus {
  border-color: #4a90e2;
  outline: none;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.error-message {
  color: var(--danger-color);
  margin-top: 10px;
  font-size: 14px;
}

.form-actions {
  display: flex;             /* 啟用彈性佈局 */
  justify-content: center;   /* 水平置中 */
  align-items: center;       /* 垂直置中 */
  flex-wrap: nowrap;         /* [關鍵] 強制不換行 */
  gap: 10px;                 /* 按鈕之間的間距 */
  margin-top: 20px;
  width: 100%;
}

/* 針對按鈕的優化 */
.form-actions button {
  white-space: nowrap;       /* [關鍵] 防止按鈕內的文字換行 */
  flex-shrink: 1;            /* 空間不足時允許按鈕稍微縮小 */
  margin: 0;                 /* 移除預設邊距，改用上面的 gap */
}

/* 如果是手機版，空間真的很小，可以稍微縮小字體 */
@media (max-width: 480px) {
  .form-actions button {
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* ===== 標籤頁樣式 ===== */
.tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--gray-color);
}

.tab-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--gray-color);
}

.tab-btn.active {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

/* ===== 遊戲大廳樣式 ===== */
.lobby-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.stats-container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 15px;
}

.stat-item {
  flex: 1;
  min-width: 120px;
}

.stat-label {
  font-weight: bold;
  margin-right: 5px;
}

/* ===== 遊戲列表樣式 ===== */
.game-list-container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin-top: 20px;
}

/* 分页样式 - 简约风格 */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding: 15px 0;
  border-top: 1px solid #eee;
  gap: 15px;
  flex-wrap: wrap;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.pagination-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #333;
  font-size: 14px;
}

.pagination-btn i {
  font-size: 11px;
}

.pagination-btn:hover:not(:disabled) {
  background: #f5f5f5;
  border-color: #ccc;
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: #999;
}

.pagination-info {
  color: #666;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

.page-size-selector label {
  color: #666;
  font-weight: normal;
}

.page-size-selector select {
  padding: 8px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  background: white;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  color: #333;
  min-width: 70px;
}

.page-size-selector select:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
}

.page-size-selector select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
}

.page-size-selector span {
  color: #666;
  font-weight: 500;
}

.game-list-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 15px;
}

.game-list-header h2 {
  margin: 0;
  color: var(--dark-color);
  font-size: 18px;
}

.game-list-refresh {
  background-color: transparent;
  border: none;
  color: var(--primary-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.game-list-refresh:hover {
  text-decoration: underline;
}

.no-games-message {
  text-align: center;
  padding: 30px;
  color: var(--gray-color);
  font-style: italic;
}

/* ===== 遊戲表格樣式 ===== */
.game-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.game-table thead {
  background-color: var(--primary-color);
  color: white;
}

.game-table th {
  padding: 12px 15px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}

.game-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.game-table tbody tr {
  background-color: white;
  transition: all 0.3s ease;
  animation: fadeIn 0.3s ease forwards;
}

.game-table tbody tr:hover {
  background-color: #f5f9ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.game-table tbody tr:last-child td {
  border-bottom: none;
}

.game-table tbody tr:nth-child(1) { animation-delay: 0.05s; }
.game-table tbody tr:nth-child(2) { animation-delay: 0.1s; }
.game-table tbody tr:nth-child(3) { animation-delay: 0.15s; }
.game-table tbody tr:nth-child(4) { animation-delay: 0.2s; }
.game-table tbody tr:nth-child(5) { animation-delay: 0.25s; }

.game-table .room-id {
  font-family: monospace;
  color: var(--gray-color);
  font-size: 12px;
}

.game-table .room-name {
  font-weight: 600;
  color: var(--dark-color);
  align-items: center;
}

.game-table .room-name .fa-lock {
  color: #ffa000;
  font-size: 14px;
}

.game-table .creator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-table .creator-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--light-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--dark-color);
  font-weight: bold;
}

.game-table .player-count {
  font-weight: 600;
  color: var(--primary-color);
}

.game-table .full-room {
  color: var(--danger-color);
}

/* 搜尋欄樣式 */
.search-row {
  background: #f8f9fa !important;
}

.search-row th {
  padding: 10px 12px !important;
  background: #f8f9fa !important;
  border-bottom: 2px solid #dee2e6;
}

.search-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  background: white;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.search-input::placeholder {
  color: #999;
  font-style: italic;
}

.search-select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  background: white;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.clear-search-btn {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  width: 100%;
}

.clear-search-btn:hover {
  background: #c82333;
  transform: scale(1.05);
}

.clear-search-btn i {
  font-size: 10px;
}

/* 隱藏不匹配的行 */
.game-table tbody tr.hidden {
  display: none;
}

/* 移動設備搜尋欄響應式設計 */
@media (max-width: 768px) {
  .search-input, .search-select {
    font-size: 11px;
    padding: 4px 6px;
  }
  
  .clear-search-btn {
    padding: 4px 6px;
    font-size: 11px;
  }
  
  .search-row th {
    padding: 8px 6px !important;
  }
  
  .search-input::placeholder {
    font-size: 10px;
  }
}

/* ===== 遊戲按鈕樣式 ===== */
.join-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: #4caf50;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
}

.join-btn:hover {
  background-color: #45a049;
}

.join-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.join-btn.continue-game {
  background-color: #2196F3;
}

.join-btn.continue-game:hover {
  background-color: #0b7dda;
}

.join-btn.submitted-game {
  background-color: black;
}

.join-btn.submitted-game:hover {
  background-color: rgb(35, 33, 33);
}

.join-btn.rejoin-game {
  background-color: #ff9800;
}

.join-btn.rejoin-game:hover {
  background-color: #e68a00;
}

/* ===== 斷線遊戲樣式 ===== */
.disconnected-game {
  background-color: rgba(255, 193, 7, 0.1);
  border-left: 3px solid #ff9800;
}

.disconnected-game:hover {
  background-color: rgba(255, 193, 7, 0.2);
}

.disconnect-icon, .unread-icon {
  margin-left: 5px;
  color: #ff9800;
  font-size: 16px;
  cursor: help;
}

/* ===== 工具類 ===== */
.hidden {
  display: none !important;
}

/* ===== 動畫效果 ===== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes card-swap {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.card-swapping {
  animation: card-swap 0.4s ease;
}

/* ===== 載入效果樣式 ===== */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 4px solid var(--primary-color);
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

.loading-message {
  color: white;
  margin-top: 15px;
  font-size: 16px;
  text-align: center;
  max-width: 80%;
}

.loading-overlay.hidden {
  display: none;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

/* ===== 遊戲房間樣式 ===== */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  min-width: 400px;
}

.game-content {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  gap: 20px;
}

.players-container, .game-board, .chat-container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

/* 確保遊戲板有足夠的最小寬度來容納手牌 */
.game-board {
  min-width: 360px;
}

.players-list {
  margin-bottom: 20px;
}

.player-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--light-color);
}

.player-item:last-child {
  border-bottom: none;
}

.player-name {
  font-weight: bold;
}

.player-name.disconnected {
  color: var(--danger-color);
  text-decoration: line-through;
}

.player-name.ai {
  color: var(--secondary-color);
  font-style: italic;
}

/* ===== 玩家狀態樣式 ===== */
.player-status {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.player-status.waiting {
  background-color: var(--gray-color);
  color: white;
}

.player-status.ready {
  background-color: var(--secondary-color);
  color: white;
}

.player-status.playing {
  background-color: var(--primary-color);
  color: white;
}

.player-status.submitted {
  background-color: var(--dark-color);
  color: white;
}

.player-status.exchanging {
  background-color: var(--primary-color);
  color: white;
}

.player-status.exchanged {
  background-color: var(--dark-color);
  color: white;
}

.player-status.disconnected {
  background-color: var(--danger-color);
  color: white;
}

.ready-controls {
  display: flex;
  gap: 10px;
}

.game-message {
  margin-bottom: 20px;
  padding: 10px;
  background-color: var(--light-color);
  border-radius: 4px;
  font-weight: bold;
}

/* ===== 卡牌樣式 ===== */
.my-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.card {
  width: 60px;
  height: 90px;
  background-color: var(--card-color);
  border: 1px solid var(--gray-color);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.card.selected {
  border: 2px solid var(--primary-color);
}

.card.hearts, .card.diamonds {
  color: red;
}

.card.clubs, .card.spades {
  color: black;
}

.card.exchange-selected {
  border: 2px solid #ffd700;
  transform: translateY(-10px);
}

.card.exchange-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.card.sort-selected {
  box-shadow: 0 0 0 3px #4CAF50, 0 0 10px rgba(0, 0, 0, 0.4);
  transform: translateY(-5px);
}

.submitted-card {
  border: var(--submitted-card-border);
  box-shadow: 0 0 5px var(--success-color);
  cursor: default !important;
  position: relative;
}

.submitted-card::after {
  content: '✓';
  position: absolute;
  top: 5px;
  right: 5px;
  color: var(--success-color);
  font-weight: bold;
  font-size: 14px;
}

/* ===== 手牌容器樣式 ===== */
.hands-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

.hand-section {
  border: 1px dashed var(--gray-color);
  padding: 10px;
  border-radius: 4px;
}

.hand-section h4 {
  margin-bottom: 10px;
}

.hand-cards {
  display: flex;
  gap: 10px;
  min-height: 100px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 5px 0;
  min-width: 340px; /* 確保能容納5張牌 (5*60px + 4*10px) */
}

.submit-container {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.special-submit-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}

.special-submit-buttons.hidden {
  display: none;
}

.special-submit-buttons .btn {
  background-color: #9C27B0;
  border-color: #9C27B0;
}

.special-submit-buttons .btn:hover {
  background-color: #7B1FA2;
  border-color: #7B1FA2;
}

.cards-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 20px;
}



.cards-header .color-option {
  margin-left: 10px;
}

/* ===== 排序模式樣式 ===== */
.sort-cards-btn {
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #4CAF50;
  color: white;
}

.sort-cards-btn.active {
  background-color: #E91E63;
}

/* ===== 換牌樣式 ===== */
.exchange-container {
  margin: 20px 0;
  padding: 15px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  width: 100%; /* 確保與父容器寬度一致 */
  box-sizing: border-box;
}

.exchange-container.hidden {
  display: none;
}

.exchange-cards {
  min-height: 120px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  min-width: 340px; /* 與手牌容器保持一致 */
  box-sizing: border-box;
}

.player.exchanging .status {
  color: #ffa500;
}

.player.exchanged .status {
  color: #32cd32;
}

.exchange-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.exchange-count {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #ff4444;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.exchange-settings {
  margin-top: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.exchange-settings.hidden {
  display: none;
}

.exchange-count-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.exchange-hint {
  color: #666;
  font-size: 0.9em;
}

#card-exchange-count {
  width: 80px;
  text-align: center;
}

/* ===== 聊天樣式 ===== */
.chat-messages {
  height: 400px;
  overflow-y: auto;
  margin-bottom: 15px;
  padding: 10px;
  background-color: var(--light-color);
  border-radius: 4px;
  overflow-x: hidden; /* 防止橫向滾動 */
}

.show-system-msg-checkbox, .show-all-rounds-checkbox {
  margin-bottom: 10px;
  font-size: 0.9em;
  color: var(--gray-color);
}

.show-system-msg-checkbox label, .show-all-rounds-checkbox label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.show-system-msg-checkbox input[type="checkbox"], .show-all-rounds-checkbox input[type="checkbox"] {
  margin-right: 5px;
}

.message-item {
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background-color: #f5f7f8;
  position: relative;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.message-item.system {
  background-color: #f8f9fa;
  color: var(--light-gray-color);
  font-size: 0.9em;
  text-align: center;
  font-style: italic;
  padding: 6px 10px;
}

.message-content {
  margin-bottom: 3px;
  position: relative;
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
  max-width: 100%;
}

.sender-name {
  font-weight: bold;
  color: var(--primary-color);
}

.message-time {
  font-size: 0.75em;
  color: var(--lightest-color);
  text-align: right;
  margin-top: 2px;
}

.chat-input {
  display: flex;
  gap: 10px;
}

.chat-input input {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--gray-color);
  border-radius: 4px;
}

.chat-input-container {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.chat-input-container #chat-input {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--gray-color);
  border-radius: 4px;
  resize: vertical;
  min-height: 36px;
  max-height: 100px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.chat-input-container #send-message-btn {
  align-self: flex-end;
  height: fit-content;
  padding: 8px 16px;
  white-space: nowrap;
}

/* ===== 回覆功能樣式 ===== */
.reply-container {
  margin-bottom: 8px;
  border-radius: 4px;
}

.reply-container.hidden {
  display: none;
}

.reply-preview {
  background-color: #e3f2fd;
  border: 1px solid #bbdefb;
  border-left: 3px solid var(--primary-color);
  border-radius: 4px;
  padding: 8px;
  font-size: 0.9em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reply-preview.hidden {
  display: none;
}

.reply-context {
  background-color: #f5f5f5;
  padding: 4px 8px;
  border-left: 2px solid #ccc;
  margin-bottom: 4px;
  font-size: 0.9em;
  color: #a3a2a2;
  border-radius: 3px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.reply-indicator {
  font-weight: bold;
  color: var(--primary-color);
}

.original-message {
  margin-left: 8px;
  font-style: italic;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.reply-btn {
  background: none;
  border: none;
  color: var(--primary-color);
  cursor: pointer;
  font-size: 0.8em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.message-item:hover .reply-btn {
  opacity: 1;
}

.reply-btn:hover {
  background-color: rgba(0, 123, 255, 0.1);
}

.cancel-reply-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cancel-reply-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #666;
}

.message-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
}

/* ===== 遊戲狀態標籤樣式 ===== */
.game-status-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 9px;
  font-size: 1em;
  margin-right: 3px;
  vertical-align: middle;
}

.round-tag, .status-submitted, .status-pending, .status-ready, .status-exchanging, .status-exchanged {
  color: var(--lightest-color);
}

.message-content .game-status-prefix {
  font-size: 1em;
}

/* ===== 表情符號反應樣式 ===== */
.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  align-items: center;
}

.reaction-wrapper {
  position: relative;
  display: inline-block;
}

.reaction-pill {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.reaction-pill:hover {
  background-color: #e9ecef;
  border-color: var(--primary-color);
}

.reaction-pill.user-reacted {
  background-color: rgba(0, 123, 255, 0.1);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.reaction-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
  margin-bottom: 5px;
  max-width: 200px;
  word-wrap: break-word;
  white-space: normal;
  text-align: center;
  word-break: normal !important; /* 重置為正常斷行 */
}

.reaction-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
}

.reaction-tooltip.show {
  opacity: 1;
  visibility: visible;
}

.emoji-quick-react {
  display: flex;
  gap: 4px;
  margin-right: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.message-item:hover .emoji-quick-react {
  opacity: 1;
}

.emoji-quick-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.emoji-quick-btn:hover {
  background-color: rgba(0, 123, 255, 0.1);
  border-color: var(--primary-color);
  transform: scale(1.1);
}

/* ===== 模態框樣式 ===== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal:not(.hidden) {
  display: flex;
}

.modal-content {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 90%;
  position: relative;
  animation: modalFadeIn 0.3s ease-out;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  color: #333;
  font-size: 1.5rem;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.modal-footer {
  padding: 15px;
  border-top: 1px solid #ddd;
  background: #fff;
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.close-modal-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.close-modal-btn:hover {
  color: #333;
}

/* ===== 複選框樣式 ===== */
.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-left: 30px;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 2px solid #ddd;
  border-radius: 4px;
  transition: all 0.2s;
}

.checkbox-container:hover input ~ .checkmark {
  border-color: #4a90e2;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: #4a90e2;
  border-color: #4a90e2;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* ===== 密碼輸入樣式 ===== */
.password-group {
  transition: all 0.3s ease;
}

.password-group.hidden {
  display: none;
  opacity: 0;
  height: 0;
  margin: 0;
}

.password-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.toggle-password-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.toggle-password-btn:hover {
  color: #333;
}

.password-hint {
  display: block;
  margin-top: 6px;
  color: #666;
  font-size: 12px;
}

.setting-hint {
  display: block;
  margin-top: 4px;
  color: #666;
  font-size: 11px;
  font-style: italic;
}

/* ===== 提示訊息樣式 ===== */
.message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 25px;
  border-radius: 4px;
  color: black;
  background-color: lightgreen;
  font-weight: 500;
  z-index: 9999;
  animation: slideIn 0.3s ease-out;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.message.success {
  color: white;
  background-color: #4caf50;
}

.message.error {
  color: white;
  background-color: #f44336;
}

.message.info {
  color: white;
  background-color: #2196f3;
}

/* ===== 結果和歷史表格樣式 ===== */
.results-container {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.results-container.hidden {
  display: none;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.result-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.player-rank {
  font-weight: bold;
  font-size: 1.2em;
  margin-right: 10px;
  min-width: 30px;
}

.player-score {
  font-weight: bold;
  color: #007bff;
  margin-left: 10px;
  display: flex;
  align-items: center;
}

.player-hands-container {
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.hands-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.hand-display {
  margin: 5px 0;
  font-size: 0.9em;
}

.hand-title {
  font-weight: bold;
  margin-right: 5px;
}

.hand-cards-display {
  font-family: monospace;
  letter-spacing: 1px;
}

.hand-cards-display .hearts, 
.hand-cards-display .diamonds {
  color: red;
}

.hand-cards-display .spades, 
.hand-cards-display .clubs {
  color: black;
}

/* ===== 遊戲歷史記錄樣式 ===== */
.game-history-container {
  margin: 20px auto;
  max-width: 95%;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  clear: both;
}

.game-history-container h3 {
  text-align: center;
  margin-bottom: 15px;
  color: #333;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
}

/* 桌面版歷史表格跨越整個寬度 */
@media (min-width: 993px) {
  .game-history-container {
    grid-column: 1 / -1; /* 跨越所有列 */
    max-width: 100%;
    margin: 20px 0;
  }
  
  .history-table {
    font-size: 15px; /* 桌面版使用較大字體 */
  }
  
  .history-table th, .history-table td {
    padding: 12px 10px; /* 桌面版增加內邊距 */
  }
}

/* 添加歷史表格滾動容器 */
.history-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  position: relative;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-width: 400px;
}

.history-table th, .history-table td {
  padding: 8px;
  text-align: center;
  border: 1px solid #ddd;
  position: relative;
}

.history-table th {
  background-color: #f0f0f0;
  font-weight: bold;
  position: sticky;
  top: 0;
}

.history-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.history-table tr:hover {
  background-color: #f1f1f1;
}

.total-score-row {
  background-color: #e9ecef !important;
  font-weight: bold;
}

.history-table .total-score-row td {
  border-top: 2px solid #ccc;
  font-size: 15px;
  font-weight: bold;
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  position: relative;
}

.history-table .total-score-row td:hover {
  background-color: #e9ecef;
}

.history-table .positive-score, .positive-score {
  color: var(--success-color);
  font-weight: bold;
}

.history-table .negative-score, .negative-score {
  color: var(--danger-color);
  font-weight: bold;
}

.zero-score {
  color: #7f8c8d;
}

/* ===== 分數詳情樣式 ===== */
.history-table td.has-details {
  cursor: pointer;
  position: relative;
}

.history-table td.has-details:hover {
  background-color: #e8f4f8;
}

/* ===== 比分詳情容器和表格樣式 ===== */
.score-details-container {
  margin: 20px 0;
  padding: 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.score-details-title {
  margin-bottom: 15px;
  color: var(--primary-color);
  font-size: 18px;
  text-align: center;
}

.score-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.score-details-table th,
.score-details-table td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: center;
}

.score-details-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.score-details-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.score-details-table tr:hover {
  background-color: #f5f5f5;
}

.player-name-cell {
  font-weight: bold;
  background-color: #f2f2f2;
}

.same-player-cell {
  background-color: #eee;
}

.score-cell {
  padding: 4px !important;
  font-weight: bold;
  font-size: 14px;
}

/* ===== 分數格式顯示樣式 ===== */
.score-format {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  padding: 5px;
  border-radius: 4px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.win-result .score-format {
  background-color: rgba(46, 204, 113, 0.15);
}

.lose-result .score-format {
  background-color: rgba(231, 76, 60, 0.15);
}

.neutral-result .score-format {
  background-color: rgba(149, 165, 166, 0.15);
}

.deck-indicators {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 3px;
}

.win-indicator {
  color: #27ae60;
  font-size: 13px;
}

.lose-indicator {
  color: #e74c3c;
  font-size: 13px;
}

.tie-indicator {
  color: #95a5a6;
  font-size: 13px;
}

.special-bonus-indicator {
  font-size: 13px;
  margin-left: 3px;
}

.special-bonus-indicator.positive {
  color: #f39c12;
}

.special-bonus-indicator.negative {
  color: #9b59b6;
}

.win-result {
  background-color: rgba(46, 204, 113, 0.1);
  color: #27ae60;
}

.lose-result {
  background-color: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
}

.neutral-result {
  background-color: rgba(149, 165, 166, 0.1);
  color: #7f8c8d;
}

.no-data-cell {
  color: #999;
  font-style: italic;
  background-color: #f9f9f9;
  padding: 10px !important;
}

.no-data-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.no-data-icon {
  color: #f1c40f;
  font-size: 18px;
  margin-bottom: 3px;
}

.win-deck {
  color: #27ae60;
  font-weight: bold;
}

.lose-deck {
  color: #e74c3c;
  font-weight: bold;
}

.tie-deck {
  color: #7f8c8d;
}

.total-vs-result {
  margin-top: 5px;
  font-weight: bold;
  border-top: 1px dashed #ddd;
  padding-top: 3px;
}

.total-score-cell {
  font-weight: bold;
  font-size: 16px;
}

.special-bonus {
  color: #ff5722;
  font-weight: bold;
  margin-left: 5px;
}

.special-bonus.positive {
  color: #4caf50;
}

.special-bonus.negative {
  color: #f44336;
}

.score-details {
  font-size: 0.9em;
  color: #666;
  margin-left: 5px;
}

.score-details-popup {
  display: none;
  position: absolute;
  z-index: 1000;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  min-width: 280px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: 5px;
  text-align: left;
}

.details-popup {
  display: none;
  position: absolute;
  z-index: 1000;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  min-width: 180px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: 5px;
  text-align: left;
}

.hands-info {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.deck-info {
  margin: 5px 0;
  line-height: 1.4;
}

.deck-info strong {
  color: #2c3e50;
  margin-right: 8px;
}

.comparisons-info {
  max-height: 200px;
  overflow-y: auto;
}

.comparison-detail {
  padding: 8px;
  margin: 5px 0;
  background-color: #f8f9fa;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
}

.comparison-detail strong {
  color: #2c3e50;
  display: block;
  margin-bottom: 4px;
}

.has-details::after {
  content: '👁';
  font-size: 12px;
  margin-left: 4px;
  opacity: 0.5;
}

.has-details:hover::after {
  opacity: 1;
}

/* ===== 眼睛圖標和圖表樣式 ===== */
.eye-icon {
  margin-left: 8px;
  cursor: pointer;
  font-size: 16px;
  color: #007bff;
  transition: color 0.3s ease;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.eye-icon:hover {
  color: #0056b3;
  transform: scale(1.1);
  opacity: 1;
}

.has-chart-icon {
  position: relative;
}

.has-chart-icon:hover .eye-icon {
  animation: pulse 1s infinite;
}

/* ===== 可點擊的局數單元格樣式 ===== */
.round-cell-clickable {
  cursor: pointer !important;
  color: #000000 !important;
  /* font-weight: bold !important;
  text-decoration: underline !important;
  text-decoration-style: dotted !important;
  transition: all 0.3s ease !important; */
  position: relative;
}

.round-cell-clickable:hover {
  background-color: #e8f4f8 !important;
  transform: scale(1.05) !important;
  color: #0056b3 !important;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2) !important;
}

/* .round-cell-clickable::after {
  content: " 👁";
  font-size: 12px;
  opacity: 0.7;
  margin-left: 4px;
} */

.round-cell-clickable:hover::after {
  opacity: 1;
}

.score-chart-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.score-chart-container {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 90%;
  max-height: 90%;
  width: 900px;
  height: 600px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.score-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.score-chart-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color: #333;
}

.close-chart-btn {
  background: #f44336;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.close-chart-btn:hover {
  background: #d32f2f;
}

.score-chart-canvas {
  width: 100%;
  height: 400px;
}

/* ===== 積分排行榜樣式 ===== */
.leaderboard-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.leaderboard-header {
  display: flex;
  background-color: var(--primary-color);
  color: white;
  padding: 12px;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
}

.leaderboard-header .rank-column {
  width: 60px;
  text-align: center;
}

.leaderboard-header .player-column {
  flex: 1;
  text-align: left;
  padding-left: 10px;
}

.leaderboard-header .points-column {
  width: 80px;
  text-align: center;
}

.leaderboard-list {
  background-color: white;
  border: 1px solid var(--gray-color);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 400px;
  overflow-y: auto;
}

.leaderboard-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.leaderboard-item:hover {
  background-color: #f8f9fa;
}

.leaderboard-item:last-child {
  border-bottom: none;
}

.leaderboard-item.current-user {
  background-color: #e3f2fd;
  font-weight: bold;
}

.leaderboard-item.current-user:hover {
  background-color: #bbdefb;
}

.leaderboard-rank {
  width: 60px;
  text-align: center;
  font-weight: bold;
  color: var(--primary-color);
}

.leaderboard-rank.top-3 {
  font-size: 18px;
}

.leaderboard-rank.rank-1 {
  color: #ffd700; /* 金色 */
}

.leaderboard-rank.rank-2 {
  color: #c0c0c0; /* 銀色 */
}

.leaderboard-rank.rank-3 {
  color: #cd7f32; /* 銅色 */
}

.leaderboard-player {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.leaderboard-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: var(--gray-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.leaderboard-username {
  flex: 1;
  font-size: 16px;
}

.leaderboard-points {
  width: 80px;
  text-align: center;
  font-weight: bold;
  color: var(--success-color);
}

.leaderboard-loading, .leaderboard-error, .leaderboard-empty {
  text-align: center;
  padding: 20px;
}

.leaderboard-loading {
  color: var(--gray-color);
}

.leaderboard-error {
  color: var(--danger-color);
}

.leaderboard-empty {
  color: var(--gray-color);
}

/* ===== 其他遊戲元素樣式 ===== */
.deck-selector {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
  gap: 10px;
}

/* 手機版按鈕選擇器優化 */
@media (max-width: 768px) {
  .deck-selector {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
  }
}

.deck-btn {
  padding: 8px 15px;
  border-radius: 4px;
  font-size: 14px;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  cursor: pointer;
  /* 桌面版保持橫式文字 */
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.deck-btn:hover {
  background-color: #dee2e6;
}

.selected-deck {
  border: 3px solid #007bff !important;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

#player-status {
  font-weight: bold;
  margin: 10px 0;
}

#player-status.text-success {
  color: var(--success-color);
}

.reset-game-btn {
  display: block;
  margin: 20px auto;
  padding: 12px 24px;
  font-size: 18px;
  font-weight: bold;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.reset-game-btn:hover {
  background-color: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.reset-game-btn:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ===== AI計分設置樣式 ===== */
.ai-score-enabled, .ai-score-disabled {
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 5px;
  font-size: 0.9em;
}

.ai-score-enabled {
  background-color: var(--ai-enabled-color);
  color: white;
}

.ai-score-disabled {
  background-color: var(--ai-disabled-color);
  color: white;
}

/* ===== 分數設置樣式 ===== */
.score-settings {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.setting-item {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.setting-item input[type="number"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.setting-item label {
  font-size: 14px;
  color: #666;
}

/* ===== 頁腳樣式 ===== */
footer {
  text-align: center;
  margin-top: 50px;
  padding: 20px 0;
  border-top: 1px solid var(--gray-color);
  color: var(--gray-color);
}

.version-number {
  display: inline-block;
  margin-right: 10px;
  font-size: 0.9em;
  color: var(--gray-color);
  opacity: 0.8;
}

/* ===== 規則摺疊樣式 ===== */
.game-rules {
  padding: 0px;
  background-color: #f5f5f5;
  border-radius: 8px;
  margin: 10px 0;
}

.rule-section {
  margin-bottom: 15px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.rule-header {
  padding: 12px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #333;
  transition: background-color 0.3s;
}

.rule-header:hover {
  background-color: #f0f0f0;
}

.rule-header i {
  margin-right: 10px;
  transition: transform 0.3s ease;
}

.rule-content {
  padding: 10px;
  border-top: 1px solid #eee;
  line-height: 1.6;
}

.rule-content.expanded {
  display: block;
}

.rule-header.collapsed {
  border-bottom: none;
}

/* ===== 等待動畫 ===== */
.waiting-animation {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.mobile-only {
  display: none;
}

.score-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.sticky-column {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: inherit;
}

.blue-text {
  color: blue;
}

/* ===== 響應式設計 - 統一媒體查詢 ===== */

/* 大螢幕優化 (1200px 以上) */
@media (min-width: 1200px) {
  .game-content {
    grid-template-columns: 280px 1fr 320px;
    gap: 25px;
  }
  
  .game-board {
    min-width: 400px;
  }
  
  /* 大螢幕上歷史表格進一步優化 */
  .game-history-container {
    padding: 20px;
  }
  
  .history-table {
    font-size: 16px;
  }
  
  .history-table th, .history-table td {
    padding: 14px 12px;
  }
}

/* 平板和中等螢幕 (992px 以下) */
@media (max-width: 992px) {
  .game-content {
    grid-template-columns: 1fr 1fr;
  }
  
  .chat-container {
    grid-column: span 2;
  }
}

/* 手機和小螢幕 (768px 以下) */
@media (max-width: 768px) {
  /* 遊戲頭部調整 */
  .game-header {
    min-width: auto; /* 移除固定最小寬度 */
    width: 100%;     /* 確保與其他元素一致 */
    flex-direction: column; /* 垂直排列可能更適合手機 */
    gap: 10px;
  }
  
  /* 遊戲歷史表格調整 */
  .game-history-container {
    max-width: 100%;
    margin: 10px 0;
    padding: 10px;
  }
  
  .history-table-wrapper {
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
  
  .history-table {
    min-width: 320px; /* 在手機上允許更小的最小寬度 */
    font-size: 12px;
  }
  
  .history-table th,
  .history-table td {
    padding: 6px 4px;
    font-size: 12px;
  }
  
  /* 第一列（回合列）保持固定 */
  .history-table th:first-child,
  .history-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: inherit;
  }
  
  .history-table th:first-child {
    background-color: #f0f0f0;
  }
  
  .history-table td:first-child {
    background-color: #f9f9f9;
  }

  /* 容器調整 */
  .container {
    padding: 15px 10px;
  }
  
  /* 遊戲內容佈局 */
  .game-content {
    grid-template-columns: 1fr;
  }
  
  .chat-container {
    grid-column: span 1;
  }
  
  /* 卡牌尺寸調整 */
  .card {
    width: 50px;
    height: 75px;
    font-size: 12px;
  }
  
  /* 手牌容器調整 */
  .hand-cards {
    gap: 8px;
    min-width: 290px; /* 手機上容納5張牌 (5*50px + 4*8px) */
    padding: 3px 0;
  }
  
  /* 換牌容器調整 - 與手牌容器保持一致 */
  .exchange-cards {
    min-width: 290px; /* 與手機版手牌容器一致 */
    gap: 8px;
  }
}

/* ===== Safari 專用修正 ===== */
/* 針對 Safari 的特殊處理 - 修正換牌容器寬度問題 */
@supports (-webkit-appearance: none) {
  @media (max-width: 768px) {
    .exchange-cards {
      min-width: 280px !important;
      max-width: calc(100vw - 60px) !important;
      width: auto !important;
    }
    
    .exchange-container {
      max-width: 100% !important;
      overflow-x: hidden !important;
    }
  }
  
  @media (max-width: 390px) {
    .exchange-cards {
      min-width: 240px !important;
      max-width: calc(100vw - 40px) !important;
    }
  }
  
  @media (max-width: 360px) {
    .exchange-cards {
      min-width: 210px !important;
      max-width: calc(100vw - 30px) !important;
    }
  }
  
  @media (max-width: 320px) {
    .exchange-cards {
      min-width: 186px !important;
      max-width: calc(100vw - 20px) !important;
    }
  }
  .hand-section {
    padding: 8px;
  }
  
  /* 大廳佈局 */
  .lobby-header {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
  }
  
  .lobby-header h1 {
    margin-bottom: 0;
    font-size: 20px;
  }
  
  #user-container {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  #user-info {
    font-size: 14px;
  }
  
  /* 遊戲表格調整 */
  .game-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 15px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
  
  .game-list-container {
    padding: 15px 10px;
    margin: 10px 0;
    border-radius: 6px;
    width: 100%;
    overflow: hidden;
  }
  
  .game-table thead th,
  .game-table tbody td {
    padding: 10px 8px;
    font-size: 13px;
  }
  
  .game-table .room-id {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .game-table .join-btn {
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  
  .game-table .creator-avatar {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  
  /* 分页控件移动端优化 */
  .pagination-container {
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
  }
  
  .pagination-controls {
    width: 100%;
    justify-content: center;
    gap: 8px;
  }
  
  .pagination-btn {
    flex: 1;
    max-width: 100px;
    padding: 10px 12px;
    font-size: 13px;
  }
  
  .pagination-info {
    font-size: 13px;
    text-align: center;
  }
  
  .page-size-selector {
    width: 100%;
    justify-content: center;
    font-size: 13px;
  }
  
  .page-size-selector select {
    padding: 6px 10px;
    font-size: 13px;
  }
  
  /* 遊戲容器調整 */
  .players-container, .game-board, .chat-container {
    padding: 15px 10px;
  }
  
  /* 手機版按鈕優化 - 增大觸摸目標 */
  .deck-btn {
    padding: 18px 14px; /* 調整為適合直式文字的內邊距 */
    font-size: 15px;
    min-height: 48px; /* 更大的觸摸目標 */
    min-width: 48px; /* 確保按鈕有足夠寬度 */
    margin: 2px; /* 增加間距避免誤觸 */
    writing-mode: vertical-rl; /* 直式文字，從右到左 */
    text-orientation: upright; /* 保持文字正立 */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .sort-cards-btn {
    padding: 22px 14px; /* 調整為適合直式文字的內邊距 */
    font-size: 15px;
    min-height: 48px;
    min-width: 48px;
    margin: 2px;
    writing-mode: vertical-rl; /* 直式文字，從右到左 */
    text-orientation: upright; /* 保持文字正立 */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 提交按鈕也加大 */
  .btn {
    padding: 12px 16px;
    font-size: 14px;
    min-height: 44px;
  }
  
  /* 分數詳情彈窗調整 */
  .score-details-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 320px;
    max-height: 80vh;
    overflow-y: auto;
  }
  
  .details-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 180px;
    max-height: 80vh;
    overflow-y: auto;
  }
  
  .has-details::after {
    content: '👁';
  }
  
  /* 分數圖表調整 */
  .score-chart-container {
    width: 95%;
    height: 80%;
    padding: 15px;
  }
  
  .score-chart-title {
    font-size: 16px;
  }
  
  .score-chart-canvas {
    height: 300px;
  }
  
  /* 排行榜調整 */
  .leaderboard-container {
    max-width: 100%;
  }
  
  .leaderboard-header .rank-column,
  .leaderboard-rank {
    width: 50px;
  }
  
  .leaderboard-header .points-column,
  .leaderboard-points {
    width: 70px;
  }
  
  .leaderboard-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .leaderboard-username {
    font-size: 14px;
  }
  
  .modal-deck-info {
    font-size: 12px;
    line-height: 1.4;
    color: #555;
  }
  
  .modal-deck-info strong {
    color: #333;
    font-weight: 600;
  }
}

/* 小手機螢幕 (576px 以下) */
@media (max-width: 576px) {
  /* 遊戲頭部調整 */
  .game-header {
    min-width: auto; /* 移除固定最小寬度 */
    width: 100%;     /* 確保與其他元素一致 */
    flex-direction: column; /* 垂直排列可能更適合手機 */
    gap: 10px;
  }
  
  /* 遊戲容器進一步調整 */
  .players-container, .game-board, .chat-container {
    padding: 10px;
  }

  /* 分數詳情容器調整 */
  .score-details-container {
    margin: 10px 0;
    padding: 8px;
    overflow-x: auto;
  }
  
  .score-details-title {
    font-size: 16px;
    margin-bottom: 10px;
  }
  
  .score-details-table {
    min-width: 200px;
    font-size: 12px;
  }
  
  .score-details-table th,
  .score-details-table td {
    padding: 4px;
    white-space: nowrap;
  }
  
  .score-format {
    font-size: 10px;
  }
  
  .deck-indicators {
    font-size: 10px;
  }
  
  /* 確保第一列（玩家名稱列）在滾動時始終可見 */
  .score-details-table th:first-child,
  .score-details-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
  }

  .score-details-table th:first-child {
    background-color: #f2f2f2;
  }

  .score-details-table td:first-child {
    background-color: #f2f2f2;
  }
  
  .player-name-cell {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .results-container {
    padding: 10px 5px;
  }
  
  .result-item {
    padding: 8px 5px;
  }
  
  .win-indicator, .lose-indicator, .tie-indicator, .special-bonus-indicator {
    font-size: 8px;
  }
  
  .mobile-only {
    display: block;
  }
  
  .score-table-wrapper {
    position: relative;
    padding-bottom: 5px;
  }
  
  .score-table-wrapper::-webkit-scrollbar {
    height: 4px;
  }
  
  .score-table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  .score-table-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }
  
  /* 歷史表格滾動條樣式 */
  .history-table-wrapper::-webkit-scrollbar {
    height: 4px;
  }
  
  .history-table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  .history-table-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }
  
  /* 歷史表格滾動指示器 */
  .history-table-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 15px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.7));
    pointer-events: none;
  }
  
  th.sticky-column {
    background-color: #f2f2f2;
  }
  
  td.sticky-column {
    background-color: #f2f2f2;
  }
  
  .score-table-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 15px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.7));
    pointer-events: none;
  }
}

/* 極小螢幕 (480px 以下) */
@media (max-width: 480px) {
  /* 遊戲頭部調整 */
  .game-header {
    min-width: auto; /* 移除固定最小寬度 */
    width: 100%;     /* 確保與其他元素一致 */
    flex-direction: column; /* 垂直排列可能更適合手機 */
    gap: 10px;
  }

  /* 遊戲表格隱藏部分列 */
  .game-table th:nth-child(1), 
  .game-table td:nth-child(1) {
    display: none; /* 隱藏房間ID列 */
  }
  
  .game-table th, 
  .game-table td {
    padding: 8px 5px;
  }
  
  .game-table .creator {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  
  .game-table .creator-avatar {
    margin: 0 auto;
  }
  
  .game-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  .game-actions button {
    width: 100%;
    padding: 12px;
    font-size: 14px;
  }
}

/* 極小iPhone螢幕調整 (390px 以下，覆蓋iPhone 12 mini等) */
@media (max-width: 390px) {
  /* 遊戲頭部調整 */
  .game-header {
    min-width: auto;
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }

  /* 卡牌尺寸進一步縮小 */
  .card {
    width: 42px;
    height: 63px;
    font-size: 10px;
  }
  
  /* 手牌容器調整 */
  .hand-cards {
    gap: 6px;
    min-width: 240px; /* 容納5張小卡牌 (5*42px + 4*6px) */
    padding: 2px 0;
  }
  
  /* 換牌容器調整 - 與手牌容器保持一致 */
  .exchange-cards {
    min-width: 240px; /* 與小螢幕手牌容器一致 */
    gap: 6px;
  }
  
  /* 遊戲板寬度調整 */
  .game-board {
    min-width: auto;
    padding: 8px 5px;
  }
  
  /* 我的手牌容器 */
  .my-cards {
    gap: 6px;
  }
  
  /* 手牌區塊標題調整 */
  .hand-section h4 {
    font-size: 14px;
    margin-bottom: 5px;
  }
  
  /* 按鈕尺寸調整 - 增大以便點擊，直式文字 */
  .deck-btn {
    padding: 16px 12px; /* 調整為適合直式文字 */
    font-size: 14px;
    min-height: 44px; /* iOS建議的最小觸摸目標尺寸 */
    min-width: 44px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 整理牌面按鈕調整 - 增大以便點擊，直式文字 */
  .sort-cards-btn {
    padding: 20px 12px; /* 調整為適合直式文字 */
    font-size: 14px;
    min-height: 44px;
    min-width: 44px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 極窄螢幕 (360px 以下) */
@media (max-width: 360px) {
  /* 遊戲頭部調整 */
  .game-header {
    min-width: auto; /* 移除固定最小寬度 */
    width: 100%;     /* 確保與其他元素一致 */
    flex-direction: column; /* 垂直排列可能更適合手機 */
    gap: 10px;
  }

  /* 卡牌尺寸再次縮小 */
  .card {
    width: 38px;
    height: 57px;
    font-size: 9px;
  }
  
  /* 手牌容器調整 */
  .hand-cards {
    gap: 5px;
    min-width: 210px; /* 容納5張超小卡牌 (5*38px + 4*5px) */
    padding: 2px 0;
  }
  
  /* 換牌容器調整 - 與手牌容器保持一致 */
  .exchange-cards {
    min-width: 210px; /* 與超小螢幕手牌容器一致 */
    gap: 5px;
  }
  
  /* 我的手牌容器 */
  .my-cards {
    gap: 5px;
  }
  
  /* 遊戲容器內邊距調整 */
  .players-container, .game-board, .chat-container {
    padding: 6px;
  }
  
  /* 手牌區塊內邊距調整 */
  .hand-section {
    padding: 6px;
  }
  
  /* 按鈕尺寸調整 - 增大以便點擊，直式文字 */
  .deck-btn {
    padding: 14px 10px; /* 調整為適合直式文字 */
    font-size: 13px;
    min-height: 42px;
    min-width: 42px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 整理牌面按鈕調整 - 增大以便點擊，直式文字 */
  .sort-cards-btn {
    padding: 16px 10px; /* 調整為適合直式文字 */
    font-size: 13px;
    min-height: 42px;
    min-width: 42px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 卡牌選擇區域標題 */
  .cards-header h2 {
    font-size: 16px;
  }
  
  /* 狀態提示文字 */
  #player-status {
    font-size: 13px;
  }

  .score-details-table {
    min-width: 200px;
    font-size: 8px;
  }
  
  .score-format {
    font-size: 7px;
    line-height: 1.2;
  }
  
  .score-details-table th,
  .score-details-table td {
    padding: 2px;
  }
  
  .player-name-cell {
    max-width: 60px;
  }
}

/* iPhone SE (320px 寬度) 特別優化 */
@media (max-width: 320px) {
  /* 遊戲頭部調整 */
  .game-header {
    min-width: auto;
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }

  /* 卡牌尺寸最小化 */
  .card {
    width: 34px;
    height: 51px;
    font-size: 8px;
  }
  
  /* 手牌容器調整 */
  .hand-cards {
    gap: 4px;
    min-width: 186px; /* 容納5張最小卡牌 (5*34px + 4*4px) */
    padding: 1px 0;
  }
  
  /* 換牌容器調整 - 與手牌容器保持一致 */
  .exchange-cards {
    min-width: 186px; /* 與iPhone SE手牌容器一致 */
    gap: 4px;
  }
  
  /* 我的手牌容器 */
  .my-cards {
    gap: 4px;
  }
  
  /* 整體容器調整 */
  .container {
    padding: 10px 5px;
  }
  
  /* 遊戲容器內邊距最小化 */
  .players-container, .game-board, .chat-container {
    padding: 5px;
  }
  
  /* 手牌區塊內邊距最小化 */
  .hand-section {
    padding: 5px;
  }
  
  /* 分页控件超小屏幕优化 */
  .pagination-container {
    padding: 10px 0;
    gap: 10px;
  }
  
  .pagination-btn {
    padding: 8px 10px;
    font-size: 12px;
    min-width: 60px;
  }
  
  .pagination-info {
    font-size: 12px;
  }
  
  .page-size-selector {
    font-size: 12px;
  }
  
  .page-size-selector select {
    font-size: 12px;
    padding: 6px 8px;
  }
  
  /* 按鈕尺寸調整 - 保持適中便於點擊，直式文字 */
  .deck-btn {
    padding: 12px 8px; /* 調整為適合直式文字 */
    font-size: 12px;
    min-height: 40px;
    min-width: 40px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 整理牌面按鈕調整 - 保持適中便於點擊，直式文字 */
  .sort-cards-btn {
    padding: 14px 8px; /* 調整為適合直式文字 */
    font-size: 12px;
    min-height: 40px;
    min-width: 40px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 卡牌選擇區域標題 */
  .cards-header h2 {
    font-size: 14px;
  }
  
  /* 狀態提示文字 */
  #player-status {
    font-size: 12px;
  }
  
  /* 手牌區塊標題調整 */
  .hand-section h4 {
    font-size: 12px;
    margin-bottom: 3px;
  }
}

/* ===== 適配小屏幕的比分詳情表樣式 ===== */
@media (max-width: 768px) {
  /* 遊戲頭部調整 */
  .game-header {
    min-width: auto; /* 移除固定最小寬度 */
    width: 100%;     /* 確保與其他元素一致 */
    flex-direction: column; /* 垂直排列可能更適合手機 */
    gap: 10px;
  }
  
  .score-details-table {
    font-size: 12px;
  }
  
  .score-details-table th,
  .score-details-table td {
    padding: 6px 4px;
  }
  
  .score-format {
    font-size: 12px;
    padding: 3px;
  }
  
  .deck-indicators {
    gap: 2px;
  }
  
  .win-indicator, .lose-indicator, .tie-indicator {
    font-size: 11px;
  }
  
  .special-bonus-indicator {
    font-size: 11px;
  }
}

/* 全寬歷史表格模式（可選） */
.game-history-container.full-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  grid-column: 1 / -1;
  border-radius: 0;
  padding: 20px 5%;
}

.game-history-container.full-width .history-table {
  min-width: 800px;
  font-size: 16px;
}

.game-history-container.full-width .history-table th,
.game-history-container.full-width .history-table td {
  padding: 15px 12px;
} 

/* 玩家數量過濾器樣式 */
.player-count-filter {
  padding: 2px;
}

.clear-search-btn {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  width: 100%;
}

.clear-search-btn:hover {
  background: #c82333;
  transform: scale(1.05);
}

.clear-search-btn i {
  font-size: 10px;
}