/* ==========================================================================
   👑 命運王國・全域共用 CIS 規範控制中心
========================================================================== */

/* 🌟 王國色彩憲法：定義全域變數 (規格已鎖死，絕不變更) */
:root {
  --kingdom-gold: #facc15;       /* 科技螢光金 */
  --kingdom-gold-rgb: 250, 204, 21; 
  --tech-blue: #00F0FF;          /* 質感科技藍 */
  --tech-blue-rgb: 56, 189, 248; 
}

html, body {
  /* 加入這兩行，強制鎖死字體比例，禁止 LINE 與 FB 等 APP 擅自放大字體 */
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* 1. 全域返回首頁按鈕 (電腦版標準規格) */
.back-btn {
  position: absolute; 
  top: 30px; 
  left: 30px; 
  color: var(--kingdom-gold); 
  background: rgba(var(--kingdom-gold-rgb), 0.05); 
  border: 1px solid rgba(var(--kingdom-gold-rgb), 0.3); 
  padding: 10px 20px; 
  border-radius: 30px; 
  text-decoration: none;
  font-size: 1rem; 
  font-weight: bold; 
  letter-spacing: 1px; 
  box-shadow: 4px 4px 10px rgba(0,0,0,0.5), -2px -2px 5px rgba(255,255,255,0.05); 
  transition: all 0.3s ease; 
  z-index: 100; 
  font-family: -apple-system, "Microsoft JhengHei", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; 
  backdrop-filter: blur(5px);
}

.back-btn:hover { 
  background: rgba(var(--kingdom-gold-rgb), 0.2); 
  box-shadow: 6px 6px 15px rgba(0,0,0,0.8), -2px -2px 8px rgba(var(--kingdom-gold-rgb), 0.3); 
  transform: scale(1.02) translateY(-2px); 
}

/* 2. 手機版智慧微縮規格 */
@media (max-width: 768px) {
  .back-btn {
    top: 15px !important;
    left: 15px !important;
    padding: 5px 12px !important;
    font-size: 0.78rem !important; 
    border-radius: 16px !important;
  }
}

/* =========================================================
   3. 💻 電腦版專屬：絕對防禦結界（鎖死寬高，防止重疊撞車）
   指令說明：當螢幕小於 1024px (寬) 或 700px (高) 時，禁止內縮，強制出現捲軸
   ========================================================= */
@media screen and (min-width: 769px) {
    body, .portal-container, .article-container, .kingdom-container {
        min-width: 1024px !important; /* 👈 鐵板寬度防禦 */
        min-height: 700px !important; /* 👈 【新增】鐵板高度防禦！如果螢幕太扁，強制撐開至少 700px 的空間 */
        overflow-x: auto !important;  /* 👈 左右空間不夠時，出現左右捲軸 */
        overflow-y: auto !important;  /* 👈 【新增】上下空間不夠時，出現上下捲軸，絕對不允許字體互撞 */
    }
}