/* 登入 / 註冊 共用樣式 - 遊戲風格背景 + 櫻花粉調 */

* {
  box-sizing: border-box;
}

.auth-body {
  /* 👇 這裡是最關鍵的！請確保路徑與你的資料夾結構一致 */
  /* 假設圖片放在 css 同層的 assets 資料夾內： url('../assets/game-bg.png') */
  /* 如果圖片跟 css 放同一個資料夾： url('game-bg.png') */
  background: url('../assets/02.png') center/cover no-repeat fixed;
  background-color: #2c2124; /* 圖片載入前或找不到時的備用深色底色 */
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a3c42;
}

.auth-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 2rem 1.5rem;
}

.auth-card {
  /* 模擬背景木板的深咖啡色調，使用漸層做出木板光影，並保持半透明 */
  background: linear-gradient(
    135deg,
    rgba(92, 60, 56, 0.75) 0%, 
    rgba(56, 33, 31, 0.85) 100%
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border: 4px solid #2e1a18; /* 搭配深色木頭的深邃邊框 */
  border-radius: 16px;
  padding: 1.8rem 2rem; /* 原本是 2.5rem，縮小上下空間 */
  /* 加深陰影，讓這塊小木板在背景大木板上更有立體浮出感 */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0, 0, 0, 0.4);
  text-align: center;
  max-height: 90vh; /* 最高不超過視窗高度的 90% */
  overflow-y: auto; /* 超過時內部自動出現滾動條 */
}

.auth-logo {
  font-size: 1.9rem;
  font-weight: 700;
  color: #f0b9c8; /* 柔和的櫻花粉 */
  margin: 0 0 0.8rem 0;
  /* 陰影也同步配合柔和粉色，RGB(240, 185, 200) */
  text-shadow: 1px 1px 3px rgba(240, 185, 200, 0.3); 
}

.auth-subtitle {
  color: #f4dce2;
  margin: 0 0 1rem 0; /* 原本是 2rem，縮小與輸入框的距離 */
  font-size: 0.95rem;
}

.form-group {
  margin-bottom: 0.9rem; /* 原本是 1.4rem，讓輸入框排得稍微緊湊一點 */
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #fff0f3; /* 原為 #5c4b51，改為亮粉白提高對比度 */
  font-weight: 600; 
  letter-spacing: 0.5px; /* 建議可以加一點點字距，讓亮色字更好閱讀 */
}

.form-group input {
  width: 100%;
  padding: 0.7rem 1rem; /* 原本是 0.85rem，稍微降低輸入框高度 */
  border: 2px solid #e0d4d8; /* 加粗一點點邊框 */
  border-radius: 10px;
  font-size: 1rem;
  background: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
  outline: none;
  border-color: #e07a9a;
  box-shadow: 0 0 0 3px rgba(224,122,154,0.15);
}

.btn-primary {
  width: 100%;
  padding: 0.95rem;
  background: #f9c8d8;          /* 保留櫻花粉按鈕 */
  color: #5c4b51;
  border: 2px solid #e07a9a;    /* 幫按鈕加上實體邊框，增加遊戲 UI 的點擊感 */
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 4px 0 #e07a9a;  /* 遊戲按鈕常見的立體厚度 */
}

.btn-primary:hover {
  background: #f5b0c8;
  transform: translateY(2px);   /* 懸停時稍微往下壓 */
  box-shadow: 0 2px 0 #e07a9a;
}

.btn-primary:active {
  background: #f09abc;
  transform: translateY(4px);   /* 點擊時完全壓下 */
  box-shadow: 0 0 0 #e07a9a;
}

.auth-switch {
  margin-top: 1rem; /* 原本是 1.6rem */
  font-size: 0.92rem;
  color: #f4dce2; /* 原為 #8a7b80，改為明亮的櫻花粉白 */
}

.auth-switch a {
  color: #e07a9a;
  text-decoration: none;
  font-weight: 600;
}

.auth-switch a:hover {
  text-decoration: underline;
}

/* 裝飾用穿山甲（可選） */
.pangolin-decor {
  position: absolute;
  bottom: -90px;
  right: -70px;
  width: 160px;
  opacity: 0.95;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); /* 幫穿山甲加上陰影融入場景 */
}

/* 忘記密碼 */
.form-message {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #8a7b80;
}

.form-message.success {
  color: #4a8c4a;
  font-weight: 500;
}

.form-message.error {
  color: #c94a4a;
}