/* 失落的城市 模拟双人对战 - 完整 CSS 样式系统 */

/* =========================================
   1. 顶部控制栏
   ========================================= */
.lc-match-controls-bar {
  background: rgba(20, 23, 26, 0.9);
  border: 1px solid var(--lc-border);
  border-radius: 10px;
  padding: 0.8rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.lc-match-status-banner {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid var(--lc-gold);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lc-turn-badge {
  background: linear-gradient(135deg, #d4af37, #f39c12);
  color: #14171a;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  box-shadow: 0 0 12px rgba(241, 196, 15, 0.35);
}

.lc-match-controls-bar .lc-btn-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lc-match-controls-bar .lc-btn-action {
  font-size: 0.85rem;
  padding: 0.5rem 0.9rem;
}

.lc-speed-select {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--lc-border);
  color: var(--lc-text-primary);
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}

/* =========================================
   2. 主战场三列布局
   ========================================= */
.lc-arena-container {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.lc-sim-top-row {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  flex-wrap: wrap;
}

.lc-board-panel {
  background: rgba(20, 23, 26, 0.85);
  border: 1.5px solid var(--lc-border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}

/* 左: 中央桌面 */
.lc-sim-board-zone {
  flex: 2.2;
  min-width: 440px;
}

/* 中: 玩家看板 */
.lc-sim-players-zone {
  flex: 1.1;
  min-width: 270px;
  display: flex;
  flex-direction: column;
}

/* 右: 日志面板 */
.lc-sim-log-zone {
  flex: 0.9;
  min-width: 250px;
  display: flex;
  flex-direction: column;
}

.lc-zone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--lc-border);
  margin-bottom: 0.8rem;
}

.lc-zone-badge {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--lc-gold);
}

.lc-zone-sub {
  font-size: 0.75rem;
  color: var(--lc-text-muted);
}

/* =========================================
   3. 中央远征桥面 (抄牌堆 + 弃牌区)
   ========================================= */
.lc-center-board {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 抄牌堆 + 弃牌区 横向并列容器 */
.lc-deck-discard-row {
  display: flex;
  gap: 0.8rem;
  align-items: stretch;
}

/* 左: 公共主抄牌堆 */
.lc-deck-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: linear-gradient(135deg, #2b323c 0%, #15181e 100%);
  border: 2px solid var(--lc-border-highlight);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  min-width: 80px;
  flex-shrink: 0;
}

.lc-deck-panel.danger {
  border-color: #e74c3c;
  animation: deckPulse 1.2s infinite;
}

.lc-deck-panel-label {
  font-size: 0.65rem;
  color: var(--lc-text-muted);
  font-weight: 600;
  text-align: center;
  margin-bottom: 2px;
}

/* 右: 5 路线弃牌区容器 */
.lc-discard-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

@keyframes deckPulse {
  0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

.lc-sim-deck-count {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--lc-gold);
  line-height: 1;
}

.lc-discard-row-label {
  font-size: 0.78rem;
  color: var(--lc-text-muted);
  margin-bottom: 0.1rem;
}

.lc-sim-5routes-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

/* 单路线弃牌槽 */
.lc-sim-route-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.lc-route-col-header {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  color: #fff;
  text-align: center;
}

.lc-sim-discard-slot {
  width: 68px;
  height: 100px;
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.3s;
  overflow: hidden;
}

.lc-sim-discard-slot .lc-top-card {
  width: 60px;
  height: 90px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  padding: 4px;
  text-align: center;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.lc-sim-discard-slot .empty-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.2);
  text-align: center;
}

/* 下方已出牌计数 */
.lc-route-card-count {
  font-size: 0.7rem;
  color: var(--lc-text-muted);
}

/* =========================================
   4. 玩家实时看板
   ========================================= */
.lc-players-vertical {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.lc-player-panel {
  background: rgba(14, 17, 22, 0.7);
  border: 1.5px solid var(--lc-border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all 0.3s;
  cursor: default;
}

.lc-player-panel.is-active {
  border-color: var(--lc-gold);
  box-shadow: 0 0 16px rgba(241, 196, 15, 0.25);
  background: rgba(212, 175, 55, 0.08);
}

.lc-player-panel.is-active .lc-p-name {
  color: var(--lc-gold);
}

.lc-p-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.lc-p-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--lc-text-primary);
}

.lc-p-score {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--lc-gold);
}

.lc-p-score.negative {
  color: #e74c3c;
}

/* 路线得分明细 (5路线小格子) */
.lc-p-route-scores {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.lc-route-score-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}

.lc-route-score-pill.positive {
  background: rgba(39, 174, 96, 0.3);
  border-color: #27ae60;
}

.lc-route-score-pill.negative {
  background: rgba(231, 76, 60, 0.3);
  border-color: #e74c3c;
}

.lc-route-score-pill.zero {
  background: rgba(100, 100, 100, 0.3);
}

/* 手牌计数 */
.lc-p-hand-info {
  font-size: 0.75rem;
  color: var(--lc-text-muted);
}

/* 已出牌数量小徽章 */
.lc-p-cards-summary {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}

.lc-mini-route-badge {
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 4px;
  color: #fff;
  font-weight: 700;
}

/* =========================================
   5. 实时对战日志
   ========================================= */
.lc-log-stream {
  flex: 1;
  overflow-y: auto;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.lc-log-entry {
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
  border-radius: 5px;
  border-left: 3px solid transparent;
  line-height: 1.4;
  color: var(--lc-text-primary);
}

.lc-log-entry.turn-p1 {
  border-left-color: #3498db;
  background: rgba(52, 152, 219, 0.08);
}

.lc-log-entry.turn-p2 {
  border-left-color: #e74c3c;
  background: rgba(231, 76, 60, 0.08);
}

.lc-log-entry.system {
  border-left-color: var(--lc-gold);
  background: rgba(212, 175, 55, 0.1);
  color: var(--lc-gold);
  font-weight: 600;
}

.lc-log-entry.victory {
  border-left-color: #2ecc71;
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
  font-weight: 700;
}

.lc-log-entry.finalround {
  border-left-color: #e74c3c;
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  font-weight: 700;
}

.lc-log-time {
  font-size: 0.65rem;
  color: var(--lc-text-muted);
  margin-right: 0.3rem;
}

/* =========================================
   6. 胜利弹窗
   ========================================= */
.lc-winner-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lc-winner-card {
  background: linear-gradient(135deg, #1e242d 0%, #14171a 100%);
  border: 2px solid var(--lc-gold);
  border-radius: 20px;
  padding: 2.5rem;
  max-width: 600px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(241, 196, 15, 0.2);
  animation: slideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.lc-winner-trophy {
  font-size: 4rem;
  display: block;
  margin-bottom: 0.8rem;
  animation: trophySpin 1.5s ease-out;
}

@keyframes trophySpin {
  0% { transform: rotate(-15deg) scale(0.6); }
  60% { transform: rotate(8deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}

.lc-winner-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--lc-gold);
  margin-bottom: 0.5rem;
}

.lc-score-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: 0.9rem;
}

.lc-score-table th,
.lc-score-table td {
  border: 1px solid var(--lc-border);
  padding: 0.6rem 0.8rem;
  text-align: center;
}

.lc-score-table th {
  background: rgba(0, 0, 0, 0.4);
  color: var(--lc-text-muted);
  font-size: 0.8rem;
}

.lc-score-table tr.winner-row td {
  color: var(--lc-gold);
  font-weight: 700;
  background: rgba(212, 175, 55, 0.1);
}

/* =========================================
   7. 场上已出牌 — 远征区卡牌堆叠
   ========================================= */
.lc-expeditions-section {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lc-exp-section-label {
  font-size: 0.78rem;
  color: var(--lc-text-muted);
  font-weight: 600;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--lc-border);
  padding-bottom: 0.3rem;
}

.lc-exp-player-row {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--lc-border);
}

.lc-exp-player-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--lc-text-primary);
  margin-bottom: 0.4rem;
}

/* 5 路线横排网格 */
.lc-exp-routes-grid {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
}

/* 单路线列 */
.lc-exp-route-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex: 1;
  min-width: 52px;
}

/* 路线标题（含颜色 + 投资倍率徽章） */
.lc-exp-route-hdr {
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 5px 5px 0 0;
  border: 1.5px solid transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.lc-mult-badge {
  font-size: 0.6rem;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 800;
}

/* 空路线槽 */
.lc-exp-empty-slot {
  width: 100%;
  height: 60px;
  border: 1.5px dashed rgba(255, 255, 255, 0.1);
  border-radius: 0 0 5px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.15);
  font-size: 0.9rem;
}

/* 卡牌堆叠容器 — 相对定位，卡片绝对叠放 */
.lc-card-stack {
  position: relative;
  width: 100%;
  /* 高度自适应：最多展示 ~6 张的叠加高度 */
  min-height: 70px;
}

/* 单张叠放卡牌 */
.lc-stacked-card {
  position: relative;
  width: 100%;
  height: 28px;
  border: 1.5px solid;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  margin-top: -6px; /* 叠牌偏移，形成堆叠感 */
  transition: transform 0.15s ease;
  cursor: default;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.lc-stacked-card:first-child {
  margin-top: 0;
}

/* 顶牌（最后打出的那张）略高亮并稍微偏移 */
.lc-stacked-card.top-card {
  height: 32px;
  font-size: 0.85rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.lc-stacked-card.invest {
  font-size: 0.9rem;
}

.lc-stacked-card:hover {
  transform: translateY(-3px) scale(1.05);
  z-index: 10;
}

.lc-card-label {
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* 路线小计分数 */
.lc-exp-route-score {
  font-size: 0.72rem;
  font-weight: 800;
  margin-top: 2px;
}

/* =========================================
   8. 玩家手牌展示
   ========================================= */
.lc-p-hand-section {
  margin-top: 0.3rem;
}

.lc-p-section-title {
  font-size: 0.73rem;
  color: var(--lc-text-muted);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

/* 手牌横向滚动行 */
.lc-hand-cards-row {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

/* 按颜色分组的手牌小组 */
.lc-hand-group {
  display: flex;
  gap: 0.15rem;
  align-items: center;
  flex-wrap: nowrap;
}

/* 单张手牌卡片 */
.lc-hand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 44px;
  border-radius: 6px;
  border: 1.5px solid;
  font-weight: 800;
  cursor: default;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  flex-shrink: 0;
}

.lc-hand-card:hover {
  transform: translateY(-6px) scale(1.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.lc-hand-card-val {
  font-size: 0.85rem;
  line-height: 1;
}

.lc-hand-card-ico {
  font-size: 0.55rem;
  opacity: 0.8;
  margin-top: 1px;
}

.lc-hand-card.invest .lc-hand-card-val {
  font-size: 0.9rem;
}

.lc-empty-tip {
  font-size: 0.72rem;
  color: var(--lc-text-muted);
  font-style: italic;
}