/* 遊戲樣式表 - 現代淺色風格 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f5f5; /* 淺灰背景 */
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.game-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* 手機控制按鈕 - 右下角 */
.mobile-controls {
  position: fixed; /* 固定在螢幕 */
  bottom: 20px; /* 距離底部 */
  right: 20px; /* 距離右側 */
  text-align: center;
  z-index: 10000; /* 確保在畫布上方 */
  user-select: none;
}

/* 水平排列按鈕 */
.horizontal-buttons {
  display: flex;
  justify-content: flex-end; /* 按鈕靠右排列 */
  margin-top: 5px;
}

.mobile-controls button {
  width: 60px;
  height: 60px;
  margin: 3px;
  font-size: 24px;
  border-radius: 10px;
  border: none;
  background-color: #f0f0f0;
  box-shadow: 0 3px #999;
}

.mobile-controls button:active {
  box-shadow: 0 1px #666;
  transform: translateY(2px);
}

/* 分數視窗 */
.score-window {
  background: linear-gradient(135deg, #ffffff, #e0e0e0);
  border: 2px solid #88c0d0;
  border-radius: 10px;
  padding: 10px 16px; /* 縮小內邊距 */
  text-align: center;
  min-width: 100px; /* 縮小寬度 */
  margin-bottom: 12px; /* 與下方畫布保持間距 */
}

.score-header {
  font-size: 14px;
  color: #88c0d0;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
}

.score-value {
  font-size: 36px;
  font-weight: bold;
  color: #5e81ac;
  margin: 4px 0;
}

.score-label {
  font-size: 12px;
  color: #4c566a;
  margin-top: 4px;
}

/* 遊戲畫布容器 */
.canvas-container {
  position: relative;
}

#gameCanvas {
  border: 3px solid #88c0d0; /* 邊框稍微加粗，顏色清爽 */
  border-radius: 12px; /* 邊角更圓滑 */
  background: linear-gradient(
    145deg,
    #ffffff,
    #f0f4f8
  ); /* 淺色漸層，增加層次感 */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1),
    /* 外陰影更柔和、漂浮感 */ inset 0 2px 5px rgba(136, 192, 208, 0.1); /* 內陰影增加深度 */
  transition: all 0.3s ease; /* 滑順過渡 */
}

/* 勝利覆蓋層 */
.victory-overlay,
.gameOver-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  display: none;
  justify-content: center;
  align-items: center;
  color: #2e3440;
}

.victory-overlay.show,
.gameOver-overlay.show {
  display: flex;
}

.victory-message {
  text-align: center;
}

.victory-title {
  font-size: 48px;
  font-weight: bold;
  color: #a3be8c; /* 綠色 */
  margin-bottom: 16px;
}

.victory-subtitle {
  font-size: 20px;
  color: #2e3440;
}

/* 控制說明 */
.controls-info {
  text-align: center;
  color: #2e3440;
}

.controls-title {
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: bold;
}

.controls-instructions {
  font-size: 14px;
  line-height: 1.4;
}

.controls-instructions div {
  margin-bottom: 4px;
}

/* 重新開始按鈕 */
.restart-button {
  padding: 12px 24px;
  background-color: #81a1c1; /* 淺藍色 */
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 12px;
}

.restart-button:hover {
  background-color: #5e81ac;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.restart-button:active {
  transform: translateY(0);
  background-color: #4c566a;
}

/* 響應式設計 */
@media (max-width: 600px) {
  body {
    padding: 10px;
  }

  .score-window {
    min-width: 120px;
    padding: 12px 20px;
  }

  .score-header {
    font-size: 12px;
  }

  .score-value {
    font-size: 28px;
  }

  .victory-title {
    font-size: 36px;
  }

  .victory-subtitle {
    font-size: 16px;
  }

  .controls-title {
    font-size: 18px;
  }

  .controls-instructions {
    font-size: 12px;
  }

  .restart-button {
    font-size: 16px;
    padding: 10px 20px;
  }

  #gameCanvas {
    max-width: 100%;
    height: auto;
  }
}