#tetris-leaderboard-content {
  background-color: #f9f9f9;
  padding: 8px; /* 稍微减小内边距以适应空间 */
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%; /* 占满 next-piece 的宽度 */
  font-size: 14px; /* 缩小字体以适应空间 */
  display: none; /* 默认隐藏 */
  margin-top: 10px; /* 与按钮之间增加间距 */
}

#tetris-leaderboard-content h3 {
  margin-bottom: 8px;
  font-size: 16px; /* 调整标题大小 */
}

#tetris-leaderboard-content p {
  margin: 4px 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* 添加以下样式确保页面内容至少占满整个视口高度，使页脚显示在底部 */
body {
  background-color: #f5f5f7;
  color: #1d1d1f;
  transition: background-color 1s ease;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  flex: 1; /* 让容器占据剩余空间 */
  display: flex;
  flex-direction: column;
}
/* 确保页脚在正常页面流中保持在底部 */
.container footer {
  margin-top: auto; /* 将页脚推到容器底部 */
}

h1 {
  font-size: 48px;
  font-weight: 600;
  margin: 40px 0;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


.season-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 40px 0;
}
.season-btn, .game-btn {
  padding: 15px 30px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #fff;
  color: #1d1d1f;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.season-btn:hover, .game-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.season-btn.active {
  background: linear-gradient(270deg, #ff6b6b, #4ecdc4);
  color: white;
}

.spring-btn:hover { background-color: #ffccd5; }
.summer-btn:hover { background-color: #fdffb6; }
.autumn-btn:hover { background-color: #ffd6a5; }
.winter-btn:hover { background-color: #a0c4ff; }
/* 修改页脚样式，确保它固定在底部 */
footer {
  margin-top: 60px;
  padding: 20px;
  font-size: 14px;
  color: #86868b;
  position: relative;
  width: 100%;
  text-align: center;
}
body.spring { background-color: #f8f5ff; }
body.summer { background-color: #fffbe5; }
body.autumn { background-color: #fff5eb; }
body.winter { background-color: #f0f8ff; }
#tetris-game {
  display: none;
  margin: 10px auto 0; /* 顶部外边距设为 20px，靠上一点 */
  max-width: 500px;
}
#tetris-canvas {
  border: 2px solid #333;
  border-radius: 10px;
  background-color: #f0f0f0;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  /* margin-bottom: 20px; */
}

.control-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(45deg, #a2c4f5, #d0e1ff);
  color: white;
}
.control-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.game-instructions {
  color: #666;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
@media (max-width: 768px) {
  h1 { font-size: 36px; }
  .season-controls { flex-wrap: wrap; }
  #game-canvas { width: 100%; height: auto; }
}
/* 特别为俄罗斯方块调整间距 */
#tetris-game .tetris-container {
  margin-bottom: 0px; /* 减小底部间距，从原来的20px改为10px */
}
.control-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 5px 0 !important;
}
/* 确保方向按钮尺寸一致 */
.direction-btn {
  width: 50px !important;
  height: 50px !important;
  padding: 12px !important;
  border-radius: 15px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border: none !important;
  background: linear-gradient(45deg, #a2c4f5, #d0e1ff) !important;
}
@media (max-width: 768px) {
  #tetris-canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 240 / 400;
  }
  .mobile-controls {
    display: block;
  }
  /* 减小控制行之间的间距 */
  .control-row:nth-child(1) {
    margin-bottom: 5px; /* 从原来的10px改为5px */
  }
  .control-row:nth-child(2) {
    justify-content: space-between;
    max-width: 200px;
    margin: 0 auto;
  }
  .control-row:nth-child(2) .direction-btn:nth-child(2) {
    margin: 0 20px;
  }
  .game-instructions p:first-child::after {
    content: "或使用下方按钮控制";
  }
  /* 确保游戏说明与控制按钮之间有适当间距 */
  .game-instructions {
    margin-top: 10px;
  }
}
/* 优化模态框样式 */
#tetris-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85); /* 更暗的背景 */
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 确保在最顶层 */
}

#tetris-modal > div {
  position: relative;
  background: linear-gradient(to bottom, #ffffff, #f5f5f7);
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  width: 350px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  position: relative;
  z-index: 10000;
  animation: modalFadeIn 0.3s ease-out;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 修复模态框关闭按钮样式冲突 */
#tetris-modal button {
  margin-top: 15px;
  width: 140px;
  padding: 10px 0;
  border-radius: 25px;
  background: linear-gradient(45deg, #4ecdc4, #556270);
  color: white;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
#tetris-modal button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
#tetris-player-select {
  margin-top: 15px;
  margin-bottom: 5px;
  width: 200px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
}
.tetris-container {
  display: flex;
  justify-content: center; /* 保持居中对齐 */
  gap: 15px; /* 稍微增加间距 */
  margin-bottom: 20px;
  position: relative; /* 保留相对定位 */
  width: 100%; /* 确保容器使用全部可用宽度 */
  max-width: 500px; /* 与snake-game一致的最大宽度 */
  margin-left: auto; /* 水平居中 */
  margin-right: auto; /* 水平居中 */
}

#tetris-canvas {
  margin-left: 0; /* 移除负边距 */
  flex: 3; /* 画布占据更多空间 */
}

/* 调整预览区域布局，使旋转按钮在底部 */
.next-piece {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px;
  flex: 1;
  position: relative; /* 为绝对定位的子元素提供参考 */
  padding-bottom: 70px; /* 为底部旋转按钮预留空间 */
}

#next-piece-canvas {
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f8f8f8;
  margin-bottom: 10px; /* 与排行榜之间增加间距 */
}

.game-buttons {
  display: flex;
  justify-content: center;
  gap: 20px; /* 按钮之间的间距 */
  margin-top: 20px;
}

.game-btn {
  padding: 15px 30px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(45deg, rgba(255, 179, 71, 0.85), rgba(255, 204, 51, 0.7));
  color: #1d1d1f;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.game-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.leaderboard-toggle-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.leaderboard-toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 俄罗斯方块排行榜按钮样式 */
.tetris-leaderboard-toggle-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin-top: 10px;
  width: 80%;
}

.tetris-leaderboard-toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 添加以下样式来修复按钮边框问题 */
button {
  outline: none; /* 移除默认的轮廓线 */
  -webkit-tap-highlight-color: transparent; /* 移除移动设备上的点击高亮 */
}

button:focus {
  box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.4); /* 自定义焦点样式，更符合按钮形状 */
}

.season-btn:focus, .game-btn:focus {
  outline: none;
  transform: translateY(-2px);
}

.control-btn:focus {
  outline: none;
}

.direction-btn:focus {
  outline: none;
  box-shadow: 0 0 8px rgba(78, 205, 196, 0.7);
}

/* 针对移动设备的触摸优化 */
@media (max-width: 768px) {
  .direction-btn, .control-btn {
    touch-action: manipulation; /* 优化触摸体验 */
    user-select: none; /* 防止文本选择 */
  }
  .tetris-container {
    gap: 10px; /* 保持合适的间距 */
    justify-content: center; /* 恢复居中对齐 */
    padding-right: 0; /* 移除右侧内边距 */
  }
  #tetris-canvas {
    margin-left: 0; /* 移除负边距 */
    flex: 2; /* 在移动设备上保持合适的比例 */
  }
  .next-piece {
    width: 120px; /* 在移动设备上的宽度 */
    flex: 1;
  }
}

.level{
  color:darkred;
  /* 加粗 */
  font-weight: bold;
}

/* 修改游戏选择页面布局 */
#games-selection {
  text-align: center;
  padding: 20px;
  position: relative;
  width: 100%; /* 修改为 width: 100% */
  max-width: 100%; /* 移除或增大 max-width 限制 */
  margin: 0 auto;
}

/* 确保游戏选择页面的标题不被返回按钮遮挡 */
#games-selection h2 {
  font-size: 32px;
  margin: 40px 0 30px; /* 增加上边距，为返回按钮留出空间 */
  color: #333;
}
/* 修复手机端"选择游戏"标题样式冲突 */
#games-selection .games-header h2 {
  margin: 0 !important; /* 强制覆盖所有其他外边距设置 */
  padding: 0 !important;
  font-size: 24px !important; /* 基础字体大小 */
  white-space: nowrap !important;
  grid-column: 2 !important;
  text-align: center !important;
}
/* 确保标题不受 #games-selection h2 选择器的影响 */
#games-selection > h2 {
  display: none !important; /* 隐藏任何可能存在的重复标题 */
}
/* 同理，确保游戏页面的标题也不被遮挡 */
#snake-game h2, #tetris-game h2 {
  margin-top: 0px;
}

/* 游戏选择网格可以保持居中但不需要占满整行 */
.games-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  max-width: 800px; /* 将宽度限制移到这里 */
  margin-left: auto;
  margin-right: auto;
}

.game-select-btn {
  width: 200px;
  height: 200px;
  border: none;
  border-radius: 20px;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background-size: cover;
  background-position: center;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 20px;
}
/* 添加扑克牌游戏选择按钮样式 */
#card-select-btn {
  background: url('./image/poker-cards.svg');
  background-color: #ff9e6d;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center 30%;
  position: relative;
}

/* 添加扑克牌按钮底部渐变效果 */
#card-select-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3));
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  z-index: 1;
}

#card-select-btn span {
  position: relative;
  z-index: 2;
}
#snake-select-btn {
  background: url('./image/snake.svg');
  background-color: #81f381;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center 30%;
  position: relative;
}

#snake-select-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3));
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  z-index: 1;
}

#snake-select-btn span {
  position: relative;
  z-index: 2;
}

#tetris-select-btn {
  background: url('./image/tetris.svg'); /* 注意：需要是有效的图像文件，不能是.json */
  background-color: #87CEFA;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center 30%;
  position: relative;
}

#tetris-select-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3));
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  z-index: 1;
}

#tetris-select-btn span {
  position: relative;
  z-index: 2;
}

.game-select-btn:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.back-btn {
  position: fixed; /* 固定定位，相对于视口 */
  left: 15px;
  top: 15px;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5); /* 更透明的背景 */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); /* 更淡的阴影 */
  z-index: 1000;
}

.back-btn::before {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url('./image/back.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.back-btn:hover {
  transform: translateX(-5px);
  background: rgba(255, 255, 255, 0.7); /* 悬停时稍微不透明 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* 修改现有的移动设备媒体查询 */
@media (max-width: 768px) {
  .games-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 创建两列布局 */
    grid-gap: 15px; /* 设置网格间距 */
    align-items: center;
    justify-content: center;
    max-width: 400px; /* 控制整体宽度 */
    margin: 20px auto;
  }
  
  .game-select-btn {
    width: 100%; /* 使按钮宽度充满网格单元格 */
    height: 150px; /* 调整高度适合2×2布局 */
    margin: 0; /* 移除外边距 */
  }
  
  /* 确保按钮内文字正确对齐 */
  .game-select-btn span {
    padding-bottom: 10px; /* 增加文字底部内边距 */
  }
  
  /* 为触摸设备优化交互反馈 */
  .game-select-btn:active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.1);
    border-radius: 20px;
    z-index: 3;
  }
}
/* 适配小屏幕设备 */
@media (max-width: 400px) {
  .games-grid {
    grid-gap: 10px; /* 减小间距 */
  }
  
  .game-select-btn {
    height: 130px; /* 减小按钮高度 */
    font-size: 20px; /* 减小字体大小 */
  }
}
/* 添加触摸设备的悬停效果 */
@media (hover: none) and (pointer: coarse) {
  .game-select-btn:active {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    transition: all 0.1s ease;
  }
  
  #snake-select-btn:active, #tetris-select-btn:active {
    background-color: #a2f5a2; /* 按下时轻微改变背景色 */
  }
  
  #tetris-select-btn:active {
    background-color: #a2d8f5; /* 俄罗斯方块按钮按下时的背景色 */
  }
  
  .back-btn:active {
    transform: translateX(-5px) scale(0.95);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  }
}

/* 修改季节装饰，调整z-index，确保在水果层下方 */
.seasonal-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 40%; /* 保持原来的尺寸 */
  background-repeat: no-repeat;
  background-position: right center; /* 将背景图片定位在右侧 */
  opacity: 0.15; /* 保持原有透明度 */
  pointer-events: none;
  transition: all 0.5s ease;
  z-index: -2; /* 修改为-2，确保在水果层下方 */
}

/* 2. 修改各季节背景的动画应用 */
body.spring .seasonal-decoration {
  /* background-image: url('./image/flower\ \(1\).svg'); */
  background-image: url('./image/四季/春/春2.svg');
  background-size: 40%;
  /* animation: float 0s ease-in-out infinite; */
  transform-origin: center;
}

body.summer .seasonal-decoration {
  /* background-image: url('./image/summer-beach.svg'); */
  background-image: url('./image/四季/夏/夏3.svg');
  background-size: 40%;
  /* animation: sway 0s ease-in-out infinite; */
  transform-origin: center;
}

body.autumn .seasonal-decoration {
  /* background-image: url('./image/leaves.svg'); */
  background-image: url('./image/四季/秋/秋3.svg');
  background-size: 40%;
  /* animation: fall 0s ease-in-out infinite; */
  transform-origin: center;
}

body.winter .seasonal-decoration {
  /* background-image: url('./image/winter.svg'); */
  background-image: url('./image/四季/冬/冬3.svg');
  background-size: 40%;
  /* animation: snow 0s ease-in-out infinite; */
  transform-origin: center;
  transition: opacity 0.5s ease-out;
}
/* 3. 确保动画优先级 */
.seasonal-decoration {
  animation-play-state: running !important;
  will-change: transform; /* 改为只监听transform变化 */
}

@keyframes float {
  0% { transform: rotate(-2deg) translateY(0); transform-origin: bottom center; }
  50% { transform: rotate(2deg) translateY(-2px); transform-origin: bottom center; }
  100% { transform: rotate(-2deg) translateY(0); transform-origin: bottom center; }
}

@keyframes sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

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

/* 修改冬季动画，确保不影响透明度 */
@keyframes snow {
  0%, 100% { transform: translateY(0) scale(1); /* 不要设置opacity */ }
  50% { transform: translateY(-0px) scale(1.0); /* 不要设置opacity */ }
}

/* 添加页面过渡效果 */
#games-selection, #snake-game, #tetris-game {
  transition: opacity 0.2s ease-in-out;
}

/* 当元素即将显示时应用的样式 */
.fade-in {
  opacity: 0;
}

/* 当元素完全显示时应用的样式 */
.fade-in.active {
  opacity: 1;
}

/* 美化排行榜样式 */
.leaderboard-btn {
  position: relative;
  z-index: 10;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(240, 240, 240, 0.8));
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin-top: 15px;
  font-weight: 500;
}

.leaderboard-btn:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(240, 240, 240, 0.9));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 修改 leaderboard-panel 样式确保显示正确 */
.leaderboard-panel {
  display: none; /* 默认隐藏 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  overflow: hidden;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translate(-50%, -40%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: linear-gradient(to right, #3498db, #2ecc71);
}

.leaderboard-header h3 {
  margin: 0;
  color: white;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.leaderboard-close-btn {
  background: transparent;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.leaderboard-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}


/* 确保表格主体可以滚动但不影响整体布局 */
.leaderboard-table {
  max-height: calc(80vh - 60px);
  overflow-y: auto;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr 1fr 1fr;
  padding: 10px 20px;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.leaderboard-row.header {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #555;
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.leaderboard-body .leaderboard-row:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

.leaderboard-body .leaderboard-row:hover {
  background-color: rgba(46, 204, 113, 0.05);
}

.rank {
  font-weight: bold;
  text-align: center;
}

.rank-1, .rank-2, .rank-3 {
  position: relative;
  font-size: 16px;
}

.rank-1 {
  color: #f1c40f; /* Gold */
}

.rank-2 {
  color: #bdc3c7; /* Silver */
}

.rank-3 {
  color: #cd7f32; /* Bronze */
}

.player {
  font-weight: 500;
}

.score {
  font-weight: 600;
  color: #3498db;
  text-align: right;
}

.date {
  font-size: 12px;
  color: #777;
  text-align: right;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #777;
  font-style: italic;
}


.tetris-leaderboard .leaderboard-header {
  background: linear-gradient(to right, #2980b9, #3498db);
}

/* 响应式调整 */
@media (max-width: 500px) {
  .leaderboard-panel {
    width: 95%;
  }
  
  .leaderboard-row {
    grid-template-columns: 0.5fr 1.5fr 1fr;
    font-size: 14px;
  }
  
  .date {
    display: none; /* 在小屏幕上隐藏日期 */
  }
}

/* 添加提交状态信息的样式 */
.submit-status {
  margin-top: 15px;
  padding: 10px;
  text-align: center;
  font-weight: 500;
  color: #2980b9;
  background-color: rgba(41, 128, 185, 0.1);
  border-radius: 5px;
  animation: fadeIn 0.3s ease;
}

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


/* 修改模态框标题区域样式，保持居中 */
.modal-header {
  width: 100%;
  text-align: center;
  margin-bottom: 15px;
  position: relative;
}

/* 增加选择器特异性，确保关闭按钮样式不被覆盖 */
#tetris-modal button.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 45px;
  height: 45px;
  margin-top: 0; /* 覆盖上面的margin-top */
  padding: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5); /* 半透明背景，与返回按钮一致 */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); /* 淡淡的阴影 */
  z-index: 10;
}
 
#tetris-modal button.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.7); /* 悬停时稍微不透明 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

#tetris-modal button.modal-close-btn .close-icon {
  width: 24px;
  height: 24px;
  opacity: 0.8;
  transition: opacity 0.2s, transform 0.2s;
}

#tetris-modal button.modal-close-btn:hover .close-icon {
  opacity: 1;
  transform: scale(1.1);
}

/* 移动设备样式 */
@media (max-width: 768px) {
  #snake-modal button.modal-close-btn, 
  #tetris-modal button.modal-close-btn {
    width: 42px;
    height: 42px;
    top: 8px;
    right: 8px;
  }
  
  #snake-modal button.modal-close-btn:active, 
  #tetris-modal button.modal-close-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  }
}

/* 合并开始和暂停按钮样式 */
.play-pause-btn {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(45deg, #4ecdc4, #556270);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 0;
  margin: 0 auto;
}

.play-pause-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.play-pause-btn:active {
  transform: scale(0.95);
}

.play-pause-btn img {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
}

/* 适配移动设备 */
@media (max-width: 768px) {
  .play-pause-btn {
    width: 60px;
    height: 60px;
  }
  
  .play-pause-btn img {
    width: 28px;
    height: 28px;
  }
}

/* 固定位置的开始/暂停按钮 */
.play-pause-btn.fixed-btn {
  position: fixed;
  left: 70px; /* 位于返回按钮右侧 */
  top: 15px;
  width: 45px;
  height: 45px;
  margin: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  z-index: 1000;
}

.play-pause-btn.fixed-btn img {
  width: 20px;
  height: 20px;
}

.play-pause-btn.fixed-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* 移动设备适配 */
@media (max-width: 768px) {
  .play-pause-btn.fixed-btn {
    width: 42px;
    height: 42px;
    left: 65px; /* 移动设备上稍微调整位置 */
  }
  
  .play-pause-btn.fixed-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  }
}

/* 移除多余的游戏控制区域样式，因为已删除相应元素 */
.game-controls {
  display: none; /* 完全隐藏，防止占用空间 */
}

 /* 减小俄罗斯方块游戏容器底部边距，使控制按钮更靠近 */
 #tetris-game .tetris-container {
  margin-bottom: 5px;
}

/* 调整按钮样式 */
.rotate-btn-preview {
  margin: 0 !important; /* 移除上下外边距 */
  width: 50px !important;
  height: 50px !important;
  font-size: 24px;
  padding: 0;
  border-radius: 15px;
  background: linear-gradient(45deg, #a2c4f5, #d0e1ff) !important; /* 紫色系渐变，区分旋转按钮 */
  color: white !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.rotate-btn-preview:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.rotate-btn-preview:active {
  transform: scale(0.95);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
/* 调整排行榜样式，确保与底部按钮有适当间距 */
.tetris-leaderboard {
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px; /* 确保与底部旋转按钮有适当间距 */
}
/* 移动设备适配 */
@media (max-width: 768px) {
  .next-piece {
    padding-bottom: 60px; /* 移动设备上稍微减小底部间距 */
  }
  
  .rotate-btn-preview {
    width: 42px !important;
    height: 42px !important;
    font-size: 20px;
  }
  
  .rotate-btn-container {
    bottom: 5px; /* 移动设备上稍微调整位置 */
  }
  
  /* 调整控制行布局，适应没有旋转按钮的情况 */
  #tetris-game .mobile-controls .control-row:first-child {
    justify-content: space-between;
    max-width: 200px;
    margin: 0 auto 10px;
  }
  
  /* 降落按钮居中 */
  #tetris-game .mobile-controls .control-row:last-child {
    justify-content: center;
  }
}

/* 添加旋转按钮容器样式，确保它位于最底部 */
.rotate-btn-container {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: auto; /* 推到容器底部 */
}

/* 为控制按钮中的图标添加样式 */
.control-btn .control-icon {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
  transition: transform 0.2s ease;
}

/* 按钮悬停时图标效果 */
.control-btn:hover .control-icon {
  transform: scale(1.1);
}

/* 按钮激活时的效果 */
.control-btn:active .control-icon {
  transform: scale(0.9);
}

/* 调整按钮大小和内边距，以适应图标 */
.direction-btn {
  width: 50px !important;
  height: 50px !important;
  padding: 12px !important;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 旋转按钮特殊样式 */
.rotate-btn-preview .control-icon {
  width: 26px;
  height: 26px;
}

/* 移动设备适配 */
@media (max-width: 768px) {
  .direction-btn {
    width: 46px !important;
    height: 46px !important;
    padding: 10px !important;
  }
  
  .control-btn .control-icon {
    width: 22px;
    height: 22px;
  }
  
  .rotate-btn-preview .control-icon {
    width: 24px;
    height: 24px;
  }
}

/* 添加按钮按下和悬停状态的动画 */
.direction-btn {
  overflow: hidden;
  position: relative;
}

.direction-btn:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  opacity: 0;
  transition: opacity 0.3s;
}

.direction-btn:hover:after {
  opacity: 1;
}

.direction-btn:active:after {
  opacity: 0.3;
  background: rgba(0, 0, 0, 0.1);
}

/* 修改为网格布局，确保标题居中且按钮位置合适 */
.games-header {
  display: grid; /* 改用网格布局替代flex */
  grid-template-columns: 1fr auto 1fr; /* 三列布局：左侧空白、标题、右侧空白+按钮 */
  align-items: center;
  position: relative;
  margin-bottom: 30px;
  margin-top: 0;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 0 15px;
  height: 60px;
}

/* 将标题放在第二列，确保居中 */
.games-header h2 {
  font-size: 32px;
  margin: 0;
  color: #333;
  white-space: nowrap;
  grid-column: 2; /* 放在中间列 */
  text-align: center;
}

/* 移除之前的伪元素 */
.games-header::before {
  display: none; /* 移除之前添加的伪元素 */
}

/* 将按钮放在第三列，贴近右侧 */
.instruction-btn {
  grid-column: 3; /* 放在右侧列 */
  justify-self: end; /* 靠右对齐 */
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(240, 240, 240, 0.8));
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  font-weight: 500;
  white-space: nowrap;
  max-width: 120px;
}

.instruction-btn:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(240, 240, 240, 0.9));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 修改模态框样式确保居中显示 */
#instruction-modal {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,0.85) !important;
  z-index: 9999 !important;
  justify-content: center !important;
  align-items: center !important;
  overflow-y: auto !important;
}

/* 更明确地定义模态框内容的位置 */
#instruction-modal > div {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #ffffff !important;
  padding: 30px !important;
  border-radius: 15px !important;
  text-align: center !important;
  width: 450px !important;
  max-width: 90% !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
  z-index: 10000 !important;
}

.instruction-content {
  text-align: left;
  margin-top: 20px;
}

.game-instruction-section {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.game-instruction-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.game-instruction-section h3 {
  color: #333;
  margin-bottom: 15px;
  font-size: 20px;
  text-align: center;
}

.game-instruction-section p {
  margin: 8px 0;
  color: #555;
  line-height: 1.5;
}

/* 移动设备适配 */
@media (max-width: 768px) {
  .games-header {
    grid-template-columns: 0.5fr auto 0.5fr; /* 在小屏幕上减少左右空白 */
  }
  
  .instruction-btn {
    padding: 6px 12px;
    font-size: 12px;
    max-width: 100px; /* 移动设备上进一步限制宽度 */
  }
  
  .games-header h2 {
    font-size: 24px;
  }
  #instruction-modal > div {
    padding: 20px;
    width: 95%;
  }
}
/* 处理更小的屏幕 */
@media (max-width: 400px) {
  #games-selection .games-header h2 {
    font-size: 20px !important;
  }
  .games-header {
    grid-template-columns: 0.3fr auto 0.3fr; /* 在更小屏幕上进一步减少左右空白 */
    padding: 0 10px;
  }
  
  .instruction-btn {
    padding: 5px 8px;
    font-size: 11px;
    max-width: 80px; /* 在小屏幕上进一步限制宽度 */
  }
  
  .games-header h2 {
    font-size: 20px; /* 更小的标题 */
  }
}

/* 修复游戏说明弹窗关闭按钮样式 */
#instruction-modal button.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 45px;
  height: 45px;
  margin-top: 0;
  padding: 0;
  border: none; /* 移除边框 */
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  z-index: 10;
}

#instruction-modal button.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

#instruction-modal button.modal-close-btn .close-icon {
  width: 24px;
  height: 24px;
  opacity: 0.8;
  transition: opacity 0.2s, transform 0.2s;
}

#instruction-modal button.modal-close-btn:hover .close-icon {
  opacity: 1;
  transform: scale(1.1);
}

/* 移动设备样式适配 */
@media (max-width: 768px) {
  #instruction-modal button.modal-close-btn {
    width: 42px;
    height: 42px;
    top: 8px;
    right: 8px;
  }
  
  #instruction-modal button.modal-close-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  }
}

/* 飞心动画 - 设置最高层级 */
.flying-heart-animation {
  position: fixed;
  /* top: -77px;
  left: 64.034px; */
  width: 100px !important;
  height: 100px !important;
  max-width: 150px !important;
  max-height: 150px !important;
  overflow: hidden !important;
  z-index: 1020; /* 提高到最高层级 */
  cursor: move;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
  visibility: visible;
}

/* 确保内部SVG元素也受到限制 */
.flying-heart-animation svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* 在游戏页面中隐藏动画 */
#snake-game:not([style*="display: none"]) ~ .flying-heart-animation,
#tetris-game:not([style*="display: none"]) ~ .flying-heart-animation,
#games-selection:not([style*="display: none"]) ~ .flying-heart-animation {
  display: none;
}

/* 移除移动设备上点击元素时出现的边框和高亮 */
* {
  -webkit-tap-highlight-color: transparent; /* 移除iOS上的点击高亮 */
  outline: none; /* 移除默认轮廓 */
}

/* 专门针对按钮的点击状态处理 */
button,
.control-btn,
.direction-btn,
.game-btn,
.season-btn,
.instruction-btn,
.back-btn,
.game-select-btn,
.leaderboard-btn,
.play-pause-btn {
  -webkit-appearance: none; /* 移除iOS默认按钮样式 */
  appearance: none; /* 标准属性 */
  -webkit-touch-callout: none; /* 禁止长按弹出菜单 */
  user-select: none; /* 防止文本被选中 */
  touch-action: manipulation; /* 优化触摸操作 */
  -webkit-user-select: none; /* Safari特定属性 */
  -moz-user-select: none; /* Firefox特定属性 */
  -ms-user-select: none; /* IE/Edge特定属性 */
}

/* 确保按钮在点击后没有边框或外观变化 */
button:focus,
.control-btn:focus,
.direction-btn:focus,
.game-btn:focus,
.season-btn:focus,
.instruction-btn:focus,
.back-btn:focus,
.game-select-btn:focus,
.leaderboard-btn:focus,
.play-pause-btn:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

/* 为飞心动画容器添加无边框点击样式 */
.flying-heart-animation {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  touch-action: manipulation;
}

/* 增强暂停按钮样式优先级 */
button.play-pause-btn.fixed-btn {
  position: fixed !important;
  left: 70px !important;
  top: 15px !important;
  width: 45px !important;
  height: 45px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  z-index: 1000 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 为不支持backdrop-filter的浏览器提供后备样式 */
@supports not (backdrop-filter: blur(3px)) {
  button.play-pause-btn.fixed-btn {
    background: rgba(240, 240, 240, 0.8) !important;
  }
}

/* 提高游戏说明模态框的选择器优先级 */
html body #instruction-modal {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important; /* 使用视口单位 */
  height: 100vh !important; /* 使用视口单位 */
  background: rgba(0,0,0,0.85) !important;
  z-index: 9999 !important;
  justify-content: center !important;
  align-items: center !important;
  overflow-y: auto !important;
  margin: 0 !important; /* 移除所有外边距 */
  padding: 0 !important; /* 移除所有内边距 */
}

/* 增强模态框内容的选择器优先级 */
html body #instruction-modal > div {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #ffffff !important;
  padding: 30px !important;
  border-radius: 15px !important;
  text-align: center !important;
  width: 450px !important;
  max-width: 90% !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
  z-index: 10000 !important;
  margin: 0 !important;
}

@media (max-width: 768px) and (min-width: 401px) {
  #games-selection .games-header h2 {
    font-size: 22px !important;
  }
}
/* 完全覆盖"选择游戏"标题样式的高优先级选择器 */
html body #games-selection .games-header h2,
body #games-selection .games-header h2,
#games-selection .games-header h2 {
  font-size: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  white-space: nowrap !important;
  grid-column: 2 !important;
  text-align: center !important;
  position: relative !important;
  transform: none !important;
  left: 0 !important;
}

/* 完全隐藏可能存在的其他h2元素 */
#games-selection > h2:not(.games-header h2) {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 确保games-header本身的布局正确 */
#games-selection .games-header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 确保手机版字体大小控制 */
@media (max-width: 400px) {
  html body #games-selection .games-header h2 {
    font-size: 28px !important;
  }
}

@media (max-width: 768px) and (min-width: 401px) {
  html body #games-selection .games-header h2 {
    font-size: 28px !important;
  }
}

/* 确保暂停层完全居中 */
#tetris-pause-layer {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 120px !important;
  height: 60px !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 100 !important;
  font-family: Arial, sans-serif !important;
  font-size: 24px !important;
  color: #333 !important;
  pointer-events: none !important;
  border-radius: 10px !important;
  text-align: center !important;
  box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
}

/* 适配移动设备 */
@media (max-width: 768px) {
  #tetris-pause-layer {
    font-size: 20px !important;
  }
}


/* 确保自定义输入框样式支持所有类型输入 */
.custom-name-container input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  min-width: 0;
  width: 100%;
}

.custom-name-container input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
  z-index: 10; /* 确保焦点时在顶层 */
}



/* 浮动水果 - 中间层级 */
.floating-fruits {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1010; /* 设为中间层级，高于按钮 */
  pointer-events: none;
  overflow: hidden;
}

.fruit {
  position: absolute;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  will-change: transform;
  transition: opacity 0.3s ease;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
  pointer-events: auto;
  cursor: move; /* 保持十字箭头一致 */
  touch-action: none !important;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

.fruit.dragging {
  cursor: move;
  z-index: 1015 !important; /* 拖动时略高于普通水果 */
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
  transition: none;
}

/* 页面按钮和主要元素 - 最低层级 */
.container, 
.back-btn, 
.play-pause-btn.fixed-btn, 
#snake-game, 
#tetris-game,
#games-selection {
  position: relative;
  z-index: 1000; /* 降低到最低层级 */
}

/* 拖动碰撞动画样式 */
.fruit.collision {
  z-index: 1012 !important; /* 确保碰撞的水果显示在前面 */
  filter: drop-shadow(0 6px 12px rgba(255,255,255,0.6)) !important;
}

/* 碰撞波纹效果 */
@keyframes collision-ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
    transform: scale(1.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    transform: scale(1);
  }
}

/* 奖牌图标样式 */
.medal-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  display: inline-block;
}

/* 调整排名单元格的样式 */
.rank-1, .rank-2, .rank-3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 移除原有的文本颜色设置，让图标保持原始颜色 */
.rank-1, .rank-2, .rank-3 {
  position: relative;
  font-size: 16px;
  color: inherit;
}



/* 增强back-btn样式优先级，确保始终固定在视口 */
button.back-btn,
html body .back-btn {
  position: fixed !important;
  z-index: 2000 !important; /* 提高z-index确保在其他元素上方 */
  left: 15px !important;
  top: 15px !important;
}

/* 修复组合选择器中包含back-btn的样式 */
.container, 
.play-pause-btn.fixed-btn, 
#snake-game, 
#tetris-game,
#games-selection {
  position: relative;
  z-index: 1000;
}

/* 单独定义back-btn的z-index */
.back-btn {
  z-index: 2000; /* 高于其他UI元素 */
}