/* =========================================================
   首頁大廳專屬樣式
   ========================================================= */

.elvis-hero {
  text-align: center;
  padding: var(--space-8) var(--space-4) var(--space-6);
  position: relative;
}

.elvis-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255,209,102,0.12);
  color: var(--neon-gold);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: var(--space-4);
  border: 1px solid rgba(255,209,102,0.3);
}

.elvis-hero__title {
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}
.elvis-hero__title--accent {
  background: linear-gradient(90deg, var(--neon-purple), var(--neon-cyan), var(--neon-pink));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: elvis-gradient-shift 4s linear infinite;
}
@keyframes elvis-gradient-shift {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.elvis-hero__subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto var(--space-6);
}

.elvis-hero__cta-row {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== 狀態列（.elvis-status-chip 本身已搬移至 components.css，
   因為此元件同時被 home.js 與 profile.js 共用，屬於跨頁面共用元件，
   不應只存在於首頁專屬的 home.css，否則其他頁面若忘記額外引入
   home.css，會導致 SVG 圖示失去尺寸限制、以原始比例撐版）===== */
.elvis-status-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

/* ===== Section 共用 ===== */
.elvis-section { margin-bottom: var(--space-8); }
.elvis-section__head { margin-bottom: var(--space-5); text-align: center; }
.elvis-section__head h2 { font-size: 1.6rem; margin-bottom: var(--space-1); }
.elvis-section__head p { color: var(--text-secondary); margin: 0; }

/* ===== 每日挑戰卡 ===== */
.elvis-daily-card { display: flex; flex-direction: column; gap: var(--space-3); }
.elvis-daily-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
}
.elvis-daily-item__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-surface-3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.elvis-daily-item__icon svg { width: 20px; height: 20px; color: var(--neon-gold); }
.elvis-daily-item__body { flex: 1; }
.elvis-daily-item__text { font-weight: 600; font-size: 0.95rem; }
.elvis-daily-item__progress { margin-top: 6px; }
.elvis-daily-item.is-done { opacity: 0.6; }
.elvis-daily-item.is-done .elvis-daily-item__text { text-decoration: line-through; }
.elvis-daily-item__check { color: var(--neon-green); flex-shrink: 0; }
.elvis-daily-item__check svg { width: 22px; height: 22px; }

/* ===== AI 圖鑑格 ===== */
.elvis-ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
}

/* =========================================================
   V21新增：Hero版宿敵卡（修改建議書第9項「首頁改成遊戲大廳」完整版）
   見 js/components/nemesisCard.js 的 renderHeroInto()。
   .elvis-hero 本身（置中文案版）樣式維持不變，套用 --nemesis 修飾字
   後改為靠左的大版面對戰卡佈局，呼應建議書首頁範例「頭像＋台詞＋
   戰績＋復仇進度＋主CTA」一次到位的視覺分量。
   ========================================================= */
.elvis-hero--nemesis {
  text-align: left;
  background: linear-gradient(135deg, rgba(123,92,255,0.14), rgba(255,92,122,0.08));
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
}

.elvis-nemesis-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255,92,122,0.14);
  color: var(--neon-pink);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: var(--space-4);
  border: 1px solid rgba(255,92,122,0.35);
}

.elvis-nemesis-hero__main {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.elvis-nemesis-hero__portrait {
  width: 104px; height: 104px;
  flex-shrink: 0;
  border-radius: 26px;
  background: var(--bg-surface-2);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border-glow);
  box-shadow: 0 0 24px rgba(123,92,255,0.35);
}
/* V25：與 .elvis-nemesis-card__portrait 同步改為滿框圓角方形呈現 */
.elvis-nemesis-hero__portrait svg { width: 100%; height: 100%; display: block; }

.elvis-nemesis-hero__info { flex: 1; min-width: 240px; }

.elvis-nemesis-hero__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  margin-bottom: var(--space-2);
}
.elvis-nemesis-hero__name span {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

.elvis-nemesis-hero__quote {
  font-size: 1.05rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: var(--space-3);
}

.elvis-nemesis-hero__stats {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.elvis-nemesis-hero__stats b { color: var(--text-primary); font-size: 1.1rem; }

.elvis-nemesis-hero__revenge {
  font-size: 0.95rem;
  color: var(--neon-gold);
  font-weight: 600;
}

@media (max-width: 640px) {
  .elvis-hero--nemesis { text-align: center; }
  .elvis-nemesis-hero__main { justify-content: center; text-align: center; }
  .elvis-nemesis-hero__stats { justify-content: center; }
}