/**
 * Magic Sticker — Brand CSS
 *
 * 品牌設計 Token 與共用元件。
 * 所有 Firebase Hosting 靜態頁面均引入此檔，確保視覺一致性。
 *
 * 對應規範：docs/DESIGN_GUIDE.md
 */

/* ─── 品牌色彩 Token ─────────────────────────────────────────────────────── */

:root {
  --brand-start:    #FD297B;   /* 珊瑚粉（漸層起點） */
  --brand-end:      #FF655B;   /* 暖紅（漸層終點） */
  --brand-mid:      #FF5864;   /* 中間色（三色漸層用） */
  --brand-gradient: linear-gradient(135deg, #FD297B 0%, #FF655B 100%);

  --text-primary:   #21262E;
  --text-secondary: #71768A;
  --surface:        #F2F2F7;
  --divider:        #E8E8E8;

  --radius-card:    16px;
  --radius-glass:   24px;
  --radius-btn:     14px;
  --radius-pill:    99px;

  --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}

/* ─── 全頁漸層版型（download / challenge 頁共用）───────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-base);
  background: var(--brand-gradient);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #fff;
}

/* Glassmorphism 卡片 */
.card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-glass);
  padding: 32px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}

.emoji { font-size: 56px; margin-bottom: 16px; display: block; }
h1 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }

/* ─── Responsive breakpoints ────────────────────────────────────────────── */

/* 小手機（< 380px，例如 iPhone SE） */
@media (max-width: 379px) {
  body { padding: 16px; }
  .card { padding: 28px 18px; border-radius: 20px; }
  .emoji { font-size: 48px; }
  h1 { font-size: 20px; }
}

/* 平板 / 桌機（≥ 600px） */
@media (min-width: 600px) {
  .card {
    padding: 48px 40px;
    max-width: 440px;
    border-radius: 28px;
  }
  .emoji { font-size: 72px; margin-bottom: 24px; }
  h1 { font-size: 26px; }
  .btn { font-size: 17px; padding: 18px; }
}

/* ─── 按鈕元件 ──────────────────────────────────────────────────────────── */

/* 主要按鈕：白底 + 品牌粉字 */
.btn {
  display: block;
  background: #fff;
  color: var(--brand-start);
  border-radius: var(--radius-btn);
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  width: 100%;
  margin-bottom: 12px;
  font-family: var(--font-base);
}

/* 次要按鈕：透明 + 白框 */
.btn-secondary {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.hint {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 16px;
  line-height: 1.5;
}