/* ==================================================
   🌑 全站背景與字型設定
   ================================================== */
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;                 /* 內距與邊框包含在寬度計算 */
}


/* ==================================================
   ● 第一區標題專用調整（承襲 .gold-box） 
   ================================================== */
.title-box {
  margin-top: 50px;        /* 上間距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;  /* 內距包含在寬度計算 */
}

/* ==================================================
   🟨 按鈕樣式（登入按鈕 + 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 {
  background: linear-gradient(to right, purple, darkviolet);
  color: white;
}

/* ==================================================
   📜 限制級條款區塊（第三區 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禁彈窗專用樣式（獨立，不共用條款/隱私）
   ================================================== */
/* ==================================================
   🔞 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;
}