/* 共用背景與版面設定 */
body {
  background: #2d3436;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Changed to min-height for longer content */
  margin: 0;
  padding: 20px 0; /* Added padding for scrollable content */
  color: #ffeaa7;
  font-family: 'Press Start 2P', sans-serif;
  box-sizing: border-box; /* Ensure padding doesn't add to width */
}

/* 像素邊框效果 */
.pixel-border {
  border: 4px solid #ffeaa7;
  box-sizing: border-box;
  image-rendering: pixelated;
}

/* Canvas 邊框加上像素感 */
canvas {
  border: 4px solid #ffeaa7;
  background: #2d3436; /* Changed to match body if needed, or keep #fff for game area */
  box-shadow: 0 0 20px #ffeaa7;
  border-radius: 0; /* 像素風通常無圓角 */
  image-rendering: pixelated;
  max-width: 100%; /* Ensure canvas is responsive */
}

/* 標題容器 */
.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 15px;
  gap: 20px;
}

h1 {
  font-size: 48px;
  margin: 0;
  text-shadow: 2px 2px #000;
  color: #ffeaa7;
}

h2 { /* Generic h2 styling */
  font-size: 20px;
  margin: 10px 0 20px;
  text-shadow: 1px 1px #000;
  font-family: 'VT323', monospace;
  letter-spacing: 1px;
  color: #ffeaa7;
}

.fish-note {
  font-size: 20px;
  color: #ffccf9;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.fish-emoji {
  font-size: 28px;
  animation: wiggle 0.8s infinite ease-in-out;
  display: inline-block;
}

/* Fish emoji 動畫 */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(20deg); }
}

/* 硬幣動畫 */
.css-coin {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff176, #fbc02d 70%);
  border: 2px solid #f57f17;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* Info 面板 */
.info-panel {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  justify-content: center;
  gap: 20px; /* Reduced gap slightly */
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #ffeaa7;
  background: rgba(0, 0, 0, 0.4);
  border: 4px solid #ffeaa7;
  padding: 8px 15px; /* Adjusted padding */
  font-family: 'VT323', monospace;
}

/* 模態框 */
.message-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 15px; /* Add padding for smaller screens */
  box-sizing: border-box;
}

.message-modal.show {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background-color: #3498db; /* Consider a game-themed color if #3498db clashes */
  padding: 25px; /* Adjusted padding */
  border: 4px solid #ffeaa7;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  width: 90%;
  max-width: 450px; /* Slightly increased max-width */
  color: #ffeaa7;
  font-size: 1.3rem; /* Adjusted font size */
  font-family: 'VT323', monospace;
}

.modal-button {
  background-color: #63b3ed;
  color: white;
  padding: 12px 22px; /* Adjusted padding */
  border: none;
  border-radius: 0; /* 保持像素感 */
  cursor: pointer;
  font-size: 1.1rem; /* Adjusted font size */
  margin-top: 20px;
  transition: background-color 0.2s ease, transform 0.1s ease;
  font-family: 'Press Start 2P', sans-serif; /* Match button font */
}

.modal-button:hover {
  background-color: #4299e1;
  transform: translateY(-1px);
}

.modal-button:active {
  transform: translateY(0);
}

/* Player Name Input Field in Modal */
#playerNameInput {
  padding: 10px;
  margin: 15px 0; /* Increased margin */
  width: calc(100% - 24px); /* Account for padding and border */
  border: 2px solid #ffeaa7;
  background-color: #2d3436; /* Dark background */
  color: #ffeaa7; /* Light text */
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  box-sizing: border-box;
}


/* ... (前面 CSS 規則不變) ... */

/* Leaderboard Container */
.leaderboard-container {
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6); /* 稍微加深背景以突顯 */
  border: 4px solid #ffeaa7;
  width: 90%;
  /* 使排行榜寬度與遊戲畫布接近，但最大不超過一個定值 */
  max-width: 896px; /* 與遊戲畫布寬度 map[0].length * tileSize (28*32=896) 接近或一致 */
  min-width: 300px; /* 確保在小螢幕上不會太窄 */
  text-align: center;
  font-family: 'VT323', monospace;
  box-sizing: border-box;
}

.leaderboard-container h2 {
  font-size: 28px;
  color: #ffeaa7;
  text-shadow: 1px 1px #000;
  margin-bottom: 20px;
  font-family: 'Press Start 2P', sans-serif;
}

#leaderboardTable {
  width: 100%;
  border-collapse: collapse;
  color: #ffeaa7;
  font-size: 16px;
}

#leaderboardTable th, #leaderboardTable td {
  border: 1px solid #747d8c; /* 調整邊框顏色，使其更融入深色主題 */
  padding: 10px 8px; /* 調整內邊距 */
  text-align: left;
  word-break: break-word; /* 允許長單字換行，但盡量保持單元格內容完整 */
}

#leaderboardTable th {
  background-color: #4a4e69; /* 更改表頭背景色為較深的像素風格顏色 */
  color: #ffeaa7; /* 表頭文字顏色 */
  font-family: 'Press Start 2P', sans-serif;
  font-size: 14px;
  text-align: center;
  white-space: nowrap; /* 盡量讓表頭文字不換行，如果空間允許 */
}

#leaderboardTable td {
  text-align: center; /* 讓表格內容也置中，更整齊 */
}

#leaderboardTable tbody tr:nth-child(odd) {
  background-color: rgba(45, 52, 54, 0.3); /* 調整奇數行背景，更細微的差異 */
}
#leaderboardTable tbody tr:hover {
  background-color: rgba(255, 234, 167, 0.25); /* 滑鼠懸停時的背景色 */
}


/* Ensure specific game elements have higher z-index if needed over modals, though modals are usually highest */
#game {
    position: relative; /* Needed for z-index if other elements overlap */
    z-index: 10;
}
.info-panel {
    position: relative;
    z-index: 10;
}