/* 優化後的 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;
}

/* ===== 基礎元素樣式 ===== */
/* 停用 document-level scroll anchoring，防止 DOM 重建（如德州行動後重繪座位）
   造成視窗跳回頂端 */
html, body {
  overflow-anchor: none;
}

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: 10px;
}

/* ── 大廳過濾器 ── */
.lobby-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color, #dee2e6);
}
.lobby-filter-group {
  display: flex;
  gap: 4px;
}
.lobby-filter-btn {
  padding: 4px 12px;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 16px;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary, #6c757d);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lobby-filter-btn:hover { background: var(--bg-secondary, #f0f4f8); }
.lobby-filter-btn.active {
  background: var(--primary-color, #4a90e2);
  color: #fff;
  border-color: var(--primary-color, #4a90e2);
}

.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;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.game-table .room-name .fa-exchange-alt {
  color: #42a5f5;
  font-size: 13px;
}

.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);
}

.player-count-clickable {
  cursor: pointer;
  text-decoration: underline dotted;
}
.player-count-clickable:hover { opacity: 0.75; }

.player-popup-item {
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}
.player-popup-item:last-child { border-bottom: none; }

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

.room-name-clickable {
  cursor: pointer;
  text-decoration: underline dotted;
}
.room-name-clickable:hover { opacity: 0.75; }


.lobby-popup {
  position: fixed;
  z-index: 2000;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  padding: 0;
  width: 340px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.lobby-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.lobby-popup-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  font-size: 16px;
  padding: 0;
  line-height: 1;
}
.lobby-popup-close:hover { color: #333; }
.lobby-popup-body {
  padding: 12px 14px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.7;
}

/* 搜尋欄樣式 */
.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.mahjong-passive-btn {
  background-color: #333;
}

.join-btn.mahjong-passive-btn:hover {
  background-color: #555;
}

/* 麻將行動倒數計時（顯示在遊戲中按鈕下方） */
.mahjong-action-countdown {
  font-size: 11px;
  color: #2196F3;
  text-align: center;
  margin-top: 2px;
  font-weight: 600;
}

.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.offline {
  color: var(--danger-color);
}

.player-name.ai {
  color: #888;
  font-style: italic;
}

.player-name.ai-controlled {
  color: #888;
  font-style: italic;
}

.mj-opponent-card.ai-controlled {
  opacity: 0.75;
}

.mj-opponent-name.ai-controlled {
  color: #888;
  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;
}

.history-select {
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 0.9em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.messages-days-label, .history-rounds-label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.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;
}

/* ===== Modal Tab 樣式 ===== */
.modal-tab-bar {
  display: flex;
  border-bottom: 2px solid #ddd;
  background: #f8f8f8;
  flex-shrink: 0;
}

.modal-tab {
  padding: 8px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}

.modal-tab:hover {
  color: #333;
}

.modal-tab.active {
  color: #2980b9;
  border-bottom-color: #2980b9;
  font-weight: bold;
}

.modal-tab-panel {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  padding: 12px;
  min-height: 0;
}

.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;
  gap: 0.3em;
  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;
}

/* ===== 視訊通話 ===== */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.chat-header h2 {
  margin: 0;
}

.video-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.video-toggle-link {
  font-size: 0.85em;
  color: var(--primary-color);
  text-decoration: none;
  white-space: nowrap;
}

.video-toggle-link.active {
  color: #e74c3c;
}

.video-toggle-link:hover {
  text-decoration: underline;
}

.video-toggle-link.active {
  color: #e74c3c;
}

.video-tile-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
}

.video-tile-container {
  position: relative;
  flex-shrink: 0;
}

.video-tile {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  background: #222;
  display: block;
  transition: width 0.2s, height 0.2s;
}
/* 視訊大小尺寸 */
.video-bar.size-medium .video-tile { width: 75px; height: 75px; }
.video-bar.size-small  .video-tile { width: 50px; height: 50px; }
.video-bar.size-collapsed .video-tile { display: none; }

.video-tile-label {
  font-size: 10px;
  color: #eee;
  text-align: center;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-bar.size-medium .video-tile-label { max-width: 75px; }
.video-bar.size-small  .video-tile-label { max-width: 50px; font-size: 9px; }
.video-bar.size-collapsed .video-tile-label { display: none; }

/* 視訊大小單一切換按鈕（絕對定位，不佔 bar 空間） */
.video-bar { position: relative; }
.video-size-toggle {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10;
  line-height: 1.5;
  transition: background 0.15s;
}
.video-size-toggle:hover { background: rgba(0,0,0,0.8); }

.tile-controls {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
/* 點擊視訊畫面後才顯示控制按鈕 */
.video-tile-wrapper.controls-visible .tile-controls {
  opacity: 1;
  pointer-events: auto;
}

.tile-mic-btn,
.tile-mute-btn,
.tile-hide-btn {
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.tile-mic-btn:hover,
.tile-mute-btn:hover,
.tile-hide-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.tile-mic-btn.active,
.tile-mute-btn.active {
  background: rgba(231, 76, 60, 0.75);
}

/* 折疊狀態 */
.tile-collapsed-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  background: #333;
  border-radius: 8px;
}

.tile-collapsed-name {
  font-size: 9px;
  color: #ccc;
  text-align: center;
  max-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-show-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 10px;
  width: 24px;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.tile-show-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.video-tile-wrapper.collapsed .video-tile-container,
.video-tile-wrapper.collapsed .video-tile-label {
  display: none;
}

.video-tile-wrapper.collapsed .tile-collapsed-placeholder {
  display: flex;
}

/* Fixed video bar at top (all screen sizes) */
.video-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  z-index: 500;
  transition: width 0.2s;
}

/* 寬螢幕（≥16:9）：video bar 改為左側垂直欄 */
@media (min-aspect-ratio: 16/9) {
  .video-bar {
    right: auto;
    bottom: 0;
    width: 116px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
    gap: 8px;
  }
}

/* ── 抓風覆蓋層 ─────────────────────────────────────────────────────────────── */
.mj-wind-drawing {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.mj-wind-drawing.hidden { display: none; }

.mj-wind-title {
  color: #f6e05e;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
}

.mj-wind-tiles {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.mj-wind-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* perspective wrapper */
.mj-wind-flip-wrap {
  width: 62px;
  height: 84px;
  perspective: 600px;
}

/* 翻轉元素 */
.mj-wind-flip {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.mj-wind-flip.flipped { transform: rotateY(180deg); }

.mj-wind-face,
.mj-wind-reveal {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}

/* 牌背 */
.mj-wind-face {
  background: #2c3e50;
  border: 2px solid #4a6fa5;
  flex-direction: column;
  gap: 2px;
}
.mj-wind-face-pattern {
  font-size: 34px;
  color: #4a6fa5;
  line-height: 1;
}

/* 牌面（翻面後顯示） */
.mj-wind-reveal {
  background: #fff;
  border: 2px solid #bbb;
  transform: rotateY(180deg);
  flex-direction: column;
  gap: 4px;
}
.mj-wind-char {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}
.mj-wind-dealer-badge {
  font-size: 11px;
  background: #c0392b;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
}

/* 玩家名稱：翻牌後才顯示 */
.mj-wind-name {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  max-width: 72px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.mj-wind-name.hidden {
  display: block !important; /* 保留佔位，避免版面跳動 */
  opacity: 0;
  pointer-events: none;
}
.mj-wind-card.is-me .mj-wind-name {
  color: #f6e05e;
  font-weight: 700;
}

.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;
}

/* 名字欄內的截斷容器（僅在名字過長時套用） */
.name-cell-truncate {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  margin: 0 auto;
}

.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;
}

/* ===== 牌型總覽區塊 ===== */
.hand-type-summary-section {
  margin-bottom: 16px;
}

.hand-type-summary-title {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hand-type-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 4px;
}

.hand-type-summary-table th,
.hand-type-summary-table td {
  padding: 5px 10px;
  border: 1px solid #e0e0e0;
  text-align: center;
}

.hand-type-summary-table th {
  background: #f5f5f5;
  font-weight: 600;
  color: #444;
}

.hand-type-player-name {
  text-align: left !important;
  font-weight: 500;
}

.special-hand-summary-cell {
  color: #27ae60;
  font-weight: bold;
  background: #eafaf1;
}

.strong-hand-cell {
  color: #e67e22;
  font-weight: 600;
}

.home-run-summary-cell {
  color: #27ae60;
  font-weight: bold;
}

.hand-type-label {
  color: #666;
  font-size: 0.85em;
}

/* ===== 通知權限 Modal ===== */
.notification-prompt-content {
  max-width: 400px;
}

.notification-prompt-body {
  text-align: center;
  padding: 24px 20px;
}

.notification-prompt-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.notification-prompt-body p {
  color: #555;
  line-height: 1.6;
  margin: 0 0 10px;
}

.notification-device-hint {
  font-size: 13px;
  color: #888;
  background: #f8f8f8;
  border-radius: 6px;
  padding: 10px 12px;
  text-align: left;
}

.notification-guide-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline;
}

/* ===== 通知設定說明 Modal ===== */
.notification-guide-content {
  max-width: 480px;
}

.notification-guide-body {
  padding: 8px 20px 20px;
}

.guide-section {
  margin-bottom: 20px;
}

.guide-section:last-child {
  margin-bottom: 0;
}

.guide-platform-title {
  font-size: 15px;
  font-weight: 600;
  margin: 16px 0 8px;
  color: #333;
}

.guide-section ol {
  margin: 0 0 8px 0;
  padding-left: 20px;
}

.guide-section ol li {
  color: #555;
  line-height: 1.7;
  font-size: 14px;
}

.guide-blocked-hint {
  font-size: 13px;
  color: #888;
  background: #fff8e1;
  border-left: 3px solid #f39c12;
  padding: 8px 12px;
  border-radius: 0 4px 4px 0;
  margin: 4px 0 0;
}

.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;
}

.setting-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  padding: 6px 8px;
  background: #f5f7ff;
  border-radius: 4px;
  text-align: center;
}

/* ===== 頁腳樣式 ===== */
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;
}
/* 遊戲類型 Tab */
.game-type-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border-color, #dee2e6);
}

.game-type-tab {
  padding: 8px 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #6c757d);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}

.game-type-tab.active {
  color: var(--primary-color, #4a90e2);
  border-bottom-color: var(--primary-color, #4a90e2);
}

.game-type-tab:hover:not(.active) {
  color: var(--text-primary, #333);
}

/* 麻將房間圖示 */
.game-table .room-name .mahjong-room-icon {
  color: #e67e22;
}

/* ── 麻將全寬模式：隱藏側欄，聊天浮動 ──────────────────────────────────────── */
.game-content.mahjong-mode {
  grid-template-columns: 1fr;
}
.game-content.mahjong-mode .players-container,
.game-content.mahjong-mode .chat-container {
  display: none;
}
.game-content.mahjong-mode.chat-open .chat-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 52px;
  width: min(320px, 90vw);
  z-index: 210;
  background: #fff;
  box-shadow: -4px 0 16px rgba(0,0,0,0.25);
  padding: 12px;
  overflow-y: auto;
  border-radius: 0;
  box-sizing: border-box;
}
/* 麻將模式底部導覽列（固定，左右兩塊） */
/* ── Fan Rules UI ──────────────────────────────────────────────────────────── */
.fan-group-block {
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 8px 12px 6px;
  background: #fcfcfc;
}
/* group header: 整個 label 可點擊，checkmark + title 自然對齊 */
.fan-group-hd2 {
  display: block;       /* checkbox-container 原本是 block */
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}
.fan-group-title2 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  user-select: none;
}
/* 3欄grid覆蓋預設2欄 */
.fan-score-settings {
  grid-template-columns: repeat(3, 1fr);
}
/* fan item: checkbox + value input 垂直排列（同 setting-item 設計） */
.fan-rule-item {
  gap: 4px;
}
.fan-rule-item .checkbox-container {
  margin-bottom: 0;
  font-size: 13px;
}
.fan-rule-val-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.fan-val {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
}
.fan-val:disabled {
  background: #f5f5f5;
  color: #bbb;
  border-color: #eee;
}

.mj-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: none;
  z-index: 200;
  background: #2c3e50;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
}
.mj-bottom-bar.visible { display: flex; }
.mj-bottom-bar-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s;
}
#mj-chat-toggle-btn { border-right: none; }
.mj-bottom-bar-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.mj-bottom-bar-btn.active { background: rgba(52,152,219,0.2); color: #3498db; }
/* 摺疊鈕：窄螢幕隱藏 */
.mj-bar-collapse-btn { display: none; }

/* 麻將模式下給底部列留出空間（窄螢幕） */
.game-content.mahjong-mode .mahjong-container,
.game-content.mahjong-mode .texas-container {
  padding-bottom: 60px;
}

/* ── 寬螢幕（≥16:9）：按鈕移到左下角可摺疊浮動 ────────────────────────────── */
@media (min-aspect-ratio: 16/9) {
  /* ── 底部列：右下角、透明背景（摺疊狀態） ── */
  .mj-bottom-bar {
    left: auto;
    right: 16px;
    bottom: 16px;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    border-radius: 0;
    padding: 0;
  }
  /* 展開後整列變成 pill 外框 */
  .mj-bottom-bar.expanded {
    background: #2c3e50;
    border-radius: 24px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    gap: 2px;
  }
  /* 主要按鈕：未展開時隱藏 */
  .mj-bottom-bar:not(.expanded) .mj-bottom-bar-btn {
    display: none;
  }
  .mj-bottom-bar-btn {
    flex: none;
    width: auto;
    height: 36px;
    padding: 0 14px;
    border-right: none;
    border-bottom: none;
    border-radius: 20px;
    font-size: 13px;
  }
  /* 展開/摺疊切換鈕：圓形按鈕，始終可見（靠右） */
  .mj-bar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: #2c3e50;
    border: none;
    color: rgba(255,255,255,0.85);
    font-size: 22px;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    line-height: 1;
    padding: 0;
    transition: background 0.15s, color 0.15s;
  }
  .mj-bar-collapse-btn:hover { background: #3d5166; color: #fff; }
  /* 展開狀態：切換鈕融入 pill，無獨立陰影 */
  .mj-bottom-bar.expanded .mj-bar-collapse-btn {
    background: transparent;
    box-shadow: none;
  }
  /* 寬螢幕：不需底部 padding，不加 padding-right */
  .game-content.mahjong-mode .mahjong-container {
    padding-bottom: 0;
  }
  /* 聊天視窗延伸到底 */
  .game-content.mahjong-mode.chat-open .chat-container {
    bottom: 0;
  }

  /* ── 棄牌區玩家名稱隱藏（位置已可辨識） ── */
  .mj-player-discard-label { display: none; }

  /* ── 玩家區域：花牌／亮牌／手牌同行 ──────── */
  .mj-my-area .mj-area-label { display: none; }
  /* .mj-my-exposed 改為單行，三個子項並排 */
  .mj-my-exposed {
    flex-wrap: nowrap;
    align-items: flex-end;
  }
  .mj-my-exposed .mj-flowers-area,
  .mj-my-exposed .mj-melds-area {
    flex-shrink: 0;
    min-width: 0; /* 空區域不佔空間，手牌獲得最大寬度 */
  }
  /* 手牌佔剩餘寬度，單行，超出可捲動 */
  .mj-my-exposed .mj-my-hand {
    flex: 1;
    flex-basis: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-top: 0;
    min-width: 0;
  }
}

/* 玩家列表浮動面板（左側滑入，底部預留導覽列高度） */
.game-content.mahjong-mode.players-open .players-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 52px;
  width: min(280px, 90vw);
  z-index: 210;
  background: #fff;
  box-shadow: 4px 0 16px rgba(0,0,0,0.25);
  padding: 12px;
  overflow-y: auto;
  box-sizing: border-box;
}

.mj-chat-backdrop {
  position: fixed;
  inset: 0;
  bottom: 52px;
  background: rgba(0,0,0,0.3);
  z-index: 209;
  display: none;
}
.mj-chat-backdrop.visible { display: block; }

/* ── 麻將遊戲室 ──────────────────────────────────────────────────────────────── */
.mahjong-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  flex: 1;
  min-width: 0;
}

.mj-status-bar {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--bg-secondary, #f0f4f8);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  flex-wrap: wrap;
}

.mj-opponents {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mj-opponent-card {
  background: var(--bg-secondary, #f0f4f8);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  flex: 1;
  min-width: 120px;
}

.mj-opponent-card.current-turn {
  border: 2px solid var(--primary-color, #4a90e2);
}

.mj-opponent-name {
  font-weight: 600;
  margin-bottom: 2px;
}

.mj-opponent-tiles {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-top: 4px;
}
/* 明牌（宣告聽牌時對手手牌）：同副露小牌大小 */
/* 明牌：同亮牌區用 CSS 變數自動縮放 */
.mj-opponent-tiles.revealed .mj-tile {
  width: var(--mj-sm-w);
  height: var(--mj-sm-h);
  font-size: 6px;
  border-radius: 2px;
  border-width: 1px;
  box-shadow: none;
}
.mj-opponent-tiles.revealed .mj-tile.mj-tile-u { font-size: calc(var(--mj-sm-h) * 1); padding: 0; }
.mj-opponent-tiles.revealed .mj-tile-num { font-size: 6px; }
.mj-opponent-tiles.revealed .mj-tile:not(.mj-tile-u) .mj-tile-num { font-size: var(--mj-sm-num-fs); }

/* 對手花牌+亮牌同行容器 */
.mj-opponent-exposed {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-end;
  margin-bottom: 2px;
}

/* 亮牌：每個 meld 組（刻/槓/順）保持同列，組與組之間才換列 */
.mj-opponent-melds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
}
.mj-meld {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
}

/* 對手亮牌縮小（使用 --mj-sm-w/h，2K+ 時自動放大） */
.mj-opponent-melds .mj-tile {
  width: var(--mj-sm-w);
  height: var(--mj-sm-h);
  font-size: 6px;
  border-radius: 2px;
  border-width: 1px;
  box-shadow: none;
}
.mj-opponent-melds .mj-tile.mj-tile-u { font-size: calc(var(--mj-sm-h) * 1); padding: 0; }
.mj-opponent-melds .mj-tile-num { font-size: 6px; }
.mj-opponent-melds .mj-tile:not(.mj-tile-u) .mj-tile-num { font-size: var(--mj-sm-num-fs); }

/* 花牌縮小（同 --mj-sm-w/h） */
.mj-opponent-flowers .mj-tile,
#mj-my-flowers .mj-tile {
  width: var(--mj-sm-w);
  height: var(--mj-sm-h);
  font-size: 6px;
  border-radius: 2px;
  border-width: 1px;
  box-shadow: none;
}
.mj-opponent-flowers .mj-tile.mj-tile-u,
#mj-my-flowers .mj-tile.mj-tile-u { font-size: calc(var(--mj-sm-h) * 1); padding: 0; }
.mj-opponent-flowers .mj-tile-num,
#mj-my-flowers .mj-tile-num { font-size: 6px; }

.mj-center {
  display: flex;
  justify-content: center;
}

.mj-discard-area {
  background: var(--bg-secondary, #f0f4f8);
  border-radius: 8px;
  padding: 8px;
  flex: 1;
}

.mj-discard-label {
  display: none;
}

.mj-discard-info {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  flex-wrap: wrap;
  margin-bottom: 6px;
  color: var(--text-secondary, #555);
}
#mj-wall-count, #mj-dice-info, #mj-multiplier-info { display: none; }

.mj-discard-opponents {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.mj-discard-opponents .mj-player-discard {
  flex: 1;
}

.mj-discard-mine .mj-player-discard {
  background: rgba(74,144,226,0.1);
  border: 1px solid rgba(74,144,226,0.25);
}

.mj-player-discard {
  background: rgba(0,0,0,0.05);
  border-radius: 5px;
  padding: 4px 5px;
  min-height: 28px;
}

.mj-player-discard-label {
  font-size: 10px;
  color: var(--text-secondary, #6c757d);
  font-weight: 600;
  margin-bottom: 2px;
}

.mj-player-discard-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

/* 對手手牌背面（使用 --mj-back-w/h，2K+ 時自動放大） */
.mj-tile-back-sm {
  width: var(--mj-back-w) !important;
  height: var(--mj-back-h) !important;
  font-size: 0 !important;
}

/* 棄牌區牌面縮小（使用 --mj-sm-w/h，2K+ 時自動放大） */
.mj-player-discard-tiles .mj-tile {
  width: var(--mj-sm-w);
  height: var(--mj-sm-h);
  font-size: 6px;
  border-radius: 2px;
  border-width: 1px;
  box-shadow: none;
  transform: none !important;
  cursor: default;
}
.mj-player-discard-tiles .mj-tile.mj-tile-u {
  font-size: calc(var(--mj-sm-h) * 1); /* 同亮牌區，跟著 --mj-sm-h 自動縮放 */
  padding: 0;
}
.mj-player-discard-tiles .mj-tile-num { font-size: var(--mj-sm-num-fs); }
.mj-player-discard-tiles .mj-tile.mj-tile-hakuban {
  border-width: 1px;
}
@media (max-width: 768px) {
  :root { --mj-sm-w: 16px; --mj-sm-h: 19px; } /* 更新變數讓 --mj-sm-num-fs 正確計算 */
  .mj-player-discard-tiles .mj-tile {
    width: 16px;
    height: 19px;
    font-size: 5px;
  }
  .mj-player-discard-tiles .mj-tile.mj-tile-u { font-size: 19px; }
  /* .mj-tile-num 不再硬編碼，由 var(--mj-sm-num-fs) 處理：max(10px, 19*0.34≈6.5px) = 10px */
  .mj-opponent-melds .mj-tile,
  .mj-opponent-flowers .mj-tile,
  #mj-my-flowers .mj-tile { width: 16px; height: 19px; font-size: 5px; }
  .mj-opponent-melds .mj-tile.mj-tile-u,
  .mj-opponent-flowers .mj-tile.mj-tile-u,
  #mj-my-flowers .mj-tile.mj-tile-u { font-size: 19px; }
  .mj-opponent-melds .mj-tile-num,
  .mj-opponent-flowers .mj-tile-num,
  #mj-my-flowers .mj-tile-num { font-size: 5px; }
  /* :not(.mj-tile-u) .mj-tile-num 由 var(--mj-sm-num-fs) 處理 */
  .mj-opponents { flex-wrap: nowrap; gap: 4px; }
  .mj-opponent-card { min-width: 0; padding: 4px 5px; }
}

.mj-my-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mj-my-exposed {
  display: flex;
  column-gap: 12px;
  row-gap: 8px;
  flex-wrap: wrap;
}

.mj-flowers-area,
.mj-melds-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 80px;
}
#mj-my-melds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
}

.mj-area-label {
  font-size: 11px;
  color: var(--text-secondary, #6c757d);
  font-weight: 500;
}

/* 窄螢幕：手牌強制換行到 flowers/melds 下方 */
.mj-my-exposed .mj-my-hand {
  flex-basis: 100%;
  overflow-x: auto;
  padding-top: 10px; /* 給 translateY(-6px)+2px shadow 留空間，避免選取框被截 */
}

/* 寬螢幕覆寫（必須在全域規則之後才能蓋過） */
@media (min-aspect-ratio: 16/9) {
  .mj-my-exposed {
    flex-wrap: nowrap;
    align-items: flex-end;
  }
  .mj-my-exposed .mj-flowers-area,
  .mj-my-exposed .mj-melds-area {
    flex-shrink: 0;
    min-width: 0; /* 覆蓋全域 80px：空區域不佔空間，手牌獲得最大寬度 */
  }
  .mj-my-exposed .mj-my-hand {
    flex: 1;
    flex-basis: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-top: 10px;
    min-width: 0;
  }
}

.mj-my-hand {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 0 4px; /* 左右給 2px box-shadow 留空間 */
}

/* ── 麻將牌面尺寸 CSS 自訂屬性（依解析度自動縮放） ──────────────────────────── */
:root {
  --mj-tile-w: 38px;    /* 手牌/主牌面寬 */
  --mj-tile-h: 44px;    /* 手牌/主牌面高 */
  --mj-tile-fs: 11px;   /* 主牌面字體 */
  --mj-tile-num-fs: 16px; /* 數字字體 */
  --mj-tile-u-fs: 44px; /* Unicode 牌字體 */
  --mj-sm-w: 19px;      /* 對手亮牌/棄牌/花牌 寬 */
  --mj-sm-h: 22px;      /* 對手亮牌/棄牌/花牌 高 */
  --mj-back-w: 16px;    /* 對手手牌背面 寬 */
  --mj-back-h: 22px;    /* 對手手牌背面 高 */
  /* 小牌字牌字體：max(10px 最小可讀, 牌框高*34%) 自動隨牌框縮放 */
  --mj-sm-num-fs: max(10px, calc(var(--mj-sm-h) * 0.34));
}
/* 桌機裝置（有滑鼠的裝置）：全面放大 */
@media (hover: hover) and (pointer: fine) {
  :root {
    --mj-tile-w: 46px;
    --mj-tile-h: 54px;
    --mj-tile-fs: 13px;
    --mj-tile-num-fs: 19px;
    --mj-tile-u-fs: 52px;
    --mj-sm-w: 22px;
    --mj-sm-h: 26px;
    --mj-back-w: 20px;
    --mj-back-h: 26px;
  }
  /* 直接覆蓋小牌和背面牌，確保不被其他規則干擾 */
  .mj-player-discard-tiles .mj-tile { width: 22px !important; height: 26px !important; }
  .mj-opponent-melds .mj-tile,
  .mj-opponent-flowers .mj-tile,
  #mj-my-flowers .mj-tile { width: 22px !important; height: 26px !important; }
  .mj-opponent-tiles .mj-tile.back,
  .mj-tile-back-sm { width: 20px !important; height: 26px !important; }
  /* .mj-opponent-tiles.revealed 由 var(--mj-sm-w/h) 自動縮放，無需額外覆蓋 */
}
/* 桌機 + 2K 以上：全面放大含對手牌（1900px 涵蓋 2K 在各種 DPI 縮放下）*/
@media (hover: hover) and (pointer: fine) and (min-width: 1550px) {
  :root {
    --mj-tile-w: 54px;
    --mj-tile-h: 64px;
    --mj-tile-fs: 16px;
    --mj-tile-num-fs: 22px;
    --mj-tile-u-fs: 62px;
    --mj-sm-w: 38px;
    --mj-sm-h: 46px;
    --mj-back-w: 34px;
    --mj-back-h: 40px;
  }
  /* 尺寸 */
  .mj-player-discard-tiles .mj-tile { width: 38px !important; height: 46px !important; }
  .mj-opponent-melds .mj-tile,
  .mj-opponent-flowers .mj-tile,
  #mj-my-flowers .mj-tile { width: 38px !important; height: 46px !important; }
  .mj-opponent-tiles .mj-tile.back,
  .mj-tile-back-sm { width: 34px !important; height: 40px !important; }
  /* .mj-opponent-tiles.revealed 由 var(--mj-sm-w/h) 自動縮放至 38×46px，無需額外覆蓋 */
  /* 字牌字體由 --mj-sm-num-fs 自動處理：max(10px, --mj-sm-h*0.34) = max(10, 46*0.34≈16px) */
}

/* 麻將牌面 */
.mj-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mj-tile-w);
  height: var(--mj-tile-h);
  background: #fff;
  border: 1.5px solid #ccc;
  border-radius: 5px;
  font-size: var(--mj-tile-fs);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  flex-direction: column;
  line-height: 1.1;
}

.mj-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.mj-tile.selected {
  transform: translateY(-6px);
  border-color: var(--primary-color, #4a90e2);
  box-shadow: 0 0 0 2px var(--primary-color, #4a90e2);
}

.mj-tile.new-tile {
  border-color: #e67e22;
  box-shadow: 0 0 0 2px #e67e22;
  margin-left: 10px;
}

.mj-tile.tile-match {
  border-color: #f39c12;
  box-shadow: 0 0 0 2px #f39c12;
  opacity: 0.85;
}

.mj-tile.discarding {
  opacity: 0.4;
  pointer-events: none;
}

.mj-tile.tenpai-valid {
  border-color: #29b6f6;
  box-shadow: 0 0 0 2px #29b6f6, 0 0 8px rgba(41, 182, 246, 0.5);
  transform: translateY(-4px);
}

#mj-ting-btn {
  background: #9b59b6 !important;
  color: #fff !important;
  font-weight: 600;
  border-color: #8e44ad !important;
}
#mj-ting-btn:hover {
  background: #8e44ad !important;
}
#mj-ting-btn.active {
  background: #6c3483 !important;
  border-color: #5b2c6f !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.4);
}

.mj-tile.back {
  background: linear-gradient(135deg, #3a5f8a, #1e3a5f);
  color: transparent;
}

/* 牌色：萬=藍, 筒=綠, 條=綠, 字=黑, 中=紅, 發=綠, 花=橘 */
.mj-tile[data-suit="m"] { color: #2980b9; }
.mj-tile[data-suit="t"] { color: #c0392b; }
.mj-tile[data-suit="b"] { color: #27ae60; }
.mj-tile[data-suit="honor"] { color: #2c3e50; }
.mj-tile[data-tile="dc"] { color: #c0392b; }
.mj-tile[data-tile="df"] { color: #27ae60; }
.mj-tile[data-suit="flower"] { color: #e67e22; }

.mj-tile-num { font-size: var(--mj-tile-num-fs); line-height: 1; }
.mj-tile-suit { font-size: 9px; opacity: 0.75; }

/* Unicode 牌面：font-weight:normal 避免 synthetic bold 造成模糊 */
.mj-tile.mj-tile-u {
  font-size: var(--mj-tile-u-fs);
  font-weight: normal;
  line-height: 1;
  overflow: hidden;
  padding: 0;
  flex-direction: row;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* 白板（白龍）：只顯示空白邊框 */
.mj-tile.mj-tile-hakuban {
  border: 2px solid #aaa;
}

/* 聽牌等待牌顯示區 */
.mj-tenpai-waits {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  flex-wrap: wrap;
}
.mj-tenpai-waits-label {
  font-size: 12px;
  color: #27ae60;
  font-weight: 600;
  white-space: nowrap;
}
#mj-tenpai-waits-tiles {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.mj-tenpai-waits .mj-tile {
  transform: none !important; /* 不套用 hover 浮起效果 */
  cursor: default;
  pointer-events: none;
}

/* 行動裝置：牌框 35×40px（字牌/Unicode 同高） */
@media (max-width: 768px) {
  .mj-tile {
    width: 30px;
    height: 35px;
  }
  .mj-tile-num { font-size: 13px; }
  .mj-tile-suit { font-size: 8px; }
  .mj-tile.mj-tile-u {
    font-size: 40px;
    line-height: 1;
    overflow: hidden;
    padding: 0;
    flex-direction: row;
  }
  .mj-tile.new-tile { margin-left: 6px; }
  .mj-actions .btn { min-width: 48px; padding: 6px 10px; font-size: 13px; }
}

/* 搶牌結果提示（獨立於倒數計時） */


.mj-action-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary, #6c757d);
  padding: 2px 0;
}
.mj-action-timer #mj-action-timer-count {
  font-weight: 700;
  font-size: 16px;
  color: var(--primary-color, #e74c3c);
  min-width: 32px;
}
.mj-action-timer.urgent #mj-action-timer-count {
  color: #e74c3c;
  animation: mj-timer-blink 0.5s step-end infinite;
}
@keyframes mj-timer-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* 按鈕與訊息同行：按鈕靠左，訊息靠右，互不影響位置 */
.mj-action-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 44px; /* 固定行高，防止無按鈕時行消失 */
}

.mj-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
}

/* 訊息區：佔剩餘寬度，按鈕出現時自動往右 */
.mj-action-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mj-actions .btn {
  min-width: 60px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
}

.btn.success {
  background-color: #27ae60;
  color: #fff;
  border-color: #27ae60;
}

.btn.success:hover { background-color: #1e8449; }

.btn.warning {
  background-color: #e67e22;
  color: #fff;
  border-color: #e67e22;
}

.btn.warning:hover { background-color: #ca6f1e; }

.mj-round-end-panel {
  background: rgba(0,0,0,0.82);
  color: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}
.mj-round-end-players {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mj-round-end-player {
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 6px 10px;
  min-width: 160px;
}
.mj-round-end-player.winner {
  background: rgba(39,174,96,0.35);
  border: 1px solid #27ae60;
}
.mj-round-history-label {
  font-weight: 600;
  color: #aaa;
  font-size: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 6px;
}
#mj-round-history {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 120px;
  overflow-y: auto;
  font-size: 12px;
  color: #ccc;
}

.mj-tile.claimed {
  opacity: 0.35;
  filter: grayscale(1) brightness(0.6);
}

.mj-my-info {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 6px;
  background: var(--bg-secondary, #f0f4f8);
  border-radius: 6px;
  margin-bottom: 4px;
  line-height: 1.5;
}
.mj-opponent-header {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.4;
}
.mj-wind-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: rgba(0,0,0,0.12);
  border-radius: 3px;
  padding: 0 3px;
  margin-right: 3px;
  color: #555;
}
.mj-score-chip.me .mj-wind-badge { background: rgba(255,255,255,0.25); color: #fff; }
.mj-wind-dealer {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: #e67e22;
  border-radius: 3px;
  padding: 0 3px;
  margin-right: 3px;
  color: #fff;
}

.mj-volunteer-ai-bar { display: flex; justify-content: flex-end; padding: 2px 0; }
.mj-volunteer-ai-btn { font-size: 12px; padding: 3px 10px; opacity: 0.7; border-radius: 4px; }
.mj-volunteer-ai-btn.active { background: #e74c3c; color: #fff; opacity: 1; }

/* 局間歷史列（永遠可見） */
.mj-history-bar {
  background: rgba(0,0,0,0.06);
  border-top: 1px solid rgba(0,0,0,0.1);
  font-size: 11px;
  color: #555;
  max-height: 160px;
  overflow-y: auto;
}
.mj-history-bar.hidden { display: none; }
.mj-history-table { width: 100%; border-collapse: collapse; }
.mj-history-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #d0d3d4;
  padding: 3px 6px;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  color: #333;
}
.mj-history-table tbody td {
  padding: 2px 6px;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.05);
  white-space: nowrap;
}
.mj-ht-num { color: #aaa; width: 22px; }
.mj-ht-winner { text-align: left !important; padding-left: 8px !important; }
.mj-ht-fan { cursor: default; width: 70px; white-space: nowrap; }
.mj-ht-score { min-width: 36px; }
.mj-ht-score.pos { color: #27ae60; font-weight: 600; }
.mj-ht-score.neg { color: #c0392b; }
.mj-ht-players { min-width: 120px; }
.tx-ht-player { display: inline; white-space: nowrap; font-size: 12px; }
.tx-ht-player.pos { color: #27ae60; font-weight: 600; }
.tx-ht-player.neg { color: #c0392b; }
.tx-ht-sep { color: #bbb; font-size: 11px; }
.mj-ht-row.drawn { color: #bbb; }
.mj-ht-row:hover { background: rgba(0,0,0,0.04); }
.mj-ht-expandable { cursor: pointer; }
.mj-ht-expandable:hover { background: rgba(0,0,0,0.06); }
.mj-ht-expand { font-size: 9px; opacity: 0.55; }
.mj-ht-detail.hidden { display: none; }
.mj-ht-detail-td { background: rgba(0,0,0,0.04); padding: 5px 8px; text-align: left !important; }
.mj-ht-bd { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.mj-ht-bd-item { background: rgba(0,0,0,0.1); border-radius: 3px; padding: 1px 5px; font-size: 11px; white-space: nowrap; }
.mj-ht-hand { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }

/* 準備下一局按鈕 + 倒數計時 */
.mj-ready-btn { margin-top: 10px; width: 100%; }
.mj-ready-countdown {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-align: center;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* 搶牌目標牌 */
.mj-discard-target {
  outline: 2px solid #e67e22 !important;
  outline-offset: 1px;
  border-radius: 4px;
  animation: mj-target-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes mj-target-pulse {
  from { outline-color: #e67e22; }
  to   { outline-color: #f39c12; box-shadow: 0 0 6px rgba(230,126,34,0.6); }
}

/* 聽牌狀態手牌容器 */
#mj-my-hand.tenpai-declared {
  outline: 2px solid #27ae60;
  outline-offset: 2px;
  border-radius: 4px;
  animation: mj-tenpai-glow 1.5s ease-in-out infinite alternate;
}
@keyframes mj-tenpai-glow {
  from { outline-color: #27ae60; }
  to   { outline-color: #2ecc71; box-shadow: 0 0 8px rgba(46,204,113,0.4); }
}

/* 對手聽牌標示 */
.mj-opponent-card.tenpai-declared {
  outline: 2px solid #27ae60;
  outline-offset: 2px;
  animation: mj-tenpai-glow 1.5s ease-in-out infinite alternate;
}

/* 暗槓顯示：外側2張正面，中間2張暗色背面 */
.concealed-kong { display: inline-flex; gap: 1px; align-items: center; }
.concealed-kong .concealed-back { background: #2c3e50 !important; border-color: #1a252f !important;
  width: 18px; height: 26px; font-size: 0; }

/* ─── Apple 裝置（iPhone / iPad / Mac）牌框加高，解決 iOS 字型被裁切問題 ─── */
.apple-device .mj-tile { height: 53px; }
.apple-device .mj-opponent-melds .mj-tile,
.apple-device .mj-opponent-flowers .mj-tile,
.apple-device #mj-my-flowers .mj-tile,
.apple-device .mj-player-discard-tiles .mj-tile { height: 27px; }
@media (max-width: 768px) {
  .apple-device .mj-tile { height: 42px; }
  .apple-device .mj-opponent-melds .mj-tile,
  .apple-device .mj-opponent-flowers .mj-tile,
  .apple-device #mj-my-flowers .mj-tile,
  .apple-device .mj-player-discard-tiles .mj-tile { height: 23px; }
}

.mj-dice-symbol { font-size: 1.4em; line-height: 1; vertical-align: top; }
.mj-dice-symbol.red { color: #c0392b; }

.ios-device .mj-tile.mj-tile-u { align-items: flex-start; }

/* ── 大老二遊戲室 ──────────────────────────────────────────────────────────── */
.bigtwo-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  flex: 1;
  min-width: 0;
}

/* 對手資訊列（上方三家） */
.bt-opponents {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bt-opponent-card {
  background: var(--bg-secondary, #f0f4f8);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  flex: 1;
  min-width: 0;
}

.bt-opponent-card.current-turn {
  border: 2px solid var(--primary-color, #4a90e2);
}

.bt-opponent-card.finished {
  opacity: 0.75;
}

.bt-opponent-header {
  font-weight: 600;
  line-height: 1.4;
}

.bt-finished-badge {
  color: #27ae60;
  font-weight: 700;
}

/* 對手剩牌牌背示意 */
.bt-card-backs {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.bt-card-back {
  width: 14px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid #1f4566;
  background: repeating-linear-gradient(45deg, #2c5f8a, #2c5f8a 3px, #3d7ab0 3px, #3d7ab0 6px);
}

/* 中央牌桌：場上最後出的牌 */
.bt-center {
  display: flex;
  justify-content: center;
}

.bt-table {
  background: var(--bg-secondary, #f0f4f8);
  border-radius: 8px;
  padding: 10px 12px;
  flex: 1;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.bt-round-info {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #555);
}

.bt-free-play-hint {
  font-size: 13px;
  font-weight: 600;
  color: #e67e22;
}

.bt-last-play-label {
  font-size: 12px;
  color: var(--text-secondary, #555);
}

.bt-last-play {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 場上牌面縮小、不可點 */
.bt-last-play .card,
.bt-round-end-cards .card {
  width: 44px;
  height: 66px;
  cursor: default;
  font-size: 11px;
}
.bt-last-play .card:hover,
.bt-round-end-cards .card:hover {
  transform: none;
  box-shadow: none;
}

/* 我的區域 */
.bt-my-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bt-my-info {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 6px;
  background: var(--bg-secondary, #f0f4f8);
  border-radius: 6px;
}

/* 手牌橫列：點擊選取後上移高亮 */
.bt-my-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 14px; /* 給選取上移留空間 */
  min-height: 40px;
}

.bt-my-hand .card {
  cursor: pointer;
}

.bt-my-hand .card.bt-selected {
  transform: translateY(-12px);
  border: 2px solid var(--primary-color, #4a90e2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.bt-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bt-actions {
  display: flex;
  gap: 8px;
}

/* 出牌倒數計時（比照 mj-action-timer） */
.bt-action-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary, #6c757d);
  padding: 2px 0;
}
.bt-action-timer #bt-action-timer-count {
  font-weight: 700;
  font-size: 16px;
  color: var(--primary-color, #e74c3c);
  min-width: 32px;
}
.bt-action-timer.urgent #bt-action-timer-count {
  color: #e74c3c;
  animation: mj-timer-blink 0.5s step-end infinite;
}

/* 局結束面板（比照 mj-round-end-panel） */
.bt-round-end-panel {
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}
.bt-round-end-players {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bt-round-end-player {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 6px 10px;
  min-width: 160px;
}
.bt-round-end-player.winner {
  background: rgba(39, 174, 96, 0.35);
  border: 1px solid #27ae60;
}
.bt-round-end-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.bt-round-end-cards .card {
  width: 32px;
  height: 48px;
  font-size: 9px;
}
.bt-round-end-empty {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}
.bt-ready-btn {
  margin-top: 10px;
  width: 100%;
}
.bt-ready-countdown {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* 行動裝置：手牌縮小避免換太多行 */
@media (max-width: 768px) {
  .bt-my-hand .card {
    width: 45px;
    height: 68px;
    font-size: 11px;
  }
  .bt-last-play .card {
    width: 36px;
    height: 54px;
    font-size: 9px;
  }
  .bt-opponents {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .bt-opponent-card {
    padding: 4px 5px;
  }
  .bt-card-back {
    width: 10px;
    height: 15px;
  }
}

/* ── 德州撲克遊戲室 ────────────────────────────────────────────────────────── */
.texas-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  flex: 1;
  min-width: 0;
}
/* 德州房每次行動會整批重建座位 DOM，瀏覽器的 scroll anchoring
   會因錨點元素被刪除而把視窗跳回頂端；此區域停用錨定 */
.texas-container,
.texas-container * {
  overflow-anchor: none;
}

/* 對手座位列（上方） */
.tx-opponents {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 中列：左側對手 + 中央牌桌 + 右側對手（環繞牌桌分布） */
.tx-middle-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.tx-middle-row .tx-center {
  flex: 1;
  min-width: 0;
}
.tx-opponents-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
/* 左側由下往上＝行動順序（下家最靠近自己） */
.tx-opponents-left {
  flex-direction: column-reverse;
}
.tx-opponents-side:empty {
  display: none;
}
.tx-opponents-side .tx-seat {
  flex: 0 0 auto;
}

.tx-seat {
  background: var(--bg-secondary, #f0f4f8);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  /* 固定基準寬度：多人桌（最多9個對手）超出時自動換行，
     不會全部擠在同一行被壓扁 */
  flex: 1 1 165px;
  min-width: 150px;
  max-width: 280px;
}

.tx-seat.current-turn {
  border: 2px solid var(--primary-color, #4a90e2);
}

.tx-seat.folded {
  opacity: 0.55;
}

.tx-seat.winner {
  background: rgba(39, 174, 96, 0.18);
  border: 1px solid #27ae60;
}

.tx-seat-header {
  font-weight: 600;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.tx-seat-chips {
  margin-top: 2px;
  line-height: 1.4;
}

/* D / SB / BB 位置標記 */
.tx-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  color: #fff;
  line-height: 1.3;
}
.tx-badge-d { background: #f39c12; }
.tx-badge-sb { background: #3498db; }
.tx-badge-bb { background: #e74c3c; }

.tx-allin-badge {
  color: #e74c3c;
  font-weight: 700;
  margin-left: 6px;
}

.tx-folded-badge {
  color: #95a5a6;
  font-weight: 700;
  margin-left: 6px;
}

.tx-seat-bet {
  color: #e67e22;
  font-weight: 700;
  margin-left: 6px;
}

/* 座位上的牌（牌背或攤牌） */
.tx-seat-cards {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
/* 桌面版：座位牌與手牌同為標準尺寸（60×90，cards.css 預設），不再縮小 */

/* Mini 記法牌面（compact 模式備軌，預設隱藏） */
.tx-seat-cards-mini { display: none; }
.tx-card-back-sm { width: 22px !important; height: 32px !important; border-radius: 3px; }

/* 直式窄螢幕 compact 模式：對手牌面切換為 mini 文字記法 */
#texas-container.tx-compact .tx-seat .tx-seat-cards { display: none; }
#texas-container.tx-compact .tx-seat-cards-mini {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}

.tx-card-back {
  width: 60px;
  height: 90px;
  border-radius: 4px;
  border: 1px solid #1f4566;
  background: repeating-linear-gradient(45deg, #2c5f8a, #2c5f8a 4px, #3d7ab0 4px, #3d7ab0 8px);
}

.tx-hand-name {
  margin-top: 2px;
  font-weight: 700;
  color: #27ae60;
  font-size: 11px;
}

/* 中央牌桌：公共牌與底池 */
.tx-center {
  display: flex;
  justify-content: center;
}

.tx-table {
  background: radial-gradient(ellipse at center, #2d8a56, #1f6b41);
  border-radius: 16px;
  padding: 12px 14px;
  flex: 1;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.tx-hand-info {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.tx-pot {
  font-size: 15px;
  font-weight: 700;
  color: #ffd700;
}

.tx-community {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
/* 公共牌與手牌同為標準尺寸（60×90，cards.css 預設） */

/* 未發公共牌的空格 */
.tx-card-slot {
  width: 60px;
  height: 90px;
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
  border-radius: 5px;
}

/* showdown 各池分配 */
.tx-showdown-info {
  font-size: 12px;
  text-align: center;
  color: #fff;
}
.tx-showdown-title {
  font-weight: 700;
  font-size: 13px;
}
.tx-pot-line {
  margin-top: 2px;
}

/* 牌不可點選（靜態顯示） */
.card.tx-static {
  cursor: default;
}
.card.tx-static:hover {
  transform: none;
  box-shadow: none;
}

/* 最佳五張高亮（showdown） */
.card.tx-best {
  border: 2px solid #f1c40f;
  box-shadow: 0 0 6px rgba(241, 196, 15, 0.7);
}

/* 我的區域 */
/* 下方列：左隔壁對手 + 我的區域 + 右隔壁對手 */
.tx-bottom-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.tx-bottom-row .tx-my-area {
  flex: 1;
  min-width: 0;
}
.tx-opponents-bottom-side {
  flex: 0 0 auto;
  width: 175px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
}
.tx-opponents-bottom-side:empty {
  display: none;
}

.tx-my-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tx-my-info {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 6px;
  background: var(--bg-secondary, #f0f4f8);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.tx-my-cards {
  display: flex;
  gap: 6px;
  min-height: 40px;
}

.tx-my-cards .card.tx-folded-card {
  opacity: 0.45;
}

.tx-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.tx-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 行動倒數計時（比照 bt-action-timer） */
.tx-action-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary, #6c757d);
  padding: 2px 0;
}
.tx-action-timer #tx-action-timer-count {
  font-weight: 700;
  font-size: 16px;
  color: var(--primary-color, #e74c3c);
  min-width: 32px;
}
.tx-action-timer.urgent #tx-action-timer-count {
  color: #e74c3c;
  animation: mj-timer-blink 0.5s step-end infinite;
}

/* 加注控制：快速鈕 + 滑桿 + 金額輸入 */
.tx-raise-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-secondary, #f0f4f8);
  border-radius: 8px;
  padding: 8px 10px;
  max-width: 420px;
}

.tx-raise-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tx-raise-quick .btn {
  padding: 3px 8px;
  font-size: 12px;
}

.tx-rebuy-section {
  margin: 8px 0;
  padding: 8px 10px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.4);
  border-radius: 6px;
}
.tx-rebuy-label { font-size: 13px; margin-bottom: 6px; }
.tx-rebuy-row { display: flex; gap: 8px; align-items: center; }
.tx-rebuy-amount { width: 90px; padding: 4px 8px; }
.tx-blind-level-info {
  font-size: 12px;
  color: var(--text-secondary, #888);
  margin-bottom: 6px;
}

.tx-pre-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  background: rgba(74, 144, 226, 0.12);
  border: 1px solid rgba(74, 144, 226, 0.4);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-primary, #333);
}
.tx-pre-cancel-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
  color: var(--text-secondary, #888);
  line-height: 1;
}
.tx-pre-cancel-btn:hover { color: var(--danger, #dc3545); }
.tx-actions.pre-action-mode button { opacity: 0.55; }
.tx-actions.pre-action-mode button.pre-selected {
  opacity: 1;
  outline: 2px solid var(--primary-color, #4a90e2);
  outline-offset: 1px;
}

.tx-raise-slider {
  width: 100%;
}

.tx-raise-confirm-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tx-raise-amount {
  width: 110px;
}

/* 手尾結算面板（比照 bt-round-end-panel） */
.tx-hand-end-panel {
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}
.tx-hand-end-players {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tx-hand-end-player {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 6px 10px;
  min-width: 160px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.tx-hand-end-player.winner {
  background: rgba(39, 174, 96, 0.35);
  border: 1px solid #27ae60;
}

/* 結算面板：牌型比較區 */
.tx-he-compare {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.tx-he-compare-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px 10px;
}
.tx-he-compare-row.winner {
  background: rgba(39, 174, 96, 0.3);
  border: 1px solid #27ae60;
}
.tx-he-compare-name {
  font-weight: 600;
  min-width: 90px;
}
/* 手機：結算比較牌縮小（36×54），並隱藏倒置角標 */
@media (max-width: 768px), (max-height: 500px) {
  .tx-he-compare-cards .card {
    width: 36px;
    height: 54px;
    font-size: 9px;
  }
  .tx-he-compare-cards .card .card-corner {
    font-size: 1.15em;
    line-height: 1.1;
  }
  .tx-he-compare-cards .card .card-corner.bottom-right {
    display: none;
  }
  .tx-he-compare-cards .card .card-center {
    font-size: 1.5em;
    top: auto;
    left: auto;
    bottom: 6%;
    right: 8%;
    transform: none;
  }
}

/* 結算面板：牌型比較標題（可點擊展開/收合） */
.tx-he-compare-header {
  font-weight: 700;
  margin: 8px 0 4px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tx-he-compare-header:hover { opacity: 0.75; }
.tx-he-toggle-icon { font-size: 0.9em; }
.tx-he-compare-count { font-weight: 400; opacity: 0.6; font-size: 0.9em; }
.tx-he-compare.tx-he-hidden { display: none; }

/* 結算面板牌型比較：預設圖形牌；容器不足時加 .tx-mini 切換為文字記法 */
.tx-he-compare-mini {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.tx-he-compare.tx-mini .tx-he-compare-cards {
  display: none;
}
.tx-he-compare.tx-mini .tx-he-compare-mini {
  display: flex;
}
/* 底牌（hole cards）金框標示 */
.tx-mini-card.tx-mini-best {
  border: 2px solid #f0b429;
  box-shadow: 0 0 4px rgba(240, 180, 41, 0.7);
  font-weight: 800;
}
/* 結算比較區：mini 牌略大，提升易讀性 */
.tx-he-compare .tx-mini-card {
  font-size: 13px;
  padding: 2px 5px;
}

/* 勝率顯示 */
.tx-win-rate {
  font-weight: 700;
  margin-left: 6px;
  white-space: nowrap;
}

/* 行動建議（顯示在勝率旁） */
.tx-suggest {
  font-weight: 600;
  margin-left: 6px;
  white-space: nowrap;
  color: #8e44ad;
}

/* ─── 視訊嵌入玩家座位（德州撲克）────────────────────────────────────
   視訊 tile 顯示在每位玩家座位內（名字下方），比全部擠在底部
   video-bar 直覺；名字座位上已有，隱藏 tile 自帶的 label */
.tx-seat-video:empty {
  display: none;
}
.tx-seat-video {
  margin-top: 4px;
}
.tx-seat-video .video-tile {
  width: 80px;
  height: 80px;
}
.tx-seat-video .video-tile-label {
  display: none;
}
/* 自己的視訊：行內顯示在資訊列尾端，再小一點 */
.tx-my-video {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 0 0 8px;
}
.tx-my-video .video-tile {
  width: 56px;
  height: 56px;
}
/* 視訊大小依人數自動縮放（JS 設定 tx-video-md / tx-video-sm class） */
#texas-container.tx-video-md .tx-seat-video .video-tile {
  width: 64px;
  height: 64px;
}
#texas-container.tx-video-md .tx-my-video .video-tile {
  width: 48px;
  height: 48px;
}
#texas-container.tx-video-sm .tx-seat-video .video-tile {
  width: 48px;
  height: 48px;
}
#texas-container.tx-video-sm .tx-my-video .video-tile {
  width: 36px;
  height: 36px;
}
@media (max-width: 768px) {
  .tx-seat-video .video-tile {
    width: 64px;
    height: 64px;
  }
  .tx-my-video .video-tile {
    width: 48px;
    height: 48px;
  }
}
.tx-ready-btn {
  margin-top: 10px;
  width: 100%;
}
.tx-ready-countdown {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* 行動裝置：對手間距縮小（牌面尺寸見檔末「行動裝置響應式」區塊） */
@media (max-width: 768px) {
  .tx-opponents {
    gap: 4px;
  }
}

/* ─── 縮小牌面修正（大老二）──────────────────────────────────────────
   cards.css 的 .card-corner(16px)/.card-center(24px) 為固定字級，
   縮小後的牌（如 32×48）會重疊變形；改為跟隨 .card 的 font-size 縮放。
   小牌同時隱藏右下倒置角標（倒置的 6/9、A 在小尺寸下易誤讀），
   只保留左上角標 + 中央花色，提升可讀性。
   （德州撲克桌面版已改用標準 60×90 牌面，不需此修正） */
.bt-last-play .card .card-corner,
.bt-round-end-cards .card .card-corner {
  font-size: 1.15em;
  line-height: 1.1;
}
.bt-last-play .card .card-corner.bottom-right,
.bt-round-end-cards .card .card-corner.bottom-right {
  display: none;
}
.bt-last-play .card .card-center,
.bt-round-end-cards .card .card-center {
  font-size: 1.5em;
  /* 中央花色移到右下，避免與左上角標視覺打架 */
  top: auto;
  left: auto;
  bottom: 6%;
  right: 8%;
  transform: none;
}

/* ─── 行動裝置響應式（德州撲克）──────────────────────────────────────
   行動裝置上的牌統一改用十三張房手機版牌面規格（45×65，
   corner 10px / center 18px 置中、保留倒置角標），可讀性最佳。
   除了窄寬度（直式），也涵蓋「矮高度」（橫式手機寬度常 >768px 但高度受限），
   橫式時維持小牌避免畫面塞不下所有玩家。 */
@media (max-width: 768px), (max-height: 500px) {
  .tx-seat-cards .card,
  .tx-community .card,
  .tx-my-cards .card,
  .tx-card-slot,
  .tx-card-back {
    width: 45px;
    height: 65px;
  }
  .tx-seat-cards .card .card-corner,
  .tx-community .card .card-corner,
  .tx-my-cards .card .card-corner {
    font-size: 10px;
    line-height: 1.1;
  }
  .tx-seat-cards .card .card-center,
  .tx-community .card .card-center,
  .tx-my-cards .card .card-center {
    font-size: 18px;
  }
  .tx-seat {
    padding: 4px 6px;
    font-size: 12px;
    flex: 1 1 140px;
    min-width: 120px;
    max-width: none;
  }
  .tx-seat-header {
    flex-wrap: wrap;
  }
  .tx-community {
    flex-wrap: wrap;
  }
}

/* 德州撲克歷史列：明細行與簡易牌面記法 */
.tx-ht-line {
  margin: 2px 0;
  font-size: 12px;
}
.tx-mini-card {
  font-weight: 700;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 3px;
  margin: 0 1px;
  display: inline-block;
  font-size: 11px;
}

/* ===== 遊戲結束排名動畫 Overlay（三種遊戲共用）===== */
.ge-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ge-fade-in 0.4s ease;
}
@keyframes ge-fade-in { from { opacity: 0; } to { opacity: 1; } }

.ge-panel {
  background: #1a1f2e;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 28px 32px 24px;
  min-width: 320px;
  max-width: 480px;
  width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ge-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
}
.ge-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 48px;
}
.ge-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.ge-item.ge-item-show { opacity: 1; transform: translateX(0); }
.ge-winner {
  background: linear-gradient(135deg, rgba(255,215,0,0.25) 0%, rgba(255,165,0,0.15) 100%);
  border: 1px solid rgba(255,215,0,0.45);
  animation: ge-winner-glow 2s ease-in-out infinite;
}
@keyframes ge-winner-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(255,215,0,0.3); }
  50%       { box-shadow: 0 0 28px rgba(255,215,0,0.7); }
}
.ge-rank {
  font-size: 22px;
  min-width: 32px;
  text-align: center;
}
.ge-name {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.ge-value {
  font-size: 14px;
  color: #aac;
  white-space: nowrap;
}
.ge-winner .ge-name, .ge-winner .ge-value { color: #ffd700; }
.ge-footer {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

/* 版本更新橫幅 */
.version-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: #e67e22;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.version-update-btn {
  background: #fff;
  color: #e67e22;
  border: none;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.version-update-btn:hover { background: #fde3c4; }
.ge-footer.hidden { display: none; }

/* ── 遊戲通知設定 ─────────────────────────────── */
.notif-bell-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1em;
  padding: 0 4px;
  opacity: 0.6;
  vertical-align: middle;
  line-height: 1;
}
.notif-bell-btn:hover { opacity: 1; }
.notif-bell-btn.active { opacity: 1; color: #f39c12; }

#notif-settings-modal .modal-content {
  max-width: 380px;
}
.notif-settings-body { padding-top: 8px; padding-bottom: 8px; }
.notif-master-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 15px;
}
.notif-section { margin-top: 4px; }
.notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  gap: 12px;
}
.notif-row-label { font-size: 13px; }
.notif-row-desc { font-size: 11px; opacity: 0.55; margin-top: 1px; }
.notif-freq-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 6px 0;
  font-size: 13px;
  flex-wrap: wrap;
}
.notif-freq-row select,
.notif-freq-row input[type=number] {
  background: #f5f5f5;
  border: 1px solid #ccc;
  color: inherit;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 13px;
}
.notif-freq-row input[type=number] { width: 56px; }
.notif-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.notif-toggle input { opacity: 0; width: 0; height: 0; }
.notif-slider {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: #ccc;
  cursor: pointer;
  transition: background 0.2s;
}
.notif-toggle input:checked + .notif-slider { background: #27ae60; }
.notif-slider::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 3px; top: 3px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.notif-toggle input:checked + .notif-slider::after { transform: translateX(18px); }
.notif-save-row {
  margin-top: 14px;
  text-align: right;
}
.notif-save-btn {
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.notif-save-btn:hover { background: #219a52; }
.notif-no-fcm {
  font-size: 12px;
  opacity: 0.7;
  padding: 8px 0;
  text-align: center;
}