/** Shopify CDN: Minification failed

Line 2454:0 Unexpected "}"
Line 3384:27 Unexpected "/"

**/
:root{
  --kid-bg-glass: rgba(255,255,255,.20);
  --kid-panel: rgba(15, 23, 42, 0.72);
  --kid-panel-2: rgba(15, 23, 42, 0.55);
  --kid-border: rgba(255,255,255,0.32);
  --kid-text: rgba(255,255,255,0.98);
  --kid-text-dim: rgba(255,255,255,0.85);

 /* 島嶼顏色主題 - 12種 (優化漸變方向) */
  --island-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --island-gold: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  --island-green: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
  --island-purple: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
  --island-orange: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --island-red: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  --island-brown: linear-gradient(135deg, #d4a574 0%, #8b6f47 100%);
  --island-emerald: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
  --island-cyan: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
  --island-yellow: linear-gradient(135deg, #f8ff00 0%, #feca57 100%);
  --island-indigo: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --island-gray: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
 --building-width: 70px;
  --building-depth: 70px; /* 新增：建築深度 */
  --brand-gradient: linear-gradient(135deg, #00d4ff 0%, #ff006e 100%);
  
  /* Shared Transitions */
  --spring-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --kid-green: rgba(16,185,129,0.95);
  --kid-blue: rgba(59,130,246,0.95);
  --kid-yellow: rgba(251,191,36,0.98);
  --kid-pink: rgba(244,114,182,0.95);

  --kid-radius-xl: 28px;
  --kid-radius-lg: 20px;
  --kid-radius-md: 16px;

/* 多層陰影系統 - 更強立體感 */
  --kid-shadow: 
    0 25px 80px rgba(0,0,0,.38),
    0 12px 32px rgba(0,0,0,.28),
    0 4px 12px rgba(0,0,0,.18);
  --kid-shadow-soft: 
    0 16px 48px rgba(0,0,0,.24),
    0 8px 20px rgba(0,0,0,.16),
    0 2px 8px rgba(0,0,0,.10);

  --kid-title: clamp(20px, 2.6vw, 26px);
  --kid-time: clamp(32px, 4.2vw, 48px);
  --kid-body: clamp(15px, 2.2vw, 18px);

  --kid-touch: 56px;

  /* 專業級天空漸變 - 使用徑向漸變 */
  --dawn-sky: radial-gradient(ellipse at 50% 85%, #ff6b6b 0%, #ff8e53 20%, #1e3a5f 55%, #0d1b2a 100%);
  --day-sky: radial-gradient(ellipse at 50% 35%, #87ceeb 0%, #4a90e2 45%, #2874a6 80%, #1b5078 100%);
  --dusk-sky: radial-gradient(ellipse at 50% 78%, #ff8c42 0%, #ff6b9d 25%, #d4779c 45%, #1a2332 85%, #0a0e1a 100%);
  --night-sky: radial-gradient(ellipse at 50% 25%, #2d1b3d 0%, #1a1f3a 40%, #0f1526 70%, #0a0e27 100%);

  /* 動畫緩動函數 */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}



/* 2. 鼠標雷達特效 (Radar Cursor) */
.lg-radar-cursor {
  position: fixed;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 75%);
  transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              height 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 鼠標點擊時雷達會收縮反饋 */
body:active .lg-radar-cursor {
  width: 35px;
  height: 35px;
  border-color: #00d4ff;
}

/* 3. SVG 路徑動態流光 (Energy Flow) */
    /* SVG Connecting Lines */
    .lg-game-paths {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none;
      z-index: 1;
      filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.6));
    }

/* 1. 修正動態路徑動畫選擇器 */
/* 確保標籤與 ID 之間沒有任何空格 */
.lg-container-wrapper {
      min-height: 100%;
      width: 100%;
  padding: 2rem 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 9999;
  display: flex;
 flex-direction: column;
  overflow: hidden;
      align-items: center;
      flex: 1;
top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: auto;
  position: fixed;
    }
    
    
.view-enter {
  animation: slideInRight 0.3s ease-out;
}


.view-exit {
  animation: slideOutLeft 0.3s ease-out;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }}

@keyframes slideOutLeft {to { transform: translateX(-100%); opacity: 0; }
}
.lg-container-card {
  width: 100%;
  max-width: 1400px;
  background: rgba(255, 255, 255, 0.03); /* Keep it dark for the lab feel */
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: 32px;
  box-shadow: var(--kid-shadow);
}

    @keyframes containerSlideIn {
      0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
/* ========================================
   ② Header / Topbar 系統
======================================== */

.lg-topbar {
  position: sticky;
  top: 0;
 height: 60px;
  min-height: 60px;
    z-index: var(--z-sticky, 100);
    align-items: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(var(--blur, 20px));
  -webkit-backdrop-filter: blur(var(--blur, 20px));
  box-shadow: var(--shadow-glass, 0 8px 32px rgba(0, 0, 0, 0.1));
   justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--duration-normal, 0.3s) var(--ease-apple, cubic-bezier(0.25, 0.1, 0.25, 1));
}


@media (max-width: 968px) {
  .lg-topbar__center {
    order: 3;
    width: 100%;
  }
}

.lg-topbar__main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-standard, 1280px);
  margin: 0 auto;
  padding: 0 var(--spacing-lg, 24px);
  gap: var(--spacing-md, 16px);
}

.lg-topbar__left,
.lg-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 12px);
}


    @keyframes gradientShift {}


.lg-topbar--fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}

.lg-topbar--fixed::before {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
  background-size: 200% 100%;
  animation: gradientShift 3s ease infinite;
}


    @media (max-width: 480px) {
      .lg-container-wrapper {
        padding: 12px;
      }

      .-card {
        border-radius: var(--radius-lg);
      }

      .lg-topbar {
        padding: 14px 16px;
      }

      .lg-topbar__right {
        gap: 8px;
      }
      .lg-content {
        padding: 20px;
      }

      .lg-gameProgress {
        padding: 20px 16px;
      }

      .lg-gameProgress__container {
        padding: 16px;
      }

      .lg-gameProgress__current {
        font-size: 28px;
      }

      .lg-gameProgress__percentage {
        font-size: 24px;
      }
    }


  .lg-container-card,
    .lg-back,
    .lg-pill,
    .lg-gameProgress__fill {
      will-change: transform;
    }
    

/* 進度填充 */
    .lg-gameProgress__fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: linear-gradient(90deg, 
        #6366f1 0%, 
        #8b5cf6 50%, 
        #a78bfa 100%
      );
      border-radius: 14px;
      box-shadow: 
        0 0 20px rgba(99, 102, 241, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
      transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
      overflow: hidden;
    }

/* ═══════════════════════════════════════════════════════════
       🎮 GAME PROGRESS (整合到內容區域)
       ═══════════════════════════════════════════════════════════ */
    
    .lg-gameProgress {
      width: 100%;
      max-width: 100%;
      padding: 32px 24px;
      background: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.95) 0%,
        rgba(30, 41, 59, 0.95) 100%
      );
      backdrop-filter: blur(20px);
      border-radius: 24px;
      border: 2px solid rgba(255, 255, 255, 0.15);
      box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 10px 30px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
      overflow: hidden;
      position: relative;
      animation: progressSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes progressSlideIn {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

 /* 背景裝飾 */
    .lg-gameProgress::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(168, 85, 247, 0.1) 0%, transparent 50%);
      pointer-events: none;
      z-index: 0;
    }

    .lg-gameProgress__container {
      position: relative;
      padding: 24px;
      background: rgba(15, 23, 42, 0.9);
      backdrop-filter: blur(24px) saturate(180%);
      border: 2px solid rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 10px 30px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 80px rgba(99, 102, 241, 0.25);
      animation: containerFloat 4s ease-in-out infinite;
    }

    @keyframes containerFloat {50% { 
        transform: translateY(-5px);
      }
    }
    /* 進度條標題區 (保留原有的，但現在可選用) */
    .lg-gameProgress__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
    }

    .lg-gameProgress__title {
      font-size: 18px;
      font-weight: 700;
      color: #e2e8f0;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      letter-spacing: 0.5px;
    }


/* 背景裝飾 */
.lg-gameProgress__container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
  border-radius: 18px;
  pointer-events: none;
  z-index: 0;
}

.lg-gameProgress__container > * {
  position: relative;
  z-index: 1;
}

/* Progress Bar */
  .lg-topbar__progress {
    padding: 16px 24px 20px;
    background: rgba(0, 0, 0, 0.2);
  }

  .lg-progress__barContainer {
    position: relative;
    height: 24px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 12px;
    border: 2px solid rgba(139, 92, 246, 0.3);
  }

  .lg-progress__fill {
    position: relative;
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #ec4899, #f59e0b);
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .lg-progress__shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shine 2s infinite;
  }

  @keyframes shine {
    to {
      left: 200%;
    }
  }

  .lg-progress__stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .lg-progress__count {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 16px;
  }

  .lg-progress__current {
    font-size: 24px;
    color: #f59e0b;
  }

  .lg-progress__separator {
    opacity: 0.6;
  }

  .lg-progress__total {
    opacity: 0.8;
  }

  .lg-progress__label {
    opacity: 0.7;
    font-size: 14px;
  }

  .lg-progress__percentage {
    font-size: 18px;
    color: #a78bfa;
  }

  .lg-progress__nextIsland {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 600;
  }

  .lg-progress__nextIcon {
    font-size: 18px;
  }

  .gfun-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
  }

  .gfun-stat {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
  }

  .gfun-stat:hover {
    border-color: rgba(139, 92, 246, 0.6);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
  }

  .gfun-stat-value {
    font-size: 48px;
    font-weight: 900;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    line-height: 1;
  }

  .gfun-stat-label {
    font-size: 16px;
    color: #cbd5e1;
    font-weight: 600;
  }
  /* ==================== GFun Balance Section ==================== */
   .gfun-balance-section {
    padding: 0 0 60px;
  }

  .gfun-balance-container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }

  .gfun-balance-title {
    font-size: 36px;
    font-weight: 900;
    color: white;
    text-align: center;
    margin-bottom: 40px;
    text-shadow: 0 2px 10px rgba(139, 92, 246, 0.5);
  }

/* ==================== Hero Section ==================== */
  .littleg-hero {
    text-align: center;
    padding: 80px 24px 60px;
  }


/* ====================================
   登入閘門區塊 (Login Gate Section)
   ==================================== */

.lg-gate {
  /* 佈局與定位 */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 2rem;
  
  /* 背景漸層 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  position: relative;
  overflow: hidden;
}
/* 背景動畫裝飾 */
.lg-gate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 40%);
  animation: floatGlow 8s ease-in-out infinite;
  pointer-events: none;
}


@keyframes floatGlow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(20px, -20px) scale(1.05);
    opacity: 0.8;
  }
}


/* 卡片容器 */
.lg-gate__card {
  /* 佈局 */
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 32px;
  padding: 4rem 3rem;
  max-width: 480px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
  
  /* 陰影與邊框 */
  box-shadow: 
    0 20px 60px rgba(102, 126, 234, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 3px solid rgba(255, 255, 255, 0.6);
  
  /* 動畫 */
  animation: slideUpFadeIn 0.6s ease-out forwards;
  transform-origin: center;
}
@keyframes slideUpFadeIn {}

/* Stat Value */
.stat-value {
  position: relative;
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 0.75rem 0;
  line-height: 1;
  letter-spacing: -0.03em;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-variant-numeric: tabular-nums;
}
/* 鎖頭徽章 */
.lg-gate__badge {
  /* 尺寸與佈局 */
  width: 80px;
  height: 80px;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  
  /* 樣式 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  box-shadow: 
    0 10px 30px rgba(102, 126, 234, 0.4),
    0 0 0 4px rgba(255, 255, 255, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  
  /* 動畫 */
  animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s both;
  position: relative;
}

.lg-gate__badge::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px dashed rgba(102, 126, 234, 0.3);
  animation: rotate360 20s linear infinite;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-45deg);
  }
  50% {
    transform: scale(1.05) rotate(5deg);
  }
  70% {
    transform: scale(0.9) rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes rotate360 {}

/* 標題 */
.lg-gate__card h2 {
  /* 文字樣式 */
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
  
  /* 漸層文字 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  /* 動畫 */
  animation: slideUpFadeIn 0.6s ease-out 0.3s both;
}

/* 描述文字 */
.lg-gate__card p {
  font-size: 1.125rem;
  color: #6b6b66;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  font-weight: 500;
  animation: slideUpFadeIn 0.6s ease-out 0.4s both;
}

/* 按鈕容器 */
.lg-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: slideUpFadeIn 0.6s ease-out 0.5s both;
}
/* 次要按鈕 (返回首頁) */
.lg-btn:not(.lg-btn-primary) {
  background: rgba(102, 126, 234, 0.08);
  color: #667eea;
  border-color: rgba(102, 126, 234, 0.2);
  font-weight: 600;
}

.lg-btn:not(.lg-btn-primary):hover {
  background: rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
}

.lg-btn:not(.lg-btn-primary):active {
  transform: translateY(0);
}

/* 響應式設計 - 平板 */
@media (max-width: 768px) {
  .lg-gate {
    padding: 1.5rem;
  }
  
  .lg-gate__card {
    padding: 3rem 2rem;
    border-radius: 24px;
  }
  
  .lg-gate__badge {
    width: 70px;
    height: 70px;
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
  }
  
  .lg-gate__card h2 {
    font-size: 1.75rem;
  }
  
  .lg-gate__card p {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
  
  .lg-btn {
    padding: 0.875rem 2rem;
    font-size: 1rem;
  }
}

/* 響應式設計 - 手機 */
@media (max-width: 480px) {
  .lg-gate {
    padding: 1rem;
  }
  
  .lg-gate__card {
    padding: 2.5rem 1.5rem;
    border-radius: 20px;
  }
  
  .lg-gate__badge {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    margin-bottom: 1.25rem;
  }
  
  .lg-gate__card h2 {
    font-size: 1.5rem;
  }
  
  .lg-gate__card p {
    font-size: 0.9375rem;
  }
  
  .lg-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
  }
}

/* 深色模式支援 (可選) */
@media (prefers-color-scheme: dark) {
  .lg-gate {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
  }
  
  .lg-gate__card {
    background: rgba(30, 27, 75, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .lg-gate__card h2 {
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .lg-gate__card p {
    color: #9ca3af;
  }
  
  .lg-btn:not(.lg-btn-primary) {
    background: rgba(129, 140, 248, 0.12);
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.2);
  }
  
  .lg-btn:not(.lg-btn-primary):hover {
    background: rgba(129, 140, 248, 0.2);
    border-color: rgba(167, 139, 250, 0.4);
  }
}

/* 無障礙 - 鍵盤焦點樣式 */
.lg-btn:focus-visible {
  outline: 3px solid #667eea;
  outline-offset: 3px;
}



/* 列印樣式 */
@media print {
  .lg-gate {
    background: #ffffff;
  }
  
  .lg-gate__card {
    box-shadow: none;
    border: 1px solid #e5e7eb;
  }
  
  .lg-btn {
    border: 1px solid #667eea;
  }
}

/* Hard Login Gate */
@media (max-width: 768px) {
  .lg-gate {
    padding: 1.5rem;
  }
  
  .lg-gate__card {
    padding: 3rem 2rem;
    border-radius: 24px;
  }
  
  .lg-gate__badge {
    width: 70px;
    height: 70px;
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
  }
  
  .lg-gate__card h2 {
    font-size: 1.75rem;
  }
  
  .lg-gate__card p {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
  
  .lg-btn {
    padding: 0.875rem 2rem;
    font-size: 1rem;
  }
}

/* 響應式設計 - 手機 */
@media (max-width: 480px) {
  .lg-gate {
    padding: 1rem;
  }
  
  .lg-gate__card {
    padding: 2.5rem 1.5rem;
    border-radius: 20px;
  }
  
  .lg-gate__badge {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    margin-bottom: 1.25rem;
  }
  
  .lg-gate__card h2 {
    font-size: 1.5rem;
  }
  
  .lg-gate__card p {
    font-size: 0.9375rem;
  }
  
  .lg-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
  }
}

/* 深色模式支援 (可選) */
@media (prefers-color-scheme: dark) {
  .lg-gate {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
  }
  
  .lg-gate__card {
    background: rgba(30, 27, 75, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .lg-gate__card h2 {
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .lg-gate__card p {
    color: #9ca3af;
  }
  
  .lg-btn:not(.lg-btn-primary) {
    background: rgba(129, 140, 248, 0.12);
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.2);
  }
  
  .lg-btn:not(.lg-btn-primary):hover {
    background: rgba(129, 140, 248, 0.2);
    border-color: rgba(167, 139, 250, 0.4);
  }
}

/* 無障礙 - 鍵盤焦點樣式 */
.lg-btn:focus-visible {
  outline: 3px solid #667eea;
  outline-offset: 3px;
}



/* 列印樣式 */
@media print {
  .lg-gate {
    background: #ffffff;
  }
  
  .lg-gate__card {
    box-shadow: none;
    border: 1px solid #e5e7eb;
  }
  
  .lg-btn {
    border: 1px solid #667eea;
  }
}


.lab-progress-header {
  background: var(--surface-glass, rgba(255, 255, 255, 0.8));
  backdrop-filter: blur(var(--blur, 20px));
  border-radius: var(--radius-xl, 24px);
  padding: var(--spacing-xl, 32px);
  margin: var(--spacing-xl, 32px) auto;
  max-width: var(--container-lg, 1024px);
  box-shadow: var(--shadow-glass, 0 8px 32px rgba(0, 0, 0, 0.1));
}


  @media (max-width: 768px) {
    .littleg-content-wrapper {
      padding: 0 16px;
    }
   .lg-gate__card {
      padding: 32px 24px;
    }

    .lg-gate__title {
      font-size: 24px;
    }

    .littleg-content-wrapper {
      padding: 0 16px;
    }

    .hkCity__hud {
      padding: 20px 16px;
    }

    .hkCity__time {
      font-size: 36px;
    }

    .hkCity__date {
      font-size: 16px;
    }

    .lg-topbar__main {
      padding: 12px 16px;
    }

    .lg-pill {
      padding: 6px 12px;
      font-size: 13px;
    }

    .littleg-hero {
      padding: 60px 16px 40px;
    }


    .lab-progress-header {
      padding: 24px;
      margin: 16px;
    }

    .progress-stats {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .stat-value {
      font-size: 24px;
    }

    .gfun-balance-container {
      padding: 32px 24px;
    }

    .gfun-balance-title {
      font-size: 28px;
      margin-bottom: 32px;
    }

    .gfun-stats-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .gfun-stat {
      padding: 24px 20px;
    }

    .gfun-stat-value {
      font-size: 36px;
    }
  }


  .stat-label {
  display: block;
  font-size: var(--font-size-sm, 14px);
  color: var(--text-secondary, #6e6e73);
  margin-bottom: var(--spacing-xs, 8px);
  font-weight: var(--font-weight-medium, 500);
}


  @media (max-width: 480px) {
    .lg-gate__badge {
      font-size: 48px;
    }

    .lg-gate__title {
      font-size: 20px;
    }

    .hkCity__time {
      font-size: 28px;
    }

    .hkCity__hud-actions {
      flex-direction: column;
      width: 100%;
    }

    .lg-hudbtn {
      width: 100%;
    }

    .lg-back span:last-child {
      display: none;
    }

    .lg-back span:first-child {
      font-size: 24px;
    }


    .lab-progress-header {
      padding: 20px;
      margin: 12px;
    }

    .stat-label {
      font-size: 12px;
    }

    .stat-value {
      font-size: 20px;
    }

    .gfun-stat-value {
      font-size: 32px;
    }
    
    .lg-topbar__main {
      padding: 12px 16px;
    }

    .lg-topbar__progress {
      padding: 12px 16px 16px;
    }

    .lg-pill {
      padding: 6px 12px;
      font-size: 13px;
    }


    .gfun-balance-container {
      padding: 32px 24px;
    }

    .gfun-balance-title {
      font-size: 28px;
      margin-bottom: 32px;
    }
    .lg-progress__count {
      font-size: 14px;
    }

    .lg-progress__current {
      font-size: 20px;
    }

    .lg-progress__percentage {
      font-size: 16px;
    }

    .lg-progress__nextIsland {
      font-size: 12px;
    }
  }

    /* ═══════════════════════════════════════════════════════════
       📄 CONTENT AREA
       ═══════════════════════════════════════════════════════════ */
    .lg-content {
      padding: 32px;
      min-height: 500px;
      background: white;
      position: relative;
    }


 .lg-hero__title {
      font-size: 36px;
      font-weight: 800;
      color: #1e293b;
      margin-bottom: 12px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }


.lg-hero__subtitle {
      font-size: 20px;
      font-weight: 600;
      color: #475569;
      margin-bottom: 8px;
    }

    .lg-hero__hint {
      font-size: 15px;
      color: #64748b;
      margin-bottom: 32px;
      font-style: italic;
    }
.lg-hero__sub{ 
  margin: 8px 0 0; 
  color: rgba(255,255,255,.95); 
  font-weight: 800;
  font-size: 18px;
  text-shadow: 2px 2px 4px rgba(0,0,0,.15);
}

  .lg-hero__actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
  }


    /* 按鈕光澤效果 */
    .lg-gameProgress__btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
      );
      transition: left 0.5s ease;
    }

    .lg-gameProgress__btn:hover::before {
      left: 100%;
    }
/* in littleg-hkcity.css or a shared common file */
.lg-nav-pills { display:flex; gap:0.5rem; }
.nav-pill-wrapper { flex:1; }
.lab-toggle { padding:.5rem 1rem; border-radius:4px; cursor:pointer; }
.lab-toggle.active { background:#fff;color:#667eea; }

.marker-popover {
  position:absolute; background:#fff; border:1px solid #ccc;
  border-radius:8px; padding:1rem; box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.marker-popover .popover-title { font-weight:600;margin:0 0 .5rem; }
.marker-popover .popover-stats { font-size:.875rem; color:#666; }
.marker-icon { font-size:2rem; }
.marker-label { font-size:1rem; }
.lg-hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 16px; }
.lg-views{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; }
.lg-viewTab{
  appearance:none; 
  border: 4px solid rgba(255,255,255,.5);
  background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,248,220,.7) 100%);
  color:#1a2f23;
  padding: 12px 18px;
  border-radius: 50px;
  cursor:pointer;
  font-weight: 900;
  box-shadow: 
    0 4px 0 rgba(212,165,116,.4),
    0 8px 16px rgba(0,0,0,.12),
    inset 0 2px 4px rgba(255,255,255,.6);
  transition: all .15s ease;
}
.lg-viewTab:hover{
  transform: translateY(-2px);
  box-shadow: 
    0 6px 0 rgba(212,165,116,.4),
    0 12px 20px rgba(0,0,0,.15);
}
.lg-viewTab.is-active{ 
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-color: rgba(255,255,255,.9);
  color: #1a2f23;
  box-shadow: 
    0 5px 0 #D4A574,
    0 10px 20px rgba(255,165,0,.35),
    inset 0 -3px 6px rgba(0,0,0,.15),
    inset 0 3px 6px rgba(255,255,255,.5);
  transform: scale(1.05);
}

  /* ==================== Boot Overlay ==================== */
  .littleg-boot, .littleg-boots {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* ==========================================
   LittleG Lab Boot Layer - Apple Pro Style
   ========================================== */

/* 修正點：移除開頭的描述文字，確保選擇器直接開始 */
[id^="LittleGLab-"] .littleg-boot {
  position: absolute;
  /* 使用 inset: 0 確保全覆蓋，這是 Apple 推薦的簡潔寫法 */
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Apple 招牌：深色半透明背景 + 強化飽和度 */
  background: rgba(10, 10, 12, 0.45); 
  
  /* 玻璃擬態核心參數：12px 模糊 + 180% 飽和提升質感 */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  
  /* 確保層級最高，且不可點擊穿透 */
  z-index: 20;
  pointer-events: all;
  
  /* 加入平滑的淡出過渡 */
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
              visibility 0.6s;
}

/* 當加載完成時隱藏的樣式 (可搭配 JS 切換 is-hidden 類名) */
[id^="LittleGLab-"] .littleg-boot.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

  @keyframes spin {}
    @keyframes lgSpin{}

.littleg-boot__title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }

.littleg-boot__subtitle {
    font-size: 1rem;
    opacity: 0.7;
  }

.littleg-boot__card {
  /* 佈局 */
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 3.5rem 4rem;
  max-width: 480px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
  
  /* 陰影 */
  box-shadow: 
    0 25px 70px rgba(0, 0, 0, 0.4),
    0 10px 30px rgba(102, 126, 234, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.5);
  
  /* 動畫 */
  animation: cardSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cardSlideUp {}
/* ==========================================
   Spinner - 載入動畫
   ========================================== */

@keyframes spinReverse {
  to {
    transform: rotate(-360deg);
  }
}

.littleg-boot__text {
  animation: textFadeIn 0.6s ease-out 0.3s both;
}

@keyframes textFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }}

.littleg-boot__sub {
  font-size: 14px;
  opacity: 0.8;
  margin-top: 8px;
}

.littleg-boot__progress {
  margin-top: 20px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.littleg-boot__progress-bar {
  height: 100%;
  background: white;
  width: 0%;
  transition: width 0.3s ease-out;
}


/* Code 標籤樣式 */
.littleg-boot__sub code {
  display: inline-block;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(167, 139, 250, 0.1) 100%);
  color: #667eea;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid rgba(102, 126, 234, 0.2);
  margin-top: 0.25rem;
  letter-spacing: -0.02em;
}


@keyframes spinPulse {50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}
/* Boot Overlay 動畫 */
.littleg-boot {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop, 10100);
  transition: opacity 0.5s ease-out;
}

/* 隱藏狀態 */
.littleg-boot.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 背景動畫效果 */
.littleg-boot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(167, 139, 250, 0.15) 0%, transparent 50%);
  animation: pulseGlow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
.littleg-boot.fade-out {
  opacity: 0; transition: opacity 0.5s;
  pointer-events: none;
}
  /* ==================== Section Container ==================== */
.littleg-lab-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

  .littleg-content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
  }


/* Additional island decorations */
.lg-app::before{
  content: '🌊';
  position: absolute;
  bottom: -40px;
  left: 5%;
  font-size: 64px;
  opacity: .4;
  animation: lgWave 3s ease-in-out infinite;
}
@keyframes lgWave{
  0%,100%{transform: translateY(0px) rotate(0deg)}
  50%{transform: translateY(-10px) rotate(10deg)}
}
.lg-app::after{
  content: '⭐';
  position: absolute;
  top: 20px;
  right: 8%;
  font-size: 48px;
  opacity: .5;
  animation: lgStar 2.5s ease-in-out infinite;
}
@keyframes lgStar{
  0%,100%{transform: rotate(0deg) scale(1)}
  50%{transform: rotate(180deg) scale(1.2)}
}
  /* ═══════════════════════════════════════════════════════════
       🔙 BACK BUTTON
       ═══════════════════════════════════════════════════════════ */
/* Back Button */
.lg-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs, 8px);
  padding: var(--spacing-sm, 12px) var(--spacing-md, 16px);
  background: var(--surface-glass, rgba(255, 255, 255, 0.8));
  border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-full, 9999px);
  color: var(--text-primary, #1d1d1f);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  text-decoration: none;
  transition: all var(--duration-fast, 0.2s) var(--ease-apple, cubic-bezier(0.25, 0.1, 0.25, 1));
}

.lg-back:hover {
  background: var(--glass-hover, rgba(0, 212, 255, 0.1));
  border-color: var(--brand-cyan, #00d4ff);
  transform: translateX(-4px);
}

    .lg-back::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.5s ease;
    }


    .lg-back:hover::before {
      left: 100%;
    }

    .lg-back:active {
      transform: translateX(-2px) scale(0.98);
    }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🔒 GUEST HINT - 訪客提示
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lg-gameProgress__guestHint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  
  background: rgba(251, 191, 36, 0.15);
  border: 2px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-lg);
  
  animation: hintPulse 2s ease-in-out infinite;
}

/* 訪客狀態的進度條（灰色禁用狀態） */
.lg-gameProgress__container:has(.lg-gameProgress__guestHint) .lg-gameProgress__bar {
  opacity: 0.5;
  filter: grayscale(0.8);
  pointer-events: none;
}

.lg-gameProgress__container:has(.lg-gameProgress__guestHint) .lg-gameProgress__fill {
  background: linear-gradient(90deg, 
    #64748b 0%, 
    #94a3b8 100%
  );
  box-shadow: none;
}

@keyframes hintPulse {
  0%, 100% { 
    box-shadow: 0 0 0 rgba(251, 191, 36, 0.4);
  }
  50% { 
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
  }
}

.lg-gameProgress__icon {
  font-size: 20px;
  filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.6));
  animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {50% { transform: translateY(-4px); }
}

.lg-gameProgress__guestText {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
  letter-spacing: 0.3px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎊 MILESTONE CELEBRATIONS - 里程碑慶祝
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 25% 里程碑 */
.lg-gameProgress__fill[data-progress="25"],
.lg-gameProgress__fill[style*="width: 25%"] {
  position: relative;
}

.lg-gameProgress__fill[data-progress="25"]::after {
  content: '🌟';
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.8));
  animation: milestoneBounce 1s ease-in-out infinite;
}

@keyframes milestoneBounce {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-60%) scale(1.2); }
}

/* 50% 里程碑 */
.lg-gameProgress__fill.is-halfway::after {
  content: '⭐';
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.8));
  animation: milestoneBounce 1s ease-in-out infinite;
}

/* 75% 里程碑 */
.lg-gameProgress__fill[data-progress="75"]::after,
.lg-gameProgress__fill[style*="width: 75%"]::after {
  content: '🏆';
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  filter: drop-shadow(0 0 15px rgba(251, 191, 36, 1));
  animation: milestoneSpin 2s ease-in-out infinite;
}

@keyframes milestoneSpin {
  0%, 100% { 
    transform: translateY(-50%) rotate(0deg) scale(1); 
  }
  25% { 
    transform: translateY(-55%) rotate(-15deg) scale(1.1); 
  }
  75% { 
    transform: translateY(-55%) rotate(15deg) scale(1.1); 
  }
}

/* 100% 完成 */
.lg-gameProgress__fill.is-complete::after {
  content: '🎉';
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  filter: drop-shadow(0 0 20px rgba(16, 185, 129, 1));
  animation: completeCelebration 1s ease-in-out infinite;
}

@keyframes completeCelebration {
  0%, 100% { 
    transform: translateY(-50%) rotate(0deg) scale(1); 
  }
  25% { 
    transform: translateY(-60%) rotate(-20deg) scale(1.3); 
  }
  50% { 
    transform: translateY(-65%) rotate(0deg) scale(1.4); 
  }
  75% { 
    transform: translateY(-60%) rotate(20deg) scale(1.3); 
  }
}



/* 
/* ═══════════════════════════════════════���════���══════════════
   📊 PROGRESS BAR - 進度條
   ═══════════════════════════════════════════════════════════ */
/* 進度條主體 */
 .lg-gameProgress__bar {
      position: relative;
      width: 100%;
      height: 32px;
      background: rgba(15, 23, 42, 0.8);
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 
        inset 0 2px 8px rgba(0, 0, 0, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.3);
      z-index: 1;
    }

/* 默認狀態（0-49%）- 藍紫色漸變 */
.lg-gameProgress__fill {
        position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      border-radius: 14px;
      box-shadow: 
        0 0 20px rgba(99, 102, 241, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
      transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
      overflow: hidden;
  background: linear-gradient(90deg, 
    #6366f1 0%, 
    #8b5cf6 50%, 
    #a78bfa 100%
  );
}
 /* 中途狀態（50-99%）*/
    .lg-gameProgress__fill.is-halfway {
      background: linear-gradient(90deg, 
        #10b981 0%,
        #6366f1 30%, 
        #8b5cf6 70%, 
        #a78bfa 100%
      );
      box-shadow: 
        0 0 20px rgba(16, 185, 129, 0.4),
        0 0 40px rgba(99, 102, 241, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

  /* 完成狀態（100%）*/
    .lg-gameProgress__fill.is-complete {
      background: linear-gradient(90deg, 
        #10b981 0%, 
        #34d399 50%, 
        #6ee7b7 100%
      );
      box-shadow: 
        0 0 30px rgba(16, 185, 129, 0.8),
        0 0 60px rgba(16, 185, 129, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
      animation: completePulse 2s ease-in-out infinite;
    }

    @keyframes completePulse {
      0%, 100% { 
        box-shadow: 
          0 0 30px rgba(16, 185, 129, 0.8),
          0 0 60px rgba(16, 185, 129, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.4);
      }
      50% { 
        box-shadow: 
          0 0 40px rgba(16, 185, 129, 1),
          0 0 80px rgba(16, 185, 129, 0.6),
          inset 0 1px 0 rgba(255, 255, 255, 0.5);
      }
    }


/* 光澤效果 */
    .lg-gameProgress__shine {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
      );
      animation: shine 3s ease-in-out infinite;
    }

    @keyframes shine {
      0% { left: -100%; }
      50%, 100% { left: 200%; }
    }

/* 完成狀態的光澤效果增強 */
 .lg-gameProgress__shine,
.lg-gameProgress__fill.is-complete .lg-gameProgress__shine {
   position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
      );
      animation: shine 3s ease-in-out infinite;}

@keyframes shineComplete {
  0% { left: -100%; }
  40%, 100% { left: 200%; }
}

/* 進度條脈動效果 */
.lg-gameProgress__fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  
  background: rgba(255, 255, 255, 0.4);
  filter: blur(8px);
  
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }}
/* ═════════════════��═════════════════════════════════════════
   📈 STATS - 統計數據
   ═══════════════════════════════════════════════════════════ */


 /* 當前/總數顯示 */
    .lg-gameProgress__count {
      display: flex;
      align-items: baseline;
      gap: 6px;
      font-weight: 700;
      text-shadow: 0 2px 12px rgba(96, 165, 250, 0.6);
    }
 .lg-gameProgress__stats {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 16px;
      position: relative;
      z-index: 1;
    }

    .lg-gameProgress__text {
      display: flex;
      align-items: baseline;
      gap: 6px;
      font-weight: 700;
    }

    .lg-gameProgress__current {
      font-size: 32px;
      background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 2px 12px rgba(96, 165, 250, 0.6));
      transition: all 0.5s ease;
    }


    .lg-gameProgress__divider {
      font-size: 24px;
      color: #64748b;
      opacity: 0.6;
    }


    .lg-gameProgress__separator {
      font-size: 24px;
      color: #64748b;
      opacity: 0.6;
    }


  .lg-gameProgress__total {
      font-size: 20px;
      color: #94a3b8;
      opacity: 0.8;
    }


    .lg-gameProgress__label {
      font-size: 14px;
      color: #cbd5e1;
      margin-left: 8px;
    }

    /* 百分比顯示 */
    .lg-gameProgress__percentage {
    font-size: 28px;
      font-weight: 800;
      color: #60a5fa;
      text-shadow: 0 2px 12px rgba(96, 165, 250, 0.6);
      letter-spacing: -1px;
      transition: all 0.5s ease;
    }

    /* 下一個島嶼提示 */
 
.lg-gameProgress__nextIsland {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-top: 12px;
  
  background: rgba(59, 130, 246, 0.15);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: var(--radius-lg);
  
  animation: nextIslandGlow 3s ease-in-out infinite;
}

.lg-gameProgress__nextIcon {
  font-size: 20px;
  filter: drop-shadow(0 2px 8px rgba(59, 130, 246, 0.6));
  animation: targetPulse 2s ease-in-out infinite;
}

.lg-gameProgress__nextText {
  font-size: 13px;
  font-weight: 600;
  color: #60a5fa;
  text-shadow: 0 2px 8px rgba(96, 165, 250, 0.4);
  letter-spacing: 0.3px;
}


/* ═══════════════════════════════════════════════════════════
   🎉 COMPLETE STATE - 完成狀態
   ═══════════════════════════════════════════════════════════ */

.lg-gameProgress__complete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-top: 12px;
  
  background: rgba(16, 185, 129, 0.15);
  border: 2px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-lg);
  
  animation: completeCelebrate 3s ease-in-out infinite;
}

    @keyframes completeBounce {50% { transform: scale(1.02); }
    }

.lg-gameProgress__completeIcon {
  font-size: 24px;
  filter: drop-shadow(0 2px 12px rgba(16, 185, 129, 0.6));
  animation: celebrateRotate 4s ease-in-out infinite;
}


    @keyframes rotate {}

    .lg-gameProgress__completeText {
      font-size: 16px;
      color: #6ee7b7;
      font-weight: 700;
      text-shadow: 0 2px 8px rgba(16, 185, 129, 0.6);
    }

    /* 未登入狀態 */
    .lg-gameProgress__guestHint {
      text-align: center;
      padding: 16px;
      margin-bottom: 16px;
      background: rgba(59, 130, 246, 0.1);
      border: 1px solid rgba(59, 130, 246, 0.3);
      border-radius: var(--radius-lg);
    }

    .lg-gameProgress__icon {
      font-size: 24px;
      display: block;
      margin-bottom: 8px;
    }

    .lg-gameProgress__guestText {
      font-size: 14px;
      color: #cbd5e1;
      font-weight: 600;
    }


  /* Primary 按鈕 */
    .lg-gameProgress__btn--primary {
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      border-color: rgba(139, 92, 246, 0.5);
      color: white;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      box-shadow: 
        0 4px 16px rgba(99, 102, 241, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .lg-gameProgress__btn--primary:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow: 
        0 8px 28px rgba(99, 102, 241, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

  /* Secondary 按鈕 */
    .lg-gameProgress__btn--secondary {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.9);
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .lg-gameProgress__btn--secondary:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.3);
      transform: translateY(-3px) scale(1.05);
      box-shadow: 
        0 8px 28px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎨 NUMBER COLOR CHANGES - 數字顏色隨進度變化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 默認狀態 (0-49%) */
.lg-gameProgress__current {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 12px rgba(96, 165, 250, 0.6));
}

/* 中途狀態 (50-99%) */
.lg-gameProgress__container:has(.is-halfway) .lg-gameProgress__current {
  background: linear-gradient(135deg, #10b981 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 12px rgba(16, 185, 129, 0.6));
}

/* 完成狀態的數字顏色 */
    .lg-gameProgress__container:has(.is-complete) .lg-gameProgress__current {
      background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 2px 12px rgba(16, 185, 129, 0.8));
      animation: numberPulse 1.5s ease-in-out infinite;
    }

    @keyframes numberPulse {
      0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 2px 12px rgba(16, 185, 129, 0.8));
      }
      50% { 
        transform: scale(1.1);
        filter: drop-shadow(0 4px 20px rgba(16, 185, 129, 1));
      }
    }

    .lg-gameProgress__container:has(.is-complete) .lg-gameProgress__percentage {
      color: #10b981;
      text-shadow: 0 2px 12px rgba(16, 185, 129, 0.8);
      animation: percentagePulse 1.5s ease-in-out infinite;
    }

    @keyframes percentagePulse {50% { 
        transform: scale(1.15);
      }
    }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 RESPONSIVE ADJUSTMENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 480px) {
  /* 移動端隱藏里程碑圖標以避免溢出 */
  .lg-gameProgress__fill::after {
    display: none;
  }
}

 
    @media (max-width: 768px) {
      .lg-container-wrapper {
        padding: 16px;
      }

      .lg-container-card {
        border-radius: 16px;
      }

      .lg-topbar {
        flex-direction: column;
        gap: 16px;
        padding: 16px 20px;
      }

      .lg-topbar__left,
      .lg-topbar__right {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
      }

      .lg-back {
        width: 100%;
        justify-content: center;
      }

      .lg-content {
        padding: 24px;
      }

      .lg-gameProgress {
        padding: 24px 20px;
      }

      .lg-gameProgress__container {
        padding: 20px;
      }
    }

    @media (max-width: 480px) {
      .lg-container-wrapper {
        padding: 12px;
      }

      .lg-container-card {
        border-radius: var(--radius-lg);
      }

      .lg-topbar {
        padding: 14px 16px;
      }

      .lg-topbar__right {
        gap: 8px;
      }

      .lg-pill {
        padding: 8px 12px;
        font-size: 13px;
      }

      .lg-pill__val {
        font-size: 14px;
      }

      .lg-pill__k {
        font-size: 12px;
      }

      .lg-content {
        padding: 20px;
      }

      .lg-gameProgress {
        padding: 20px 16px;
      }

      .lg-gameProgress__container {
        padding: 16px;
      }

      .lg-gameProgress__current {
        font-size: 28px;
      }

      .lg-gameProgress__percentage {
        font-size: 24px;
      }
    }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ⚡ PERFORMANCE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */




@keyframes nextIslandGlow {
  0%, 100% { 
    box-shadow: 0 0 0 rgba(59, 130, 246, 0);
  }
  50% { 
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
  }
}



@keyframes targetPulse {50% { transform: scale(1.2); }
}



@keyframes completeCelebrate {
  0%, 100% { 
    box-shadow: 0 0 0 rgba(16, 185, 129, 0);
  }
  50% { 
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
  }
}

@keyframes celebrateRotate {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-15deg) scale(1.2); }
  50% { transform: rotate(15deg) scale(1.2); }
  75% { transform: rotate(-15deg) scale(1.2); }
}

.lg-gameProgress__completeText {
  font-size: 14px;
  font-weight: 700;
  color: #10b981;
  text-shadow: 0 2px 12px rgba(16, 185, 129, 0.4);
  letter-spacing: 0.5px;
}

/* Primary 按鈕 */

.lg-gameProgress__cta {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.lg-gameProgress__btn {
  flex: 1;
  padding: 12px 20px;
  
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.5px;
  
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  
  cursor: pointer;
  
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  
  position: relative;
  overflow: hidden;
}


.lg-gameProgress__btn--secondary:active {
  transform: translateY(-1px) scale(0.98);
}


@media (max-width: 768px) {
 .lg-gameProgress {
    top: 15px;
    right: 15px;
    max-width: 340px;
  }

  .lg-gameProgress__container {
    padding: 20px;
  }

  .lg-gameProgress__current {
    font-size: 28px;
  }

  .lg-gameProgress__separator,
  .lg-gameProgress__total {
    font-size: 20px;
  }

  .lg-gameProgress__label {
    font-size: 13px;
  }

  .lg-gameProgress__percentage {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .lg-gameProgress {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
    width: auto;
  }

  .lg-gameProgress__container {
    padding: 16px;
  }

  .lg-gameProgress__current {
    font-size: 24px;
  }

  .lg-gameProgress__separator,
  .lg-gameProgress__total {
    font-size: 18px;
  }

  .lg-gameProgress__label {
    font-size: 12px;
  }

  .lg-gameProgress__cta {
    flex-direction: column;
  }

  .lg-gameProgress__btn {
    width: 100%;
  }

  .lg-gameProgress__fill::after {
    font-size: 12px;
    right: 12px;
  }

  .lg-gameProgress__current {
    font-size: 32px;
  }

  .lg-gameProgress__separator {
    font-size: 24px;
  }

  .lg-gameProgress__total {
    font-size: 24px;
  }

  .lg-gameProgress__label {
    font-size: 14px;
  }

  .lg-gameProgress__nextIsland,
  .lg-gameProgress__complete {
    padding: 14px 16px;
    flex-direction: column;
    text-align: center;
  }

  .lg-gameProgress__nextIcon,
  .lg-gameProgress__completeIcon {
    font-size: 32px;
  }

  .lg-gameProgress__nextText,
  .lg-gameProgress__completeText {
    font-size: 14px;
  }
}


.lg-gameProgress,
.lg-gameProgress__container,
.lg-gameProgress__fill,
.lg-gameProgress__btn {
  will-change: transform, opacity;
}



  .lg-gameProgress__fill,
  .lg-gameProgress__btn {
    transition-duration: 0.1s !important;
  }
}

.lg-gameProgress__btn--primary:hover::before {
  opacity: 1;
}
 .lg-gameProgress__btn--primary:active {
      transform: translateY(-1px) scale(0.98);
}

/* ═══════════════════════════════════════════════════════════
   📱 RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .lg-gameProgress {
    padding: 24px 18px;
    border-radius: 20px;
  }

  .lg-gameProgress__container {
    gap: 16px;
  }

  .lg-gameProgress__guestHint {
    padding: 12px 16px;
    flex-direction: column;
    text-align: center;
  }

  .lg-gameProgress__icon {
    font-size: 28px;
  }

  .lg-gameProgress__guestText {
    font-size: 14px;
  }
  .lg-gameProgress__fill::after {
    font-size: 12px;
    right: 12px;
  }



  .lg-gameProgress__label {
    font-size: 14px;
  }

  .lg-gameProgress__nextIsland,
  .lg-gameProgress__complete {
    padding: 14px 16px;
    flex-direction: column;
    text-align: center;
  }

  .lg-gameProgress__nextIcon,
  .lg-gameProgress__completeIcon {
    font-size: 32px;
  }

  .lg-gameProgress__nextText,
  .lg-gameProgress__completeText {
    font-size: 14px;
  }

  .lg-gameProgress__cta {
    flex-direction: column;
    gap: 10px;
  }

  .lg-gameProgress__btn {
    padding: 12px 20px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .lg-gameProgress {
    padding: 20px 16px;
  }

  .lg-gameProgress__bar {
    height: 24px;
  }

  .lg-gameProgress__current {
    font-size: 28px;
  }

  .lg-gameProgress__separator,
  .lg-gameProgress__total {
    font-size: 20px;
  }

  .lg-gameProgress__label {
    font-size: 13px;
  }

  .lg-gameProgress__percentage {
    font-size: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════
   ⚡ PERFORMANCE OPTIMIZATION
   ═══════════════════════════════════════════════════════���═══ */

.lg-gameProgress__fill,
.lg-gameProgress__shine,
.lg-gameProgress__btn {
  will-change: transform;
}


.lg-gameProgress__complete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.2) 0%,
    rgba(5, 150, 105, 0.2) 100%
  );
  border: 2px solid rgba(16, 185, 129, 0.5);
  border-radius: 16px;
  animation: completeGlow 2s ease-in-out infinite;
}

@keyframes completeGlow {
  0%, 100% { 
    box-shadow: 
      0 4px 20px rgba(16, 185, 129, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% { 
    box-shadow: 
      0 8px 40px rgba(16, 185, 129, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}


@keyframes celebrationBounce {25% { transform: translateY(-8px) scale(1.1); }
  50% { transform: translateY(0) scale(1); }
  75% { transform: translateY(-4px) scale(1.05); }
}

.lg-gameProgress__completeText {
  font-size: 17px;
  font-weight: 700;
  background: linear-gradient(135deg, #10b981, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 12px rgba(16, 185, 129, 0.6));
  letter-spacing: 0.5px;
}

.hkCity__scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: all 1.5s ease;
}

/* 内容层在背景之上 */
.hkCity__content {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* 時段切換 - 使用徑向漸變 */
.hkCity[data-period="dawn"] { background: var(--dawn-sky); }
.hkCity[data-period="day"] { background: var(--day-sky); }
.hkCity[data-period="dusk"] { background: var(--dusk-sky); }
.hkCity[data-period="night"] { background: var(--night-sky); }

  /* =========================================================
   🌇 Hong Kong City — Dynamic Sky System (Refined)
   ========================================================= */

/* Sky Backgrounds */
.hkCity__sky {
  position: absolute;
  inset: 0;
  background: var(--day-sky);
  transition: background 1.5s ease;
}

.hkCity[data-period="dawn"] .hkCity__sky {
  background: var(--dawn-sky);
}

.hkCity[data-period="day"] .hkCity__sky {
  background: var(--day-sky);
}

.hkCity[data-period="dusk"] .hkCity__sky {
  background: var(--dusk-sky);
}

.hkCity[data-period="night"] .hkCity__sky {
  background: var(--night-sky);
}


@keyframes skyDayNight {
  0%, 100% {
    background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #f59e42 100%);
  }
  50% {
    background: linear-gradient(180deg, #1e3a8a 0%, #312e81 50%, #1f2937 100%);
  }
}

/* Time-based Sky States */
.hkCity.time-dawn .hkCity__sky {
  background: linear-gradient(180deg, #1e3a5f 0%, #ff6b6b 40%, #ffd93d 100%);
}

.hkCity.time-day .hkCity__sky {
  background: linear-gradient(180deg, #4a90e2 0%, #87ceeb 50%, #b8d4f1 100%);
}

.hkCity.time-dusk .hkCity__sky {
  background: linear-gradient(180deg, #1a2332 0%, #d4779c 40%, #ff8c42 100%);
}

.hkCity.time-night .hkCity__sky {
  background: linear-gradient(180deg, #0a0e27 0%, #1a1f3a 50%, #2d1b3d 100%);
}

/* =========================================================
   ☀️ Sun System
   ========================================================= */
/* Sun */
.hkCity__sun {
  position: absolute;
  top: 15%;
  right: 15%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #ffe066 0%, #ffb347 100%);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(255, 224, 102, 0.8);
  opacity: 1;
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.hkCity[data-period="night"] .hkCity__sun,
.hkCity[data-period="dusk"] .hkCity__sun {
  opacity: 0;
  transform: translateY(100px);
}

/* Moon */
.hkCity__moon {
  position: absolute;
  top: 20%;
  right: 20%;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 30% 30%, #f0f0f0 0%, #d0d0d0 100%);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(240, 240, 240, 0.6);
  opacity: 0;
  transition: opacity 1.5s ease;
}

.hkCity[data-period="night"] .hkCity__moon {
  opacity: 1;
}

/* Clouds */
.hkCity__clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

  .hkCloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    animation: cloudFloat 30s linear infinite;
  }

  

  @keyframes cloudFloat {
    to { transform: translateX(calc(100vw + 200px)); }
  }
.lg-cloud::before,
.lg-cloud::after {
  content: '' !important;
  position: absolute !important;
  background: white !important;
  border-radius: 50% !important;
}

.lg-cloud--1 {
  width: 100px !important;
  height: 40px !important;
  top: 15% !important;
  left: 10% !important;
  animation: cloudFloat1 30s linear infinite !important;
}

.lg-cloud--1::before {
  width: 50px !important;
  height: 50px !important;
  top: -25px !important;
  left: 10px !important;
}

.lg-cloud--1::after {
  width: 60px !important;
  height: 60px !important;
  top: -30px !important;
  right: 10px !important;
}


@keyframes cloudFloat1 {
  0% { transform: translateX(0); }
  100% { transform: translateX(100vw); }
}

@keyframes cloudFloat2 {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100vw); }
}

@keyframes cloudFloat3 {50% { transform: translateX(50px) translateY(-20px); }
  100% { transform: translateX(100vw) translateY(0); }
}

.lg-cloud--2 {
  width: 120px !important;
  height: 45px !important;
  top: 25% !important;
  right: 20% !important;
  animation: cloudFloat2 35s linear infinite !important;
}

.lg-cloud--2::before {
  width: 55px !important;
  height: 55px !important;
  top: -28px !important;
  left: 15px !important;
}

.lg-cloud--2::after {
  width: 65px !important;
  height: 65px !important;
  top: -32px !important;
  right: 15px !important;
}



@keyframes cloudFloat1 {
  0% { transform: translateX(0); }
  100% { transform: translateX(100vw); }
}

@keyframes cloudFloat2 {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100vw); }
}

@keyframes cloudFloat3 {50% { transform: translateX(50px) translateY(-20px); }
  100% { transform: translateX(100vw) translateY(0); }
}

.lg-cloud--3 {
  width: 90px !important;
  height: 35px !important;
  bottom: 30% !important;
  left: 30% !important;
  animation: cloudFloat3 40s linear infinite !important;
}

.lg-cloud--3::before {
  width: 45px !important;
  height: 45px !important;
  top: -22px !important;
  left: 8px !important;
}

.lg-cloud--3::after {
  width: 50px !important;
  height: 50px !important;
  top: -25px !important;
  right: 8px !important;
}

/* =========================================================
   🌙 Moon System
   ========================================================= */
.hkCity__moon {
  position: absolute;
  top: 18%;
  right: 20%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 35% 28%, #ffffff 0%, #f0f0f0 38%, #d0d0d0 100%);
  border-radius: 50%;
  box-shadow:
    0 0 70px rgba(255, 255, 255, 0.9),
    0 0 140px rgba(255, 255, 255, 0.55),
    0 0 210px rgba(255, 255, 255, 0.35),
    inset -16px -16px 32px rgba(0, 0, 0, 0.3),
    inset 6px 6px 18px rgba(255, 255, 255, 0.35);
  z-index: 3;
  opacity: 0;
  transform: translateY(-180px) scale(0.75);
  transition: all 2.2s var(--ease-smooth);
}

.hkCity.time-night .hkCity__moon {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hkCity.time-dusk .hkCity__moon {
  opacity: 0.45;
  transform: translateY(-60px) scale(0.88);
  filter: sepia(0.45) hue-rotate(-18deg) brightness(0.88);
}

/* Moon Crater Details */
.hkCity__moon::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  top: 38%;
  left: 48%;
  box-shadow:
    -18px 12px 0 -6px rgba(0, 0, 0, 0.14),
    24px -10px 0 -4px rgba(0, 0, 0, 0.12),
    -8px -15px 0 -7px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   ✨ Star System
   ========================================================= */
.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.95);
  animation: starTwinkle 4.5s infinite ease-in-out;
  opacity: 0;
  transition: opacity 2.5s ease;
  will-change: opacity, transform;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 0.2; transform: scale(0.85); }
}

.hkCity.time-night .star { opacity: 1; }
.hkCity.time-dusk .star { opacity: 0.35; }

.star.small { width: 2px; height: 2px; }
.star.medium { width: 3px; height: 3px; }
.star.large { 
  width: 4px; 
  height: 4px; 
  box-shadow: 0 0 12px 3px rgba(255,255,255,1);
  animation-duration: 3.5s;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}



.hkCloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 100px;
  box-shadow: 
    0 8px 24px rgba(255, 255, 255, 0.3),
    inset 0 -10px 20px rgba(203, 213, 225, 0.3);
  animation: cloudFloat 40s linear infinite;
  filter: blur(2px);
}

.hkCloud::before,
.hkCloud::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 100px;
}


.hkCloud--2 {
  top: 25%;
  left: -20%;
  width: 150px;
  height: 50px;
  animation-duration: 55s;
  animation-delay: 5s;
}

.hkCloud--2::before {
  width: 80px;
  height: 50px;
  top: -25px;
  left: 20px;
}

.hkCloud--2::after {
  width: 100px;
  height: 60px;
  top: -30px;
  right: 20px;
}

.hkCloud--3 {
  top: 8%;
  left: -25%;
  width: 200px;
  height: 70px;
  animation-duration: 50s;
  animation-delay: 10s;
}

.hkCloud--3::before {
  width: 120px;
  height: 70px;
  top: -35px;
  left: 40px;
}

.hkCloud--3::after {
  width: 140px;
  height: 80px;
  top: -40px;
  right: 40px;
}

.hkCloud--4 {
  top: 35%;
  left: -18%;
  width: 160px;
  height: 55px;
  animation-duration: 48s;
  animation-delay: 15s;
}

.hkCloud--4::before {
  width: 90px;
  height: 55px;
  top: -28px;
  left: 25px;
}

.hkCloud--4::after {
  width: 110px;
  height: 65px;
  top: -32px;
  right: 25px;
}

.hkCloud--5 {
  top: 18%;
  left: -22%;
  width: 140px;
  height: 48px;
  animation-duration: 52s;
  animation-delay: 20s;
}

.hkCloud--5::before {
  width: 75px;
  height: 48px;
  top: -24px;
  left: 18px;
}

.hkCloud--5::after {
  width: 95px;
  height: 58px;
  top: -28px;
  right: 18px;
}

@keyframes cloudFloat {
  0% {
    left: -25%;
    transform: translateX(0);
  }
  100% {
    left: 125%;
    transform: translateX(0);
  }
}

/* 夜晚雲層變暗藍色 */
[data-period="night"] .hkCloud {
  background: rgba(80, 85, 100, 0.35);
  opacity: 0.25;
}

[data-period="night"] .hkCloud::before,
[data-period="night"] .hkCloud::after {
  background: rgba(80, 85, 100, 0.35);
}

/* 黃昏雲層變粉橘色 */
[data-period="dusk"] .hkCloud {
  background: rgba(255, 200, 180, 0.5);
}

[data-period="dusk"] .hkCloud::before,
[data-period="dusk"] .hkCloud::after {
  background: rgba(255, 200, 180, 0.5);
}


/* 3D 海洋系統 - 增強版 */
.hkCity__ocean {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: 
    linear-gradient(180deg, 
      transparent 0%, 
      rgba(52, 152, 219, 0.08) 35%,
      rgba(41, 128, 185, 0.18) 60%,
      rgba(30, 100, 150, 0.28) 80%,
      rgba(21, 67, 96, 0.38) 100%
    );
  pointer-events: none;
}

/* 波浪動畫 - 3層系統 */
.ocean-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 300%;
  height: 120px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(52, 152, 219, 0.12) 20%,
    rgba(52, 152, 219, 0.18) 50%,
    rgba(52, 152, 219, 0.12) 80%,
    transparent 100%
  );
  animation: waveMove 14s infinite linear;
  opacity: 0.65;
}

.ocean-wave:nth-child(2) {
  height: 100px;
  animation-duration: 18s;
  animation-delay: -6s;
  opacity: 0.5;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(41, 128, 185, 0.1) 20%,
    rgba(41, 128, 185, 0.15) 50%,
    rgba(41, 128, 185, 0.1) 80%,
    transparent 100%
  );
}

.ocean-wave:nth-child(3) {
  height: 80px;
  animation-duration: 22s;
  animation-delay: -12s;
  opacity: 0.35;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(30, 100, 150, 0.08) 20%,
    rgba(30, 100, 150, 0.12) 50%,
    rgba(30, 100, 150, 0.08) 80%,
    transparent 100%
  );
}

@keyframes waveMove {
  from { transform: translateX(0); }
  to { transform: translateX(-33.33%); }
}

/* 主要 3D 世界容器 - 優化 */
.hkCity__world {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92%;
  max-width: 1600px;
  height: 82%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(48deg) rotateZ(0deg);
  z-index: 10;
  transition: transform 1s var(--ease-smooth);
}

/* 島嶼網格佈局 - 增強版 */
.island-grid {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 70px;
  padding: 50px;
  transform-style: preserve-3d;
}
/* 單個島嶼卡片 - 專業級動畫 */
.island {
  position: relative;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: all 0.5s var(--ease-bounce);
  animation: floatIsland 5s infinite ease-in-out;
  filter: drop-shadow(0 15px 35px rgba(0,0,0,0.3));
}

/* 錯開浮動動畫 */
.island:nth-child(1) { animation-delay: 0s; }
.island:nth-child(2) { animation-delay: -0.6s; }
.island:nth-child(3) { animation-delay: -1.2s; }
.island:nth-child(4) { animation-delay: -1.8s; }
.island:nth-child(5) { animation-delay: -2.4s; }
.island:nth-child(6) { animation-delay: -3s; }
.island:nth-child(7) { animation-delay: -3.6s; }
.island:nth-child(8) { animation-delay: -4.2s; }
.island:nth-child(9) { animation-delay: -1.5s; }
.island:nth-child(10) { animation-delay: -3.3s; }
.island:nth-child(11) { animation-delay: -0.9s; }
.island:nth-child(12) { animation-delay: -3.9s; }

@keyframes floatIsland {
  0%, 100% { 
    transform: translateY(0) translateZ(0) rotateX(0deg); 
  }
  50% { 
    transform: translateY(-18px) translateZ(30px) rotateX(-2deg); 
  }
}

/* Hover 效果 - 大幅增強 */
.island:hover {
  transform: translateY(-35px) translateZ(80px) scale(1.12) rotateZ(-2deg);
  filter: 
    drop-shadow(0 25px 60px rgba(0,0,0,0.45))
    brightness(1.18)
    saturate(1.15);
  z-index: 100;
  animation-play-state: paused;
}

/* 島嶼表面 - 頂面 */
.island__surface {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--kid-radius-xl);
  background: var(--island-blue);
  box-shadow: 
    var(--kid-shadow),
    inset 0 3px 25px rgba(255,255,255,0.3),
    inset 0 -3px 25px rgba(0,0,0,0.2);
  transform: translateZ(50px);
  overflow: hidden;
  backdrop-filter: blur(12px);
  border: 2.5px solid var(--kid-border);
  transition: all 0.4s var(--ease-smooth);
}

.island:hover .island__surface {
  border-color: rgba(255,255,255,0.45);
  box-shadow: 
    var(--kid-shadow),
    inset 0 3px 30px rgba(255,255,255,0.4),
    inset 0 -3px 30px rgba(0,0,0,0.15),
    0 0 40px rgba(255,255,255,0.2);
}

/* 島嶼深度陰影 - 創建 3D 深度 */
.island__depth {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(0,0,0,0.3) 50%,
    rgba(0,0,0,0.5) 100%
  );
  transform: translateZ(-50px);
  border-radius: var(--kid-radius-xl);
  filter: blur(16px);
}

/* 島嶼內容層 */
.island__content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 2;
  transform: translateZ(15px);
  transition: transform 0.4s var(--ease-smooth);
}

.island:hover .island__content {
  transform: translateZ(25px);
}

/* 島嶼圖標 - 增強動畫 */
.island__icon {
  font-size: clamp(40px, 4.5vw, 60px);
  margin-bottom: 16px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35));
  animation: iconBounce 2.5s infinite ease-in-out;
  transition: all 0.4s var(--ease-elastic);
}

.island:hover .island__icon {
  transform: scale(1.15) translateY(-5px);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
}

@keyframes iconBounce {
  0%, 100% { 
    transform: translateY(0) scale(1) rotate(0deg); 
  }
  50% { 
    transform: translateY(-8px) scale(1.08) rotate(-3deg); 
  }
}

/* 島嶼標題 */
.island__title {
  font-size: var(--kid-title);
  font-weight: 800;
  color: var(--kid-text);
  text-align: center;
  text-shadow: 
    0 3px 12px rgba(0,0,0,0.5),
    0 1px 3px rgba(0,0,0,0.3);
  margin-bottom: 8px;
  letter-spacing: 0.8px;
  transition: all 0.3s ease;
}

.island:hover .island__title {
  text-shadow: 
    0 4px 16px rgba(0,0,0,0.6),
    0 2px 6px rgba(0,0,0,0.4);
  letter-spacing: 1.2px;
}

/* 島嶼等級 */
.island__level {
  font-size: var(--kid-body);
  color: var(--kid-text-dim);
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* 島嶼狀態徽章 - 增強版 */
.island__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 8px 18px;
  background: var(--kid-bg-glass);
  backdrop-filter: blur(14px);
  border-radius: 24px;
  font-size: 12px;
  font-weight: 700;
  color: var(--kid-text);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  border: 1.5px solid var(--kid-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
}

.island:hover .island__badge {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.island__badge.locked {
  background: var(--kid-panel-2);
  color: var(--kid-text-dim);
  border-color: rgba(255,255,255,0.15);
}

.island__badge.completed {
  background: var(--kid-green);
  color: white;
  box-shadow: 0 6px 18px rgba(16,185,129,0.4);
}

.island__badge.active {
  background: var(--kid-blue);
  color: white;
  box-shadow: 0 6px 18px rgba(59,130,246,0.4);
  animation: badgePulse 2s infinite ease-in-out;
}

@keyframes badgePulse {50% { opacity: 0.85; transform: scale(1.05); }
}
/* ═══════════════════════════════════════════════════════════
   🎮 NEW: UI Control Panels
   ═══════════════════════════════════════════════════════════ */

 底部時間控制面板 */
.time-controls {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  gap: 16px;
  background: var(--kid-panel);
  backdrop-filter: blur(24px);
  padding: 18px 30px;
  border-radius: var(--kid-radius-lg);
  border: 2.5px solid var(--kid-border);
  box-shadow: var(--kid-shadow-soft);
}

.time-btn {
  padding: 13px 26px;
  background: var(--kid-bg-glass);
  border: 1.5px solid var(--kid-border);
  border-radius: var(--kid-radius-md);
  color: var(--kid-text);
  font-size: var(--kid-body);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.38s var(--ease-smooth);
  min-height: var(--kid-touch);
  display: flex;
  align-items: center;
  gap: 11px;
  letter-spacing: 0.6px;
}

.time-btn:hover {
  background: var(--kid-blue);
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(59,130,246,0.55);
  border-color: rgba(255,255,255,0.45);
}

.time-btn:active {
  transform: translateY(-2px);
}

.time-btn.active {
  background: var(--kid-blue);
  box-shadow: 
    0 8px 22px rgba(59,130,246,0.65),
    inset 0 2px 10px rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.55);
}


/* 極小螢幕 (480px 以下) */
@media (max-width: 480px) {
  .hkCity__island {
    width: 400px;
    height: 400px;
    margin-left: -200px;
  }

  .time-controls {
    gap: 8px;
  }
}


/* 2. 星星控制: 僅在夜晚顯示 */
/* === Stars (Night Only) === */
.lg-sky-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-slow, 0.8s) ease;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent),
    radial-gradient(2px 2px at 90% 60%, white, transparent),
    radial-gradient(1px 1px at 33% 80%, white, transparent),
    radial-gradient(1px 1px at 15% 60%, white, transparent),
    radial-gradient(2px 2px at 70% 20%, white, transparent);
  background-size: 200% 200%;
  background-position: 0% 0%;
  animation: starsMove 120s linear infinite;
}

.lg-sky-system[data-period="night"] .lg-sky-stars {
  opacity: 1;
}
.lg-sky-system { position: absolute; inset: 0; transition: background 1s ease; }
  .lg-sky-system[data-period="day"] { background: linear-gradient(to bottom, #38bdf8, #bae6fd); }
  .lg-sky-system[data-period="night"] { background: linear-gradient(to bottom, #0f172a, #1e293b); }
  .lg-sky-system[data-period="sunset"] { background: linear-gradient(to bottom, #f97316, #fde047); }

@keyframes starsMove {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
/* 3. 雲朵漂浮動效 */
.hkCloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  filter: blur(8px);
  animation: cloudDrift 40s linear infinite;
}
.hkCloud--2 { width: 150px; height: 30px; top: 25%; left: -200px; animation-duration: 45s; animation-delay: -10s; }

@keyframes cloudDrift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 400px)); }
}


/* ==========================================
   Apple Pro Energy Flow - Stable Version
   ========================================== */

/* 1. 修正動態路徑：確保選擇器開頭沒有多餘的大括號 */
[id^="lg-path-active-"] {
  stroke-dasharray: 20, 15; /* 增加間距，讓視覺呼吸感更強 */
  /* Apple 質感：極其緩慢、像光纖脈動般的流動 */
  animation: pathFlow 40s linear infinite; 
  stroke: url(#path-gradient);
  
  /* Apple-style 柔和發光：不使用高飽和度的顏色，改用白光與透明度 */
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
  
  /* 確保動畫在硬體加速下運行 */
  will-change: stroke-dashoffset;
}

/* 2. 定義能量流動動畫 */
@keyframes pathFlow {
  from {
    /* 這裡的數值應根據你 SVG 路徑的長度微調，1000 通常是個安全的起點 */
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* 3. 初次載入的「生長」動畫：讓網站更有儀式感 */
.lg-platform.is-ready [id^="lg-path-active-"] {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. 節點視覺 (Node Visual)：Apple 玻璃擬態 */
.node-visual {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08); /* 降低透明度更 Pro */
  backdrop-filter: blur(12px) saturate(160%); /* 增加飽和度提升質感 */
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 0.5px solid rgba(255, 255, 255, 0.2); /* 更精細的邊框 */
  border-radius: 28px; /* 稍微減小，符合 Apple 現代圓角 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 3. 懸浮動畫：模擬物體在水中的阻尼感 */
.lg-island-node:not(.is-locked) .lg-node-visual {
  animation: floatNode 6s ease-in-out infinite; /* 減慢速度增加重量感 */
}


/* --- 動畫 Keyframes --- */

@keyframes floatNode {50% { transform: translateY(-10px); } /* 縮小幅度，增加穩重感 */
}

@keyframes pathFlow {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}
/* 太陽與月亮 */
.lg-sky-sun, .lg-sky-moon {
  position: absolute;
  top: 15%; right: 15%;
  width: 80px; height: 80px;
  border-radius: 50%;
  transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* === Sun === */
.lg-sky-sun {
  position: absolute;
  top: 8%;
  left: 12%;
  width: clamp(80px, 10vw, 120px);
  height: clamp(80px, 10vw, 120px);
  background: radial-gradient(circle, #FFD700 0%, #FFA500 100%);
  border-radius: 50%;
  box-shadow: 
    0 0 40px rgba(255, 215, 0, 0.6),
    0 0 80px rgba(255, 215, 0, 0.3);
  opacity: 1;
  transition: opacity var(--duration-slow, 0.8s) ease, transform var(--duration-slow, 0.8s) ease;
  animation: sunGlow 4s ease-in-out infinite;
}

.lg-sky-system[data-period="night"] .lg-sky-sun,
.lg-sky-system[data-period="evening"] .lg-sky-sun {
  opacity: 0;
  transform: translateY(100px);
}
/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 768px) {
  .lg-sky-sun {
    width: clamp(60px, 12vw, 80px);
    height: clamp(60px, 12vw, 80px);
    top: 5%;
    left: 8%;
  }
  
  .lg-sky-moon {
    width: clamp(50px, 10vw, 70px);
    height: clamp(50px, 10vw, 70px);
    top: 6%;
    right: 10%;
  }
  
  .hkCloud--1,
  .hkCloud--2 {
    width: clamp(80px, 20vw, 120px);
    height: clamp(40px, 10vw, 60px);
  }
}

/* ============================================
   Performance Optimizations
   ============================================ */

.lg-sky-system * {
  will-change: transform, opacity;
}


@keyframes sunGlow {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6), 0 0 80px rgba(255, 215, 0, 0.3);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.8), 0 0 100px rgba(255, 215, 0, 0.4);
  }
}
/* === Moon === */
.lg-sky-moon {
  position: absolute;
  top: 10%;
  right: 15%;
  width: clamp(70px, 9vw, 100px);
  height: clamp(70px, 9vw, 100px);
  background: radial-gradient(circle at 30% 30%, #F0F0F0 0%, #D3D3D3 100%);
  border-radius: 50%;
  box-shadow: 
    0 0 30px rgba(240, 240, 240, 0.5),
    inset -10px -10px 20px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity var(--duration-slow, 0.8s) ease, transform var(--duration-slow, 0.8s) ease;
}
.lg-island-node .node-visual { position: relative; }
.lg-phase-badge{
  position:absolute; top:10px; left:10px; z-index:6;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color:#fff; font-size:11px; line-height:1;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.lg-phase-badge__k{ letter-spacing:.12em; opacity:.85; font-weight:600; }
.lg-phase-badge__v{ font-weight:800; font-size:12px; }
.connection-line {
  stroke: rgba(255, 255, 255, 0.3) !important;
  stroke-width: 2 !important;
  stroke-dasharray: 8, 4 !important;
  stroke-linecap: round !important;
  fill: none !important;
  animation: pathDash 20s linear infinite !important;
}

.lg-island-node .node-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}


/* 主容器 */
.littleg-main-wrapper {
  min-height: 100vh !important;
  height: 100vh !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #87CEEB 0%, #B0E0E6 100%) !important;
}

/* 天空背景層 */
.lg-map-viewport{
  width:100%;
  height:100vh;
  overflow:hidden;
  cursor:grab;
  position:relative;
}

/* === Clouds Container (match existing sky container) === */
#sky-system{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none; /* 很重要：避免雲層擋到島嶼點擊 */
}

/* === Individual Clouds (match existing .lg-cloud) === */
#sky-system .lg-cloud{
  position:absolute;
  background:rgba(255,255,255,0.85);
  border-radius:100px;
  box-shadow:0 8px 32px rgba(255,255,255,0.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:opacity var(--duration-slow, 0.8s) ease;
}

/* 如果你要用 pseudo-element 做"雲朵泡泡"，也要掛在 .lg-cloud 上 */
#sky-system .lg-cloud::before,
#sky-system .lg-cloud::after{
  content:'';
  position:absolute;
  background:rgba(255,255,255,0.85);
  border-radius:100px;
}

/* 星星系統 - 夜晚模式 */
.star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255,255,255,0.9);
  animation: starTwinkle 4s infinite ease-in-out;
  opacity: 0;
  transition: opacity 2s ease;
}

.hkCity[data-period="night"] .star {
  opacity: 1;
}

.hkCity[data-period="dusk"] .star {
  opacity: 0.3;
}

@keyframes starTwinkle {
  0%, 100% { 
    opacity: 0.4; 
    transform: scale(1); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.3); 
  }
}

/* 大星星變體 */
.star.large {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 10px 3px rgba(255,255,255,1);
  animation-duration: 3s;
}

   @media (max-width: 1024px) {
      .lg-container-card {
        max-width: 100%;
        border-radius: 20px;
      }

      .lg-topbar {
        padding: 18px 24px;
      }

      .lg-content {
        padding: 28px;
      }
    .lg-topbar__main {
      flex-direction: column;
      gap: 12px;
    }

    .lg-topbar__left,
    .lg-topbar__right {
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
    }

    .progress-stats {
      grid-template-columns: repeat(2, 1fr);
    }
  .island-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 50px;
    padding: 35px;
  }
  
  .hkCity__world {
    transform: translate(-50%, -50%) rotateX(38deg) rotateZ(0deg);
  }

  .hkCity__moon {
    width: 75px;
    height: 75px;
    top: 16%;
    right: 18%;
  }
}


/* 極小螢幕 */
@media (max-width: 480px) {
  .island-grid {
    gap: 25px;
    padding: 20px;
  }

  .time-controls {
    flex-wrap: wrap;
    max-width: 90%;
  }

  .time-btn {
    flex: 1 1 calc(50% - 5px);
    min-width: 120px;
  }
}

/* 高性能優化 */
.island,
.island__surface,
.island__content {
  will-change: transform;
}

.hkCity__scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hkCity__ui {
  position: relative;
  z-index: 10;
}

.hkCity__island {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 1400px;
  height: 70%;
  transform-style: preserve-3d;
  pointer-events: auto;
  z-index: 10;
}


/* HUD 背景裝飾 */
.hkCity__hud::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
  border-radius: 18px;
  pointer-events: none;
  z-index: 0;
}

/* HUD 標題 */
   .hkCity__hud-title {
    font-size: 18px;
    font-weight: 700;
    color: #a78bfa;
    margin-bottom: 12px;
  }

  .hkCity__time {
    font-size: 48px;
    font-weight: 900;
    color: white;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(139, 92, 246, 0.5);
  }

  .hkCity__date {
    font-size: 18px;
    color: #cbd5e1;
    margin-bottom: 4px;
    font-weight: 600;
  }

@keyframes timePulse {
  0%, 100% { 
    filter: drop-shadow(0 4px 20px rgba(96, 165, 250, 0.6));
  }
  50% { 
    filter: drop-shadow(0 6px 30px rgba(96, 165, 250, 0.9));
  }
}

  .hkCity__period {
    font-size: 16px;
    color: #f59e0b;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .hkCity__hud-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .lg-hudbtn {
    padding: 10px 24px;
    background: rgba(139, 92, 246, 0.2);
    border: 2px solid rgba(139, 92, 246, 0.4);
    border-radius: var(--radius-lg);
    color: white;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
  }

  .lg-hudbtn:hover {
    background: rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
  }

@keyframes periodGlow {
  0%, 100% { 
    box-shadow: 
      0 4px 16px rgba(99, 102, 241, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% { 
    box-shadow: 
      0 6px 24px rgba(99, 102, 241, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

.hkCity__date,
.hkCity__period {
  font-size: var(--kid-body);
}.hkCity__period {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(251,191,36,0.15);
  border: 1px solid rgba(251,191,36,0.25);
  color: rgba(255, 231, 184, 0.95);
}

    .hkCity__control-btn {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      background: rgba(255, 255, 255, 0.05);
      color: #cbd5e1;
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-lg);
      cursor: pointer;
      transition: all 0.3s ease;
    }


/* 前景樹木 */
.hkCity__islandDecor g:nth-child(1),
.hkCity__islandDecor g:nth-child(2) {
  transform: translateZ(100px);
}
/* 中景樹木 */
.hkCity__islandDecor g:nth-child(3),
.hkCity__islandDecor g:nth-child(4) {
  transform: translateZ(50px);
}
/* 背景岩石 */
.hkCity__islandDecor g:nth-child(5),
.hkCity__islandDecor g:nth-child(6) {
  transform: translateZ(-30px);
}


/* 5) Overlay：給 LittleG 學習 UI 一個「固定安全區」容器（手機底部、桌機側欄） */

.hkCity__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-modal-backdrop, 10100);
    opacity: 0;
  pointer-events: none;
    background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

/* Overlay 啟動狀態 */
.hkCity__overlay.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Overlay 背景裝飾 */
.hkCity__overlay::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: overlayPulse 8s ease-in-out infinite;
}

@keyframes overlayPulse {
  0%, 100% { opacity: 0.5; }}


@keyframes overlaySlideIn {
  0% {
    transform: translateY(40px) scale(0.95);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* 關閉按鈕（如果需要） */
.hkCity__overlay-close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: var(--z-modal-content, 10102);
  
  width: 48px;
  height: 48px;
  padding: 0;
  
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  
  font-size: 24px;
  color: white;
  cursor: pointer;
  
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hkCity__overlay-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1) rotate(90deg);
  box-shadow: 
    0 6px 30px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.hkCity__overlay-close:active {
  transform: scale(0.95);
}

/* 6) 「學習面板」基本 UI（可套在你的 littleg-lab / game 的外層） */
.lgPanel {
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  border: 1px solid var(--kid-border);
  border-radius: var(--kid-radius-xl);
  box-shadow: var(--kid-shadow);
  backdrop-filter: blur(14px);
  color: var(--kid-text);
}

.lgPanel__title {
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 900;
  letter-spacing: .2px;
}

.lgPanel__sub {
  color: var(--kid-text-dim);
  font-size: var(--kid-body);
}

/* 7) 多設備佈局策略：手機=底部抽屜；桌機/平板=右側學習欄 */
@media (max-width: 820px) {
  /* Mobile: bottom sheet */
  .lgPanel--dock {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-height: 52%;
    overflow: auto;
    padding: 14px 14px;
    border-radius: 22px;
  }

  /* 手機按鈕再大一點 */
  .hkCity__control-btn {
    min-height: 46px;
    padding: 12px 14px;
  }

  /* HUD 不要太佔位 */
  .hkCity__hud {
    max-width: min(300px, 72vw);
  }
}

@media (min-width: 821px) {
  /* Desktop/Tablet: right sidebar */
  .lgPanel--dock {
    position: fixed;
    top: calc(18px + env(safe-area-inset-top, 0px));
    right: calc(18px + env(safe-area-inset-right, 0px));
    width: min(420px, 34vw);
    max-height: calc(100vh - 36px - env(safe-area-inset-top, 0px));
    overflow: auto;
    padding: 16px 16px;
  }
}

/* 8) LittleG-friendly buttons + mission cards（給你的任務/成就/探索卡用） */
.lgBtn {
  min-height: var(--kid-touch);
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--kid-border);
  background: linear-gradient(180deg, rgba(59,130,246,0.26), rgba(59,130,246,0.10));
  color: var(--kid-text);
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--kid-shadow-soft);
  transition: transform .16s ease, filter .16s ease;
}
.lgBtn:hover { transform: translateY(-1px); filter: brightness(1.05); }

.lgCard {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 8px 20px rgba(0,0,0,0.16);
  padding: 12px;
}

.lgTag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(244,114,182,0.14);
  border: 1px solid rgba(244,114,182,0.22);
  color: rgba(255, 216, 234, 0.95);
  font-weight: 800;
  font-size: 12px;
}

/* 9) 可及性：focus 樣式更清楚（小孩/家長用鍵盤也 OK） */
.hkCity :focus-visible {
  outline: 3px solid rgba(251,191,36,0.85);
  outline-offset: 3px;
  border-radius: 14px;
}

/* 10) reduced motion：保護低配手機/家長設備 */

/* 权限控制遮罩层 */
.hkAuth {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
}

.hkAuth__content {
  text-align: center;
  padding: 60px 40px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 3px solid rgba(74, 144, 226, 0.5);
  border-radius: 32px;
  max-width: 500px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}

.hkAuth__icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.hkAuth__title {
  font-size: 32px;
  font-weight: 900;
  color: white;
  margin: 0 0 16px;
}

.hkAuth__desc {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 32px;
  line-height: 1.6;
}

.hkAuth__btn {
  padding: 16px 48px;
  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
  border: none;
  border-radius: 50px;
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.4);
}

.hkAuth__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(34, 211, 238, 0.6);
}

@media (max-width: 768px) {
    /* ═══════════════════════════════════════════════════════════
       🌏 3D CITY MAP - Base Container
       ═══════════════════════════��═══���═══════════════════������══════ */
  .hkCity {
      position: relative;
      width: 100%;
      height: 100%;
      perspective: 1500px;
      transition: background 3s ease;
    }
    /* 背景地图层 */
    .hkCity__map {
      position: absolute;
      inset: 0;
      z-index: 5;
      opacity: 0.15;
      transition: opacity 3s ease;
      pointer-events: none;
      background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(74, 144, 226, 0.1) 50px, rgba(74, 144, 226, 0.1) 51px),
        repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(74, 144, 226, 0.1) 50px, rgba(74, 144, 226, 0.1) 51px);
    }

    .hkCity.time-night .hkCity__map {
      opacity: 0.08;
      background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 255, 255, 0.05) 50px, rgba(255, 255, 255, 0.05) 51px),
        repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 255, 255, 0.05) 50px, rgba(255, 255, 255, 0.05) 51px);
    }

    /* 地形等高线 */
    .hkCity__terrain {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60%;
      z-index: 6;
      opacity: 0.12;
      transition: opacity 3s ease;
      pointer-events: none;
      background-image: 
        radial-gradient(ellipse 800px 200px at 50% 100%, transparent 30%, rgba(74, 144, 226, 0.2) 30%, rgba(74, 144, 226, 0.2) 31%, transparent 31%),
        radial-gradient(ellipse 900px 250px at 50% 100%, transparent 40%, rgba(74, 144, 226, 0.15) 40%, rgba(74, 144, 226, 0.15) 41%, transparent 41%),
        radial-gradient(ellipse 1000px 300px at 50% 100%, transparent 50%, rgba(74, 144, 226, 0.1) 50%, rgba(74, 144, 226, 0.1) 51%, transparent 51%);
    }

    .hkCity.time-night .hkCity__terrain {
      opacity: 0.06;
    }
/* Stars */
.hkCity__stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent),
    radial-gradient(2px 2px at 90% 60%, white, transparent);
  background-size: 200% 200%;
  animation: twinkle 3s ease-in-out infinite;
  transition: opacity 1.5s ease;
}

.hkCity[data-period="night"] .hkCity__stars {
  opacity: 1;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.5; }}


    /* 背景地图层 */
    .hkCity__map {
      position: absolute;
      inset: 0;
      z-index: 5;
      opacity: 0.15;
      transition: opacity 3s ease;
      pointer-events: none;
      background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(74, 144, 226, 0.1) 50px, rgba(74, 144, 226, 0.1) 51px),
        repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(74, 144, 226, 0.1) 50px, rgba(74, 144, 226, 0.1) 51px);
    }

    .hkCity.time-night .hkCity__map {
      opacity: 0.08;
      background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 255, 255, 0.05) 50px, rgba(255, 255, 255, 0.05) 51px),
        repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 255, 255, 0.05) 50px, rgba(255, 255, 255, 0.05) 51px);
    }

    @keyframes hkIslandRotate {
      0% { transform: translateX(-50%) rotateX(70deg) rotateZ(0deg); }
      100% { transform: translateX(-50%) rotateX(70deg) rotateZ(360deg); }
    }

/* ═══════════════════════════════════════════════════════════
   🌍 Ground - Enhanced with Grid Lines
   ═══════════════════════════════════════════════════════════ */
/* Ground */
.hkCity__ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, #8b7355 0%, #6b5444 100%);
  transition: background 1.5s ease;
}

.hkCity[data-period="night"] .hkCity__ground {
  background: linear-gradient(180deg, #4a3f35 0%, #2d2520 100%);
}


.hkCity__water {
  position: absolute;
  bottom: -80px;
  left: -15%;
  width: 130%;
  height: 400px;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.5) 0%, 
    rgba(147, 197, 253, 0.3) 50%,
    rgba(59, 130, 246, 0.5) 100%
  );
  border-radius: 50%;
  filter: blur(30px);
  animation: waterWave 6s ease-in-out infinite;
  z-index: 1;
}

@keyframes waterWave {
  0%, 100% { 
    transform: scale(1) translateY(0);
    opacity: 0.6;
  }
  50% { 
    transform: scale(1.08) translateY(-8px);
    opacity: 0.8;
  }
}

[data-period="night"] .hkCity__water {
  background: linear-gradient(180deg, 
    rgba(15, 32, 39, 0.6) 0%, 
    rgba(44, 83, 100, 0.8) 100%
  );
}

.hkCity__water::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    rgba(255, 255, 255, 0.1) 10px,
    transparent 20px
  );
  animation: waterFlow 3s linear infinite;
}

    @keyframes hkWaterRipple {
      0%, 100% { transform: translateZ(-20px) scale(1); opacity: 0.5; }
      50% { transform: translateZ(-20px) scale(1.1); opacity: 0.7; }
    }


.hkCity[data-period="night"] .hkCity__overlay {
  background: rgba(0, 0, 0, 0.3);
}

/* === UI Content Layer === */
.hkCity__ui {
  position: relative;
  z-index: 10;
  min-height: 100%;
}

/* === HUD === */
.hkCity__hud {
  background: linear-gradient(135deg, 
    var(--brand-cyan, #00d4ff) 0%, 
    var(--brand-magenta, #ff006e) 100%);
  border-radius: var(--radius-lg, 16px);
  padding: var(--spacing-lg, 24px);
  margin: 0 auto var(--spacing-xl, 32px);
  max-width: 400px;
  text-align: center;
  box-shadow: var(--shadow-glow);
  color: white;
}

.hkCity__hud-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.hkCity__hud-flag {
  font-size: 1.5rem;
  line-height: 1;
}

.hkCity__hud-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: 0.5px;
}

.hkCity__hud-body {
  margin-bottom: 1rem;
}

.hkCity__time {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--letter-spacing-tight, -0.02em);
  margin: var(--spacing-sm, 12px) 0;
  text-shadow: var(--shadow-text, 0 2px 8px rgba(0, 0, 0, 0.2));
}
.hkCity__date {
  font-size: var(--font-size-base, 16px);
  font-weight: var(--font-weight-medium, 500);
  opacity: 0.95;
  margin-bottom: var(--spacing-xs, 8px);
}



.hkCity__hud-actions {
  display: flex;
  gap: var(--spacing-sm, 12px);
  justify-content: center;
  margin-top: var(--spacing-md, 16px);
}

.hkCity__period {
  font-size: var(--font-size-sm, 14px);
  opacity: 0.85;
  margin-bottom: var(--spacing-md, 16px);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: var(--radius-md);
  color: white;
  font-weight: 600;
}

.hkCity__period-icon {
  font-size: 1.125rem;
  line-height: 1;
}

.hkCity__hud-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lg-hudbtn {
  background: var(--glass-strong, rgba(255, 255, 255, 0.25));
  backdrop-filter: blur(var(--blur-md, 12px));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.3));
  border-radius: var(--radius-full, 9999px);
  padding: var(--spacing-sm, 12px) var(--spacing-lg, 24px);
  color: white;
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  cursor: pointer;
  transition: all var(--duration-fast, 0.2s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  border: none;
  outline: none;
}

.lg-hudbtn--primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
}

.lg-hudbtn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.lg-hudbtn--secondary {
  background: rgba(0, 0, 0, 0.05);
  color: #374151;
}

.lg-hudbtn--secondary:hover {
  background: rgba(0, 0, 0, 0.1);
}


.lg-hudbtn:active {
  transform: translateY(0) scale(0.98);
}

/* ========================================
   Island Card (Hover Popup)
======================================== */

/* 玻璃擬態卡片 */
.lg-islandCard {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.lg-islandNode:hover .lg-islandCard,
.lg-islandNode:focus .lg-islandCard {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Card Arrow */
.lg-islandCard::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid var(--surface-glass, rgba(255, 255, 255, 0.95));
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.lg-islandCard__header {
  margin-bottom: var(--spacing-md, 16px);
}

.lg-islandCard__title {
  font-size: var(--font-size-xl, 20px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text-primary, #1d1d1f);
  margin: 0 0 var(--spacing-xs, 8px) 0;
}

.lg-islandCard__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 12px);
  flex-wrap: wrap;
}
.lg-islandNode:hover .lg-islandCard {
  opacity: 1;
  transform: translateY(0);
}
   
 .progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0 0 50% 50%;
    overflow: hidden;
  }


  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00d4ff, #0099ff);
    transition: width 0.3s ease;
  }
.node-label { position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%); background: rgba(15,23,42,0.9); padding: 4px 10px; border-radius: 10px; color: white; white-space: nowrap; text-align: center; border: 1px solid rgba(255,255,255,0.2); }


  .lg-node-label .emoji {
    font-size: 1.2rem;
    margin-right: 0.25rem;
  }
  .lg-node-label .name {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.25rem;
  }

  .lg-node-label .level-tag {
    display: inline-block;
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    margin-top: 0.25rem;
  }



    .progress-circle {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--cyan), var(--gold));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: 800;
      color: #000;
    }

    .progress-text {
      text-align: left;
    }

    .progress-text h3 {
      font-size: 1.2rem;
      margin-bottom: 0.25rem;
    }

    .progress-text p {
      font-size: 0.9rem;
      color: var(--surface-glass);
    }

    .progress-status {
      padding: 0.5rem 1.5rem;
      border-radius: 50px;
      background: rgba(34, 197, 94, 0.2);
      color: #22c55e;
      font-weight: 600;
      font-size: 0.9rem;
    }

    .progress-status.incomplete {
      background: rgba(251, 191, 36, 0.2);
      color: var(--gold);
    }

    /* ========== Consent Sections ========== */
    .consent-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 32px;
    }

    .consent-section {
      background: var(--surface-glass);
      backdrop-filter: blur(var(--blur));
      border-radius: 24px;
      padding: 32px;
      margin-bottom: 2rem;
      border: 1px solid var(--header-border);
      transition: all var(--duration) var(--ease);
    }

    .consent-section:hover {
      background: var(--glass-hover);
      transform: translateY(-4px);
      box-shadow: 0 0 25px rgba(255,255,255,0.1);
    }

    .section-header {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
      cursor: pointer;
      user-select: none;
    }


    .section-icon {
      font-size: 2rem;
      filter: drop-shadow(0 0 10px var(--cyan));
    }

    .section-title h2 {
      font-size: 1.5rem;
      font-weight: 700;
    }

    .required-badge {
      padding: 0.25rem 0.75rem;
      border-radius: 50px;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: #fff;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
    }

    .optional-badge {
      padding: 0.25rem 0.75rem;
      border-radius: 50px;
      background: rgba(56, 189, 248, 0.2);
      color: var(--cyan);
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
    }

    .expand-icon {
      font-size: 1.5rem;
      transition: transform var(--duration) var(--ease);
    }

    .section-header.expanded .expand-icon {
      transform: rotate(180deg);
    }

    .section-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s var(--ease);
    }

    .section-content.expanded {
      max-height: 2000px;
    }

    .consent-text {
      color: rgba(255,255,255,0.8);
      margin-bottom: 1.5rem;
      line-height: 1.8;
    }

    .consent-text h3 {
      color: #fff;
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
      font-size: 1.1rem;
    }

    .consent-text ul {
      margin-left: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .consent-text li {
      margin-bottom: 0.5rem;
    }

    /* ========== Checkbox System ========== */
    .consent-checkbox {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 2rem;
      background: rgba(255,255,255,0.03);
      border-radius: 16px;
      border: 2px solid transparent;
      transition: all var(--duration) var(--ease);
      cursor: pointer;
    }

    .consent-checkbox:hover {
      background: var(--surface-glass);
      border-color: var(--cyan);
    }

    .consent-checkbox.checked {
      background: rgba(56, 189, 248, 0.1);
      border-color: var(--cyan);
    }

    .checkbox-input {
      width: 24px;
      height: 24px;
      min-width: 24px;
      accent-color: var(--cyan);
      cursor: pointer;
    }

    .checkbox-label {
      flex: 1;
      cursor: pointer;
    }

    .checkbox-label strong {
      display: block;
      margin-bottom: 0.5rem;
      font-size: 1.1rem;
      color: #fff;
    }

    .checkbox-label p {
      color: var(--surface-glass);
      font-size: 0.95rem;
    }

    /* ========== Action Buttons ========== */
    .action-buttons {
      max-width: 1200px;
      margin: 3rem auto;
      padding: 0 2rem;
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .btn--primary {
      flex: 1;
      min-width: 200px;
      background: linear-gradient(135deg, var(--cyan), var(--gold));
      color: #000;
      padding: 1.25rem 2.5rem;
      border-radius: 50px;
      font-weight: 700;
      font-size: 1.1rem;
      border: none;
      cursor: pointer;
      transition: all var(--duration) var(--ease);
      position: relative;
      overflow: hidden;
    }

    .btn--primary:hover {
      transform: scale(1.05);
      box-shadow: 0 0 30px rgba(56, 189, 248, 0.5);
    }

    .btn--primary:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .btn--secondary {
      flex: 1;
      min-width: 200px;
      background: var(--surface-glass);
      backdrop-filter: blur(var(--blur));
      color: #fff;
      padding: 1.25rem 2.5rem;
      border-radius: 50px;
      font-weight: 600;
      font-size: 1.1rem;
      border: 1px solid var(--header-border);
      cursor: pointer;
      transition: all var(--duration) var(--ease);
    }

    /* ========== Success Modal ========== */
    .modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.8);
      backdrop-filter: blur(10px);
      z-index: 9999;
      align-items: center;
      justify-content: center;
      padding: 32px;
    }

    .modal.active {
      display: flex;
    }

    .modal-content {
      background: var(--surface-glass);
      backdrop-filter: blur(var(--blur));
      border-radius: 24px;
      padding: 3rem;
      max-width: 500px;
      text-align: center;
      border: 1px solid var(--header-border);
      animation: fadeUp 0.5s var(--ease);
    }

    .modal-icon {
      font-size: 5rem;
      margin-bottom: 1.5rem;
      filter: drop-shadow(0 0 20px #22c55e);
    }

    .modal-title {
      font-size: 2rem;
      font-weight: 800;
      background: linear-gradient(90deg, var(--cyan), var(--gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 1.5rem;
    }

    .modal-text {
      color: rgba(255,255,255,0.8);
      margin-bottom: 2rem;
    }


    /* ========== Responsive ========== */
    @media (max-width: 768px) {

      .progress-text {
        text-align: center;
      }

      .consent-container {
        padding: 1rem;
      }

      .consent-section {
        padding: 2rem;
      }

      .action-buttons {
        flex-direction: column;
        padding: 0 1rem;
      }
    }
/* 鎖定島嶼的視覺壓制 */
.lg-islandNode.is-locked .lg-islandNode__image {
  filter: grayscale(1) contrast(0.8) brightness(0.6);
  opacity: 0.5;
}
.lg-islandNode.is-locked {
  filter: grayscale(0.8) brightness(0.7);
  opacity: 0.85;
}
.lg-islandNode.is-locked:hover .lg-islandNode__image {
  filter: grayscale(0.5) brightness(0.8);
}
.level-indicator {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 12px);
  background: linear-gradient(135deg, var(--brand-cyan, #00d4ff), var(--brand-magenta, #ff006e));
  color: white;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
}

.unlock-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs, 6px);
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 12px);
  background: var(--glass-strong, rgba(255, 215, 0, 0.2));
  border: 1px solid var(--brand-gold, #ffd700);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary, #1d1d1f);
}

/* Mission Badge */
.lg-islandCard__mission {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 12px);
  padding: var(--spacing-md, 16px);
  background: linear-gradient(135deg, 
    rgba(0, 212, 255, 0.1), 
    rgba(255, 0, 110, 0.1));
  border-radius: var(--radius-lg, 16px);
  margin-bottom: var(--spacing-md, 16px);
  border: 2px solid var(--brand-cyan, #00d4ff);
}

.mission-badge {
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 2px 8px rgba(0, 212, 255, 0.3));
}

.mission-text {
  font-size: var(--font-size-base, 16px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary, #1d1d1f);
}

/* Actions */
.lg-islandCard__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 12px);
  margin-bottom: var(--spacing-md, 16px);
}

/* Learning Evidence */
.lg-islandCard__evidence {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 12px);
  padding: var(--spacing-sm, 12px);
  background: var(--glass-strong, rgba(0, 212, 255, 0.1));
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--brand-cyan, #00d4ff);
}

.evidence-text {
  font-size: var(--font-size-sm, 14px);
  color: var(--text-secondary, #6e6e73);
  font-weight: var(--font-weight-medium, 500);
}

/* ============================================
   ② 整合的顶部栏样式
============================================ */
.lg-unified-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.875rem 1.25rem;
}

.lg-unified-header__container {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
}

/* 左侧：返回按钮 */
.lg-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
  color: #1f2937;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.lg-back-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: translateX(-3px);
}

.lg-back-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* 中间：进度显示 */
.lg-unified-header__center {
  min-width: 0; /* 允许收缩 */
}

.lg-progress-display {
  max-width: 500px;
  margin: 0 auto;
}

.lg-progress-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1f2937;
}

.lg-progress-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.lg-progress-text {
  flex: 1;
}

.lg-progress-percent {
  color: #6366f1;
  font-weight: 700;
}

.lg-progress-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.lg-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 右侧：钱包 + 快捷操作 */
.lg-unified-header__right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}



/* SVG 裝飾層 */
.hkCity__islandDecor {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 800px;
  height: auto;
  z-index: 1;
  opacity: 0.8;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   🏢 Building System - Fully Enhanced
   ═══════════════════════════════════════════════════════════ */
.hkCity__buildings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 40px;
  padding: 60px 20px;
  perspective: 1200px;
  perspective-origin: 50% 40%;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
  min-height: 600px;
}

  /* 島嶼節點 */
  .lg-islandNode {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    z-index: 10;
  }

  .lg-islandNode:hover {
    transform: translate(-50%, -50%) scale(1.1);
    z-index: 20;
  }
  .lg-islandNode.layer-2 {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
  }

  .lg-islandNode.layer-3 {
    filter: drop-shadow(0 0 15px rgba(138, 43, 226, 0.6));
  }

  .lg-islandNode.is-locked {
    opacity: 0.6;
    filter: grayscale(0.5);
  }

  .lg-islandNode.is-locked:hover {
    transform: translate(-50%, -50%) scale(1.05);
  }

@keyframes nodeFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-10px); }
}

  .lg-islandNode__image-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }
.lg-islandNode:hover .lg-islandNode__image-wrapper {
  transform: scale(1.1) translateY(-5px);
  border-color: #00d4ff;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
}
 .lg-islandNode__fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }


/* 島嶼圖片 */
  .lg-islandNode__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
.lg-islandNode__image--unlocked {
  filter: brightness(1.1) saturate(1.2);
}

.lg-islandNode__image--locked {
  filter: grayscale(0.7) brightness(0.6);
}

.lg-islandNode:hover .lg-islandNode__image--unlocked {
  filter: brightness(1.2) saturate(1.3);
  transform: scale(1.05);
}

/* Level Badge */
.lg-islandNode__level-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--brand-gold, #ffd700), var(--littleg-yellow, #ffeb3b));
  border-radius: var(--radius-full, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg, 18px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text-primary, #1d1d1f);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.2));
  border: 3px solid white;
  z-index: 2;
}

/* Lock Overlay */
 .lg-islandNode__lock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
 .unlock-visual {
    text-align: center;
  }
  .unlock-visual span {
      background: #ef4444; padding: 4px 8px; border-radius: 8px; font-size: 12px;
    }
.unlock-requirement {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 8px);
  background: var(--surface-glass, rgba(255, 255, 255, 0.2));
  padding: var(--spacing-sm, 12px) var(--spacing-md, 16px);
  border-radius: var(--radius-full, 9999px);
  border: 2px solid var(--brand-gold, #ffd700);
  box-shadow: var(--shadow-glow);
}

.unlock-cost {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fbbf24;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
}
 .unlock-cost-tag {
    background: rgba(255, 215, 0, 0.9);
    color: #000;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
  }


@keyframes lockPulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.9;
  }
  50% { 
    transform: scale(1.15);
    opacity: 1;
  }
}

/* 鎖定圖片 */
.lock-overlay-image {
  width: 120px;
  height: 120px;
  margin-bottom: var(--spacing-lg, 24px);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  animation: lockPulse 2s infinite;
}

@keyframes lockPulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.9;
  }
  50% { 
    transform: scale(1.1);
    opacity: 1;
  }
}

/* 鎖定按鈕 */
.lg-btn-disabled {
  background: var(--surface-glass, rgba(255, 255, 255, 0.2));
  border: 2px solid var(--glass-border, rgba(255, 255, 255, 0.3));
  border-radius: var(--radius-full, 9999px);
  padding: var(--spacing-md, 16px) var(--spacing-xl, 32px);
  color: white;
  font-size: var(--font-size-lg, 18px);
  font-weight: var(--font-weight-bold, 700);
  cursor: not-allowed;
  opacity: 0.8;
  margin-bottom: var(--spacing-md, 16px);
}
@keyframes buildingFloat {50% { transform: translateY(-10px); }
}
/* 鎖定訊息 */
.lock-message {
  color: white;
  font-size: var(--font-size-base, 16px);
  font-weight: var(--font-weight-semibold, 600);
  text-align: center;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.required-stars {
  display: inline-block;
  font-size: var(--font-size-lg, 18px);
  margin: 0 var(--spacing-xs, 4px);
  animation: starShine 1.5s infinite;
}

@keyframes starShine {50% { opacity: 0.6; }
}

/* 解鎖狀態 */
.lg-building--unlocked {
  cursor: pointer;
}

.lg-building--unlocked:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: var(--shadow-xl, 0 20px 40px rgba(0, 212, 255, 0.3));
}

/* 鎖定狀態 */
.lg-building--locked {
  cursor: not-allowed;
  opacity: 0.6;
  filter: grayscale(0.5);
}

.lg-building--locked:hover {
  transform: scale(0.98);
}

/* 響應式調整 */
@media (max-width: 768px) {
  .lock-overlay-image {
    width: 80px;
    height: 80px;
  }
  
  .lg-btn-disabled {
    font-size: var(--font-size-base, 16px);
    padding: var(--spacing-sm, 12px) var(--spacing-lg, 24px);
  }
  
  .lock-message {
    font-size: var(--font-size-sm, 14px);
  }
}


    .hkCity.time-night .hkCity__islandDecor {
      opacity: 0.6;
    }

    /* 岛屿 2 - 左前方 */
    .hkCity__island--2 {
      left: -500px;
      bottom: 200px;
      transform: translateZ(150px);
      z-index: 55;
    }



@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) translateZ(20px) scale(1); }
  50% { opacity: 0.85; transform: translateX(-50%) translateZ(20px) scale(1.06); }
}

    /* 地形等高线 */
    .hkCity__terrain {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60%;
      z-index: 6;
      opacity: 0.12;
      transition: opacity 3s ease;
      pointer-events: none;
      background-image: 
        radial-gradient(ellipse 800px 200px at 50% 100%, transparent 30%, rgba(74, 144, 226, 0.2) 30%, rgba(74, 144, 226, 0.2) 31%, transparent 31%),
        radial-gradient(ellipse 900px 250px at 50% 100%, transparent 40%, rgba(74, 144, 226, 0.15) 40%, rgba(74, 144, 226, 0.15) 41%, transparent 41%),
        radial-gradient(ellipse 1000px 300px at 50% 100%, transparent 50%, rgba(74, 144, 226, 0.1) 50%, rgba(74, 144, 226, 0.1) 51%, transparent 51%);
    }

    .hkCity.time-night .hkCity__terrain {
      opacity: 0.06;
    }


    /* 单个岛屿通用样式 */
    .hkCity__island {
      position: absolute;
      transform-style: preserve-3d;
    }

    .hkCity.time-day .hkCity__ground {
      background: radial-gradient(circle, #5d7a8c 0%, #3d5a6b 100%);
    }

    .hkCity.time-night .hkCity__ground {
      background: radial-gradient(circle, #1a2332 0%, #0f1419 100%);
    }

    /* 岛屿 2 - 左前方 */
    .hkCity__island--2 {
      left: -500px;
      bottom: 200px;
      transform: translateZ(150px);
      z-index: 55;
    }

    .hkCity__island--2 .hkCity__ground {
      width: 300px;
      height: 300px;
      margin-left: -150px;
      background: radial-gradient(circle at 40% 30%, #5a6c7d 0%, #4a5568 40%, #2d3748 100%);
      box-shadow: 
        0 0 60px rgba(0, 0, 0, 0.7),
        inset 0 -30px 50px rgba(0, 0, 0, 0.5),
        inset 15px 15px 40px rgba(255, 255, 255, 0.08);
    }

    .hkCity.time-night .hkCity__island--2 .hkCity__ground {
      opacity: 0.6;
      background: radial-gradient(circle at 40% 30%, #3d4a5c 0%, #2d3748 40%, #1a202c 100%);
    }

    /* 岛屿 3 - 右前方 */
    .hkCity__island--3 {
      left: 500px;
      bottom: 200px;
      transform: translateZ(150px);
      z-index: 55;
    }

    .hkCity__island--3 .hkCity__ground {
      width: 300px;
      height: 300px;
      margin-left: -150px;
      background: radial-gradient(circle at 60% 30%, #5a6c7d 0%, #4a5568 40%, #2d3748 100%);
      box-shadow: 
        0 0 60px rgba(0, 0, 0, 0.7),
        inset 0 -30px 50px rgba(0, 0, 0, 0.5),
        inset -15px 15px 40px rgba(255, 255, 255, 0.08);
    }

    .hkCity.time-night .hkCity__island--3 .hkCity__ground {
      opacity: 0.6;
      background: radial-gradient(circle at 60% 30%, #3d4a5c 0%, #2d3748 40%, #1a202c 100%);
    }

    /* 岛屿 4 - 左后方 */
    .hkCity__island--4 {
      left: -400px;
      bottom: -200px;
      transform: translateZ(-300px);
      z-index: 30;
    }

    .hkCity__island--4 .hkCity__ground {
      width: 250px;
      height: 250px;
      margin-left: -125px;
      background: radial-gradient(circle at 35% 35%, #5a6c7d 0%, #4a5568 40%, #2d3748 100%);
      opacity: 0.7;
      box-shadow: 
        0 0 50px rgba(0, 0, 0, 0.6),
        inset 0 -25px 40px rgba(0, 0, 0, 0.5);
    }

    .hkCity.time-night .hkCity__island--4 .hkCity__ground {
      opacity: 0.4;
      background: radial-gradient(circle at 35% 35%, #3d4a5c 0%, #2d3748 40%, #1a202c 100%);
    }

    /* 岛屿 5 - 右后方 */
    .hkCity__island--5 {
      left: 400px;
      bottom: -200px;
      transform: translateZ(-300px);
      z-index: 30;
    }

    .hkCity__island--5 .hkCity__ground {
      width: 250px;
      height: 250px;
      margin-left: -125px;
      background: radial-gradient(circle at 65% 35%, #5a6c7d 0%, #4a5568 40%, #2d3748 100%);
      opacity: 0.7;
      box-shadow: 
        0 0 50px rgba(0, 0, 0, 0.6),
        inset 0 -25px 40px rgba(0, 0, 0, 0.5);
    }

    .hkCity.time-night .hkCity__island--5 .hkCity__ground {
      opacity: 0.4;
      background: radial-gradient(circle at 65% 35%, #3d4a5c 0%, #2d3748 40%, #1a202c 100%);
    }

    /* 桥梁灯光（夜晚） */
    .hkCity__bridge::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 40px,
        rgba(255, 235, 59, 0) 40px,
        rgba(255, 235, 59, 0) 50px
      );
      opacity: 0;
      transition: opacity 3s ease;
    }
/* ========================================
   ⑦ Time Controls
======================================== */

.hkCity__controls {
  display: flex;
  gap: var(--spacing-sm, 12px);
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--spacing-xl, 32px) auto;
  max-width: 800px;
  padding: 0 var(--spacing-lg, 24px);
}

.hkCity__control-btn {
  padding: var(--spacing-md, 16px) var(--spacing-lg, 24px);
  background: var(--surface-glass, rgba(255, 255, 255, 0.8));
  backdrop-filter: blur(var(--blur, 20px));
  border: 2px solid var(--glass-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-lg, 16px);
  font-size: var(--font-size-base, 16px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary, #1d1d1f);
  cursor: pointer;
  transition: all var(--duration-fast, 0.2s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  min-width: 120px;
}

.hkCity__control-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: var(--shadow-lg, 0 12px 24px rgba(0, 0, 0, 0.15));
  border-color: var(--brand-cyan, #00d4ff);
}

.hkCity__control-btn.is-active {
  background: linear-gradient(135deg, var(--brand-cyan, #00d4ff), var(--brand-magenta, #ff006e));
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}

.hkCity__control-btn[data-period="dawn"]:hover {
  border-color: var(--littleg-pink, #ff69b4);
}

.hkCity__control-btn[data-period="day"]:hover {
  border-color: var(--littleg-yellow, #ffeb3b);
}

.hkCity__control-btn[data-period="dusk"]:hover {
  border-color: #ff8c00;
}

.hkCity__control-btn[data-period="night"]:hover {
  border-color: #9c27b0;
}
/* ============================================
   响应式设计
============================================ */
@media (max-width: 1200px) {
  .lg-unified-header__container {
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }

  .lg-unified-header__center {
    grid-column: 1 / -1;
    order: 3;
  }

  .lg-unified-header__right {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .hkCity__hud {
    top: 0.75rem;
    right: 0.75rem;
    min-width: 160px;
    padding: 0.75rem;
  }

  .hkCity__time {
    font-size: 1.5rem;
  }

  .lg-unified-header {
    padding: 0.75rem 1rem;
  }

  .lg-back-btn span {
    display: none; /* 只显示箭头 */
  }

  .lg-back-btn {
    padding: 0.625rem;
  }

  .lg-progress-label {
    font-size: 0.875rem;
  }
  .hkCity__control-label {
    display: none; /* 移动端只显示 emoji */
  }

  .hkCity__controls {
    padding: 0.625rem 1rem;
    justify-content: center;
  }

  .hkCity__control-btn {
    padding: 0.625rem;
    min-width: 44px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .lg-unified-header__right {
    gap: 0.5rem;
  }

  .hkCity__hud {
    min-width: 140px;
    font-size: 0.875rem;
  }

  .hkCity__time {
    font-size: 1.25rem;
  }

  .lg-hudbtn {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }
}

/* ============================================
   暗色模式支持
============================================ */
@media (prefers-color-scheme: dark) {
  .hkCity__hud,
  .lg-unified-header,
  .hkCity__controls {
    background: rgba(17, 24, 39, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .hkCity__hud-title,
  .hkCity__time,
  .lg-progress-label,
  .lg-pill,
  .hkCity__control-btn {
    color: #f3f4f6;
  }

  .hkCity__date {
    color: #9ca3af;
  }

  .lg-back-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #f3f4f6;
  }

  .lg-back-btn:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .lg-pill {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .hkCity__control-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .hkCity__control-btn:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .lg-progress-bar {
    background: rgba(255, 255, 255, 0.1);
  }
}
/* === Content Sections === */
.littleg-content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.littleg-hero {
  text-align: center;
  padding: 3rem 0 2rem;
}



.gfun-balance-section {
  padding: 2rem 0;
}

.gfun-balance-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.gfun-balance-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1.5rem;
  text-align: center;
}

.gfun-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.gfun-stat {
  text-align: center;
  padding: 1rem;
  background: #f8fafc;
  border-radius: var(--radius-lg);
}

.gfun-stat-value {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}
.littleg-cle {
  padding: 2rem;
  background: #f8fafc;
  border-radius: var(--radius-lg);
  text-align: center;
}

.littleg-cle__empty {
  color: #64748b;
  font-size: 0.875rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 RESPONSIVE DESIGN
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  /* HUD 調整 */
  .hkCity__hud {
    top: 15px;
    left: 15px;
    padding: 16px 20px;
    min-width: 200px;
  }

  .hkCity__hud-title {
    font-size: 12px;
  }

  .hkCity__time {
    font-size: 32px;
  }

  .hkCity__date {
    font-size: 14px;
  }

  .hkCity__period {
    font-size: 12px;
    padding: 6px 12px;
  }

  /* 控制按鈕調整 */
  .hkCity__controls {
    bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    max-width: calc(100% - 30px);
  }

  .hkCity__control-btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  /* Overlay 調整 */
  .hkCity__overlay {
    padding: 20px 15px;
  }

  .hkCity__overlay-close {
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  /* HUD 調整 */
  .hkCity__hud {
    top: 10px;
    left: 10px;
    padding: 14px 18px;
    min-width: 180px;
  }

  .hkCity__time {
    font-size: 28px;
  }

  .hkCity__date {
    font-size: 13px;
  }

  /* 控制按鈕調整 */
  .hkCity__controls {
    bottom: 15px;
    gap: 5px;
    padding: 8px;
  }

  .hkCity__control-btn {
    padding: 8px 12px;
    font-size: 12px;
    flex: 1 1 calc(33.33% - 5px);
    min-width: 80px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ⚡ PERFORMANCE OPTIMIZATION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hkCity__hud,
.hkCity__overlay,
.hkCity__controls,
.hkCity__control-btn {
  will-change: transform, opacity;
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🌓 DARK MODE SUPPORT (Optional)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (prefers-color-scheme: light) {
  .hkCity__hud,
  .hkCity__controls {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.15);
  }

  .hkCity__hud-title {
    color: rgba(0, 0, 0, 0.7);
  }

  .hkCity__date {
    color: rgba(0, 0, 0, 0.8);
  }

  .hkCity__control-btn {
    color: rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
  }

  .hkCity__control-btn:hover {
    background: rgba(0, 0, 0, 0.1);
  }
}
    /* 分享卡片 */
    .hkShareCard {
      position: relative;
      width: 100%;
      max-width: 600px;
      margin: 0 auto 20px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    .hkShareCard__canvas {
      width: 100%;
      height: auto;
      display: block;
    }

    .hkShareCard__actions {
      display: flex;
      gap: 12px;
      margin-top: 16px;
    }

    .hkShareCard__btn {
      flex: 1;
      padding: 12px 20px;
      border: none;
      border-radius: var(--radius-lg);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .hkShareCard__btn--download {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: white;
    }

    .hkShareCard__btn--download:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    }

    .hkShareCard__btn--copy {
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      color: white;
    }

    .hkShareCard__btn--copy:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

    .hkShareCard__btn--twitter {
      background: linear-gradient(135deg, #1da1f2 0%, #0c85d0 100%);
      color: white;
    }

    .hkShareCard__btn--twitter:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(29, 161, 242, 0.4);
    }
  }