/**
 * 贪吃蛇游戏 - 样式表
 * PC端强制一屏布局（1080p无滚动）
 * 手机端适配暂时忽略
 */

/* ==================== 基础样式 ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* 颜色主题 - 赛博朋克风格 */
  --primary-color: #00ffd5;
  --primary-hover: #00e6c0;
  --primary-glow: rgba(0, 255, 213, 0.4);
  --danger-color: #ff6b6b;
  --success-color: #4ade80;
  --background-color: #0a0e1a;
  --card-background: rgba(16, 24, 48, 0.85);
  --text-color: #eaeaea;
  --text-muted: #8892b0;
  --border-color: rgba(0, 255, 213, 0.2);
  --grid-color: rgba(0, 255, 213, 0.08);

  /* 统一间距 */
  --gap: 8px;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* 过渡 */
  --transition: all 0.3s ease;

  /* 游戏画布尺寸 */
  --canvas-width: 800px;
  --canvas-height: 600px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  /* 深靛蓝到暗紫蓝的垂直渐变背景 */
  background: linear-gradient(180deg, #0a0e1a 0%, #1a1033 50%, #0d1a2d 100%);
  color: var(--text-color);
  /* PC端：固定高度，禁止滚动 */
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
  position: relative;
}

/* 科技网格光晕纹理 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* 网格中心光晕效果 */
body::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  background: radial-gradient(ellipse at center, rgba(0, 255, 213, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* 确保内容在网格之上 */
body > * {
  position: relative;
  z-index: 1;
}

/* ==================== 广告位容器（隐藏） ==================== */
.ad-slot {
  display: none !important;
}

/* ==================== 顶部：标题+副标题+分数栏+静音按钮 ==================== */
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--canvas-width);
  max-width: calc(100vw - 16px);
  margin-bottom: var(--gap);
  gap: var(--gap);
}

.header-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.title {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-color) 0%, #00e6c0 50%, #00b4d8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px var(--primary-glow);
  white-space: nowrap;
}

.subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.score-bar {
  display: flex;
  gap: 6px;
}

.score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 12px;
  background: var(--card-background);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  min-width: 70px;
}

.score-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.score-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color);
  text-shadow: 0 0 10px var(--primary-glow);
}

.mute-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--card-background);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 0 10px rgba(0, 255, 213, 0.1);
}

.mute-btn:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 20px var(--primary-glow);
  transform: scale(1.05);
}

.mute-btn.muted {
  opacity: 0.5;
  border-color: var(--danger-color);
}

.mute-icon {
  font-size: 1rem;
}

/* ==================== 音频控制按钮 ==================== */
.audio-controls {
  display: flex;
  gap: 4px;
}

.audio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--card-background);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 0 8px rgba(0, 255, 213, 0.08);
  font-size: 0.75rem;
}

.audio-btn:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 15px var(--primary-glow);
  transform: scale(1.05);
}

.audio-btn.muted {
  opacity: 0.4;
  border-color: var(--danger-color);
}

/* ==================== 中部：成就区 + 游戏框 ==================== */
.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}

/* 成就展示区 */
.achievement-panel {
  width: var(--canvas-width);
  max-width: calc(100vw - 16px);
  padding: 6px 10px;
  background: var(--card-background);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: 0 0 15px rgba(0, 255, 213, 0.08);
}

.achievement-list {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.achievement-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: transparent;
  transition: var(--transition);
  min-width: 0;
}

/* 已解锁成就 */
.achievement-item.unlocked {
  border-color: var(--success-color);
  background: rgba(74, 222, 128, 0.1);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.15);
}

.achievement-item.unlocked .achievement-name {
  color: var(--success-color);
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.4);
}

/* 未解锁成就 */
.achievement-item.locked .achievement-icon {
  filter: grayscale(100%);
  opacity: 0.5;
}

.achievement-item.locked .achievement-name {
  color: var(--text-muted);
}

.achievement-item.locked .achievement-progress {
  color: var(--text-muted);
}

.achievement-icon {
  font-size: 0.9rem;
  margin-bottom: 1px;
}

.achievement-name {
  font-size: 0.65rem;
  font-weight: 600;
}

.achievement-difficulty {
  font-size: 0.5rem;
  color: var(--text-muted);
  opacity: 0.7;
}

.achievement-progress {
  font-size: 0.55rem;
  color: var(--text-muted);
}

/* 游戏容器 */
.game-container {
  position: relative;
  width: var(--canvas-width);
  height: var(--canvas-height);
  max-width: calc(100vw - 16px);
  background: var(--card-background);
  padding: 4px;
  border-radius: var(--radius-lg);
  /* 青绿色渐变描边 */
  border: 2px solid transparent;
  background-clip: padding-box;
  /* 外发光效果 */
  box-shadow: 
    0 0 30px rgba(0, 255, 213, 0.15),
    0 0 60px rgba(0, 255, 213, 0.08),
    inset 0 0 40px rgba(0, 255, 213, 0.05);
}

/* 渐变描边伪元素 */
.game-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, var(--primary-color), #00b4d8, var(--primary-color));
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: 0.6;
}

/* 径向渐变发光 - 游戏框内部 */
.game-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(0, 255, 213, 0.08) 0%, transparent 60%);
  pointer-events: none;
  border-radius: var(--radius-md);
}

/* 画布样式 */
#gameCanvas {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  display: block;
  background: #0a0e1a;
}

/* 暂停遮罩 */
.pause-overlay {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background: rgba(10, 14, 26, 0.9);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  z-index: 10;
  backdrop-filter: blur(4px);
}

.pause-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 4px;
  text-shadow: 0 0 20px var(--primary-glow);
}

.pause-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* 游戏结束遮罩 */
.game-over-overlay {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background: rgba(10, 14, 26, 0.95);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  z-index: 20;
  backdrop-filter: blur(4px);
}

.game-over-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--danger-color);
  margin-bottom: 8px;
}

.final-score {
  font-size: 1rem;
  color: var(--text-color);
  margin-bottom: 4px;
}

.final-score span {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 1.25rem;
  text-shadow: 0 0 10px var(--primary-glow);
}

.final-level {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.final-level span {
  color: var(--primary-color);
  font-weight: 700;
}

/* ==================== 底部：控制按钮 + 样式选择 ==================== */
.bottom-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  margin-top: var(--gap);
  width: var(--canvas-width);
  max-width: calc(100vw - 16px);
}

/* 控制按钮 */
.controls {
  display: flex;
  gap: 6px;
}

.btn {
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* 开始游戏按钮 - 高饱和度亮红色 */
.btn-start {
  background: #ff3333;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.4);
}

.btn-start:hover {
  background: #ff4444;
  transform: translateY(-1px);
  box-shadow: 0 0 25px rgba(255, 51, 51, 0.5), inset 0 0 15px rgba(0, 255, 213, 0.3);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, #00b4d8 100%);
  color: #0a0e1a;
  box-shadow: 0 0 12px var(--primary-glow);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, #0096c7 100%);
  transform: translateY(-1px);
  box-shadow: 0 0 20px var(--primary-glow), 0 2px 10px rgba(0, 255, 213, 0.3);
}

.btn-secondary {
  background: transparent;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 0 10px rgba(0, 255, 213, 0.2);
}

/* ==================== 难度选择模块 ==================== */
.difficulty-panel {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--card-background);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: 0 0 10px rgba(0, 255, 213, 0.08);
}

.difficulty-options {
  display: flex;
  gap: 3px;
}

.diff-btn {
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.diff-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.diff-btn.active {
  background: linear-gradient(135deg, var(--primary-color) 0%, #00b4d8 100%);
  border-color: var(--primary-color);
  color: #0a0e1a;
  box-shadow: 0 0 8px var(--primary-glow);
}

/* 样式选择模块 */
.style-panel {
  display: flex;
  gap: 12px;
  padding: 4px 10px;
  background: var(--card-background);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: 0 0 10px rgba(0, 255, 213, 0.08);
}

.style-section {
  display: flex;
  align-items: center;
  gap: 4px;
}

.style-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.style-options {
  display: flex;
  gap: 3px;
}

.style-btn {
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.style-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.style-btn.active {
  background: linear-gradient(135deg, var(--primary-color) 0%, #00b4d8 100%);
  border-color: var(--primary-color);
  color: #0a0e1a;
  box-shadow: 0 0 8px var(--primary-glow);
}

/* ==================== 操作说明（仅PC端显示） ==================== */
.instructions {
  margin-top: var(--gap);
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: center;
}

.instructions kbd {
  background: rgba(0, 255, 213, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.6rem;
  border: 1px solid var(--border-color);
  color: var(--primary-color);
}

/* ==================== 触摸提示（仅手机端显示） ==================== */
.touch-hint {
  display: none;
  margin-top: var(--gap);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* ==================== 微光粒子效果 ==================== */
.particle-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--primary-color);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 6px var(--primary-color), 0 0 12px var(--primary-glow);
  animation: particle-float 8s infinite ease-in-out;
}

.particle:nth-child(1) { left: 5%; top: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; top: 80%; animation-delay: 1.5s; }
.particle:nth-child(3) { left: 35%; top: 25%; animation-delay: 3s; }
.particle:nth-child(4) { left: 50%; top: 70%; animation-delay: 0.8s; }
.particle:nth-child(5) { left: 65%; top: 15%; animation-delay: 2.3s; }
.particle:nth-child(6) { left: 80%; top: 85%; animation-delay: 4s; }
.particle:nth-child(7) { left: 92%; top: 40%; animation-delay: 1s; }
.particle:nth-child(8) { left: 12%; top: 55%; animation-delay: 3.5s; }
.particle:nth-child(9) { left: 45%; top: 90%; animation-delay: 2s; }
.particle:nth-child(10) { left: 75%; top: 30%; animation-delay: 4.5s; }
.particle:nth-child(11) { left: 88%; top: 65%; animation-delay: 0.5s; }

@keyframes particle-float {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  25% {
    opacity: 0.6;
    transform: translateY(-30px) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-60px) scale(1.2);
  }
  75% {
    opacity: 0.4;
    transform: translateY(-90px) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) scale(0.3);
  }
}

/* ==================== 手机端适配（保持基本可用） ==================== */
@media (max-width: 900px) {
  :root {
    --canvas-width: calc(100vw - 16px);
    --canvas-height: calc(var(--canvas-width) * 0.75);
  }
  
  body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    justify-content: flex-start;
    padding: 8px;
  }
  
  .top-header {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  
  .header-left {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  
  .header-right {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .score-item {
    min-width: 60px;
    padding: 3px 8px;
  }
  
  .score-value {
    font-size: 0.95rem;
  }
  
  .achievement-list {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .achievement-item {
    min-width: 70px;
  }
  
  .bottom-footer {
    flex-direction: column;
    gap: 6px;
  }
  
  .style-panel {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .touch-hint {
    display: block;
  }
  
  .instructions {
    display: none;
  }
}

/* ==================== 打印样式 ==================== */
@media print {
  .controls,
  .style-panel,
  .achievement-panel,
  .mute-btn,
  .particle-container {
    display: none !important;
  }
}