:root {
  --primary-color: #ff6b6b;
  --secondary-color: #4ecdc4;
  --accent-color: #ffe66d;
  --background-color: #f7fff7;
  --text-color: #2d334a;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --rotate-degree: 0deg;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

h1 {
  font-size: 3rem;
  margin-bottom: 2rem;
  color: var(--primary-color);
  text-shadow: 2px 2px 4px var(--shadow-color);
}

.wheel-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 2rem auto;
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    #ff6b6b 0% 6.25%,
    #4ecdc4 6.25% 12.5%,
    #ffe66d 12.5% 18.75%,
    #fd79a8 18.75% 25%,
    #a29bfe 25% 31.25%,
    #55efc4 31.25% 37.5%,
    #fdcb6e 37.5% 43.75%,
    #74b9ff 43.75% 50%,
    #ff7675 50% 56.25%,
    #00cec9 56.25% 62.5%,
    #ffeaa7 62.5% 68.75%,
    #fab1a0 68.75% 75%,
    #81ecec 75% 81.25%,
    #b2bec3 81.25% 87.5%,
    #e17055 87.5% 93.75%,
    #6c5ce7 93.75% 100%
  );
  box-shadow: 0 0 20px var(--shadow-color);
  position: relative;
  transform: rotate(var(--rotate-degree, 0deg));
  overflow: visible;
  border: 8px solid white;
  box-sizing: border-box;
  will-change: transform;
}

.wheel.spinning {
  transition: transform 4s cubic-bezier(0.17, 0.67, 0.24, 0.99);
  animation: spin-effect 4s;
}

@keyframes spin-effect {
  0% { filter: blur(0); }
  50% { filter: blur(1px); }
  100% { filter: blur(0); }
}

.wheel::before {
  display: none; /* 隐藏半透明小圆圈 */
}

.wheel::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 5px var(--shadow-color);
  z-index: 2;
}

.wheel.spinning::before {
  display: none;
}

.food-item {
  position: absolute;
  width: auto;
  height: auto;
  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8), 0 0 7px rgba(0, 0, 0, 0.7);
  font-size: 14px;
  pointer-events: none;
  z-index: 3;
  transition: filter 0.3s ease;
  padding: 3px;
  text-align: center;
}

/* 旋转时文字模糊效果 */
.blur-text {
  filter: blur(2px);
}

.pointer {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 35px;
  z-index: 20;
}

.pointer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 25px solid #ff3030;
  filter: drop-shadow(0px 2px 4px var(--shadow-color));
}

/* 指针辅助线 - 从指针延伸到中心点的线 */
.pointer::before {
  content: '';
  position: absolute;
  top: 25px; /* 从三角形底部开始 */
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 145px; /* 延伸到圆心附近 */
  background-color: rgba(255, 0, 0, 0.5);
  z-index: -1;
}

.btn {
  margin-top: 2rem;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 8px var(--shadow-color);
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #ff8a8a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px var(--shadow-color);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px var(--shadow-color);
}

.result {
  margin-top: 2rem;
  font-size: 1.5rem;
  color: var(--primary-color);
  font-weight: bold;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-icon {
  height: 1.8rem;
  width: auto;
  margin-right: 5px;
  vertical-align: middle;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

@media (max-width: 600px) {
  .wheel-container {
    width: 250px;
    height: 250px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

/* 扇区分割线 */
.divider-line {
  position: absolute;
  width: 2px;
  height: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  top: 0;
  left: 50%;
  transform-origin: bottom center;
  z-index: 2;
}

/* 中心点标记 */
.center-point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background-color: red;
  border-radius: 50%;
  z-index: 15;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* 新增：转盘区域布局 */
.wheel-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  margin: 0 auto;
}

/* 食物图例样式 */
.food-legend {
  max-width: 380px; /* 进一步扩大宽度以容纳多列 */
  width: 380px; /* 固定宽度 */
  text-align: left;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 0 10px var(--shadow-color);
  align-self: center;
}

/* 食物图例标题区 */
.legend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #fff0f0;
}

.legend-header h3 {
  margin: 0;
  color: var(--primary-color);
  font-size: 1.2rem;
}

.food-legend h3 {
  margin-bottom: 0;
  color: var(--primary-color);
  font-size: 1.2rem;
  text-align: left;
}

.legend-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列网格布局 */
  gap: 10px 15px; /* 行间距10px，列间距15px */
  max-height: none; /* 移除高度限制 */
  overflow-y: visible; /* 移除滚动条 */
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px; /* 增大字体 */
  padding: 5px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* 高亮选中项 */
.legend-item.highlight {
  background-color: rgba(255, 107, 107, 0.1);
  transform: scale(1.05);
  font-weight: bold;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.color-block {
  width: 20px; /* 略微增大颜色块 */
  height: 20px;
  border-radius: 3px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* 高亮选中的颜色块 */
.legend-item.highlight .color-block {
  transform: scale(1.2);
  box-shadow: 0 0 8px var(--primary-color);
}

@media (max-width: 768px) {
  .wheel-section {
    flex-direction: column;
    align-items: center;
  }
  
  .food-legend {
    max-width: 90%;
    width: 90%;
    margin-top: 0;
  }
  
  .legend-items {
    grid-template-columns: repeat(2, 1fr); /* 移动端保持两列 */
  }
}

/* 小屏幕设备使用单列布局 */
@media (max-width: 480px) {
  .legend-items {
    grid-template-columns: 1fr; /* 非常窄的屏幕使用单列 */
  }
}

/* 烟花容器样式 - 使用Canvas实现 */
.fireworks-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  pointer-events: none; /* 允许点击穿透 */
  background-color: transparent !important; /* 强制透明背景 */
  display: flex;
  justify-content: space-between;
}

/* 两侧烟花样式 */
.side-fireworks {
  height: 100%;
  background-color: transparent !important; /* 强制透明背景 */
}

/* 左侧烟花 */
.left-fireworks {
  position: absolute;
  left: 0;
  background-color: transparent !important; /* 强制透明背景 */
}

/* 右侧烟花 */
.right-fireworks {
  position: absolute;
  right: 0;
  background-color: transparent !important; /* 强制透明背景 */
}

/* 移除所有旧的烟花样式 */
.firework,
.fireworks-container.active {
  display: none;
}

/* 移除不需要的动画 */
@keyframes explode {
  0% { opacity: 0; }
  100% { opacity: 0; }
}

/* 对于移动设备的调整 */
@media (max-width: 768px) {
  .fireworks-container.left {
    left: 10px;
    width: 100px;
  }
  
  .fireworks-container.right {
    right: 10px;
    width: 100px;
  }
  
  @keyframes explode {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    30% {
      transform: scale(6);
      opacity: 1;
    }
    50% {
      transform: scale(12);
      opacity: 0.5;
    }
    100% {
      transform: scale(18);
      opacity: 0;
    }
  }
}

/* 编辑模式按钮 */
.edit-mode-btn {
  margin-left: 10px;
  padding: 4px 10px;
  font-size: 0.85rem;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px var(--shadow-color);
}

.edit-mode-btn:hover {
  background-color: #ff8a8a;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-color);
}

.edit-mode-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px var(--shadow-color);
}

/* 编辑模式的食物项 */
.legend-item.edit-mode {
  padding: 8px;
  border: 1px solid #ffe0e0;
  background-color: #fff9f9;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.legend-item.edit-mode:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 6px rgba(255, 107, 107, 0.2);
}

/* 食物编辑区域 */
.food-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* 食物输入框 */
.food-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #ffe0e0;
  border-radius: 20px;
  font-size: 14px;
  transition: all 0.3s ease;
  outline: none;
}

.food-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 5px rgba(255, 107, 107, 0.3);
}

/* 重置按钮 */
.food-reset-btn {
  background-color: white;
  border: 1px solid #ffe0e0;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--primary-color);
  transition: all 0.3s ease;
}

.food-reset-btn:hover {
  background-color: var(--primary-color);
  color: white;
  transform: rotate(180deg);
  box-shadow: 0 2px 4px var(--shadow-color);
}

/* 编辑操作区域 */
.edit-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 15px;
}

/* 保存按钮 */
.save-btn {
  flex: 1;
  padding: 10px 15px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 4px 8px var(--shadow-color);
  transition: all 0.3s ease;
}

.save-btn:hover {
  background-color: #ff8a8a;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px var(--shadow-color);
}

.save-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px var(--shadow-color);
}

/* 全部重置按钮 */
.reset-all-btn {
  flex: 1;
  padding: 10px 15px;
  background-color: white;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.reset-all-btn:hover {
  background-color: #fff0f0;
  color: #ff4040;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 107, 107, 0.2);
}

.reset-all-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(255, 107, 107, 0.2);
}

/* 提示消息样式 */
.toast-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
  max-width: 80%;
  padding: 12px 20px;
  border-radius: 25px;
  background-color: white;
  color: #333;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  opacity: 0.95;
}

/* 成功提示 */
.toast-message.success {
  background-color: #ffeaea;
  border-left: 4px solid var(--primary-color);
}

/* 错误提示 */
.toast-message.error {
  background-color: #ffeaea;
  border-left: 4px solid #ff4040;
}

/* 信息提示 */
.toast-message.info {
  background-color: #f0f8ff;
  border-left: 4px solid #1e90ff;
}

/* 提示图标 */
.toast-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

.success .toast-icon {
  background-color: var(--primary-color);
  color: white;
}

.error .toast-icon {
  background-color: #ff4040;
  color: white;
}

.info .toast-icon {
  background-color: #1e90ff;
  color: white;
}

/* 提示内容 */
.toast-content {
  flex: 1;
  font-size: 16px;
}

/* 提示动画 */
.toast-enter-active, .toast-leave-active {
  transition: all 0.3s;
}

.toast-enter-from, .toast-leave-to {
  opacity: 0;
  transform: translate(-50%, -30px);
}