/* ==== 自訂字體定義 ==== */
@font-face {
  font-family: 'Zpix'; /* 為您的字體取一個名字，例如 'MyCustomFont' */
  src: url('./fonts/zpix.woff2') format('woff2'), /* 現代瀏覽器 */
       url('./fonts/zpix.woff') format('woff');   /* 較舊的瀏覽器 */
       /* 如果需要更廣泛的支援，也可以加入 .ttf 格式 */
       /*url('./fonts/zpix.ttf') format('truetype');*/
  font-weight: normal; /* 如果您的字體有不同的粗細，可以為每個粗細定義一個 @font-face 規則 */
  font-style: normal;  /* 如果您的字體有斜體，可以為斜體定義一個 @font-face 規則 */
  font-display: swap;  /* 這是一個重要的屬性，它告訴瀏覽器如何處理字體載入：
                          'swap' 會先顯示一個備用字體，然後在自訂字體載入後替換它，
                          這可以避免文字在字體載入前顯示為空白。 */
}

/* 如果您的字體有不同的粗細或樣式，請為它們分別定義 @font-face */
/*
@font-face {
  font-family: 'MyCustomFont';
  src: url('./fonts/my-custom-font-bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
*/

/* ==== PICO-8 8-BIT STYLE ==== */
:root {
  /* PICO-8 16色调色板 */
  --pico-black: #000000;
  --pico-dark-blue: #1D2B53;
  --pico-purple: #7E2553;
  --pico-dark-green: #008751;
  --pico-brown: #AB5236;
  --pico-dark-gray: #5F574F;
  --pico-light-gray: #C2C3C7;
  --pico-white: #FFF1E8;
  --pico-red: #FF004D;
  --pico-orange: #FFA300;
  --pico-yellow: #FFEC27;
  --pico-green: #00E436;
  --pico-blue: #29ADFF;
  --pico-indigo: #83769C;
  --pico-pink: #FF77A8;
  --pico-peach: #FFCCAA;
}

/* ==== 全局样式 ==== */
body {
  margin: 0;
  padding: 0;
  font-family: 'Zpix', 'Press Start 2P', monospace;
  overflow: hidden;
  position: relative;
  min-height: 100vh;
  background-color: var(--pico-dark-blue);
  color: var(--pico-white);
  line-height: 1.4;
  font-size: 12px;
  image-rendering: pixelated;
}

/* ==== CRT 效果覆盖层 ==== */
#crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: 
    /* 扫描线效果 */
    repeating-linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 2px
    ),
    /* 轻微色偏 */
    linear-gradient(
      to bottom,
      rgba(0, 255, 0, 0.02),
      rgba(255, 0, 0, 0.02)
    );
  opacity: 0.3;
}

/* ==== Loading Screen Styles ==== */
.loading-overlay {
  position: fixed; /* 固定在視口 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--pico-dark-blue); /* 使用 PICO-8 的深藍色背景 */
  color: var(--pico-white); /* 使用 PICO-8 的白色文字 */
  display: flex; /* 使用 Flexbox 佈局來居中內容 */
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 內容垂直堆疊 */
  z-index: 99999; /* 設定一個非常高的 z-index，確保它在所有其他元素之上 */
  font-family: 'Zpix', 'Press Start 2P', monospace; /* 使用遊戲風格字體 */
  text-align: center;
  font-size: 16px; /* 預設字體大小 */
  image-rendering: pixelated; /* 如果有像素圖形，保持其像素感 */
}

.loading-overlay h1 {
  color: var(--pico-yellow); /* 標題使用 PICO-8 的黃色 */
  text-shadow: 2px 2px 0 var(--pico-black); /* 添加黑色陰影，增加立體感 */
  font-size: 40px; /* 較大的標題字體 */
  margin-bottom: 15px;
}

.loading-overlay p {
  color: var(--pico-light-gray); /* 提示文字使用 PICO-8 的淺灰色 */
  font-size: 14px;
}

/* 當載入畫面需要被隱藏時，添加此類別 */
.loading-overlay.hidden {
  display: none; /* 將其 display 設為 none 來隱藏 */
}

/* ==== 认证界面 - 8-bit 风格 ==== */
.auth-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--pico-dark-gray);
  padding: 20px;
  border: 4px solid var(--pico-light-gray);
  z-index: 10;
  width: 90%;
  max-width: 380px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 4px 4px 0 var(--pico-black);
}

.auth-container h1{
  margin-bottom: 30px;
  color: var(--pico-yellow);
  text-shadow: 2px 2px 0 var(--pico-black);
  font-size: 34px;
  text-transform: uppercase;

}

.auth-container input[type="email"],
.auth-container input[type="password"] {
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 15px;
  border: 3px solid var(--pico-light-gray);
  background-color: var(--pico-black);
  color: var(--pico-white);
  font-family: 'Zpix', 'Press Start 2P', monospace;
  font-size: 14px;
  box-sizing: border-box;
}

.auth-container button {
  width: calc(100% - 20px);
  padding: 12px;
  background-color: var(--pico-blue);
  color: var(--pico-white);
  border: none;
  border-bottom: 4px solid var(--pico-dark-blue);
  border-right: 4px solid var(--pico-dark-blue);
  cursor: pointer;
  font-family: 'Zpix', 'Press Start 2P', monospace;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (hover: hover) and (pointer: fine) {
  .auth-container button:hover {
    background-color: var(--pico-green);
    border-bottom: 4px solid var(--pico-dark-green);
    border-right: 4px solid var(--pico-dark-green);
  }
}

.auth-container hr {
  margin: 20px 0;
  border: 0;
  border-top: 3px solid var(--pico-light-gray);
}

/* 注册提示文字 */
.register-prompt {
  font-size: 12px;
  margin-top: 15px;
  color: var(--pico-light-gray);
}

.register-prompt a {
  color: var(--pico-blue);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .register-prompt a:hover {
    color: var(--pico-green);
    text-decoration: underline;
  }
}

.error-message {
  color: var(--pico-red);
  font-size: 12px;
  margin-top: 10px;
  min-height: 1.2em;
  text-shadow: 1px 1px 0 var(--pico-black);

}



/* ==== 地图部分 ==== */
#map-section {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* ==== 地图控件 - 像素风格 ==== */
.top-right-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* 菜单按钮 */
#menu-button {
  padding: 8px 16px;
  background-color: var(--pico-blue);
  color: var(--pico-black);
  border: none;
  border-bottom: 4px solid var(--pico-dark-blue);
  border-right: 4px solid var(--pico-dark-blue);
  cursor: pointer;
  font-family: 'Zpix', 'Press Start 2P', monospace;
  font-size: 14px;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  #menu-button:hover {
    background-color: var(--pico-green);
    border-bottom: 4px solid var(--pico-dark-green);
    border-right: 4px solid var(--pico-dark-green);
  }
}

/* 用户菜单 */
.user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background-color: var(--pico-dark-gray);
  padding: 10px;
  border: 3px solid var(--pico-light-gray);
  box-shadow: 4px 4px 0 var(--pico-black);
  z-index: 200;
  min-width: 200px;
}

/* 调整用户信息在菜单中的样式 */
.user-menu .user-info-display {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.user-menu #user-info button {
  width: 100%;
}

.drawing-controls-container {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--pico-dark-gray);
  padding: 8px;
  border: 3px solid var(--pico-light-gray);
  box-shadow: 4px 4px 0 var(--pico-black);
}

.map-control-button {
  background-color: var(--pico-blue);
  color: var(--pico-black);
  border: none;
  height: 40px;
  border-bottom: 4px solid var(--pico-dark-blue);
  border-right: 4px solid var(--pico-dark-blue);
  cursor: pointer;
  font-family: 'Zpix', 'Press Start 2P', monospace;
  font-size: 14px;
  padding: 8px 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (hover: hover) and (pointer: fine) {
  .map-control-button:hover {
    background-color: var(--pico-green);
    border-bottom: 4px solid var(--pico-dark-green);
    border-right: 4px solid var(--pico-dark-green);
  }
}

/* 持續置中按鈕*/
#keepUserCenterButton {
  position: absolute;
  bottom: 108px;
  left: 5%;
  padding: 0px;
  width: 44px;
  height: 44px;
  z-index: 101;
  font-size: 24px;
}

#keepUserCenterButton.active {
  background-color: var(--pico-green); /* 使用綠色表示啟用狀態 */
}

#colorPicker {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 3px solid var(--pico-light-gray);
  cursor: pointer;
}

#stopDrawingButton {
  background-color: var(--pico-red);
  color: var(--pico-white);
  font-weight: bold;
  border-bottom: 4px solid var(--pico-purple);
  border-right: 4px solid var(--pico-purple);
}

@media (hover: hover) and (pointer: fine) {
  #stopDrawingButton:hover {
    background-color: var(--pico-orange);
    border-bottom: 4px solid var(--pico-brown);
    border-right: 4px solid var(--pico-brown);
  }
}

/* ==== 用户信息 ==== */
.user-info-display {
  background-color: var(--pico-dark-gray);
  padding: 8px 12px;
  border: 3px solid var(--pico-light-gray);
  box-shadow: 3px 3px 0 var(--pico-black);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--pico-white);
}

#user-info button {
  padding: 6px 10px;
  background-color: var(--pico-red);
  color: var(--pico-white);
  border: none;
  border-bottom: 3px solid var(--pico-purple);
  border-right: 3px solid var(--pico-purple);
  font-family: 'Zpix', 'Press Start 2P', monospace;
  font-size: 12px;
}

@media (hover: hover) and (pointer: fine) {
  #user-info button:hover {
    background-color: var(--pico-orange);
    border-bottom: 3px solid var(--pico-brown);
    border-right: 3px solid var(--pico-brown);
  }
}

/* ==== 距离显示 ==== */
.map-overlay-text {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
  background-color: var(--pico-dark-gray);
  color: var(--pico-yellow);
  padding: 8px 15px;
  border: 3px solid var(--pico-light-gray);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--pico-black);
}
.map-overlay-text span {
  font-weight: bold;
  color: var(--pico-green);
}

/* ==== 确认模态框 ==== */
.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: var(--pico-dark-gray);
  margin: auto;
  padding: 20px;
  border: 4px solid var(--pico-light-gray);
  box-shadow: 6px 6px 0 var(--pico-black);
  width: 80%;
  max-width: 380px;
  text-align: center;
}

.modal-content h3 {
  margin-top: 0;
  color: var(--pico-yellow);
  text-shadow: 2px 2px 0 var(--pico-black);
}

.modal-content p {
  margin-bottom: 15px;
  color: var(--pico-white);
}

.modal-content strong {
  color: var(--pico-green);
}

.modal-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.modal-buttons button {
  padding: 10px 20px;
  border: none;
  border-bottom: 4px solid var(--pico-dark-blue);
  border-right: 4px solid var(--pico-dark-blue);
  cursor: pointer;
  font-family: 'Zpix', 'Press Start 2P', monospace;
  font-size: 12px;
  text-transform: uppercase;
}

#confirm-save-button {
  background-color: var(--pico-green);
  color: var(--pico-black);
  border-bottom: 4px solid var(--pico-dark-green);
  border-right: 4px solid var(--pico-dark-green);
}

@media (hover: hover) and (pointer: fine) {
  #confirm-save-button:hover {
    background-color: var(--pico-yellow);
  }
}

#cancel-save-button {
  background-color: var(--pico-red);
  color: var(--pico-white);
  border-bottom: 4px solid var(--pico-purple);
  border-right: 4px solid var(--pico-purple);
}

@media (hover: hover) and (pointer: fine) {
  #cancel-save-button:hover {
    background-color: var(--pico-orange);
  }
}

/* ==== 隐藏元素 ==== */
.hidden {
  display: none !important;
}

/* ==== 徽章样式 ==== */
.badge-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

.badge {
  background-color: var(--pico-yellow);
  color: var(--pico-black);
  padding: 4px 8px;
  font-size: 20px;
  box-shadow: 2px 2px 0 var(--pico-black);
}

.badge-notification {
  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: 2000;
}

.badge-popup {
  background-color: var(--pico-dark-gray);
  padding: 20px;
  border: 4px solid var(--pico-yellow);
  text-align: center;
  box-shadow: 6px 6px 0 var(--pico-black);
}

.badge-popup h3 {
  color: var(--pico-yellow);
  margin-top: 0;
}

.badge-icon {
  font-size: 50px;
  margin: 15px 0;
}

/* ==== 徽章詳情模態框圖示樣式 ==== */
#badge-detail-icon {
  font-size: 50px; /* 與 badge-popup 中的 badge-icon 大小一致 */
  margin: 15px 0;  /* 與 badge-popup 中的 badge-icon 間距一致 */
  color: var(--pico-yellow); /* 根據您的設計調整顏色 */
}

/* --- 為自定義用戶位置標記圖片添加樣式 --- */
.user-location-marker-img {
  width: 50px; 
  height: 50px; 
  display: block; /* 確保圖片是 block 元素，有助於 transform 的計算 */
  object-fit: contain; /* 保持圖片的原始比例，不會被拉伸變形 */
  transform: translateY(5px);
  
  /* 應用動畫屬性 */
  animation-name: pulse; /* 指定使用上面定義的 'pulse' 動畫 */
  animation-duration: 6s; /* 設定動畫完成一個週期所需的時間 */
  animation-timing-function: ease-in-out; /* 設定動畫的速度曲線，使其平滑地加速和減速 */
  animation-iteration-count: infinite; /* 設定動畫無限循環播放 */

  /* 您也可以根據需要調整其他動畫屬性，例如：
     animation-delay: 1s; // 延遲 1 秒後開始動畫
     animation-direction: alternate; // 交替播放（來回播放）
  */

}

/* 定義一個名為 'pulse' 的動畫 */
@keyframes pulse {
  0% {
    /* 起始狀態 */
    transform: translateX(-3px);
  }
  50% {
    /* 中間狀態 */
    transform: translateX(3px);
  }
  100% {
    /* 結束狀態：回到起始狀態 */
    transform: translateX(-3px);
  }
}