/* ========== 探险派对 - 桌游样式（液态玻璃风格）========== */

/* ========== 性能优化：全局GPU加速 ========== */

/* 用户偏好减少动画时，禁用所有动画和过渡 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 省电模式下禁用所有动画 */
body.low-power-mode *,
body.low-power-mode *::before,
body.low-power-mode *::after {
  animation: none !important;
  transition: none !important;
}

/* 省电模式下禁用阴影和模糊（非常耗电） */
body.low-power-mode .board-game-view,
body.low-power-mode .board-card,
body.low-power-mode .board-action-area,
body.low-power-mode .board-info-bar,
body.low-power-mode .board-quiz-modal,
body.low-power-mode .event-broadcast-overlay {
  box-shadow: none !important;
  text-shadow: none !important;
}

body.low-power-mode .board-action-area,
body.low-power-mode .board-info-bar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 桌游专用配色 - Apple风格 */
:root {
  --board-bg: linear-gradient(135deg, #E8F5FF 0%, #FFF8E7 50%, #E8FFE8 100%);
  --board-path: #FFE4B5;
  --board-path-border: #DEB887;
  --board-start: #7DC84E;
  --board-finish: #FFD700;
  --board-quiz: #87CEEB;
  --board-event: #FFB6C1;
  --board-lucky: #DDA0DD;
  --board-danger: #FFA07A;
  --dice-bg: linear-gradient(145deg, #ffffff, #f0f0f0);
  --dice-shadow: 0 8px 20px rgba(0,0,0,0.15);
  --player-shadow: 0 4px 12px rgba(0,0,0,0.2);
  
  /* 液态玻璃变量 */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --glass-blur: 20px;
  --glass-text: #2c2c2c;
  --glass-subtext: rgba(44, 44, 44, 0.7);
}

/* ========== 桌游视图容器 ========== */
.board-game-view {
  padding: 0;
  min-height: 100vh;
  max-width: 100%;
  position: relative;
}

/* 游戏界面 - 必须覆盖整个屏幕 */
#boardGamePlaying {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important; /* iOS dynamic viewport height */
  z-index: 99999 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  /* 防止 iOS 下拉刷新和边缘手势 */
  overscroll-behavior: none;
  touch-action: none;
  /* 确保完全覆盖 */
  background: var(--board-theme-bg, linear-gradient(135deg, #E8F5FF 0%, #FFF8E7 50%, #E8FFE8 100%));
  /* 确保不受父元素 transform 影响 */
  transform: none !important;
  contain: layout style;
}

#boardGamePlaying::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    radial-gradient(1200px 420px at 15% 10%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(900px 360px at 85% 20%, rgba(255, 255, 255, 0.2), transparent 65%),
    radial-gradient(700px 320px at 40% 85%, rgba(255, 255, 255, 0.18), transparent 70%);
  opacity: var(--board-bg-pattern-opacity, 0.24);
  pointer-events: none;
  z-index: 0;
}

/* 主题装饰层基础定义已移至 .board-track-wrapper::before */

/* 游戏中禁止 body 滚动 */
body.board-game-active {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  touch-action: none !important;
}

/* PWA/全屏时避免父级滚动容器裁剪 */
body.board-game-active .app,
body.board-game-active .main {
  overflow: visible !important;
}

/* 隐藏主导航和头部（游戏全屏时） */
body.board-game-active .header,
body.board-game-active .nav-bar,
body.board-game-active .app > .header,
body.board-game-active .app > .nav-bar,
body.board-game-active #mainApp > .header,
body.board-game-active #mainApp > .nav-bar {
  display: none !important;
  visibility: hidden !important;
}

#boardGamePlaying .board-game-card {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  max-width: 100%;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  border-radius: 0;
  padding: 0;
  z-index: 1;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#boardGameResult .board-game-card {
  max-width: 100%;
  margin: 0 auto;
}

/* 桌游卡片容器 */
.board-game-card {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  padding: 20px;
  backdrop-filter: blur(10px);
}

/* ========== 桌游大厅 ========== */
.board-lobby {
  text-align: center;
}

.board-lobby-title {
  font-size: 32px;
  background: linear-gradient(135deg, #FF6B6B, #FFD93D, #7DC84E, #4ECDC4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  animation: titleShine 3s ease-in-out infinite;
}

@keyframes titleShine {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

.board-lobby-subtitle {
  color: var(--text-light);
  font-size: 16px;
  margin-bottom: 24px;
}

/* 模式选择卡片 */
.board-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.board-mode-card {
  background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
  border: 3px solid transparent;
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.board-mode-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6B6B, #FFD93D, #7DC84E);
  opacity: 0;
  transition: opacity 0.3s;
}

.board-mode-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(125, 200, 78, 0.2);
}

.board-mode-card:hover::before {
  opacity: 1;
}

.board-mode-card.selected {
  border-color: var(--primary);
  background: linear-gradient(135deg, #E8F5E9 0%, #fff 100%);
}

.board-mode-card.selected::before {
  opacity: 1;
}

.board-mode-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.board-mode-name {
  font-size: 20px;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.board-mode-desc {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.5;
}

/* 学科选择 */
.board-subject-section {
  margin-bottom: 24px;
}

.board-subject-label {
  font-size: 16px;
  color: var(--text-dark);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.board-subject-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.board-subject-btn {
  padding: 10px 24px;
  border: 2px solid #e0e0e0;
  border-radius: 25px;
  background: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.board-subject-btn:hover {
  border-color: var(--primary);
  background: #f0fff0;
}

.board-subject-btn.selected {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

/* 房间操作按钮 */
.board-action-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.board-btn {
  padding: 14px 32px;
  border: none;
  border-radius: 30px;
  font-size: 18px;
  font-family: var(--font-cute);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.board-btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(125, 200, 78, 0.4);
}

.board-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(125, 200, 78, 0.5);
}

.board-btn-secondary {
  background: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
}

.board-btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
}

.board-btn-outline {
  background: #fff;
  color: #888;
  border: 2px solid #ddd;
  box-shadow: none;
}

.board-btn-outline:hover {
  background: #f5f5f5;
  border-color: #ccc;
  color: #666;
}

/* 加入房间输入框 */
.board-join-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px dashed #e0e0e0;
}

.board-join-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.board-room-input {
  padding: 12px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 25px;
  font-size: 18px;
  font-family: var(--font-cute);
  width: 160px;
  text-align: center;
  letter-spacing: 4px;
  transition: border-color 0.2s;
}

.board-room-input:focus {
  outline: none;
  border-color: var(--primary);
}

.board-room-input::placeholder {
  letter-spacing: normal;
  color: #ccc;
}

/* ========== 等待室 ========== */
.board-waiting {
  text-align: center;
}

.board-waiting-header {
  margin-bottom: 24px;
}

.board-room-code {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #FFD93D 0%, #FFA500 100%);
  padding: 12px 24px;
  border-radius: 16px;
  margin-bottom: 12px;
}

.board-room-code-label {
  font-size: 14px;
  color: #fff;
  opacity: 0.9;
}

.board-room-code-value {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 4px;
}

.board-room-code-copy {
  background: rgba(255,255,255,0.3);
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s;
}

.board-room-code-copy:hover {
  background: rgba(255,255,255,0.5);
}

/* 玩家列表 - 赛道预览 */
.board-players-preview {
  background: linear-gradient(135deg, #E8F5FF 0%, #FFF8E7 100%);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}

.board-players-title {
  font-size: 18px;
  color: var(--text-dark);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.board-player-slots {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.board-player-slot {
  width: 100px;
  padding: 16px 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.3s;
  position: relative;
}

.board-player-slot.occupied {
  border: 2px solid var(--primary);
}

.board-player-slot.empty {
  border: 2px dashed #ccc;
  opacity: 0.6;
}

.board-player-slot.ready {
  background: linear-gradient(135deg, #E8FFE8 0%, #fff 100%);
}

.board-player-slot.ready::after {
  content: '✓';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.board-player-avatar {
  width: 56px;
  height: 56px;
  margin: 0 auto 8px;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f5f5;
}

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

.board-player-name {
  font-size: 14px;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-player-empty {
  font-size: 32px;
  opacity: 0.3;
  margin-bottom: 8px;
}

/* 等待室按钮 */
.board-waiting-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.board-btn-ready {
  background: linear-gradient(135deg, #4ECDC4 0%, #26A69A 100%);
  color: #fff;
}

.board-btn-ready.is-ready {
  background: linear-gradient(135deg, #9E9E9E 0%, #757575 100%);
}

.board-btn-start {
  background: linear-gradient(135deg, #FF6B6B 0%, #EE5A24 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(238, 90, 36, 0.4);
}

.board-btn-start:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.board-btn-leave {
  background: #fff;
  color: #999;
  border: 2px solid #e0e0e0;
}

.board-btn-leave:hover {
  border-color: #FF6B6B;
  color: #FF6B6B;
}

/* ========== 游戏进行中 - 全屏地图布局 ========== */
.board-playing {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 顶部玩家状态栏 - 液态玻璃风格 */
.board-game-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  z-index: 50;
  color: var(--glass-text);
}

/* 退出按钮 */
.board-exit-btn {
  position: absolute;
  left: 12px;
  /* 考虑safe-area，按钮垂直居中于实际内容区域 */
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 82, 82, 0.9);
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(255, 82, 82, 0.4);
  transition: all 0.2s ease;
  z-index: 10;
}

.board-exit-btn:hover {
  background: #ff3333;
  color: white;
  transform: scale(1.1);
}

.board-exit-btn:active {
  transform: scale(0.95);
}

/* 移动端退出按钮调整 */
@media (max-width: 767px) {
  .board-exit-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
    left: 10px;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
  }
}

/* iPhone PWA 退出按钮 - 确保可见且可点击 */
body.iphone-pwa-mode .board-exit-btn,
body.iphone-safari-browser .board-exit-btn {
  width: 34px;
  height: 34px;
  font-size: 15px;
  left: 12px;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  background: rgba(255, 82, 82, 0.95);
  box-shadow: 0 2px 12px rgba(255, 82, 82, 0.5);
}

/* 退出确认对话框 */
.exit-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

.exit-confirm-overlay.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

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

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

.exit-confirm-dialog {
  background: white;
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: dialogPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 300px;
}

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

.exit-confirm-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.exit-confirm-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.exit-confirm-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.exit-confirm-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.exit-cancel-btn,
.exit-confirm-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 25px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.exit-cancel-btn {
  background: linear-gradient(135deg, #4CAF50, #8BC34A);
  color: white;
}

.exit-confirm-btn {
  background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
  color: white;
}

.exit-cancel-btn:hover,
.exit-confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.exit-cancel-btn:active,
.exit-confirm-btn:active {
  transform: translateY(0);
}
  gap: 12px;
  flex-wrap: wrap;
}

.board-turn-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.board-turn-label {
  font-size: 13px;
  color: var(--glass-subtext);
}

.board-current-player {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border-radius: 16px;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(125, 200, 78, 0.3);
}

.board-current-player img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.board-round-info {
  font-size: 13px;
  color: var(--glass-subtext);
}

/* 游戏主区域布局 - 全屏地图 */
.board-game-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}

/* 赛道容器（Canvas版本）- 全屏显示，支持拖拽 */
.board-track-wrapper {
  position: absolute;
  top: 55px;
  left: 0;
  right: 0;
  bottom: calc(115px + env(safe-area-inset-bottom));
  width: 100%;
  height: calc(100% - 170px - env(safe-area-inset-bottom)); /* 减小底部区域高度 */
  min-height: 200px;
  background: transparent;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  cursor: grab;
  /* 允许地图内滚动，但防止边缘手势 */
  touch-action: pan-x pan-y;
  overscroll-behavior: contain;
}

/* 隐藏滚动条但保留滚动功能 */
.board-track-wrapper::-webkit-scrollbar {
  display: none;
}
.board-track-wrapper {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.board-track-wrapper:active {
  cursor: grabbing;
}

/* 地图画布 - 紧凑布局，尽量在视口内显示 */
#boardMapCanvas {
  display: block;
  touch-action: pan-x pan-y;
  /* 不设置min-width/min-height，让它自适应 */
}

#boardPlayerCanvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
}

.board-track-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 旧版赛道容器（保留兼容） */
.board-track-container {
  background: var(--board-bg);
  border-radius: 20px;
  padding: 30px 20px;
  margin-bottom: 20px;
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

/* 直线赛道 */
.board-track-linear {
  display: flex;
  gap: 8px;
  padding: 30px 10px;
  min-width: max-content;
  align-items: center;
  justify-content: flex-start;
}

/* 单个格子 */
.board-cell {
  width: 90px;
  height: 90px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  cursor: default;
  flex-shrink: 0;
}

.board-cell::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  border: 3px solid transparent;
  transition: border-color 0.3s;
}

.board-cell.highlight::before {
  border-color: var(--primary);
  animation: cellPulse 1s ease-in-out infinite;
}

@keyframes cellPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

/* 格子类型样式 */
.board-cell-start {
  background: linear-gradient(135deg, #7DC84E 0%, #5BA832 100%);
  color: #fff;
}

.board-cell-finish {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #fff;
  animation: finishGlow 2s ease-in-out infinite;
}

@keyframes finishGlow {
  0%, 100% { box-shadow: 0 4px 12px rgba(255,215,0,0.4); }
  50% { box-shadow: 0 4px 24px rgba(255,215,0,0.8); }
}

.board-cell-quiz {
  background: linear-gradient(135deg, #87CEEB 0%, #4A90D9 100%);
  color: #fff;
}

.board-cell-event {
  background: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 100%);
  color: #fff;
}

.board-cell-lucky {
  background: linear-gradient(135deg, #DDA0DD 0%, #BA55D3 100%);
  color: #fff;
}

.board-cell-normal {
  background: linear-gradient(135deg, #FFE4B5 0%, #DEB887 100%);
  color: #8B4513;
}

.board-cell-icon {
  font-size: 24px;
  margin-bottom: 2px;
}

.board-cell-label {
  font-size: 10px;
  opacity: 0.9;
}

/* 格子上的玩家棋子 */
.board-cell-players {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.board-piece {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 10;
  border: 3px solid #fff;
}

.board-piece img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.board-piece.current-turn {
  animation: piecePulse 1.5s ease-in-out infinite;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.6);
}

@keyframes piecePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(255, 215, 0, 0.6); }
  50% { transform: scale(1.1); box-shadow: 0 6px 25px rgba(255, 215, 0, 0.8); }
}

.board-piece.moving {
  animation: pieceJump 0.4s ease-out;
}

@keyframes pieceJump {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-35px) scale(1.1); }
  50% { transform: translateY(-40px) scale(1.15); }
  70% { transform: translateY(-25px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}

/* ========== CSS动画棋子（高性能优化）========== */
.css-animated-piece {
  position: absolute;
  /* 基准点：实际位置通过 transform: translate3d 控制 */
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 1000;
  /* GPU加速：will-change 在动画期间由 JS 启用 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 轻量移动特效（龙卷风等） */
#boardTornadoLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 900;
}

.board-tornado-ghost {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.95;
  pointer-events: none;
  transition: transform 420ms ease-out, opacity 420ms ease-out;
  will-change: transform, opacity;
}

.board-tornado-ghost.moving {
  opacity: 0.25;
}

.board-tornado-ghost img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.9);
  object-fit: cover;
}

.css-animated-piece .piece-avatar {
  width: var(--piece-size, 50px);
  height: var(--piece-size, 50px);
  border-radius: 50%;
  background: transparent;
  border: 4px solid var(--piece-color, #4ECDC4);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  overflow: hidden;
  /* 弹跳动画 */
  animation: cssPieceBounce 0.48s ease-out;
}

.css-animated-piece .piece-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transform-origin: center;
}

.css-animated-piece .piece-arrow {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid var(--piece-color, #4ECDC4);
}

/* 弹跳动画 - GPU加速 */
@keyframes cssPieceBounce {
  0% { 
    transform: translateY(0) scale(1); 
    animation-timing-function: ease-out;
  }
  25% { 
    transform: translateY(-20px) scale(1.08); 
    animation-timing-function: ease-in;
  }
  50% { 
    transform: translateY(-25px) scale(1.1); 
    animation-timing-function: ease-out;
  }
  75% { 
    transform: translateY(-10px) scale(1.05); 
    animation-timing-function: ease-in;
  }
  100% { 
    transform: translateY(0) scale(1); 
  }
}

/* 当前回合发光 */
.css-animated-piece.current-turn .piece-avatar {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 4px 12px rgba(0,0,0,0.25);
}

/* 移动端优化 - 简化弹跳动画 */
@media (hover: none) and (pointer: coarse) {
  .css-animated-piece .piece-avatar {
    animation-duration: 0.35s;
  }
  
  @keyframes cssPieceBounce {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-18px) scale(1.06); }
    100% { transform: translateY(0) scale(1); }
  }
}

/* 格子移动时高亮 */
.board-cell.cell-highlight {
  animation: cellPulse 0.5s ease-in-out;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 4px 12px rgba(0,0,0,0.1);
  transform: scale(1.08);
  z-index: 5;
}

@keyframes cellPulse {
  0% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
  50% { box-shadow: 0 0 25px rgba(255, 215, 0, 1); }
  100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
}

/* 连接线 */
.board-connector {
  width: 24px;
  height: 4px;
  background: linear-gradient(90deg, var(--board-path-border), var(--board-path), var(--board-path-border));
  border-radius: 2px;
  flex-shrink: 0;
}

/* ========== 骰子区域 - 紧凑液态玻璃风格 ========== */
/* 注：主样式已移到 .board-dice-area 上面的操作区域部分 */

/* 3D骰子容器 - 更小 */
.dice-container {
  width: 50px;
  height: 50px;
  perspective: 500px;
  cursor: pointer;
  position: relative;
}

/* 骰子阴影 */
.dice-container::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 15px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.15) 0%, transparent 70%);
  border-radius: 50%;
  transition: all 0.3s;
}

.dice-container:has(.dice-3d.rolling)::after {
  animation: shadowPulse 1s ease-in-out;
}

@keyframes shadowPulse {
  0%, 100% { width: 50px; opacity: 1; }
  30% { width: 30px; opacity: 0.3; }
  50% { width: 20px; opacity: 0.2; }
  70% { width: 35px; opacity: 0.5; }
}

/* 3D骰子本体 - GPU加速优化 */
.dice-3d {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(25deg);
  transition: transform 0.1s;
  /* GPU加速：避免重绘 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  /* 提示浏览器使用硬件加速 */
  perspective: 1000px;
}

/* 骰子面基础样式 - 更小 + GPU加速 */
.dice-face {
  position: absolute;
  width: 50px;
  height: 50px;
  background: linear-gradient(145deg, #fffef8, #fff5e6);
  border: 1.5px solid #ffd89b;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  box-sizing: border-box;
  box-shadow: 
    inset 0 0 10px rgba(255, 200, 100, 0.1),
    inset 0 -1px 3px rgba(0,0,0,0.05);
  /* GPU加速 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 骰子点数 - 更小 */
.dice-face .dot {
  width: 8px;
  height: 8px;
  background: linear-gradient(145deg, #ff6b6b, #ee5a5a);
  border-radius: 50%;
  box-shadow: 
    inset -1px -1px 2px rgba(0,0,0,0.2),
    inset 1px 1px 2px rgba(255,255,255,0.3),
    0 1px 2px rgba(0,0,0,0.15);
}

/* 骰子1点 - 正面 */
.dice-face-1 {
  transform: rotateY(0deg) translateZ(25px);
}
.dice-face-1 .dot {
  margin: auto;
}

/* 骰子2点 - 右面 */
.dice-face-2 {
  transform: rotateY(90deg) translateZ(25px);
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 8px;
}
.dice-face-2 .dot:first-child {
  align-self: flex-start;
}
.dice-face-2 .dot:last-child {
  align-self: flex-end;
}

/* 骰子3点 - 顶面 */
.dice-face-3 {
  transform: rotateX(90deg) translateZ(25px);
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 8px;
}
.dice-face-3 .dot:first-child {
  align-self: flex-start;
}
.dice-face-3 .dot:nth-child(2) {
  align-self: center;
}
.dice-face-3 .dot:last-child {
  align-self: flex-end;
}

/* 骰子4点 - 左面 */
.dice-face-4 {
  transform: rotateY(-90deg) translateZ(25px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  padding: 8px;
  align-items: center;
  justify-items: center;
}

/* 骰子5点 - 底面 */
.dice-face-5 {
  transform: rotateX(-90deg) translateZ(25px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 2px;
  padding: 8px;
  align-items: center;
  justify-items: center;
}
.dice-face-5 .dot:nth-child(3) {
  grid-column: 1 / 3;
  justify-self: center;
}
.dice-face-5 .dot:nth-child(4) {
  grid-column: 1;
}
.dice-face-5 .dot:nth-child(5) {
  grid-column: 2;
}

/* 骰子6点 - 背面 */
.dice-face-6 {
  transform: rotateY(180deg) translateZ(25px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 3px;
  padding: 8px;
  align-items: center;
  justify-items: center;
}

/* 骰子投掷动画 */
.dice-3d.rolling {
  animation: diceRoll3D 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes diceRoll3D {
  0% {
    transform: rotateX(-25deg) rotateY(25deg);
  }
  10% {
    transform: rotateX(45deg) rotateY(180deg) translateY(-30px);
  }
  20% {
    transform: rotateX(180deg) rotateY(360deg) translateY(-50px);
  }
  30% {
    transform: rotateX(270deg) rotateY(540deg) translateY(-60px);
  }
  40% {
    transform: rotateX(360deg) rotateY(720deg) translateY(-40px);
  }
  50% {
    transform: rotateX(450deg) rotateY(900deg) translateY(-20px);
  }
  60% {
    transform: rotateX(540deg) rotateY(1080deg) translateY(0);
  }
  70% {
    transform: rotateX(630deg) rotateY(1200deg) translateY(-10px);
  }
  80% {
    transform: rotateX(700deg) rotateY(1280deg) translateY(0);
  }
  90% {
    transform: rotateX(720deg) rotateY(1340deg) translateY(-5px);
  }
}

/* 显示特定点数 */
.dice-3d.show-1 { transform: rotateX(0deg) rotateY(0deg); }
.dice-3d.show-2 { transform: rotateX(0deg) rotateY(-90deg); }
.dice-3d.show-3 { transform: rotateX(-90deg) rotateY(0deg); }
.dice-3d.show-4 { transform: rotateX(0deg) rotateY(90deg); }
.dice-3d.show-5 { transform: rotateX(90deg) rotateY(0deg); }
.dice-3d.show-6 { transform: rotateX(0deg) rotateY(180deg); }

/* 结果显示 - 紧凑版 */
.dice-result {
  font-size: 16px;
  font-weight: bold;
  color: var(--accent-orange);
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dice-result.show {
  animation: resultPop 0.5s ease-out;
}

@keyframes resultPop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}

.board-dice-hint {
  font-size: 11px;
  color: rgba(100, 100, 100, 0.7);
  display: none;
}

/* 投掷按钮 - 紧凑液态玻璃 */
.board-btn-roll {
  background: linear-gradient(135deg, #FFD93D 0%, #FFA500 100%);
  color: #fff;
  font-size: 13px;
  padding: 8px 20px;
  border-radius: 20px;
  box-shadow: 0 3px 12px rgba(255,165,0,0.4);
}

.board-btn-roll:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 5px 18px rgba(255,165,0,0.5);
}

.board-btn-roll:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  background: linear-gradient(135deg, #ccc 0%, #aaa 100%);
  box-shadow: none;
}

.board-btn-roll.my-turn {
  animation: rollBtnPulse 1.5s ease-in-out infinite;
}

@keyframes rollBtnPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 3px 12px rgba(255,165,0,0.4); }
  50% { transform: scale(1.03); box-shadow: 0 4px 16px rgba(255,165,0,0.6); }
}

/* 表情按钮 */
.board-btn-emoji {
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
  color: #333;
  font-size: 20px;
  padding: 6px 12px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.board-btn-emoji:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.board-btn-emoji:active {
  transform: scale(0.95);
}

/* 表情气泡动画 */
@keyframes bubblePop {
  0% { transform: translateX(-50%) scale(0); opacity: 0; }
  50% { transform: translateX(-50%) scale(1.1); }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes bubbleFadeOut {
  0% { transform: translateX(-50%) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) scale(0.8) translateY(-20px); opacity: 0; }
}

@keyframes slideUp {
  0% { transform: translateX(-50%) translateY(20px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

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

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

/* ========== 回合提示 - 边缘闪烁 ========== */
.board-game-view.my-turn-glow::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1000;
  animation: turnGlow 2s ease-in-out 3;
  border: 4px solid transparent;
  border-radius: 0;
}

@keyframes turnGlow {
  0%, 100% { 
    box-shadow: inset 0 0 30px rgba(255, 215, 0, 0), inset 0 0 60px rgba(255, 215, 0, 0); 
  }
  50% { 
    box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.4), inset 0 0 60px rgba(255, 215, 0, 0.2); 
  }
}

/* 回合提示横幅 */
.turn-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  padding: 20px 40px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(255, 165, 0, 0.5);
  z-index: 2000;
  animation: turnNotify 2s ease-out forwards;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  /* 防止换行 */
  white-space: nowrap;
}

/* iPhone等小屏幕上调整回合提示 */
@media (max-width: 430px) {
  .turn-notification {
    font-size: 22px;
    padding: 16px 28px;
  }
}

@keyframes turnNotify {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.1) rotate(2deg); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  80% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.8) rotate(5deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dice-3d,
  .dice-3d.rolling,
  .board-game-view.my-turn-glow::before,
  .board-piece.current-turn,
  .board-cell.highlight,
  .turn-notification,
  .event-broadcast-overlay,
  .event-broadcast-content,
  .event-broadcast-icon,
  .board-result-crown,
  .board-event-content,
  .victory-overlay,
  .victory-content,
  .victory-crown {
    animation: none !important;
    transition: none !important;
  }
}

/* ========== 终点庆祝动画 ========== */
.victory-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.5s ease-out;
}

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

.victory-content {
  text-align: center;
  color: #fff;
  animation: victoryPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes victoryPop {
  0% { transform: scale(0) rotate(-20deg); }
  60% { transform: scale(1.1) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.victory-crown {
  font-size: 100px;
  animation: crownBounce 1s ease-in-out infinite;
}

@keyframes crownBounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

.victory-text {
  font-size: 48px;
  font-weight: bold;
  text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
  margin: 20px 0;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.victory-name {
  font-size: 32px;
  color: #fff;
  margin-bottom: 30px;
}

/* 烟花粒子 */
.firework {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: fireworkExplode 1.5s ease-out forwards;
}

@keyframes fireworkExplode {
  0% { 
    transform: translate(0, 0) scale(1); 
    opacity: 1; 
  }
  100% { 
    transform: translate(var(--tx), var(--ty)) scale(0); 
    opacity: 0; 
  }
}

/* ========== 桌游星星动画（游戏画面右上角显示）========== */
.board-star-float-animation {
  position: fixed;
  /* 定位到游戏画面（.board-track-wrapper）的右上角 */
  top: 65px; /* 游戏画面顶部55px + 10px偏移 */
  right: 15px;
  left: auto;
  transform: translateY(0) scale(1);
  font-size: 42px;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 0 4px 16px rgba(255, 215, 0, 0.8), 
               0 0 30px rgba(255, 215, 0, 0.6),
               0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 100005; /* 置顶，避免遮挡 */
  animation: boardStarFloat 2s ease-out forwards;
  white-space: nowrap;
  /* 添加背景增强可见度 */
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  border-radius: 20px;
  border: 2px solid rgba(255, 215, 0, 0.6);
}

/* 小屏幕适配 */
@media (max-width: 480px) {
  .board-star-float-animation {
    top: calc(48px + env(safe-area-inset-top, 0px) + 8px);
    font-size: 36px;
    padding: 6px 12px;
  }
}

.board-star-float-animation.loss {
  color: #FF6B6B;
  text-shadow: 0 4px 16px rgba(255, 107, 107, 0.8), 
               0 0 30px rgba(255, 107, 107, 0.6),
               0 2px 4px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 107, 107, 0.6);
}

@keyframes boardStarFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }
  15% {
    opacity: 1;
    transform: translateY(-6px) scale(1.2);
  }
  30% {
    transform: translateY(-10px) scale(1);
  }
  70% {
    opacity: 1;
    transform: translateY(-20px) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translateY(-35px) scale(0.9);
  }
}

/* ========== 答题弹窗 ========== */
.board-quiz-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100002;
  pointer-events: auto;
  touch-action: manipulation;
  padding: 20px;
  animation: modalFadeIn 0.3s ease;
}

#duelOverlay {
  z-index: 100002;
  pointer-events: auto;
  touch-action: manipulation;
}

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

.board-quiz-content {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: modalSlideIn 0.3s ease;
  position: relative;
}

@keyframes modalSlideIn {
  from { transform: translateY(30px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.board-quiz-header {
  text-align: center;
  margin-bottom: 24px;
}

.board-quiz-type {
  display: inline-block;
  padding: 6px 16px;
  background: var(--board-quiz);
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
  margin-bottom: 12px;
}

.board-quiz-timer {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) var(--progress, 100%), #e0e0e0 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-quiz-timer::before {
  content: '';
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
}

.board-quiz-timer-text {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-dark);
}

.board-quiz-question {
  font-size: 20px;
  color: var(--text-dark);
  line-height: 1.6;
  margin-bottom: 24px;
  text-align: center;
}

.board-quiz-hint {
  margin: -12px auto 18px;
  max-width: 90%;
  font-size: 14px;
  color: #2D5016;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(125, 200, 78, 0.35);
  border-radius: 12px;
  padding: 8px 12px;
  text-align: center;
  backdrop-filter: blur(8px);
}

.board-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.board-quiz-option {
  padding: 14px 20px;
  background: #f8f9fa;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 16px;
  font-family: var(--font-cute);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  touch-action: manipulation;
}

.duel-option {
  touch-action: manipulation;
}

.board-quiz-option:hover:not(.selected):not(.correct):not(.wrong) {
  border-color: var(--primary);
  background: #f0fff0;
}

.board-quiz-option.selected {
  border-color: var(--primary);
  background: #E8F5E9;
}

.board-quiz-option.correct {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.board-quiz-option.wrong {
  border-color: #FF6B6B;
  background: #FF6B6B;
  color: #fff;
}

/* 填空题输入 */
.board-quiz-input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 18px;
  font-family: var(--font-cute);
  text-align: center;
  transition: border-color 0.2s;
}

.board-quiz-input:focus {
  outline: none;
  border-color: var(--primary);
}

.board-quiz-submit {
  margin-top: 16px;
  width: 100%;
}

/* 答题结果反馈 */
.board-quiz-result {
  text-align: center;
  padding: 20px;
}

.board-quiz-result-icon {
  font-size: 72px;
  margin-bottom: 16px;
}

.board-quiz-result-icon.bounce {
  animation: quizBounce 0.6s ease-out;
}

.board-quiz-result-icon.shake {
  animation: quizShake 0.5s ease-out;
}

@keyframes quizBounce {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.4); }
  50% { transform: scale(0.9); }
  70% { transform: scale(1.1); }
}

@keyframes quizShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-15px); }
  40% { transform: translateX(15px); }
  60% { transform: translateX(-10px); }
  80% { transform: translateX(10px); }
}

.board-quiz-result.correct {
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
  border-radius: 16px;
  padding: 24px;
}

.board-quiz-result.wrong {
  background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
  border-radius: 16px;
  padding: 24px;
}

.quiz-stars {
  font-size: 32px;
  margin-top: 16px;
  animation: starsAppear 0.5s ease-out;
}

@keyframes starsAppear {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}

.quiz-encourage {
  font-size: 16px;
  color: #888;
  margin-top: 12px;
}

.quiz-floating-star {
  position: absolute;
  font-size: 24px;
  animation: floatUp 2s ease-out forwards;
  pointer-events: none;
}

@keyframes floatUp {
  0% { 
    transform: translateY(100px) scale(0); 
    opacity: 1; 
  }
  100% { 
    transform: translateY(-200px) scale(1); 
    opacity: 0; 
  }
}

.board-quiz-result-text {
  font-size: 24px;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.board-quiz-result-detail {
  font-size: 14px;
  color: var(--text-light);
}

/* ========== 玩家状态栏 - 紧凑液态玻璃风格 ========== */
.board-players-status {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 6px 12px;
  box-sizing: border-box;
  /* 绝对定位：紧贴 header 下方，悬浮于地图上方 */
  position: absolute;
  top: 55px;
  left: 0;
  right: 0;
  z-index: 40;
  /* 半透明背景，与 header 风格统一 */
  background: var(--glass-bg, rgba(255, 255, 255, 0.72));
  backdrop-filter: blur(var(--glass-blur, 16px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px));
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.3));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 空状态时隐藏，避免显示空白条 */
.board-players-status:empty {
  display: none;
}

.board-player-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(200, 200, 200, 0.5);
  border-radius: 20px;
  transition: all 0.3s;
}

.board-player-status.current-turn {
  background: #FFD54F;
  color: #333;
  border-color: #FFA000;
}

.board-player-status.is-me {
  border: 2px solid rgba(125, 200, 78, 0.6);
}

.board-player-status.is-me .board-player-status-name {
  color: #5BA832;
  font-weight: bold;
}

.board-player-status.current-turn.is-me .board-player-status-name {
  color: #fff;
}

.board-player-status:active {
  transform: scale(0.97);
}

.board-player-status-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.status-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 10px;
  animation: indicatorPulse 1s ease-in-out infinite;
}

@keyframes indicatorPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.board-player-progress {
  width: 100%;
  height: 3px;
  background: rgba(0,0,0,0.08);
  border-radius: 2px;
  margin-top: 2px;
  overflow: hidden;
}

.board-player-progress .progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #7DC84E, #A8E6CF);
  border-radius: 2px;
  transition: width 0.5s ease-out;
}

.board-player-status.current-turn .board-player-progress .progress-bar {
  background: linear-gradient(90deg, #FFD700, #FFA500);
}

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

.board-player-status-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.board-player-status-name {
  font-size: 12px;
  font-weight: bold;
}

.board-player-status-pos {
  font-size: 10px;
  opacity: 0.75;
}

/* ========== 事件弹窗 ========== */
.board-event-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.board-event-content {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: eventPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes eventPop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.board-event-icon {
  font-size: 72px;
  margin-bottom: 16px;
}

.board-event-title {
  font-size: 24px;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.board-event-desc {
  font-size: 16px;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 24px;
}

.board-event-effect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
  border-radius: 20px;
  font-size: 16px;
  color: var(--primary-dark);
  margin-bottom: 20px;
}

.board-event-effect.negative {
  background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
  color: #C62828;
}

/* 事件弹窗按钮居中 */
.board-event-content .board-btn {
  margin: 0 auto;
}

/* ========== 游戏结束 ========== */
.board-result {
  text-align: center;
  padding: 40px 20px;
}

.board-result-crown {
  font-size: 80px;
  margin-bottom: 16px;
  animation: crownBounce 1s ease-in-out infinite;
}

@keyframes crownBounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

.board-result-title {
  font-size: 32px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 24px;
}

.board-result-winner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 40px;
  background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
  border-radius: 20px;
  margin-bottom: 32px;
}

.board-result-winner-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #FFD700;
  box-shadow: 0 4px 20px rgba(255,215,0,0.4);
}

.board-result-winner-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.board-result-winner-name {
  font-size: 24px;
  color: var(--text-dark);
}

.board-result-stats {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.board-result-stat {
  padding: 16px 24px;
  background: #f8f9fa;
  border-radius: 16px;
  min-width: 120px;
}

.board-result-stat-value {
  font-size: 28px;
  color: var(--primary);
  font-weight: bold;
}

.board-result-stat-label {
  font-size: 14px;
  color: var(--text-light);
}

.board-result-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ========== 响应式 - 全屏地图布局 ========== */

/* 大屏幕 (桌面) */
@media (min-width: 1200px) {
  .board-game-header {
    padding: 14px 24px;
  }
  
  .board-player-status {
    padding: 8px 16px;
  }
  
  .board-player-status-avatar {
    width: 40px;
    height: 40px;
  }
  
  .board-player-status-name {
    font-size: 14px;
  }
  
  .board-action-area {
    gap: 10px;
    padding: 14px 20px;
    bottom: 0;
  }
  
  .dice-container {
    width: 60px;
    height: 60px;
  }
  
  .dice-face {
    width: 60px;
    height: 60px;
  }
  
  .dice-face .dot {
    width: 10px;
    height: 10px;
  }
  
  .dice-face-1 { transform: rotateY(0deg) translateZ(30px); }
  .dice-face-2 { transform: rotateY(90deg) translateZ(30px); }
  .dice-face-3 { transform: rotateX(90deg) translateZ(30px); }
  .dice-face-4 { transform: rotateY(-90deg) translateZ(30px); }
  .dice-face-5 { transform: rotateX(-90deg) translateZ(30px); }
  .dice-face-6 { transform: rotateY(180deg) translateZ(30px); }
  
  .card-slot {
    width: 65px;
    height: 82px;
  }
  
  .slot-card-icon {
    font-size: 24px;
  }
  
  .slot-card-name {
    font-size: 10px;
  }
}

/* 小屏幕优化：图例可折叠 + 操作区更紧凑 */
@media (max-width: 520px) {
  .board-action-area {
    padding: 8px 12px;
    bottom: 0;
  }
  
  .board-legend {
    font-size: 10px;
    padding: 4px 8px;
    max-width: 92%;
  }
  
  .board-action-row {
    gap: 8px;
  }
  
  .board-card-slots,
  .board-dice-area {
    padding: 8px 12px;
    border-radius: 16px;
  }
  
  .card-slot {
    width: 50px;
    height: 62px;
  }
}

.board-game-view.legend-collapsed .board-legend {
  max-height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  pointer-events: none;
}

/* iPad 横屏 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .board-track-wrapper {
    top: 55px;
    bottom: 100px;
  }
  
  .board-action-area {
    gap: 4px;
    padding: 6px 12px;
    bottom: 0;
    justify-content: flex-end;
  }
}

/* iPad 竖屏 & 大手机 */
@media (max-width: 1023px) and (min-width: 768px) {
  .board-game-header {
    padding: 8px 14px;
    padding-top: max(8px, env(safe-area-inset-top));
    height: 55px;
  }
  
  .board-track-wrapper {
    top: 55px;
    bottom: 110px;
  }
  
  .board-action-area {
    gap: 4px;
    padding: 6px 10px;
    bottom: 0;
    justify-content: flex-end;
  }
  
  /* iPad 竖屏模式下确保图例可见 */
  .board-legend {
    font-size: 10px;
    padding: 4px 10px;
    flex-shrink: 0;
  }
  
  .board-player-status {
    padding: 5px 10px;
  }
  
  .board-player-status-avatar {
    width: 28px;
    height: 28px;
  }
  
  .board-player-status-name {
    font-size: 11px;
  }
  
  .board-player-status-pos {
    font-size: 9px;
  }
}

/* 手机 */
@media (max-width: 767px) {
  .board-lobby-title {
    font-size: 24px;
  }
  
  .board-mode-grid {
    grid-template-columns: 1fr;
  }
  
  .board-game-header {
    padding: 6px 10px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
    gap: 6px;
    height: calc(48px + env(safe-area-inset-top, 0px));
    box-sizing: border-box;
  }
  
  .board-players-status {
    top: calc(48px + env(safe-area-inset-top, 0px));
    padding: 4px 10px;
  }
  
  .board-track-wrapper {
    top: calc(48px + env(safe-area-inset-top, 0px));
    bottom: calc(85px + env(safe-area-inset-bottom, 0px));
  }
  
  /* iPhone Safari / PWA：完全贴合屏幕边缘 */
  body.iphone-safari-browser .board-track-wrapper,
  body.iphone-pwa-mode .board-track-wrapper {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  
  .board-action-area {
    gap: 3px;
    padding: 4px 8px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
    bottom: 0;
    justify-content: flex-end;
  }
  
  /* iPhone Safari / PWA：完全贴底，无空隙 */
  body.iphone-safari-browser .board-action-area,
  body.iphone-pwa-mode .board-action-area {
    bottom: 0;
    gap: 2px;
    padding: 4px 8px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2px);
    justify-content: flex-end;
    min-height: auto;
  }

  .board-action-row {
    gap: 4px;
  }

  .board-legend {
    font-size: 9px;
    padding: 3px 6px;
  }

  .board-legend-icon {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  
  .board-dice-area {
    padding: 4px 8px;
    border-radius: 12px;
  }
  
  .board-card-slots {
    padding: 4px 6px;
    border-radius: 12px;
  }
  
  .dice-container {
    width: 40px;
    height: 40px;
  }
  
  .dice-face {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    padding: 4px;
  }
  
  .dice-face .dot {
    width: 6px;
    height: 6px;
  }
  
  .dice-face-1 { transform: rotateY(0deg) translateZ(20px); }
  .dice-face-2 { transform: rotateY(90deg) translateZ(20px); }
  .dice-face-3 { transform: rotateX(90deg) translateZ(20px); }
  .dice-face-4 { transform: rotateY(-90deg) translateZ(20px); }
  .dice-face-5 { transform: rotateX(-90deg) translateZ(20px); }
  .dice-face-6 { transform: rotateY(180deg) translateZ(20px); }
  
  .dice-result {
    font-size: 12px;
    min-height: 14px;
  }
  
  .board-btn-roll {
    padding: 5px 12px;
    font-size: 11px;
  }
  
  .card-slot {
    width: 42px;
    height: 54px;
    border-radius: 6px;
  }
  
  .card-slot-empty {
    border-radius: 8px;
  }
  
  .card-slot-empty .slot-num {
    font-size: 14px;
  }
  
  .slot-card-icon {
    font-size: 18px;
  }
  
  .slot-card-name {
    font-size: 8px;
  }
  
  .slot-card-rarity {
    font-size: 7px;
  }
  
  .card-slots-header {
    font-size: 10px;
  }
  
  .card-slots-container {
    gap: 5px;
  }
  
  .board-player-status {
    padding: 4px 8px;
    gap: 6px;
  }
  
  .board-player-status-avatar {
    width: 26px;
    height: 26px;
  }
  
  .board-player-status-name {
    font-size: 10px;
  }
  
  .board-player-status-pos {
    font-size: 8px;
  }
  
  .board-players-status {
    gap: 6px;
  }
  
  .board-quiz-content {
    padding: 20px 14px;
  }
  
  .board-quiz-question {
    font-size: 17px;
  }
}

/* 小手机 */
@media (max-width: 480px) {
  .board-action-area {
    gap: 4px;
    padding: 6px 10px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
    bottom: 0;
    justify-content: flex-end;
  }
  
  /* iPhone Safari / PWA：完全贴底，无空隙 */
  body.iphone-safari-browser .board-action-area,
  body.iphone-pwa-mode .board-action-area {
    bottom: 0;
    gap: 2px;
    padding: 4px 10px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2px);
    justify-content: flex-end;
    min-height: auto;
  }

  .board-action-row {
    gap: 4px;
  }
  
  .card-slot {
    width: 46px;
    height: 58px;
  }
  
  .slot-card-icon {
    font-size: 16px;
  }
  
  .dice-container {
    width: 40px;
    height: 40px;
  }
  
  .dice-face {
    width: 40px;
    height: 40px;
    padding: 4px;
  }
  
  .dice-face .dot {
    width: 6px;
    height: 6px;
  }
  
  .dice-face-1 { transform: rotateY(0deg) translateZ(20px); }
  .dice-face-2 { transform: rotateY(90deg) translateZ(20px); }
  .dice-face-3 { transform: rotateX(90deg) translateZ(20px); }
  .dice-face-4 { transform: rotateY(-90deg) translateZ(20px); }
  .dice-face-5 { transform: rotateX(-90deg) translateZ(20px); }
  .dice-face-6 { transform: rotateY(180deg) translateZ(20px); }
}

/* ========== 动画装饰 ========== */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--primary);
  animation: confettiFall 3s linear forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ========== 操作区域布局 - 浮动在底部（紧凑版）========== */
.board-action-area {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 12px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  z-index: 50;
  box-sizing: border-box;
}

/* PWA 模式下确保内容贴底 */
body.pwa-mode .board-action-area {
  bottom: 0;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}

/* 图例和操作行不压缩 */
.board-legend {
  flex-shrink: 0;
}

.board-action-row {
  flex-shrink: 0;
}

.board-legend-toggle {
  display: none;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--glass-text);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 11px;
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.board-legend-toggle:active {
  transform: scale(0.96);
}

/* 图例区域 */
.board-legend {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--glass-subtext);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 6px 10px;
  max-width: 95%;
  overflow-x: auto;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--glass-shadow);
  z-index: 1;
}

.board-legend::-webkit-scrollbar {
  display: none;
}

.board-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.board-legend-icon {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.board-action-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-wrap: nowrap;
}

/* 骰子区域 - 液态玻璃风格（紧凑版）*/
.board-dice-area {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 6px 12px;
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: auto;
  max-width: none;
  flex: 0 0 auto;
  order: 0;
  color: var(--glass-text);
}

/* ========== 3卡片槽UI - 液态玻璃风格（紧凑版）========== */
.board-card-slots {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 6px 10px;
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: auto;
  flex: 0 0 auto;
  order: 1;
  color: var(--glass-text);
}

.card-slots-header {
  font-size: 12px;
  font-weight: bold;
  color: var(--glass-text);
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-slots-container {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.card-slot {
  width: 56px;
  height: 70px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.card-slot:hover {
  transform: translateY(-3px);
}

.card-slot:active {
  transform: scale(0.95);
}

.card-slot-empty {
  width: 100%;
  height: 100%;
  border: 2px dashed rgba(150, 150, 150, 0.5);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.3);
}

.card-slot-empty .slot-num {
  font-size: 18px;
  color: rgba(150, 150, 150, 0.6);
  font-weight: bold;
}

.card-slot.has-card:hover {
  box-shadow: 0 4px 16px rgba(155, 89, 182, 0.4);
}

.card-slot-filled {
  width: 100%;
  height: 100%;
  border: 2px solid #7DC84E;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.8);
}

.slot-card-icon {
  font-size: 20px;
  margin-bottom: 2px;
}

.slot-card-name {
  font-size: 9px;
  font-weight: bold;
  color: #333;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-card-rarity {
  font-size: 8px;
  font-weight: bold;
  margin-top: 1px;
}

.card-slots-hint {
  font-size: 9px;
  color: var(--glass-subtext);
  display: none;
}

/* ========== 卡片丢弃弹窗 ========== */
.board-discard-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2500;
  padding: 20px;
}

.board-discard-modal.show-animation {
  animation: discardModalIn 0.4s ease-out;
}

@keyframes discardModalIn {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0.8);
  }
}

.board-discard-content {
  background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
  border-radius: 24px;
  padding: 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  animation: discardContentPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 60px rgba(255, 100, 100, 0.3), 0 0 0 4px rgba(255, 100, 100, 0.2);
}

@keyframes discardContentPop {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(30px);
  }
  70% {
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.discard-title {
  font-size: 22px;
  font-weight: bold;
  color: #e74c3c;
  margin-bottom: 8px;
  animation: titlePulse 1s ease-in-out infinite;
}

@keyframes titlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.discard-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

.discard-new-card {
  margin-bottom: 20px;
}

.new-card-preview {
  display: inline-block;
  padding: 16px 24px;
  border: 3px solid #7DC84E;
  border-radius: 16px;
  animation: cardAppear 0.5s ease-out;
}

.new-card-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.new-card-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.new-card-desc {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.new-card-rarity {
  font-size: 12px;
  font-weight: bold;
}

.discard-hint {
  font-size: 14px;
  color: #888;
  margin-bottom: 16px;
  padding: 8px;
  background: #fff3cd;
  border-radius: 8px;
}

.discard-cards {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.discard-card-item {
  cursor: pointer;
  transition: all 0.2s;
}

.discard-card-item:hover {
  transform: scale(1.05);
}

.discard-card-item:hover .discard-label {
  opacity: 1;
}

.discard-card-item.new-card .discard-card-content {
  border-style: dashed;
  opacity: 0.85;
}

.discard-card-item.new-card .discard-label {
  color: #FF5722;
  font-weight: bold;
}

.new-card-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #FF5722, #E64A19);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.discard-card-content {
  position: relative;
  width: 80px;
  height: 100px;
  border: 2px solid #7DC84E;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
}

.discard-card-icon {
  font-size: 32px;
  margin-bottom: 4px;
}

.discard-card-name {
  font-size: 11px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.discard-label {
  font-size: 10px;
  color: #FF6B6B;
  margin-top: 4px;
  font-weight: bold;
  opacity: 0.7;
  transition: opacity 0.2s;
}

/* ========== 卡片详情弹窗（可爱风格）========== */
.board-card-info-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2100;
  padding: 20px;
}

.board-card-info-content {
  background: linear-gradient(145deg, #fff 0%, #f8f4ff 100%);
  border-radius: 28px;
  padding: 28px 24px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 
    0 20px 60px rgba(155, 89, 182, 0.3),
    0 0 0 4px rgba(155, 89, 182, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.8);
  animation: cardInfoPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cardInfoPop {
  0% { transform: scale(0.5) rotate(-5deg); opacity: 0; }
  60% { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.card-info-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  transition: all 0.2s;
}

.card-info-close:hover {
  background: rgba(255, 100, 100, 0.2);
  color: #e74c3c;
  transform: rotate(90deg);
}

.card-info-icon {
  font-size: 72px;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  animation: cardIconBounce 0.6s ease-out 0.2s both;
}

@keyframes cardIconBounce {
  0% { transform: translateY(-20px); opacity: 0; }
  60% { transform: translateY(5px); }
  100% { transform: translateY(0); opacity: 1; }
}

.card-info-name {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 6px;
  font-family: "ZCOOL KuaiLe", sans-serif;
}

.card-info-rarity {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 16px;
}

.card-info-rarity.common { background: #e8e8e8; color: #666; }
.card-info-rarity.rare { background: linear-gradient(135deg, #3498db, #2980b9); color: #fff; }
.card-info-rarity.epic { background: linear-gradient(135deg, #9b59b6, #8e44ad); color: #fff; }
.card-info-rarity.legendary { background: linear-gradient(135deg, #f39c12, #e74c3c); color: #fff; }

.card-info-desc {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: rgba(155, 89, 182, 0.08);
  border-radius: 12px;
  border-left: 4px solid #9b59b6;
}

.card-info-usage {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  padding: 10px;
  background: #fffbe6;
  border-radius: 10px;
  border: 1px dashed #f4d03f;
}

.usage-label {
  font-size: 12px;
  color: #b7950b;
  font-weight: bold;
}

.usage-text {
  font-size: 13px;
  color: #7d6608;
  white-space: pre-line; /* 支持换行符 */
  line-height: 1.6;
}

.card-info-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.card-info-btn {
  flex: 1;
  padding: 14px 16px;
  border: none;
  border-radius: 16px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
  font-family: inherit;
}

.card-info-btn.use {
  background: linear-gradient(135deg, #7DC84E 0%, #5CAC38 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(125, 200, 78, 0.4);
}

.card-info-btn.use:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(125, 200, 78, 0.5);
}

.card-info-btn.use:active {
  transform: translateY(0);
}

.card-info-btn.cancel {
  background: #f5f5f5;
  color: #666;
  border: 2px solid #e0e0e0;
}

.card-info-btn.cancel:hover {
  background: #eee;
  border-color: #ccc;
}

/* 设置提示文字样式 */
.setting-hint {
  justify-content: center;
}

.hint-text {
  font-size: 12px;
  color: #888;
  font-style: italic;
}

/* ========== 技能卡片系统 ========== */
.board-card-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-card-btn {
  padding: 16px 24px;
  background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-family: var(--font-cute);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.board-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4);
}

.board-card-btn .card-count {
  background: #fff;
  color: #9B59B6;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: bold;
  min-width: 20px;
  text-align: center;
}

/* 卡片面板 */
.board-card-panel {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  max-height: 60vh;
  overflow: hidden;
  transition: bottom 0.3s ease;
  display: flex;
  flex-direction: column;
}

.board-card-panel.show {
  bottom: 0;
}

.board-card-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  font-size: 18px;
  font-weight: bold;
  color: var(--text-dark);
}

.board-card-panel-header .close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: #f5f5f5;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.2s;
}

.board-card-panel-header .close-btn:hover {
  background: #e0e0e0;
}

.board-card-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.no-cards {
  text-align: center;
  padding: 40px 20px;
  color: #888;
  font-size: 16px;
}

.no-cards small {
  display: block;
  margin-top: 8px;
  color: #aaa;
  font-size: 13px;
}

/* 卡片项 */
.board-card-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
  border: 2px solid #e0e0e0;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.board-card-item:hover {
  border-color: #9B59B6;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(155, 89, 182, 0.2);
}

.board-card-item:active {
  transform: scale(0.98);
}

.board-card-item .card-icon {
  font-size: 32px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border-radius: 12px;
}

.board-card-item .card-info {
  flex: 1;
}

.board-card-item .card-name {
  font-weight: bold;
  font-size: 15px;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.board-card-item .card-desc {
  font-size: 12px;
  color: #888;
}

.board-card-item .card-rarity {
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 8px;
  background: #f5f5f5;
}

/* 目标选择弹窗 */
.board-target-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.board-target-content {
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}

.board-target-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--text-dark);
}

.board-target-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.board-target-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f8f9fa;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.board-target-item:hover {
  border-color: #FF6B6B;
  background: #fff5f5;
}

.board-target-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.board-target-item span {
  flex: 1;
  text-align: left;
  font-weight: bold;
}

.board-target-item .target-pos {
  font-size: 12px;
  color: #888;
  font-weight: normal;
}

/* 卡片获得动画 */
@keyframes cardAppear {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
  }
  50% {
    transform: scale(1.1) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 设置行样式 */
.setting-label {
  font-size: 12px;
  color: #666;
  margin-right: 8px;
  white-space: nowrap;
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.setting-row:last-child {
  margin-bottom: 0;
}

/* 手机端丢弃弹窗 */
@media (max-width: 767px) {
  .discard-card-content {
    width: 65px;
    height: 82px;
  }
  
  .discard-card-icon {
    font-size: 26px;
  }
  
  .new-card-icon {
    font-size: 36px;
  }
  
  .new-card-name {
    font-size: 15px;
  }
  
  .board-discard-content {
    padding: 20px 16px;
  }
  
  .discard-title {
    font-size: 20px;
  }
  
  .discard-hint {
    font-size: 12px;
    padding: 6px;
  }
}

/* ========== 正在答题提示覆盖层 ========== */
.board-answering-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1500;
  animation: answeringFadeIn 0.3s ease-out;
}

.board-answering-overlay.fade-out {
  animation: answeringFadeOut 0.3s ease-out forwards;
}

@keyframes answeringFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes answeringFadeOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

.answering-content {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,249,255,0.98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 16px 28px;
  border-radius: 60px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 0 0 2px rgba(78, 205, 196, 0.3);
  white-space: nowrap;
}

.answering-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: visible;
  background: transparent;
  box-sizing: border-box;
  flex-shrink: 0;
}

.answering-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #4ECDC4;
  box-sizing: border-box;
  background: transparent;
  position: relative;
  z-index: 1;
}

.answering-avatar-inner img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-sizing: border-box;
  display: block;
  transform: scale(1.08);
  transform-origin: center;
}

.answering-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #4ECDC4;
  animation: pulse 1.5s ease-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.answering-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.answering-name {
  font-size: 15px;
  font-weight: bold;
  color: #333;
}

.answering-status {
  font-size: 13px;
  color: #4ECDC4;
  font-weight: 500;
}

.answering-dots {
  display: flex;
  gap: 4px;
  margin-left: 4px;
}

.answering-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ECDC4;
  animation: dotBounce 1.4s ease-in-out infinite both;
}

.answering-dots span:nth-child(1) { animation-delay: -0.32s; }
.answering-dots span:nth-child(2) { animation-delay: -0.16s; }
.answering-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes dotBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========== 卡片使用特效 ========== */
.card-use-effect {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  animation: effectFadeIn 0.3s ease-out;
  pointer-events: none;
}

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

.card-use-effect.fade-out {
  animation: effectFadeOut 0.3s ease-out forwards;
}

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

.card-effect-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: effectPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes effectPop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-10deg);
  }
  50% {
    transform: scale(1.1) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.effect-icon {
  font-size: 80px;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.8));
  animation: iconPulse 0.6s ease-out infinite alternate;
}

@keyframes iconPulse {
  from {
    transform: scale(1);
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.8));
  }
  to {
    transform: scale(1.1);
    filter: drop-shadow(0 0 40px rgba(255,255,255,1));
  }
}

.effect-text {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.effect-desc {
  font-size: 16px;
  color: rgba(255,255,255,0.9);
}

/* 玩家位置指示器 */
.player-position-indicator {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #FFD700;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* ========== 事件广播全屏特效 ========== */
.event-broadcast-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  animation: eventOverlayIn 0.4s ease-out;
  pointer-events: none;
}

@keyframes eventOverlayIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px);
  }
}

.event-broadcast-overlay.fade-out {
  animation: eventOverlayOut 0.5s ease-out forwards;
}

@keyframes eventOverlayOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(1.1);
  }
}

.event-broadcast-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 40px;
  border-radius: 24px;
  background: var(--event-bg);
  border: 3px solid var(--event-border);
  box-shadow: 
    0 0 60px var(--event-glow),
    0 20px 60px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255,255,255,0.3);
  animation: eventContentPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 90vw;
  pointer-events: auto;
}

@keyframes eventContentPop {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(50px);
  }
  60% {
    transform: scale(1.05) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.event-broadcast-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.event-player-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.8);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  animation: avatarBounce 0.6s ease-out;
}

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

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

.event-player-name {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.event-cell-type {
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  padding: 4px 12px;
  background: rgba(0,0,0,0.2);
  border-radius: 20px;
}

.event-broadcast-icon {
  font-size: 80px;
  filter: drop-shadow(0 0 30px rgba(255,255,255,0.9));
  animation: eventIconPulse 0.8s ease-out infinite alternate;
}

@keyframes eventIconPulse {
  from {
    transform: scale(1) rotate(-5deg);
    filter: drop-shadow(0 0 30px rgba(255,255,255,0.9));
  }
  to {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 0 50px rgba(255,255,255,1));
  }
}

.event-broadcast-title {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 3px 15px rgba(0,0,0,0.4);
  animation: titleSlide 0.5s ease-out 0.2s both;
}

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

.event-broadcast-desc {
  font-size: 16px;
  color: rgba(255,255,255,0.95);
  text-align: center;
  max-width: 280px;
  animation: titleSlide 0.5s ease-out 0.3s both;
}

.event-broadcast-effect {
  font-size: 22px;
  font-weight: bold;
  padding: 8px 20px;
  border-radius: 30px;
  background: rgba(255,255,255,0.25);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  animation: effectShine 0.5s ease-out 0.4s both, effectGlow 1.5s ease-in-out infinite;
}

@keyframes effectShine {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes effectGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255,255,255,0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(255,255,255,0.6);
  }
}

.event-broadcast-effect.positive {
  background: rgba(76, 175, 80, 0.4);
}

.event-broadcast-effect.negative {
  background: rgba(244, 67, 54, 0.4);
}

.event-broadcast-skip {
  margin-top: 4px;
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform 0.2s ease, background 0.2s ease;
}

.event-broadcast-skip:active {
  transform: scale(0.97);
}

/* 手机端适配 */
@media (max-width: 767px) {
  .event-broadcast-content {
    padding: 20px 30px;
    gap: 10px;
  }
  
  .event-player-avatar {
    width: 50px;
    height: 50px;
  }
  
  .event-player-name {
    font-size: 16px;
  }
  
  .event-cell-type {
    font-size: 12px;
  }
  
  .event-broadcast-icon {
    font-size: 60px;
  }
  
  .event-broadcast-title {
    font-size: 22px;
  }
  
  .event-broadcast-desc {
    font-size: 14px;
  }
  
  .event-broadcast-effect {
    font-size: 18px;
    padding: 6px 16px;
  }
}

/* ========== 无事发生弹窗 ========== */
.board-normal-popup {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: normalPopupIn 0.4s ease-out;
}

.board-normal-popup.fade-out {
  animation: normalPopupOut 0.3s ease-out forwards;
}

@keyframes normalPopupIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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

.normal-popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 40px;
  border-radius: 24px;
  border: 3px solid;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.25),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  animation: contentBounce 0.5s ease-out;
}

@keyframes contentBounce {
  0% {
    transform: translateY(20px);
  }
  60% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

.normal-popup-icon {
  font-size: 56px;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.2));
  animation: iconFloat 1.5s ease-in-out infinite;
}

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

.normal-popup-title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.normal-popup-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  max-width: 200px;
}

.normal-popup-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

/* 手机端适配 */
@media (max-width: 767px) {
  .normal-popup-content {
    padding: 18px 30px;
    gap: 6px;
  }
  
  .normal-popup-icon {
    font-size: 44px;
  }
  
  .normal-popup-title {
    font-size: 20px;
  }
  
  .normal-popup-desc {
    font-size: 13px;
  }
}

/* ========== 移动端性能优化 - 减少动画以降低发热 ========== */

/* 当用户偏好减少动画时（系统设置） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 移动设备上禁用所有无限循环动画 */
@media (max-width: 1024px) and (pointer: coarse) {
  /* 禁用持续脉冲动画（保留CSS动画棋子的跳跃效果）*/
  .board-track-wrapper [class*="cell"],
  .board-track-wrapper [class*="piece"]:not(.css-animated-piece):not(.css-animated-piece *),
  .board-roll-btn,
  .board-turn-indicator,
  .victory-crown,
  .event-icon,
  .normal-popup-icon,
  .board-title,
  .discard-modal-title {
    animation: none !important;
  }
  
  /* 确保CSS动画棋子的跳跃效果正常工作 - 不要强制设置animation，让JS控制 */
  .css-animated-piece {
    animation: none !important; /* 容器不需要动画 */
  }
  
  /* piece-avatar的动画由JS动态控制，这里只确保不被禁用 */
  .css-animated-piece .piece-avatar {
    /* 移除 !important，让JS可以控制动画 */
  }
  
  /* 用静态样式替代动画效果 */
  .board-roll-btn:not(:disabled) {
    box-shadow: 0 4px 15px rgba(255, 149, 0, 0.4);
  }
  
  .board-turn-indicator {
    box-shadow: 0 4px 20px rgba(52, 199, 89, 0.4);
  }
  
  /* 减少 backdrop-filter 使用（非常消耗性能） */
  .board-game-header,
  .board-players-status,
  .board-action-area,
  .board-legend,
  .card-slot,
  .board-quiz-modal,
  .board-event-popup-content,
  .normal-popup-content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
  }

  /* 非太空主题：白底深字 */
  .normal-popup-content {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(100, 180, 130, 0.6) !important;
  }

  .normal-popup-title {
    color: #333 !important;
    text-shadow: none !important;
  }

  .normal-popup-desc {
    color: #555 !important;
  }

  .normal-popup-hint {
    color: #666 !important;
    background: rgba(0, 0, 0, 0.08) !important;
  }

  /* 太空主题：深底浅字 */
  .theme-space .normal-popup-content {
    background: rgba(24, 28, 48, 0.95) !important;
    border-color: rgba(110, 120, 190, 0.7) !important;
  }

  .theme-space .normal-popup-title,
  .theme-space .normal-popup-desc {
    color: rgba(245, 248, 255, 0.96) !important;
  }

  .theme-space .normal-popup-hint {
    color: rgba(235, 240, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }
  
  /* 暗色主题下的调整 */
  .theme-space .board-game-header,
  .theme-space .board-players-status,
  .theme-space .board-action-area,
  .theme-space .board-legend,
  .theme-space .card-slot {
    background: rgba(20, 30, 50, 0.95) !important;
  }
  
  /* 减少 box-shadow 复杂度 */
  .card-slot,
  .board-roll-btn,
  .board-dice-container {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* 禁用 filter 效果 */
  .board-track-wrapper img,
  .board-player-avatar img {
    filter: none !important;
  }
}

/* 省电模式 - 通过 JS 添加 .low-power-mode 类 */
body.low-power-mode .board-game-view,
body.low-power-mode #boardGamePlaying {
  /* 完全禁用所有动画 */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  
  /* 禁用所有模糊效果 */
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }
  
  /* 简化阴影 */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* 移动端降耗（轻量级，保流畅） */
body.mobile-reduced-effects .board-track-wrapper {
  scroll-behavior: auto;
}

body.mobile-reduced-effects .board-cell-finish,
body.mobile-reduced-effects .board-btn-roll.my-turn,
body.mobile-reduced-effects .board-turn-indicator,
body.mobile-reduced-effects .victory-crown,
body.mobile-reduced-effects .board-game-view.my-turn-glow::before {
  animation: none !important;
  box-shadow: none !important;
}

/* 游戏全屏时隐藏非必要浮层，减少动画开销 */
body.board-game-active.mobile-reduced-effects #floatingFrog,
body.board-game-active.mobile-reduced-effects .floating-frog,
body.board-game-active.mobile-reduced-effects #globalDraftPanel,
body.board-game-active.mobile-reduced-effects #chatPanel {
  display: none !important;
}

body.board-game-active.mobile-reduced-effects #mainBg,
body.board-game-active.mobile-reduced-effects .magic-bg {
  display: none !important;
}

body.board-game-active.mobile-reduced-effects #mainApp .page:not(#battle),
body.board-game-active.mobile-reduced-effects #mainApp .page:not(#battle) *,
body.board-game-active.mobile-reduced-effects #mainApp .page:not(#battle) *::before,
body.board-game-active.mobile-reduced-effects #mainApp .page:not(#battle) *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

/* iOS PWA 特别优化 */
body.iphone-pwa-mode .board-game-view {
  /* 禁用持续动画 */
  .board-roll-btn,
  .board-turn-indicator,
  .victory-crown {
    animation: none !important;
  }
  
  /* 彻底禁用毛玻璃（blur(10px) 仍持续消耗 GPU，用 none 替代） */
  .board-game-header,
  .board-players-status,
  .board-action-area {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
  }
}

/* GPU 加速提示 - 仅用于Canvas元素 */
#boardMapCanvas {
  will-change: auto;
}

/* 强制使用硬件加速渲染 Canvas */
#boardMapCanvas,
#boardPlayerCanvas {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 确保Canvas使用GPU渲染 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ========== 额外性能优化 ========== */

/* 页面隐藏时停止所有动画 */
body.page-hidden *,
body.page-hidden *::before,
body.page-hidden *::after {
  animation-play-state: paused !important;
}

/* 移动端触摸优化 */
.board-game-view {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

/* 卡片和按钮的GPU加速 */
.board-card,
.board-roll-btn,
.board-card-slot,
.emoji-btn,
.board-emoji-bubble,
.board-interaction-bubble {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* ========== Emoji互动气泡动画 ========== */
@keyframes boardBubblePop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes boardBubbleFadeOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* 动画元素的优化 - 仅在动画时使用will-change */
.dice-3d.rolling {
  will-change: transform;
}

.board-piece.is-moving {
  will-change: transform;
}

/* 动画完成后清理will-change */
.dice-3d:not(.rolling),
.board-piece:not(.is-moving) {
  will-change: auto;
}

/* 模态框优化 - 只在显示时使用GPU */
.board-quiz-modal,
.board-discard-modal,
.event-broadcast-overlay,
.duel-overlay {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  contain: layout style;
}

/* 滚动容器优化 */
.board-track-wrapper {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* 静态内容使用contain优化 */
.board-legend,
.board-info-bar,
.board-my-cards {
  contain: layout style;
}

/* ========== 移动端性能优化（核心：减少发热）========== */
@media (hover: none) and (pointer: coarse) {
  
  /* 1. 禁用 backdrop-filter - 这是iOS发热的主要原因！ */
  .board-game-card,
  .board-info-bar,
  .board-action-area,
  .board-game-header,
  .board-players-status,
  .board-quiz-modal-content,
  .board-my-cards,
  .board-legend,
  .event-broadcast-content,
  .duel-overlay-content,
  .board-discard-content,
  .answering-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* 用半透明背景色替代毛玻璃效果 */
    background-color: rgba(255, 255, 255, 0.92) !important;
  }
  
  /* 太空主题专用：深色背景 + 浅色文字 */
  .theme-space .board-game-header,
  .theme-space .board-players-status,
  .theme-space .board-action-area,
  .theme-space .board-legend,
  .theme-space .board-dice-area,
  .theme-space .board-card-slots {
    background-color: rgba(18, 20, 38, 0.95) !important;
    color: #f3f5ff !important;
  }
  
  .theme-space .board-legend {
    color: rgba(243, 245, 255, 0.9) !important;
  }
  
  .theme-space .board-legend-icon {
    border-color: rgba(255, 255, 255, 0.3) !important;
  }
  
  .theme-space .card-slot {
    background-color: rgba(30, 35, 60, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }
  
  .theme-space .board-btn-roll {
    color: #fff !important;
  }
  
  .theme-space .card-slots-header,
  .theme-space .dice-result {
    color: #f3f5ff !important;
  }
  
  /* 深色主题的元素用深色半透明 */
  .duel-overlay-content,
  .event-broadcast-content {
    background-color: rgba(30, 30, 30, 0.95) !important;
  }
  
  /* 2. 禁用所有 infinite 动画 - 持续消耗CPU/GPU */
  .board-lobby-title,
  .board-cell.highlight,
  .board-cell.finish,
  .board-piece.current-turn,
  .board-roll-btn,
  .victory-crown,
  .board-turn-indicator,
  .board-result-crown,
  .board-discard-title,
  .discard-title,
  .effect-icon,
  .pulse-ring,
  .answering-dots span,
  .event-broadcast-icon,
  .event-icon-wrapper,
  .effect-value,
  .duel-icon {
    animation: none !important;
  }
  
  /* 禁用 effect-icon 的 filter: drop-shadow（GPU 开销大） */
  .effect-icon {
    filter: none !important;
  }
  
  /* 3. 简化阴影效果 */
  .board-game-card,
  .board-card,
  .board-cell,
  .board-roll-btn,
  .board-quiz-modal-content {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* 4. 禁用hover效果的变换 */
  .board-roll-btn:hover,
  .board-card:hover,
  .emoji-btn:hover {
    transform: none !important;
  }
  
  /* 5. 减少filter效果 */
  .board-lobby-title {
    filter: none !important;
  }
}

/* ========== iOS设备优化（通过JS添加 .ios-device 类）========== */
/* 使用传统选择器以兼容旧版 Safari */

/* ---- P0 修复：彻底禁用 backdrop-filter ---- */
/* 重要：Safari 上 backdrop-filter: blur(0px) 仍会创建 GPU 合成层，持续消耗 GPU。 */
/* 必须用 backdrop-filter: none 才能真正释放 GPU 资源、降低发热。 */
body.ios-device .board-game-view .board-info-bar,
body.ios-device .board-game-view .board-action-area,
body.ios-device .board-game-view .board-dice-area,
body.ios-device .board-game-view .board-card-slots,
body.ios-device .board-game-view .board-my-cards,
body.ios-device .board-game-view .board-quiz-timer,
body.ios-device .board-game-view .board-quiz-timer-wrapper,
body.ios-device .board-game-view .board-quiz-modal-content,
body.ios-device .board-game-view .board-legend-bar,
body.ios-device .board-game-view .board-game-card,
body.ios-device .board-game-view .board-game-header,
body.ios-device .board-game-view .board-player-names-row,
body.ios-device .board-game-view .board-players-status,
body.ios-device .board-game-view .answering-indicator,
body.ios-device .board-game-view .board-card-info-popup,
body.ios-device .board-game-view .event-broadcast-dismiss,
body.ios-device .board-game-view .board-invite-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 游戏进行中：覆盖动态挂载到 body 上的弹窗/遮罩层 */
body.ios-device.board-game-active .event-broadcast-overlay,
body.ios-device.board-game-active .card-use-effect,
body.ios-device.board-game-active .normal-popup-content,
body.ios-device.board-game-active .board-discard-modal,
body.ios-device.board-game-active .board-invite-overlay,
body.ios-device.board-game-active .exit-confirm-overlay,
body.ios-device.board-game-active .board-quiz-modal {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---- P0 修复：全面禁用所有持续(infinite)动画 ---- */
/* 120Hz ProMotion 下每个 infinite 动画的 GPU 开销翻倍，必须彻底禁用 */
/* 覆盖所有已知 infinite 动画元素，包括 ::before/::after 伪元素 */
body.ios-device .board-game-view .board-lobby-title,
body.ios-device .board-game-view .board-cell.highlight,
body.ios-device .board-game-view .board-cell.highlight::before,
body.ios-device .board-game-view .board-cell.highlight::after,
body.ios-device .board-game-view .board-cell.finish,
body.ios-device .board-game-view .board-cell-finish,
body.ios-device .board-game-view .dom-cell.finish,
body.ios-device .board-game-view .board-piece.current-turn,
body.ios-device .board-game-view .board-roll-btn,
body.ios-device .board-game-view .board-btn-roll.my-turn,
body.ios-device .board-game-view .victory-crown,
body.ios-device .board-game-view .board-turn-indicator,
body.ios-device .board-game-view .board-result-crown,
body.ios-device .board-game-view .pulse-ring,
body.ios-device .board-game-view .answering-dots span,
body.ios-device .board-game-view .event-broadcast-icon,
body.ios-device .board-game-view .event-icon-wrapper,
body.ios-device .board-game-view .effect-value,
body.ios-device .board-game-view .effect-icon,
body.ios-device .board-game-view .duel-icon,
body.ios-device .board-game-view .discard-title,
body.ios-device .board-game-view .card-info-icon,
body.ios-device .board-game-view .board-indicator-dot,
body.ios-device .board-game-view .board-loading-spinner,
body.ios-device.board-game-active .effect-icon,
body.ios-device.board-game-active .discard-title,
body.ios-device.board-game-active .board-game-view.my-turn-glow::before {
  animation: none !important;
}

/* 禁用 effect-icon 的 filter: drop-shadow（GPU 开销大） */
body.ios-device.board-game-active .effect-icon {
  filter: none !important;
}

/* 简化阴影 */
body.ios-device .board-game-view .board-game-card,
body.ios-device .board-game-view .board-info-bar,
body.ios-device .board-game-view .board-action-area,
body.ios-device .board-game-view .board-quiz-modal-content {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

/* 用纯色背景替代毛玻璃 */
body.ios-device .board-game-view .board-game-card,
body.ios-device .board-game-view .board-info-bar,
body.ios-device .board-game-view .board-action-area,
body.ios-device .board-game-view .board-quiz-modal-content,
body.ios-device .board-game-view .board-my-cards,
body.ios-device .board-game-view .board-dice-area,
body.ios-device .board-game-view .board-card-slots,
body.ios-device .board-game-view .board-legend-bar,
body.ios-device .board-game-view .answering-indicator,
body.ios-device .board-game-view .board-quiz-timer {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* ========== ProMotion 120Hz 高刷屏优化（通过JS检测添加 .promotion-display 类）========== */
/* 120Hz 下 CSS transition/animation 以 120fps 运行，GPU 合成开销翻倍 */

/* 非关键 transition 使用 step 函数限制中间帧，降低 GPU 合成频率 */
body.promotion-display .board-game-view .dom-player:not(.is-moving) {
  transition-timing-function: steps(8, end) !important;
}

/* 静态棋子不需要 translate3d（避免创建不必要的 GPU 合成层） */
body.promotion-display .board-game-view .dom-player:not(.is-moving) {
  will-change: auto !important;
}

/* 进一步简化阴影（120Hz 下 box-shadow 每帧都要重绘） */
body.promotion-display .board-game-view .dom-cell {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

body.promotion-display .board-game-view .board-game-card,
body.promotion-display .board-game-view .board-info-bar,
body.promotion-display .board-game-view .board-action-area {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ========== 所有移动设备优化（通过JS添加 .mobile-device 类）========== */

/* 彻底禁用游戏区域 backdrop-filter —— 移动端发热的重要原因 */
/* 通过 CSS 变量禁用毛玻璃效果，避免通配符 * 匹配数百元素的选择器开销 */
body.mobile-device .board-game-view {
  --glass-blur: 0px;
}

/* 针对所有使用 backdrop-filter 的元素逐一覆盖（含硬编码 blur 值和 CSS 变量） */
/* 注意：blur(0px) 仍会创建 GPU 合成层，必须用 none 彻底关闭 */
body.mobile-device .board-game-view .board-game-card,
body.mobile-device .board-game-view .board-game-header,
body.mobile-device .board-game-view .board-quiz-timer-wrapper,
body.mobile-device .board-game-view .board-quiz-timer,
body.mobile-device .board-game-view .board-action-area,
body.mobile-device .board-game-view .board-player-names-row,
body.mobile-device .board-game-view .board-players-status,
body.mobile-device .board-game-view .board-dice-area,
body.mobile-device .board-game-view .board-card-slots,
body.mobile-device .board-game-view .board-card-info-popup,
body.mobile-device .board-game-view .board-info-bar,
body.mobile-device .board-game-view .board-legend-bar,
body.mobile-device .board-game-view .answering-indicator,
body.mobile-device .board-game-view .event-broadcast-dismiss,
body.mobile-device .board-game-view .board-invite-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 游戏进行中：覆盖动态挂载到 body 上的弹窗/遮罩层（烟花、事件广播等） */
body.mobile-device.board-game-active .event-broadcast-overlay,
body.mobile-device.board-game-active .card-use-effect,
body.mobile-device.board-game-active .normal-popup-content,
body.mobile-device.board-game-active .board-discard-modal,
body.mobile-device.board-game-active .board-invite-overlay,
body.mobile-device.board-game-active .exit-confirm-overlay,
body.mobile-device.board-game-active .board-quiz-modal {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 禁用 infinite 动画 - 这是移动设备发热的主要原因 */
/* 使用传统选择器以兼容旧版 Safari */
/* 完整覆盖所有 infinite 动画元素，包括 ::before/::after 伪元素 */
body.mobile-device .board-game-view .board-lobby-title,
body.mobile-device .board-game-view .board-cell.highlight,
body.mobile-device .board-game-view .board-cell.highlight::before,
body.mobile-device .board-game-view .board-cell.highlight::after,
body.mobile-device .board-game-view .board-cell.finish,
body.mobile-device .board-game-view .board-cell-finish,
body.mobile-device .board-game-view .dom-cell.finish,
body.mobile-device .board-game-view .board-piece.current-turn,
body.mobile-device .board-game-view .board-roll-btn,
body.mobile-device .board-game-view .board-btn-roll.my-turn,
body.mobile-device .board-game-view .victory-crown,
body.mobile-device .board-game-view .board-turn-indicator,
body.mobile-device .board-game-view .board-result-crown,
body.mobile-device .board-game-view .pulse-ring,
body.mobile-device .board-game-view .answering-dots span,
body.mobile-device .board-game-view .event-broadcast-icon,
body.mobile-device .board-game-view .event-icon-wrapper,
body.mobile-device .board-game-view .effect-value,
body.mobile-device .board-game-view .effect-icon,
body.mobile-device .board-game-view .duel-icon,
body.mobile-device .board-game-view .discard-title,
body.mobile-device .board-game-view .card-info-icon,
body.mobile-device .board-game-view .board-indicator-dot,
body.mobile-device .board-game-view .board-loading-spinner,
body.mobile-device.board-game-active .effect-icon,
body.mobile-device.board-game-active .discard-title,
body.mobile-device.board-game-active .board-game-view.my-turn-glow::before {
  animation: none !important;
}

/* 移动端禁用 effect-icon 的 filter: drop-shadow（GPU 开销大） */
body.mobile-device.board-game-active .effect-icon {
  filter: none !important;
}

/* 当前回合玩家使用静态高亮替代动画 */
body.mobile-device .board-game-view .board-piece.current-turn {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 4px 12px rgba(0,0,0,0.25) !important;
  outline: 3px solid #FFD700 !important;
  outline-offset: 2px !important;
}

/* DOM 模式下的当前回合玩家静态高亮 */
body.mobile-device .board-game-view .dom-player.current-turn .dom-player-avatar {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 4px 12px rgba(0,0,0,0.25) !important;
  outline: 3px solid #FFD700 !important;
  outline-offset: 2px !important;
}

/* 简化阴影效果（减少 GPU 开销） */
body.mobile-device .board-game-view .board-game-card,
body.mobile-device .board-game-view .board-card,
body.mobile-device .board-game-view .board-cell,
body.mobile-device .board-game-view .board-roll-btn,
body.mobile-device .board-game-view .board-quiz-modal-content {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* 主题 SVG 装饰和 radial-gradient 是静态背景，浏览器渲染一次即缓存，
   不产生持续 GPU 开销，保留以维持主题辨识度。
   仅在低端设备（low-end-device）上隐藏。 */
body.low-end-device .dom-board-map::before {
  background-image: none !important;
  background: none !important;
}
body.low-end-device #boardGamePlaying::before {
  background: none !important;
}

/* 移动端禁用 dom-player 的永久 transition（步进动画不受影响，由 JS 控制） */
body.mobile-device .board-game-view .dom-player {
  transition: none;
}
/* 移动端 dom-cell 无需过渡（纯静态格子） */
body.mobile-device .board-game-view .dom-cell {
  transition: none;
}

/* ========== 低端设备优化（通过JS添加 .low-end-device 类）========== */
body.low-end-device .board-game-view {
  /* 禁用所有模糊和复杂效果 */
  & * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }
  
  /* 禁用所有动画（保留骰子和CSS动画棋子）*/
  & *:not(.dice-3d.rolling):not(.css-animated-piece):not(.css-animated-piece *) {
    animation: none !important;
    transition: none !important;
  }
  
  /* 禁用所有阴影 */
  & * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* ========== DOM 渲染系统（高性能替代 Canvas）========== */

/* DOM 地图容器 */
.dom-board-map {
  position: relative;
  /* 尺寸由 JS 动态设置 */
  /* 性能优化：限制重排范围 */
  contain: layout style;
}

/* 背景装饰层 */
.dom-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.dom-decor-item {
  position: absolute;
  font-size: 24px;
  opacity: 0.35;
  user-select: none;
  pointer-events: none;
}

/* 路径 SVG 层 */
.dom-paths {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.dom-path-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dom-path-main {
  stroke-dasharray: 18 12;
}

.dom-path-glow {
  opacity: 0.4;
}

/* 路径装饰（脚印、泡泡、星星） */
.dom-path-decor {
  position: absolute;
  font-size: 14px;
  opacity: 0.4;
  user-select: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* 格子容器层 */
.dom-cells {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* 单个格子 */
.dom-cell {
  position: absolute;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* 居中定位：通过 transform 偏移 */
  transform: translate(-50%, -50%);
  /* 防止文字选中 */
  user-select: none;
  cursor: default;
  /* 微小的过渡效果（不消耗性能） */
  transition: transform 0.15s ease-out;
  /* 性能优化：限制重排范围（不含 paint，避免 100 个格子各自创建 GPU 渲染层） */
  contain: layout style;
}

.dom-cell:active {
  transform: translate(-50%, -50%) scale(0.96);
}

/* 格子内部结构 */
.dom-cell-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  overflow: hidden;
}

/* 格子高光效果（已禁用以提升性能） */
.dom-cell-glass {
  display: none;
}

/* 格子编号（左上角） */
.dom-cell-num {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 10px;
  font-weight: bold;
  color: rgba(255,255,255,0.7);
  line-height: 1;
}

/* 格子图标 */
.dom-cell-icon {
  font-size: 28px;
  line-height: 1;
  margin-top: -4px;
}

/* 格子标签 */
.dom-cell-label {
  font-size: 11px;
  font-weight: bold;
  margin-top: 2px;
  line-height: 1.2;
  white-space: nowrap; /* 不换行 */
}

/* 大屏幕上格子标签字号稍大 */
@media (min-width: 1024px) {
  .dom-cell-label {
    font-size: 12px;
  }
}

/* 陷阱标记 */
.dom-cell.has-trap {
  outline: 4px dashed #FF0000;
  outline-offset: -2px;
}

.dom-cell.has-trap::after {
  content: '💣';
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 16px;
}

/* 结界标记 */
.dom-cell.has-barrier {
  outline: 5px solid #9B59B6;
  outline-offset: 0;
}

.dom-cell.has-barrier::before {
  content: '🛑';
  position: absolute;
  top: -5px;
  left: -5px;
  font-size: 16px;
}

.dom-cell-barrier-turns {
  position: absolute;
  bottom: -2px;
  right: 2px;
  font-size: 10px;
  font-weight: bold;
  color: #9B59B6;
  background: rgba(255,255,255,0.9);
  padding: 1px 4px;
  border-radius: 6px;
}

/* 玩家容器层 */
.dom-players {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

/* DOM 玩家棋子 */
.dom-player {
  position: absolute;
  left: 0;
  top: 0;
  /* 位置通过 transform: translate3d 控制 */
  transform: translate3d(0, 0, 0);
  /* 注意：will-change 和 backface-visibility 只在动画时启用（.is-moving）
     永久开启会为每个玩家创建常驻 GPU 合成层，导致持续发热 */
  pointer-events: auto;
  cursor: pointer;
  /* 移动动画（调慢） */
  transition: transform 0.45s ease-out;
  /* 性能优化：限制重排范围 */
  contain: layout style;
}

/* 玩家移动中：启用 GPU 加速，禁用 transition（由 JS 控制动画） */
.dom-player.is-moving {
  transition: none;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 玩家棋子头像 */
.dom-player-avatar {
  width: var(--player-size, 50px);
  height: var(--player-size, 50px);
  border-radius: 50%;
  background: transparent;
  border: 4px solid var(--player-color, #4ECDC4);
  overflow: hidden;
  box-sizing: border-box;
}

.dom-player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  border-radius: 50%;
  display: block;
  transform: scale(1.08);
  transform-origin: center;
}

/* 玩家箭头 */
.dom-player-arrow {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid var(--player-color, #4ECDC4);
}

/* 玩家状态图标容器 */
.dom-player-buffs {
  position: absolute;
  left: -6px;
  bottom: 0;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  z-index: 5;
}

.dom-buff-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 18px;
  height: 18px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  line-height: 1;
}

.dom-buff-icon .buff-turns {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 12px;
  height: 12px;
  padding: 0 2px;
  font-size: 9px;
  font-weight: bold;
  color: white;
  background: #e74c3c;
  border-radius: 6px;
  text-align: center;
  line-height: 12px;
}

/* 小屏幕状态图标缩小 */
@media (max-width: 480px) {
  .dom-player-buffs {
    left: -4px;
    gap: 1px;
  }
  
  .dom-buff-icon {
    width: 14px;
    height: 14px;
    font-size: 10px;
  }
  
  .dom-buff-icon .buff-turns {
    right: -3px;
    bottom: -3px;
    min-width: 10px;
    height: 10px;
    font-size: 8px;
    line-height: 10px;
  }
}

/* 玩家名字 */
.dom-player-name {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.95);
  padding: 2px 6px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 当前回合玩家 */
.dom-player.current-turn .dom-player-avatar {
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
  border-color: #FFD700;
}

.dom-player.current-turn::after {
  content: '🎯';
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 16px;
}

/* 玩家弹跳动画 - 只在头像上应用，不影响位置 */
@keyframes domPlayerAvatarBounce {
  0% { 
    transform: translateY(0) scale(1); 
  }
  25% { 
    transform: translateY(-18px) scale(1.06); 
  }
  50% { 
    transform: translateY(-22px) scale(1.08); 
  }
  75% { 
    transform: translateY(-8px) scale(1.03); 
  }
  100% { 
    transform: translateY(0) scale(1); 
  }
}

/* 弹跳动画应用在头像上，不影响玩家的位置 transform */
.dom-player.bouncing .dom-player-avatar {
  animation: domPlayerAvatarBounce 0.4s ease-out !important;
  animation-duration: 0.4s !important;
  animation-iteration-count: 1 !important;
}

/* 格子高亮（玩家经过时） */
.dom-cell.highlight {
  outline: 4px solid #FFD700;
  outline-offset: 2px;
  z-index: 5;
}

/* 主题样式覆盖 */

/* 森林主题 */
.theme-forest .dom-board-map {
  background: linear-gradient(180deg, #E8F5E9 0%, #C8E6C9 50%, #A5D6A7 100%);
}

.theme-forest .dom-path-main {
  stroke: #8D6E63;
}

.theme-forest .dom-path-glow {
  stroke: rgba(141,110,99,0.3);
}

/* 森林主题：只在 dom-board-map 设置背景，避免重复渲染 */
.theme-forest .board-track-wrapper {
  background: transparent;
}

/* 森林主题装饰层 - 丰富的自然元素 */
.theme-forest .dom-board-map::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background-repeat: no-repeat;
  background-image:
    /* 左上大树 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Crect x='35' y='70' width='10' height='30' fill='%238D6E63'/%3E%3Cpath d='M40 5 L15 40 L25 40 L8 70 L72 70 L55 40 L65 40 Z' fill='%232E7D32'/%3E%3Ccircle cx='25' cy='50' r='4' fill='%2381C784'/%3E%3Ccircle cx='55' cy='45' r='3' fill='%2381C784'/%3E%3Ccircle cx='40' cy='25' r='3' fill='%23A5D6A7'/%3E%3C/svg%3E"),
    /* 右上云朵 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Ccircle cx='30' cy='32' r='22' fill='%23FAFAFA'/%3E%3Ccircle cx='55' cy='25' r='25' fill='%23FAFAFA'/%3E%3Ccircle cx='78' cy='32' r='18' fill='%23FAFAFA'/%3E%3Ccircle cx='45' cy='35' r='15' fill='%23F5F5F5'/%3E%3C/svg%3E"),
    /* 左下花丛 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Ccircle cx='15' cy='25' r='8' fill='%23EC407A'/%3E%3Ccircle cx='15' cy='25' r='3' fill='%23FFD54F'/%3E%3Ccircle cx='35' cy='20' r='10' fill='%23AB47BC'/%3E%3Ccircle cx='35' cy='20' r='4' fill='%23FFF59D'/%3E%3Ccircle cx='50' cy='30' r='7' fill='%23EF5350'/%3E%3Ccircle cx='50' cy='30' r='3' fill='%23FFEE58'/%3E%3Cpath d='M10 40 Q15 30 20 40 M30 45 Q35 35 40 45 M45 42 Q50 32 55 42' stroke='%2381C784' stroke-width='2' fill='none'/%3E%3C/svg%3E"),
    /* 右下蝴蝶 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 40'%3E%3Cellipse cx='15' cy='15' rx='12' ry='10' fill='%237E57C2'/%3E%3Cellipse cx='35' cy='15' rx='12' ry='10' fill='%237E57C2'/%3E%3Cellipse cx='15' cy='28' rx='8' ry='7' fill='%23BA68C8'/%3E%3Cellipse cx='35' cy='28' rx='8' ry='7' fill='%23BA68C8'/%3E%3Ccircle cx='18' cy='12' r='2' fill='%23E1BEE7'/%3E%3Ccircle cx='32' cy='12' r='2' fill='%23E1BEE7'/%3E%3Crect x='24' y='8' width='2' height='28' rx='1' fill='%235D4037'/%3E%3C/svg%3E"),
    /* 中间小树 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Crect x='17' y='40' width='6' height='20' fill='%23A1887F'/%3E%3Cpath d='M20 5 L8 25 L14 25 L5 45 L35 45 L26 25 L32 25 Z' fill='%2343A047'/%3E%3C/svg%3E"),
    /* 飘落叶子1 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 25'%3E%3Cpath d='M10 2 Q18 12 10 23 Q2 12 10 2' fill='%2366BB6A'/%3E%3Cpath d='M10 5 L10 20' stroke='%234CAF50' stroke-width='1'/%3E%3C/svg%3E"),
    /* 飘落叶子2 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 25'%3E%3Cpath d='M10 2 Q18 12 10 23 Q2 12 10 2' fill='%23AED581'/%3E%3Cpath d='M10 5 L10 20' stroke='%238BC34A' stroke-width='1'/%3E%3C/svg%3E"),
    /* 小蘑菇 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 35'%3E%3Cellipse cx='15' cy='15' rx='13' ry='10' fill='%23E53935'/%3E%3Ccircle cx='10' cy='12' r='3' fill='%23FFEBEE'/%3E%3Ccircle cx='18' cy='10' r='2' fill='%23FFEBEE'/%3E%3Crect x='11' y='22' width='8' height='13' rx='2' fill='%23EFEBE9'/%3E%3C/svg%3E"),
    /* 小鸟 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 25'%3E%3Cellipse cx='18' cy='15' rx='12' ry='8' fill='%23FFA726'/%3E%3Ccircle cx='25' cy='12' r='5' fill='%23FFA726'/%3E%3Ccircle cx='27' cy='11' r='2' fill='%23212121'/%3E%3Cpath d='M30 12 L35 11 L30 14 Z' fill='%23FF7043'/%3E%3Cpath d='M5 18 Q10 22 18 18' stroke='%23FF8A65' stroke-width='2' fill='none'/%3E%3C/svg%3E"),
    /* 草丛 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'%3E%3Cpath d='M5 30 Q8 15 12 30 M15 30 Q20 10 25 30 M28 30 Q32 18 36 30 M38 30 Q42 12 46 30' stroke='%234CAF50' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  background-position: 
    3% 5%,
    88% 3%,
    5% 88%,
    92% 85%,
    55% 45%,
    25% 35%,
    70% 65%,
    15% 55%,
    80% 40%,
    40% 92%;
  background-size: 
    65px 82px,
    85px 42px,
    50px 42px,
    42px 34px,
    32px 48px,
    16px 20px,
    14px 18px,
    25px 30px,
    30px 22px,
    40px 24px;
}

#boardGamePlaying.theme-forest {
  background: linear-gradient(180deg, #E8F5E9 0%, #C8E6C9 100%) !important;
}

#boardGamePlaying.theme-forest::before {
  background:
    radial-gradient(1200px 420px at 15% 10%, rgba(76, 175, 80, 0.15), transparent 60%),
    radial-gradient(900px 360px at 85% 20%, rgba(255, 255, 255, 0.25), transparent 65%),
    radial-gradient(700px 320px at 40% 85%, rgba(76, 175, 80, 0.12), transparent 70%);
}

/* 海洋主题 */
.theme-ocean .dom-board-map {
  background: linear-gradient(180deg, #E0F7FA 0%, #B2EBF2 50%, #80DEEA 100%);
}

.theme-ocean .dom-path-main {
  stroke: #4DD0E1;
}

.theme-ocean .dom-path-glow {
  stroke: rgba(77,208,225,0.4);
}

/* 海洋主题：只在 dom-board-map 设置背景，避免重复渲染 */
.theme-ocean .board-track-wrapper {
  background: transparent;
}

/* 海洋主题装饰层 - 丰富的海洋元素 */
.theme-ocean .dom-board-map::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background-repeat: no-repeat;
  background-image:
    /* 左上波浪 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 45'%3E%3Cpath d='M0 22 Q15 8 30 22 T60 22 T90 22 T120 22 L120 45 L0 45 Z' fill='%2326C6DA'/%3E%3Cpath d='M0 30 Q15 20 30 30 T60 30 T90 30 T120 30 L120 45 L0 45 Z' fill='%234DD0E1'/%3E%3C/svg%3E"),
    /* 右上鱼群 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 55'%3E%3Cpath d='M8 18 Q22 8 32 18 Q22 28 8 18' fill='%23FF9800'/%3E%3Cpolygon points='32,18 42,13 42,23' fill='%23FF9800'/%3E%3Ccircle cx='14' cy='16' r='2' fill='%23212121'/%3E%3Cpath d='M45 35 Q58 26 67 35 Q58 44 45 35' fill='%23FFC107'/%3E%3Cpolygon points='67,35 76,31 76,39' fill='%23FFC107'/%3E%3Ccircle cx='50' cy='33' r='2' fill='%23212121'/%3E%3Cpath d='M25 48 Q35 42 42 48 Q35 54 25 48' fill='%23E91E63'/%3E%3Cpolygon points='42,48 49,45 49,51' fill='%23E91E63'/%3E%3C/svg%3E"),
    /* 左下海星 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cpolygon points='22,3 26,15 39,15 28,23 32,36 22,28 12,36 16,23 5,15 18,15' fill='%23FF7043'/%3E%3Ccircle cx='22' cy='20' r='5' fill='%23FFAB91'/%3E%3C/svg%3E"),
    /* 右下水母 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 70'%3E%3Cellipse cx='25' cy='18' rx='20' ry='15' fill='%23CE93D8'/%3E%3Cellipse cx='25' cy='15' rx='12' ry='8' fill='%23E1BEE7'/%3E%3Cpath d='M10 30 Q13 48 8 65' stroke='%23BA68C8' stroke-width='2' fill='none'/%3E%3Cpath d='M18 32 Q20 52 16 68' stroke='%23BA68C8' stroke-width='2' fill='none'/%3E%3Cpath d='M25 33 Q25 55 25 70' stroke='%23BA68C8' stroke-width='2'/%3E%3Cpath d='M32 32 Q30 52 34 68' stroke='%23BA68C8' stroke-width='2' fill='none'/%3E%3Cpath d='M40 30 Q37 48 42 65' stroke='%23BA68C8' stroke-width='2' fill='none'/%3E%3C/svg%3E"),
    /* 珊瑚1 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 60'%3E%3Cpath d='M25 60 L25 35 Q15 30 20 18 Q25 5 30 18 Q35 30 25 35' fill='%23FF7043'/%3E%3Cpath d='M25 40 Q12 35 18 22' stroke='%23FF8A65' stroke-width='4' fill='none'/%3E%3Cpath d='M25 40 Q38 35 32 22' stroke='%23FF8A65' stroke-width='4' fill='none'/%3E%3C/svg%3E"),
    /* 泡泡群 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Ccircle cx='20' cy='15' r='12' fill='none' stroke='%23E0F7FA' stroke-width='2'/%3E%3Ccircle cx='15' cy='10' r='3' fill='%23E0F7FA'/%3E%3Ccircle cx='10' cy='35' r='8' fill='none' stroke='%23B2EBF2' stroke-width='2'/%3E%3Ccircle cx='7' cy='32' r='2' fill='%23B2EBF2'/%3E%3Ccircle cx='32' cy='42' r='6' fill='none' stroke='%23E0F7FA' stroke-width='1.5'/%3E%3C/svg%3E"),
    /* 海草 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 70'%3E%3Cpath d='M15 70 Q8 50 18 30 Q12 15 20 5' stroke='%2326A69A' stroke-width='4' fill='none'/%3E%3Cpath d='M25 70 Q32 45 22 25 Q28 10 25 0' stroke='%234DB6AC' stroke-width='4' fill='none'/%3E%3Cpath d='M38 70 Q30 55 40 35 Q35 20 42 8' stroke='%2326A69A' stroke-width='3' fill='none'/%3E%3C/svg%3E"),
    /* 贝壳 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 30'%3E%3Cpath d='M5 28 Q17 5 30 28 Z' fill='%23FFCCBC'/%3E%3Cpath d='M10 25 Q17 10 25 25' stroke='%23FFAB91' stroke-width='1' fill='none'/%3E%3Cpath d='M12 22 Q17 12 23 22' stroke='%23FFAB91' stroke-width='1' fill='none'/%3E%3Cpath d='M14 19 Q17 14 21 19' stroke='%23FFAB91' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
    /* 小章鱼 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 50'%3E%3Cellipse cx='22' cy='18' rx='18' ry='15' fill='%23F48FB1'/%3E%3Ccircle cx='15' cy='15' r='4' fill='white'/%3E%3Ccircle cx='29' cy='15' r='4' fill='white'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23212121'/%3E%3Ccircle cx='30' cy='16' r='2' fill='%23212121'/%3E%3Cpath d='M5 32 Q8 45 3 50' stroke='%23F48FB1' stroke-width='4' fill='none'/%3E%3Cpath d='M15 35 Q18 48 13 55' stroke='%23F48FB1' stroke-width='4' fill='none'/%3E%3Cpath d='M30 35 Q27 48 32 55' stroke='%23F48FB1' stroke-width='4' fill='none'/%3E%3Cpath d='M40 32 Q37 45 42 50' stroke='%23F48FB1' stroke-width='4' fill='none'/%3E%3C/svg%3E"),
    /* 海龟 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 35'%3E%3Cellipse cx='25' cy='18' rx='18' ry='12' fill='%234DB6AC'/%3E%3Ccircle cx='25' cy='18' r='10' fill='%2380CBC4'/%3E%3Ccircle cx='40' cy='15' r='5' fill='%2326A69A'/%3E%3Ccircle cx='42' cy='14' r='1.5' fill='%23212121'/%3E%3Cellipse cx='10' cy='12' rx='5' ry='3' fill='%2326A69A'/%3E%3Cellipse cx='10' cy='24' rx='5' ry='3' fill='%2326A69A'/%3E%3Cellipse cx='38' cy='26' rx='4' ry='3' fill='%2326A69A'/%3E%3C/svg%3E");
  background-position: 
    0% 2%,
    85% 6%,
    5% 88%,
    90% 80%,
    60% 92%,
    30% 40%,
    8% 55%,
    75% 50%,
    50% 15%,
    45% 75%;
  background-size: 
    110px 42px,
    70px 48px,
    38px 38px,
    42px 58px,
    42px 50px,
    32px 40px,
    40px 56px,
    30px 26px,
    38px 42px,
    42px 30px;
}

#boardGamePlaying.theme-ocean {
  background: linear-gradient(180deg, #E0F7FA 0%, #B2EBF2 100%) !important;
}

#boardGamePlaying.theme-ocean::before {
  background:
    radial-gradient(1200px 420px at 15% 10%, rgba(0, 188, 212, 0.12), transparent 60%),
    radial-gradient(900px 360px at 85% 20%, rgba(255, 255, 255, 0.25), transparent 65%),
    radial-gradient(700px 320px at 40% 85%, rgba(0, 188, 212, 0.1), transparent 70%);
}

/* 太空主题 */
.theme-space .dom-board-map {
  background: linear-gradient(180deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);
}

.theme-space .dom-path-main {
  stroke: #7C4DFF;
}

.theme-space .dom-path-glow {
  stroke: rgba(124,77,255,0.5);
}

.theme-space .dom-cell-num {
  color: rgba(255,255,255,0.5);
}

/* 太空主题：只在 dom-board-map 设置背景，避免重复渲染 */
.theme-space .board-track-wrapper {
  background: transparent;
}

/* 太空主题装饰层 - 丰富的宇宙元素 */
.theme-space .dom-board-map::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  background-repeat: no-repeat;
  background-image:
    /* 土星 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 50'%3E%3Ccircle cx='35' cy='25' r='15' fill='%23FFA726'/%3E%3Ccircle cx='30' cy='20' r='4' fill='%23FFB74D'/%3E%3Cellipse cx='35' cy='25' rx='30' ry='6' fill='none' stroke='%23FFCC80' stroke-width='3'/%3E%3Cellipse cx='35' cy='25' rx='26' ry='4' fill='none' stroke='%23FFE0B2' stroke-width='2'/%3E%3C/svg%3E"),
    /* 月亮 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Ccircle cx='22' cy='22' r='18' fill='%23ECEFF1'/%3E%3Ccircle cx='15' cy='16' r='4' fill='%23CFD8DC'/%3E%3Ccircle cx='28' cy='25' r='3' fill='%23CFD8DC'/%3E%3Ccircle cx='20' cy='30' r='2' fill='%23CFD8DC'/%3E%3Ccircle cx='30' cy='15' r='2' fill='%23B0BEC5'/%3E%3C/svg%3E"),
    /* 星云 - 使用淡色模拟透明效果 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Ccircle cx='50' cy='40' r='38' fill='%23B39DDB'/%3E%3Ccircle cx='38' cy='32' r='25' fill='%23D1C4E9'/%3E%3Ccircle cx='62' cy='48' r='20' fill='%23E1BEE7'/%3E%3Ccircle cx='45' cy='55' r='15' fill='%23EDE7F6'/%3E%3C/svg%3E"),
    /* 火箭 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 70'%3E%3Cpath d='M17 5 Q30 20 30 45 L25 55 L25 60 L17 68 L9 60 L9 55 L4 45 Q4 20 17 5' fill='%23ECEFF1'/%3E%3Ccircle cx='17' cy='28' r='6' fill='%2364B5F6'/%3E%3Ccircle cx='17' cy='28' r='3' fill='%2390CAF9'/%3E%3Cpath d='M9 60 L17 72 L25 60' fill='%23FF5722'/%3E%3Cpath d='M12 63 L17 70 L22 63' fill='%23FF8A65'/%3E%3Cpath d='M4 45 L2 55 L9 50' fill='%23B0BEC5'/%3E%3Cpath d='M30 45 L32 55 L25 50' fill='%23B0BEC5'/%3E%3C/svg%3E"),
    /* 大星星1 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpolygon points='15,2 18,11 28,11 20,17 23,27 15,21 7,27 10,17 2,11 12,11' fill='%23FFD54F'/%3E%3Cpolygon points='15,6 17,12 23,12 18,16 20,22 15,18 10,22 12,16 7,12 13,12' fill='%23FFECB3'/%3E%3C/svg%3E"),
    /* 大星星2 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpolygon points='13,2 15,9 23,9 17,14 19,22 13,17 7,22 9,14 3,9 11,9' fill='%23B388FF'/%3E%3C/svg%3E"),
    /* 地球 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='%232196F3'/%3E%3Cpath d='M8 15 Q15 12 22 18 Q28 15 32 18' fill='%234CAF50'/%3E%3Cpath d='M10 25 Q18 22 25 28' fill='%234CAF50'/%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%2390CAF9' stroke-width='1'/%3E%3C/svg%3E"),
    /* UFO */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 35'%3E%3Cellipse cx='25' cy='22' rx='22' ry='8' fill='%2378909C'/%3E%3Cellipse cx='25' cy='20' rx='18' ry='5' fill='%2390A4AE'/%3E%3Cellipse cx='25' cy='15' rx='10' ry='8' fill='%23B0BEC5'/%3E%3Ccircle cx='25' cy='12' r='4' fill='%2381D4FA'/%3E%3Ccircle cx='12' cy='22' r='2' fill='%23FFEB3B'/%3E%3Ccircle cx='25' cy='24' r='2' fill='%23FFEB3B'/%3E%3Ccircle cx='38' cy='22' r='2' fill='%23FFEB3B'/%3E%3C/svg%3E"),
    /* 小星星群1 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3' fill='white'/%3E%3C/svg%3E"),
    /* 小星星群2 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='2' fill='%23B388FF'/%3E%3C/svg%3E"),
    /* 小星星群3 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='2' fill='%2364B5F6'/%3E%3C/svg%3E"),
    /* 小星星群4 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='1.5' fill='%23FFD54F'/%3E%3C/svg%3E"),
    /* 流星 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M5 10 L50 10' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='55' cy='10' r='4' fill='white'/%3E%3Cpath d='M5 10 L25 10' stroke='%23B388FF' stroke-width='1'/%3E%3C/svg%3E"),
    /* 彗星 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 18'%3E%3Cpath d='M3 9 L35 9' stroke='%2381D4FA' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='42' cy='9' r='6' fill='%2381D4FA'/%3E%3Ccircle cx='42' cy='9' r='3' fill='%23E1F5FE'/%3E%3C/svg%3E");
  background-position: 
    6% 8%,
    88% 6%,
    50% 55%,
    92% 88%,
    70% 80%,
    25% 75%,
    15% 50%,
    75% 35%,
    20% 25%,
    55% 15%,
    80% 55%,
    35% 40%,
    12% 85%,
    65% 70%;
  background-size: 
    60px 43px,
    40px 40px,
    95px 76px,
    30px 60px,
    26px 26px,
    22px 22px,
    35px 35px,
    42px 30px,
    10px 10px,
    8px 8px,
    8px 8px,
    7px 7px,
    50px 17px,
    42px 15px;
}

/* 太空主题：确保游戏容器背景覆盖 */
#boardGamePlaying.theme-space {
  background: linear-gradient(180deg, #1A1A2E 0%, #16213E 100%) !important;
}

#boardGamePlaying.theme-space::before {
  background:
    radial-gradient(1200px 420px at 15% 10%, rgba(124, 77, 255, 0.15), transparent 60%),
    radial-gradient(900px 360px at 85% 20%, rgba(255, 255, 255, 0.08), transparent 65%),
    radial-gradient(700px 320px at 40% 85%, rgba(124, 77, 255, 0.12), transparent 70%);
}

/* 省电模式下简化 DOM 渲染 */
body.low-power-mode .dom-cell-glass {
  display: none;
}

body.low-power-mode .dom-player {
  transition: none;
}

body.low-power-mode .dom-player.bouncing .dom-player-avatar {
  animation: domPlayerAvatarBounce 0.4s ease-out !important;
  animation-duration: 0.4s !important;
  animation-iteration-count: 1 !important;
}

body.low-power-mode .dom-decor-item,
body.low-power-mode .dom-path-decor,
body.low-power-mode .dom-path-glow {
  display: none;
}

/* 低端设备优化 */
body.low-end-device .dom-cell-glass,
body.low-end-device .dom-decor-item,
body.low-end-device .dom-path-decor,
body.low-end-device .dom-path-glow {
  display: none;
}

body.low-end-device .dom-player {
  transition: none;
  will-change: auto;
}

body.low-end-device .dom-cell {
  transition: none;
}

/* 移动端性能优化 */
@media (max-width: 1024px) and (pointer: coarse) {
  .dom-cell-glass {
    /* 移动端保留但简化 */
    background: linear-gradient(180deg, 
      rgba(255,255,255,0.4) 0%, 
      transparent 50%);
  }
  
  .dom-decor-item {
    /* 减少装饰数量通过 JS 控制 */
  }
  
  .dom-player-name {
    /* 小屏幕隐藏名字 */
    display: none;
  }
}

/* ========== 访客邀请弹窗样式（优化版） ========== */

.board-invite-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: inviteModalFadeIn 0.2s ease forwards;
}

.board-invite-modal.closing {
  animation: inviteModalFadeOut 0.15s ease forwards;
}

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

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

.board-invite-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.board-invite-content {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  width: 280px;
  max-width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  opacity: 0;
  animation: inviteContentPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards;
}

@keyframes inviteContentPop {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.board-invite-modal.closing .board-invite-content {
  animation: inviteContentClose 0.15s ease forwards;
}

@keyframes inviteContentClose {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.95);
    opacity: 0;
  }
}

.board-invite-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  font-size: 14px;
  color: #999;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-invite-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #666;
}

.board-invite-loading {
  text-align: center;
  padding: 40px 20px;
}

.board-invite-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e8e8e8;
  border-top-color: #4CAF50;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto 10px;
}

.board-invite-loading p {
  color: #888;
  font-size: 13px;
  margin: 0;
}

/* 标签切换 */
.board-invite-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.board-invite-tab {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: #f5f5f5;
  color: #666;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.board-invite-tab.active {
  background: linear-gradient(135deg, #4CAF50, #43A047);
  color: white;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.board-invite-tab:not(.active):hover {
  background: #eee;
}

/* 标签内容 */
.board-invite-tab-content {
  animation: tabContentFade 0.2s ease;
}

.board-invite-tab-content.hidden {
  display: none;
}

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

/* 二维码区域 */
.board-invite-qrcode {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: #fafafa;
  border-radius: 12px;
  margin-bottom: 8px;
}

.board-invite-qrcode img,
.board-invite-qrcode canvas {
  border-radius: 6px;
}

.board-invite-qr-tip {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin: 0;
}

/* 链接预览 */
.board-invite-link-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border-radius: 12px;
  margin-bottom: 12px;
}

.board-invite-link-preview .link-icon {
  font-size: 24px;
}

.board-invite-link-preview .link-text {
  font-size: 14px;
  color: #2E7D32;
  font-weight: 500;
}

/* 复制按钮 */
.board-invite-copy-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #4CAF50, #43A047);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 3px 10px rgba(76, 175, 80, 0.25);
}

.board-invite-copy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.35);
}

.board-invite-copy-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.2);
}

/* 邀请槽位样式增强 */
.board-player-slot.invite-slot {
  cursor: pointer;
  border: 2px dashed #4CAF50;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.05), rgba(76, 175, 80, 0.1));
  transition: all 0.2s;
}

.board-player-slot.invite-slot:hover {
  border-color: #43A047;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.15));
  transform: scale(1.02);
}

.board-player-slot.invite-slot .board-player-empty {
  font-size: 28px;
}

.board-player-slot.invite-slot .board-player-name {
  color: #4CAF50;
  font-weight: 500;
}

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

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

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

@keyframes spin {
  to { transform: rotate(360deg); }
}