/* ============================================================
   intro-premium.css — 首頁高級感升級覆蓋層
   使用方式：在 index.html 的 </head> 前加一行：
   <link rel="stylesheet" href="./intro-premium.css">
   不需要動原本的 styles.css
   ============================================================ */


/* ── 1. Aurora：顏色更深、更飽和 ── */
#introScreen {
  --intro-aurora-opacity: 0.62;
  --intro-aurora-blur: 60px;
  --intro-aurora-speed-a: 8s;
  --intro-aurora-speed-b: 11s;
  --intro-aurora-speed-c: 14s;
  --intro-aurora-violet: rgba(78, 72, 198, 0.5);
  --intro-aurora-yellow: rgba(176, 146, 36, 0.3);
  --intro-aurora-orange: rgba(158, 96, 30, 0.28);
  --intro-aurora-cyan: rgba(50, 142, 168, 0.24);
}


/* ── 2. 標題：更緊的字間距 + 極細光暈 ── */
#introScreen .intro-title {
  letter-spacing: -0.072em;
  font-weight: 700;
  text-shadow:
    0 0 48px rgba(255, 255, 255, 0.16),
    0 0 96px rgba(170, 150, 255, 0.10);
}


/* ── 3. 說明文字：層次更分明 ── */
#introScreen .intro-copy-lead {
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: -0.025em;
}

#introScreen .intro-copy-subtle {
  color: rgba(255, 255, 255, 0.40);
  font-size: clamp(10px, 1.48svh, 11px);
}


/* ── 4. 主按鈕：更深的玻璃質感 ── */
#introScreen .intro-mode-card-primary {
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.072) 0%,
      rgba(255, 255, 255, 0.018) 100%
    ),
    rgba(14, 20, 34, 0.97);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 26px 60px rgba(0, 0, 0, 0.40),
    0 6px 18px rgba(0, 0, 0, 0.22);
}

#introScreen .intro-mode-card-primary .intro-mode-card-icon {
  background:
    linear-gradient(148deg,
      rgba(255, 255, 255, 0.15),
      rgba(255, 255, 255, 0.05)
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}


/* ── 5. 次級按鈕：更純淨的深色玻璃 ── */
#introScreen .intro-mode-card {
  border-color: rgba(200, 215, 245, 0.11);
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.042) 0%,
      rgba(255, 255, 255, 0.012) 100%
    ),
    rgba(11, 17, 30, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 16px 36px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#introScreen .intro-mode-card-secondary {
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.028) 0%,
      rgba(255, 255, 255, 0.008) 100%
    ),
    rgba(10, 15, 26, 0.90);
  border-color: rgba(200, 215, 245, 0.088);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.038),
    0 10px 24px rgba(0, 0, 0, 0.22);
}

#introScreen .intro-mode-card-secondary .intro-mode-card-icon {
  background: rgba(255, 255, 255, 0.055);
}


/* ── 6. 「開始」箭頭標籤更精緻 ── */
#introScreen .intro-mode-card-arrow {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.70);
  font-size: 10.5px;
  letter-spacing: 0.01em;
}


/* ── 7. hover 動效更有重量 ── */
#introScreen .intro-mode-card:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 32px 72px rgba(0, 0, 0, 0.48),
    0 8px 22px rgba(0, 0, 0, 0.28);
}

#introScreen .intro-mode-card-primary:not(:disabled):hover {
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0.024) 100%
    ),
    rgba(14, 20, 34, 0.95);
}

#introScreen .intro-mode-card-secondary:not(:disabled):hover {
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.012) 100%
    ),
    rgba(10, 15, 26, 0.92);
}

#introScreen .intro-mode-card:not(:disabled):active {
  transform: translateY(0px) scale(0.988);
  transition-duration: 0.08s;
}

#introScreen .intro-mode-card-primary:not(:disabled):active {
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.062) 0%,
      rgba(255, 255, 255, 0.018) 100%
    ),
    rgba(12, 18, 30, 0.96);
}

#introScreen .intro-mode-card-secondary:not(:disabled):active {
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.01) 100%
    ),
    rgba(9, 14, 24, 0.94);
}


/* ── 8. 排行榜按鈕更精緻 ── */
#introScreen .intro-link-button {
  border-color: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.50);
  letter-spacing: 0.025em;
  font-size: 11px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

#introScreen .intro-link-button:hover {
  color: rgba(255, 255, 255, 0.74);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
}


/* ── 9. 品牌標記更收斂 ── */
#introScreen .intro-brand-mark {
  opacity: 0.72;
}

#introScreen .intro-brand-caption {
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.14em;
  font-size: 9px;
}


/* ── 10. 統計卡片（有進度時）更精緻 ── */
#introScreen .intro-stat {
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    );
  border-color: rgba(255, 255, 255, 0.092);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.058);
}

#introScreen .intro-stat-label {
  color: rgba(255, 255, 255, 0.38);
}

#introScreen .intro-stat-value {
  color: rgba(255, 255, 255, 0.92);
}


/* ── 11. 繼續進度按鈕 ── */
#introScreen .resume-session-btn {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.018)
    );
}

#introScreen .resume-session-btn:hover {
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.076),
      rgba(255, 255, 255, 0.032)
    );
  border-color: rgba(255, 255, 255, 0.20);
}