/* Basic styling */
body { 
  margin: 0; 
  overflow: hidden; 
  background-color: #f0f0f0; 
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 使用视口高度确保满屏 */
}

/* Game container styles */
.game-container {
  position: relative;
  display: flex;
  flex-direction: row;
}

/* Center canvas */
canvas { 
  display: block; 
  background-color: #fff;
  /* 移除了margin: auto，因为父元素已经使用flex布局居中 */
}

/* Initially hide the canvas */
#game-canvas { 
  display: none; 
}

/* Progress bars container */
#progress-bars-container {
  display: flex;
  flex-direction: column;
  width: 60px; /* Progress bar background width as specified */
  height: 100%;
  margin-left: 10px; /* Space between game canvas and progress bars */
  justify-content: space-between;
}

/* Individual progress bar styles */
.progress-bar {
  width: 100%;
  height: calc(100% / 20); /* Divide by DETECTION_ZONES_COUNT */
  background-color: #d0d0d0; /* Light grey background */
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #f0f0f0; /* Subtle border to separate bars */
}

/* Progress indicator */
.progress-indicator {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #000000; /* Black fill color as specified */
  width: 0%; /* Width will be dynamically set with JavaScript */
  transition: width 0.2s ease; /* Smooth transition for updates */
}

/* Score container styles */
#score-container {
  margin-left: 20px;
  width: 150px;
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
}

/* Individual score section */
.score-section {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ccc;
}

.score-section:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

/* Score labels */
.score-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

/* Score values */
#score-value, #combo-counter, #difficulty-level, #high-score {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* Special styling for combo counter */
#combo-counter {
  color: #ff5500; /* Orange color for combo */
  transition: all 0.3s ease;
}

/* Animation for score changes */
@keyframes score-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.score-change {
  animation: score-pulse 0.3s ease;
}

/* Start screen styles */
#start-screen {
  position: absolute;
  inset: 0;
  background-color: #1f2937;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  padding: 2rem;
  text-align: center;
}

h1 {
  font-size: 2.25rem;
  font-weight: bold;
  color: white;
  margin-bottom: 2rem;
}

/* 游戏说明样式 */
.game-instructions {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  max-width: 600px;
}

.game-instructions h2 {
  color: #3b82f6;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.game-instructions p {
  color: #e5e7eb;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

/* 按键说明样式 */
.controls-instructions {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  max-width: 600px;
}

.controls-instructions h2 {
  color: #3b82f6;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.controls-instructions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.controls-instructions li {
  color: #e5e7eb;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

#start-button {
  background-color: #3b82f6;
  color: white;
  font-weight: bold;
  padding: 1rem 2rem;
  border-radius: 0.25rem;
  font-size: 1.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

#start-button:hover {
  background-color: #1d4ed8;
}