/* ===== 游戏页面样式 ===== */

.game-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
  min-height: 100vh;
}

/* ===== 头部左侧（标题区，复用）===== */
.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-left h1 {
  font-size: 1.5rem;
  margin: 0;
  font-weight: 600;
}

/* ===== 快速排行榜 ===== */
.quick-scores {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
}

.quick-scores h3 {
  font-size: 1rem;
  margin-bottom: 0.875rem;
  color: var(--text-light);
  font-weight: 500;
}

.quick-score-list {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.quick-score-list::-webkit-scrollbar {
  height: 6px;
}

.quick-score-list::-webkit-scrollbar-track {
  background: transparent;
}

.quick-score-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.quick-score-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: var(--bg);
  border-radius: 10px;
  white-space: nowrap;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.quick-score-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.quick-score-value {
  color: var(--success);
  font-weight: bold;
  font-size: 0.95rem;
}

/* ===== 游戏表格 ===== */
.game-table-wrapper {
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.game-table {
  width: 100%;
  border-collapse: collapse;
  /* fixed 布局：列宽由表头宽度决定，长名字按上限截断而不把后面列挤掉/裁掉 */
  table-layout: fixed;
}

.game-table thead {
  background: var(--card-hover);
  border-bottom: 2px solid var(--border);
}

.game-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-light);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.col-player {
  width: 150px;
}

.col-role {
  width: 100px;
}

.col-word {
  width: 120px;
}

/* 各轮发言列：不定宽，吸收表格剩余空间（少轮铺满、多轮均分），固定列不被拉伸 */
.col-round {
  text-align: center;
}

.col-speech {
  width: auto;
}

.game-table tbody tr {
  border-top: 1px solid var(--border);
  transition: background 0.2s;
}

.game-table tbody tr:hover {
  background: var(--card-hover);
}

.game-table tbody tr:first-child {
  border-top: none;
}

.game-table td {
  padding: 1rem;
  vertical-align: top;
}

/* 玩家信息单元格 */
.player-cell {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0; /* 允许内部名字收缩/截断，而非撑开列 */
}

/* 头像与各类标记（「标记」/💀/复活 等）固定大小、永不收缩；
   只有名字会收缩省略——保证标记按钮永不被长名字挤掉或盖住 */
.player-cell > :not(.player-name) {
  flex-shrink: 0;
}

.player-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.5rem;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}

.player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-avatar:empty {
  font-size: 1.1rem;
}

/* 文字头像（1-2 个字）：2 字时缩小字号，避免圆形容器裁切 */
.player-avatar .avatar-text.is-2 { font-size: 0.95rem; }

.player-name {
  font-weight: 600;
  font-size: 1rem;
  /* 单行显示；占满头像与按钮之间的剩余空间，过长尾部省略。
     与按钮「瓜分」列宽，彼此永不会互相遮挡 */
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 角色标签 */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
}

/* 已分配角色的配色由 roleColorStyle() 内联注入（按角色取色，不跟随阵营；定义见 js/wodi-color.js） */

/* 未分配角色（玩家已加入但尚未随机发牌） */
.role-badge.faction-unassigned {
  background: transparent;
  color: var(--text-light);
  border: 1px dashed var(--border);
}

/* 管理员·身份徽章可点：单独修改该玩家身份（紧急补救发错） */
.role-badge.change-role-badge {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.role-badge.change-role-badge:hover {
  opacity: 0.8;
}

/* 非管理员·玩家身份猜测标记（玩家名后内联，仅本机 localStorage） */
.guess-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.45rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px dashed var(--border);
  color: var(--text-light);
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.guess-mark:hover { background: rgba(0, 0, 0, 0.05); border-color: var(--text-light); }
.guess-mark:active { transform: scale(0.96); }
.guess-mark.disabled { cursor: default; opacity: 0.45; }
.guess-mark.disabled:hover { background: transparent; border-color: var(--border); }
/* 已猜：复用 role-badge 配色（角色色由 roleColorStyle 内联注入），缩小到与按钮一致 */
.role-badge.guess-mark { padding: 0.15rem 0.6rem; font-size: 0.75rem; gap: 0.2rem; border-style: solid; }

/* 猜测弹窗·角色选项网格 */
.guess-role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.guess-role-option {
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.82;
  transition: transform 0.1s, opacity 0.15s;
}
.guess-role-option:hover { opacity: 1; transform: translateY(-1px); }
.guess-role-option.selected { outline: 2px solid var(--text); outline-offset: 1px; opacity: 1; }

/* 词语显示 */
.word-display {
  padding: 0.625rem 1rem;
  background: var(--bg);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text-light);
  text-align: center;
  border: 1px solid var(--border);
}

/* 发言单元格（每轮一列） */
.speech-cell {
  min-width: 140px;
  vertical-align: top;
}

.speech-content {
  display: block;
  padding: 0.625rem 0.875rem;
  background: var(--bg);
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: default;
  transition: all 0.2s;
  border: 1px solid transparent;
  line-height: 1.4;
  min-height: 32px;
}

/* 仅管理员：整格可点编辑 → 悬浮反馈；非管理员纯只读展示，无任何交互态 */
body.is-admin .speech-cell {
  cursor: pointer;
}
body.is-admin .speech-content:hover {
  border-color: var(--primary);
  background: var(--card-hover);
}

.speech-content.empty {
  color: var(--text-light);
  font-style: italic;
}

/* ===== 轮次控制 ===== */
.round-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.5rem;
  background: var(--card-bg);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.round-controls span {
  color: var(--text-light);
  font-size: 0.95rem;
}

.round-controls strong {
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 700;
}

/* 回退上一轮按钮：无可回退轮次时置灰（与功能菜单禁用态一致） */
.round-controls .btn-small:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ===== 结算弹窗 ===== */
.finish-modal .modal-content {
  max-width: 500px;
  text-align: center;
  position: relative;
}

/* 右上角关闭键：玩家多、列表滚动时也始终可点 */
.finish-modal .finish-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
}

.finish-content {
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.finish-icon {
  font-size: 4.5rem;
  margin-bottom: 1rem;
  animation: bounce 1s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.finish-modal h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.finish-message {
  font-size: 1.15rem;
  color: var(--text-light);
  margin-bottom: 1.5rem;
}

.finish-scores {
  margin: 1.5rem 0;
  text-align: left;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.finish-score-item {
  display: flex;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
}

.finish-score-change {
  font-weight: 700;
  font-size: 1rem;
}

.finish-score-change.positive {
  color: var(--success);
}

.finish-score-change.negative {
  color: var(--danger);
}

/* ===== 空表格 ===== */
.empty-table td {
  padding: 4rem 2rem !important;
  text-align: center;
  color: var(--text-light);
  font-size: 1rem;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .game-table {
    font-size: 0.85rem;
  }

  .game-table th,
  .game-table td {
    padding: 0.75rem 0.5rem;
  }

  .col-speech {
    min-width: 150px;
  }

  .player-avatar {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .quick-score-list {
    flex-wrap: nowrap;
  }
}