body {
  margin: 0;
  overflow: hidden;
  background-color: #000;
}

canvas {
  display: block;
}

.serve-btn, .marbles-btn, .character-btn, .spotlight-btn {
  position: absolute;
  padding: 12px 24px;
  font-size: 16px;
  z-index: 1;
  cursor: pointer;
  border: none;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  outline: none;
}

/* 未点击状态 */
.serve-btn:not(.active), 
.marbles-btn:not(.active), 
.character-btn:not(.active), 
.spotlight-btn:not(.active) {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(0);
}

/* 点击/激活状态 */
.serve-btn.active, 
.marbles-btn.active, 
.character-btn.active, 
.spotlight-btn.active {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 悬停状态 */
.serve-btn:hover:not(.active), 
.marbles-btn:hover:not(.active), 
.character-btn:hover:not(.active), 
.spotlight-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* 按钮位置 */
.serve-btn {
  top: 20px;
  left: 20px;
}

.marbles-btn {
  top: 70px;
  left: 20px;
}

.character-btn {
  top: 120px;
  left: 20px;
}

.spotlight-btn {
  top: 170px;
  left: 20px;
}

/* 修改后的窗帘样式 */
.curtain {
  position: fixed;
  top: 0;
  width: 50%; /* 每边窗帘占50%宽度 */
  height: 100vh;
  background-color: #800020; /* 酒红色 */
  background-image: linear-gradient(
      to bottom,
      rgba(128, 0, 32, 0.9),
      rgba(128, 0, 32, 0.8)
    ),
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 10px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 10px
    );
  z-index: 1000;
  transition: transform 1.5s ease-in-out;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
  /* 新增窗帘弧度效果 */
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    85% 95%,
    70% 90%,
    55% 92%,
    40% 94%,
    25% 96%,
    10% 98%,
    0 100%
  );
}

.left-curtain {
  left: 0;
  transform-origin: left center; /* 设置变换原点为左侧 */
  transform: perspective(500px) rotateY(0deg); /* 初始状态 */
}

.right-curtain {
  right: 0;
  transform-origin: right center; /* 设置变换原点为右侧 */
  transform: perspective(500px) rotateY(0deg); /* 初始状态 */
  /* 右侧窗帘镜像处理 */
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    85% 98%,
    70% 96%,
    55% 94%,
    40% 92%,
    25% 90%,
    10% 95%,
    0 100%
  );
}

/* 修改开启动画为从中间向两边打开 */
.curtain.open.left-curtain {
  transform: perspective(500px) rotateY(-90deg);
}

.curtain.open.right-curtain {
  transform: perspective(500px) rotateY(90deg);
}

.start-button {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 30px;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 24px;
  border-radius: 50px;
  cursor: pointer;
  z-index: 1001;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.start-button:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) scale(1.05);
}