/* =============================================
   ✅ 修正手機無法滑動到底的問題
   ============================================= */
html, body {
  height: auto !important;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ==================================================
   🌑 全站背景與字型設定
   ================================================== */
body {
  margin: 0;
  font-family: "Noto Sans TC", sans-serif;
  background: #000;
  color: gold;
}

/* ==================================================
   🟨 金框區塊共用樣式（第一區、第二區、第三區）
   ================================================== */
.gold-box {
  width: 90%;                              /* 寬度90% */
  max-width: 600px;                        /* 最大寬度600px */
  background: #111;                        /* 深色背景 */
  padding: 30px;                          /* 內距30px */
  border-radius: 20px;                    /* 圓角 */
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.3); /* 柔和金色光暈 */
  border: 2px solid gold;                  /* 金色實線邊框 */
  margin-left: auto;                      /* 水平置中 */
  margin-right: auto;
  margin-top: 12px;                       /* 上間距12px，三區統一 */
  margin-bottom: 12px;                    /* 下間距12px */
  box-sizing: border-box;                 /* 內距與邊框包含在寬度計算 */
}


/* ==================================================
   🎯 第一區 h1 標題字體設定（G FUN 匿名聊天室）
   ================================================== */
   
.title-box h1 {
  font-size: 2rem;        /* 原生預設大，這裡手動設定字體大小，建議範圍 1.4 ~ 2rem */
  margin: 0;                /* 清除預設空隙 */
  padding: 0;               /* 如要加上可調整 */
  line-height: 1.2;         /* 字體行距，控制與周圍距離 */
  font-weight: bold;        /* 強化品牌感 */
  color: gold;              /* 若外層沒套到顏色，可補上 */
  text-align: center;       /* 保險起見加上置中 */
}

/* ==================================================
   ● 第一區標題專用調整（承襲 .gold-box） 
   ================================================== */
.title-box {
  margin-top: 40px;        /* 上間距12px，與 .gold-box 一致 */
  margin-bottom: 12px;     /* 下間距12px */
  padding: 10px 15px;      /* 內距，左右多給15px，避免邊緣光暈被裁 */
  text-align: center;      /* 文字置中 */
  font-weight: bold;       /* 加粗字體 */
  font-size: 1.2rem;       /* 標題字大小 */
  color: gold;             /* 金色文字 */
  border-radius: 15px;     /* 圓角 */
  border: 2px solid gold;  /* 金色邊框 */
  box-shadow: 0 0 15px gold; /* 金色光暈陰影 */
  background-color: #111;  /* 深色背景 */
}



/* ==================================================
   🟨 第二區：登入區塊容器調整（承襲 .gold-box）
   ================================================== */
 
.login-box {
  margin-top: 12px;        /* 上間距12px */
  margin-bottom: 12px;     /* 下間距12px */
  background: #111;        /* 深色背景 */
  padding: 30px 25px;      /* 內距：上下30px，左右25px，避免表單貼邊 */
  border-radius: 20px;     /* 圓角 */
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.3); /* 柔和金色光暈 */
  border: 2px solid gold;  /* 金色邊框 */
  box-sizing: border-box;  /* 內距與邊框包含寬度 */
  overflow: hidden;        /* 防止表單元素溢出容器 */
}


/* 登入區第一行主標題 */
.login-title {
  text-align: center;      /* 文字置中 */
  color: gold;             /* 金色文字 */
  margin-top: 5px;         /* 上方間距 */
  margin-bottom: 20px;     /* 下方間距 */
  font-weight: bold;       /* 粗體 */
  font-size: 1.5rem;       /* 字體大小，可調整範圍 1.2rem ~ 2rem */
}

/* 登入區第二行副標題 */
.login-subtitle {
  text-align: center;      /* 文字置中 */
  color: gold;             /* 金色文字 */
  margin-top: 0;           /* 上方間距調整，0 表示緊貼上方 */
  margin-bottom: 25px;     /* 下方間距，可調整範圍 10px ~ 30px */
  font-weight: 600;        /* 較細字體，可調整 400 ~ 700 */
  font-size: 1.2rem;       /* 字體大小，可調整範圍 1rem ~ 1.5rem */
}
/* 表單容器 */
.form-area {
  width: 100%;             /* 滿寬 */
  padding: 0 10px;         /* 左右內距10px，避免表單靠邊 */
  box-sizing: border-box;  /* 內距與邊框包含在寬度計算 */
}

/* 表單欄位（input、select） */
.form-area input,
.form-area select {
  width: 100%;             /* 填滿父容器寬度 */
  margin-bottom: 15px;     /* 欄位間距 */
  padding: 10px 12px;      /* 內距：上下10px，左右12px */
  border-radius: 8px;      /* 圓角 */
  border: none;            /* 無邊框 */
  font-size: 1em;          /* 字體大小 */
  background: #222;        /* 深色背景 */
  color: gold;             /* 文字金色 */
  box-sizing: border-box;  /* 內距包含在寬度計算 */
}

/* 主副標容器：h2 標題（暗夜燃起渴望｜文字勾勒慾火） */
.login-title {
  text-align: center;        /* 水平置中對齊文字 */
  color: gold;               /* 金色文字（符合主題） */
  margin-top: 2px;           /* 上方距離前段內容，建議 0~10px */
  margin-bottom: 10px;       /* 與副標距離，建議 10~20px */
  font-weight: bold;         /* 加粗字體，突顯主副標性質 */
  font-size: 1.4rem;         /* 主標字體大小，建議範圍 1.2rem ~ 1.5rem */
  line-height: 1.4;          /* 行高，提升閱讀性 */
}

/* 副標容器：h3 標題（只為夜深孤獨魂｜愈色愈值得進入） */
.login-subtitle {
  text-align: center;        /* 水平置中 */
  color: gold;               /* 保持一致色系 */
  margin-top: 0;             /* 副標緊貼主標底部 */
  margin-bottom: 20px;       /* 與下方欄位間距，建議 15~30px */
  font-weight: 500;          /* 較細字重，呈現對比（建議 400 ~ 600） */
  font-size: 1.1rem;         /* 副標字體大小，建議範圍 1.0rem ~ 1.3rem */
  line-height: 1.5;          /* 行高，讓副標閱讀舒適 */
}

/* ==================================================
   🟨 按鈕樣式（登入按鈕 + Telegram 按鈕）
   ================================================== */
button {
  width: 100%;             /* 滿寬 */
  padding: 12px;           /* 內距 */
  margin-top: 10px;        /* 與前一元素間距 */
  font-size: 16px;         /* 字體大小 */
  font-weight: bold;       /* 粗體 */
  border-radius: 8px;      /* 圓角 */
  cursor: pointer;         /* 游標手型 */
  border: none;            /* 無邊框 */
}

/* 金色主按鈕 */
.btn-yellow {
  background-color: gold;  /* 金色背景 */
  color: black;            /* 文字黑色 */
}

/* ✅ 紫色 Telegram 快速登入按鈕 */
.btn-purple {
  display: block;                 /* 與 .btn-yellow 一樣佔滿寬度 */
  width: 100%;
  text-align: center;
  background-color: #9933cc;      /* 可改紫色深淺 */
  color: #ffffff;
  font-size: 1rem;
  padding: 12px 0;
  border: none;
  border-radius: 8px;
  margin-top: 12px;               /* 與黃按鈕間距 */
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.btn-purple:hover {
  background-color: #aa44dd;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

/* 補充：處理 Telegram 登入錯誤提示 */
.login-box iframe + div {
  display: none !important;    /* 隱藏 widget 錯誤訊息（避免撐高） */
}

.tg-tip-box {
  margin-top: 12px;
  background: #3b1a4c;
  color: #f8e8ff;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
}

/* ==================================================
   📜 限制級條款區塊（第三區 footer-box）
   ================================================== */
.footer-box {
  margin-top: 12px;        /* 上間距 */
  margin-bottom: 12px;     /* 下間距 */
}

/* 限制級條款文字 */
.footer-box p {
  font-size: 0.85em;       /* 較小字體 */
  color: #aaa;             /* 淡灰色 */
  margin-top: 20px;        /* 與上一行分隔 */
}

/* 條款連結 */
.footer-box a {
  color: #ffe680;          /* 金色 */
  text-decoration: underline; /* 底線 */
  cursor: pointer;         /* 游標手型 */
}

/* ==================================================
   📝 登入區塊表單父容器，限定欄位樣式範圍，避免全局影響
   ================================================== */
.form-area {
  width: 100%;                         /* 滿寬 */
  max-width: 100%;                     /* 無最大寬度限制 */
  margin: 0 auto;                      /* 水平置中（備用） */
  padding: 0 10px;                     /* 左右內距，避免靠邊太貼 */
  box-sizing: border-box;              /* 計算寬度時包含padding */
}

/* ==================================================
   📝 表單輸入欄位樣式（暱稱、地區、年齡、角色、聊天室分類）
   ================================================== */
.form-area input,
.form-area select {
  width: 100%;                        /* 填滿父容器寬度 */
  margin-bottom: 15px;                /* 欄位間距 */
  padding: 10px;                      /* 內距 */
  border-radius: 8px;                 /* 圓角 */
  border: none;                      /* 取消邊框 */
  font-size: 1em;                    /* 字體大小 */
  background: #222;                  /* 深色背景 */
  color: gold;                       /* 文字金色 */
}

/* ==================================================
   📜 限制級條款區塊（第三區 footer-box）
   ================================================== */
.footer-box p {
  font-size: 0.85em;               /* 字體略小 */
  color: #aaa;                    /* 淡灰色文字 */
  margin-top: 20px;               /* 與上方內容間距 */
}

.footer-box a {
  color: #ffe680;                 /* 金色連結文字 */
  text-decoration: underline;     /* 底線 */
  cursor: pointer;                /* 游標手型 */
}

/* ==================================================
   🪟 彈窗共用樣式（條款、隱私）
   ================================================== */
.modal {
  padding: 40px 20px;              /* 內邊距避免貼邊 */
  display: none;                   /* 預設隱藏 */
  align-items: center;             /* Flex垂直置中 */
  justify-content: center;         /* Flex水平置中 */
  position: fixed;                /* 固定定位 */
  top: 0;                         /* 覆蓋整個視窗 */
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85); /* 半透明黑背景 */
  z-index: 1000;                  /* 顯示最上層 */
}

.modal.active {
  display: flex;                  /* 顯示彈窗 */
}

.modal-inner {
  max-width: 90vw;               /* 最大寬度 */
  max-height: 80vh;              /* 最大高度 */
  overflow-y: auto;              /* 超出範圍滾動 */
  background-color: #111;        /* 彈窗背景深色 */
  padding: 30px 40px 40px;       /* 內邊距 */
  border-radius: 12px;           /* 圓角 */
  box-shadow: 0 0 15px #f1c40f;  /* 金色陰影 */
  box-sizing: border-box;        /* 計算寬度包含padding */
  margin: auto;                  /* 置中 */
}

/* 彈窗關閉按鈕 */
#modal-close {
  float: right;                  /* 靠右 */
  font-size: 1.5em;              /* 大字體 */
  cursor: pointer;               /* 游標手型 */
  color: gold;                  /* 金色 */
}

/* ==================================================
   🔞 18禁彈窗專用樣式（獨立，不共用條款/隱私）
   ================================================== */
.modal-18 {
  position: fixed;                 /* 固定定位，使彈窗覆蓋整個視窗 */
  top: 0;                         /* 置頂 */
  left: 0;                        /* 靠左 */
  width: 100%;                   /* 寬度覆蓋整個視窗 */
  height: 100%;                  /* 高度覆蓋整個視窗 */
  background: rgba(0, 0, 0, 0.85); /* 半透明黑色背景，數值0~1調整透明度 */
  display: none;                 /* 初始隱藏 */
  justify-content: center;       /* Flex 水平置中 */
  align-items: center;           /* Flex 垂直置中 */
  z-index: 9999;                /* 最高層級，避免被其他元素覆蓋 */
  padding: 0 20px;               /* 左右內距，避免內容貼緊視窗邊緣，建議 10px ~ 40px */
  box-sizing: border-box;        /* 讓 padding 計入寬度 */
}

.modal-18.active {
  display: flex;                 /* 啟用時變成 Flex 容器顯示彈窗 */
}

/* 圓形彈窗主體 */
.popup-circle {
  width: 90vw;                  /* 寬度佔視窗 90%，可調整 70vw ~ 95vw */
  max-width: 460px;             /* 最大寬度限制，避免過大，調整範圍 300px ~ 600px */
  aspect-ratio: 1 / 1;          /* 強制寬高比為 1:1 正方形 */
  border-radius: 50%;           /* 圓角設為 50%，呈現圓形 */
  background: radial-gradient(circle at center, #111 65%, #000); /* 從中心放射狀漸層，65% 可調整漸層範圍 */
  border: 4px solid gold;       /* 金色實線邊框，寬度可調 2px ~ 6px */
  box-shadow: 0 0 40px 10px gold; /* 金色外發光陰影，數值可調整光暈大小與濃淡 */
  padding: 1.5rem 2rem 2rem;    /* 內距：上1.5rem，左右2rem，下2rem；rem可改為px，調整整體空間感 */
  text-align: center;           /* 文字置中 */
  color: gold;                  /* 文字顏色為金色 */
  box-sizing: border-box;       /* 內距包含在寬度中 */
  position: relative;           /* 保留元素的定位上下文，方便絕對定位子元素 */
}

/* 調整標題與副標題的距離 */
.popup-circle h2 {
  font-size: 3rem;              /* 標題字體大小，可調整 2.5rem ~ 4rem */
  font-weight: bold;            /* 字體加粗 */
  margin-bottom: 0.2rem;        /* 底部間距，控制與副標題距離，0~1rem 調整 */
  margin-top: 1;                /* 取消上方預設空隙 */
}

.popup-subtitle {
  color: #00ffff;               /* 副標題顏色，亮青色 */
  font-weight: bold;            /* 加粗 */
  font-size: 2.5rem;            /* 字體大小，可調整 2rem ~ 3rem */
  margin-top: 0;                /* 移除副標題上方空隙 */
  margin-bottom: 0.6rem;        /* 底部間距，調整與下方文字距離，建議 0.4rem ~ 1rem */
}

/* 警告文字 */
.popup-warning {
  font-size: 1.1rem;            /* 字體大小，中等大小，可調整 1rem ~ 1.3rem */
  line-height: 1.5;             /* 行高，控制行距，1~1.5 都可 */
  margin-bottom: 1rem;          /* 底部間距，避免和按鈕黏在一起，0.5rem ~ 1.5rem 調整 */
}

/* 按鈕容器 */
.popup-buttons {
  display: flex;                /* 使用 flex 排列按鈕 */
  justify-content: center; /* 兩端對齊，按鈕間距會拉開 */
  gap: 1.5rem;                   /* 按鈕間間距，建議 0.5rem ~ 1.5rem */
  margin-top: 0.6rem;           /* 與上方文字間距，0.3rem ~ 1rem */
}

/* 按鈕寬度調整避免重疊，並留圓邊空間 */
.popup-buttons button {
  flex: 2;                     /* 按鈕等寬 */
  max-width: 38%;              /* 最大寬度 42%，留 16% 間距給間距與圓邊，範圍可調 35% ~ 48% */
  padding: 0.5rem 0;           /* 垂直內距，增加按鈕高度，0.3rem ~ 1rem */
  font-size: 1rem;             /* 字體大小，0.8rem ~ 1.2rem */
  font-weight: bold;           /* 加粗 */
  background: gold;            /* 按鈕背景色 */
  color: black;                /* 文字顏色 */
  border: none;                /* 無邊框 */
  border-radius: 10px;         /* 圓角，建議 6px ~ 15px */
  cursor: pointer;             /* 滑鼠指標變手型 */
  box-shadow: 0 0 8px gold;    /* 按鈕光暈，0 0 5px ~ 0 0 12px 可調 */
}




/* ===== 專用錯誤提示彈窗 ===== */
.alert-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
}

.alert-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #111;
  color: #ffd700;
  border: 2px solid #ffd700;
  border-radius: 10px;
  padding: 20px 30px;
  font-size: 18px;
  box-shadow: 0 0 15px #000;
  max-width: 90%;
  text-align: center;
}

.alert-close {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}


/* ✅ Modal 外層容器：固定位置 + 中央顯示 */
.modal {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vw;
  box-sizing: border-box;
  display: none;
}

/* ✅ 半透明背景遮罩 */
.modal-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  top: 0;
  left: 0;
  border-radius: 0;
}

/* ✅ 彈窗本體 */
.modal-box {
  position: relative;
  background-color: #111;
  border: 2px solid #fbd447;
  border-radius: 16px;
  box-shadow: 0 0 16px #fbd44788;
  color: #fefefe;
  padding: 32px 40px;
  max-width: 720px;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
  overflow-y: auto;
  max-height: 90vh;
}




/* ✅ 手機版調整 */
@media screen and (max-width: 768px) {
  .modal-box {
    padding: 24px 20px 32px;
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 95vw;
  }

  .modal-close {
    top: 12px;
    right: 14px;
    font-size: 22px;
  }
}



/* ☑️ 條款下方確認文字 */
.confirm-age-check {
  text-align: center;
  color: #ccc;
  font-size: 14px;
  margin-top: 6px;
  margin-bottom: 16px;
  font-weight: normal;
  letter-spacing: 0.5px;
}



.modal-inner {
  position: relative; /* 為了讓 #modal-close 定位參考 */
}


.modal-inner {
  position: relative;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  background-color: #111;
  padding: 30px 40px 40px;
  border-radius: 12px;
  box-shadow: 0 0 15px #f1c40f;
  box-sizing: border-box;
  margin: auto;
}


/* 🔥 強化關閉按鈕定位與優先權 */
.modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 24px;
  color: #fbd447;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 9999;
}

/* ✅ 彈窗內容文字樣式 */
.modal-content {
  font-size: 1rem;
  line-height: 1.8;
}


.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* 必要時換行，避免太擠 */
  padding: 10px 16px;
  box-sizing: border-box;
}