/* =========================================================
   共用元件：按鈕、卡片、遊戲入口卡、AI角色卡（六角形語言）
   ========================================================= */

/* ===== 按鈕 ===== */
.elvis-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--neon-purple), #5B3DE0);
  box-shadow: 0 6px 0 #4A2FB8, var(--glow-purple);
  transition: transform var(--transition-bounce), box-shadow var(--transition-fast);
}
.elvis-btn:hover { transform: translateY(-3px) scale(1.03); }
.elvis-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #4A2FB8; }
.elvis-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.elvis-btn--secondary {
  background: var(--bg-surface-2);
  box-shadow: 0 6px 0 #0c0a1e;
  color: var(--text-primary);
  border: 1px solid var(--border-soft);
}
.elvis-btn--secondary:active { box-shadow: 0 2px 0 #0c0a1e; }

.elvis-btn--sm { padding: 8px 18px; font-size: 0.85rem; border-radius: var(--radius-sm); box-shadow: 0 4px 0 #4A2FB8; }

.elvis-btn svg { width: 20px; height: 20px; }

/* ===== 卡片基底 ===== */
.elvis-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

/* ===== 五大遊戲入口卡 ===== */
.elvis-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

.elvis-game-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  overflow: hidden;
  transition: transform var(--transition-bounce), border-color var(--transition-fast);
  cursor: pointer;
  isolation: isolate;
}
.elvis-game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, var(--card-glow, var(--neon-purple)) 0%, transparent 60%);
  opacity: 0.15;
  transition: opacity var(--transition-fast);
  z-index: -1;
}
.elvis-game-card:hover {
  transform: translateY(-8px) rotate(-1deg);
  border-color: var(--card-glow, var(--neon-purple));
}
.elvis-game-card:hover::before { opacity: 0.3; }

.elvis-game-card__icon {
  width: 96px; height: 96px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  animation: elvis-float 3.5s ease-in-out infinite;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
/* V25：新版SVG圖示自帶滿框圓角底圖，故容器移除舊有padding限制，
   讓插畫本身撐滿卡片，不再讓圖示縮小置中留白 */
.elvis-game-card__icon svg { width: 100%; height: 100%; display: block; }
@keyframes elvis-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

.elvis-game-card__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-bottom: var(--space-1);
}
.elvis-game-card__tagline {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
}
.elvis-game-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--card-glow, var(--neon-purple));
}
.elvis-game-card__cta svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.elvis-game-card:hover .elvis-game-card__cta svg { transform: translateX(6px); }

/* ===== AI 角色卡（六角形語言，呼應品牌Logo）===== */
.elvis-ai-card {
  position: relative;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  border: 1px solid var(--border-soft);
  transition: transform var(--transition-bounce);
}
.elvis-ai-card:hover { transform: translateY(-6px); }
.elvis-ai-card__portrait {
  width: 100px; height: 100px;
  margin: 0 auto var(--space-3);
  border-radius: 22px;
  background: var(--bg-surface-3);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
/* V25：AI角色圖示已升級為滿框插畫（含自身背景與光暈），
   移除六角形裁切與內距，改用圓角方形完整呈現臉部細節 */
.elvis-ai-card__portrait svg { width: 100%; height: 100%; display: block; }
.elvis-ai-card__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 2px;
}
.elvis-ai-card__meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.elvis-ai-card__locked {
  position: absolute;
  inset: 0;
  background: rgba(14,12,36,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: var(--space-3);
  text-align: center;
}
.elvis-ai-card__locked svg { width: 32px; height: 32px; opacity: 0.6; }

/* V20新增：AI圖鑑收集頁的個別戰績顯示（見profile.js renderAICollection()）。
   刻意用中性的text-secondary而非勝/敗分色強調，因為這裡是「圖鑑總覽」，
   視覺重點應保留在AI角色本身；戰績的情緒強調（復仇CTA的紅橘警示色）
   已經在首頁宿敵卡片／對戰結算畫面做過了，圖鑑頁只需要如實呈現數字。 */
.elvis-ai-card__record {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.elvis-difficulty-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.elvis-difficulty-badge--EASY { background: rgba(0,226,138,0.15); color: var(--neon-green); }
.elvis-difficulty-badge--NORMAL { background: rgba(0,212,255,0.15); color: var(--neon-cyan); }
.elvis-difficulty-badge--HARD { background: rgba(255,107,157,0.15); color: var(--neon-pink); }
.elvis-difficulty-badge--BOSS { background: rgba(255,92,122,0.2); color: var(--neon-red); }

/* ===== 進度條（等級/生命值共用）===== */
.elvis-progress {
  width: 100%;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-3);
  overflow: hidden;
  position: relative;
}
.elvis-progress__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--neon-purple), var(--neon-cyan));
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.elvis-progress__fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: elvis-shimmer 2s linear infinite;
}
@keyframes elvis-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.elvis-progress--hp .elvis-progress__fill { background: linear-gradient(90deg, var(--neon-green), #00A868); }
.elvis-progress--hp-danger .elvis-progress__fill { background: linear-gradient(90deg, var(--neon-red), #C7002E); }

/* ===== 選項按鈕（答題用）===== */
.elvis-option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (max-width: 560px) {
  .elvis-option-grid { grid-template-columns: 1fr; }
}
.elvis-option {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  border: 2px solid var(--border-soft);
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.elvis-option:hover:not(:disabled) {
  border-color: var(--neon-cyan);
  transform: translateY(-2px);
}
.elvis-option:disabled { cursor: default; }
.elvis-option.is-correct {
  border-color: var(--neon-green);
  background: rgba(0,226,138,0.15);
  animation: elvis-pop var(--transition-bounce);
}
.elvis-option.is-wrong {
  border-color: var(--neon-red);
  background: rgba(255,92,122,0.15);
}
@keyframes elvis-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ===== 空狀態 ===== */
.elvis-empty {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--text-muted);
}
.elvis-empty svg { width: 64px; height: 64px; margin-bottom: var(--space-3); opacity: 0.5; }

/* ===== 狀態統計卡片（.elvis-status-chip）=====
   V11修正：原本定義在 css/home.css，但此元件同時被首頁（js/pages/home.js）與
   個人成就頁（js/pages/profile.js）共用。profile.html 並未引入 home.css，
   導致 profile 頁面的四個統計圖示（等級/段位/戰績/最高連擊）完全沒有
   .elvis-status-chip__icon svg 的尺寸限制（width/height:26px），SVG 直接以
   內部原始 viewBox 比例撐開顯示，才會出現整頁巨大圖示、版面嚴重跑版的問題。
   搬移到這裡（真正共用的元件樣式表），確保任何有引入 components.css 的頁面
   使用這個元件都能正常顯示，不必額外記得引入 home.css。 */
.elvis-status-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.elvis-status-chip__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
}
.elvis-status-chip__icon svg { width: 26px; height: 26px; }
.elvis-status-chip__body { flex: 1; min-width: 0; }
.elvis-status-chip__label { font-size: 0.75rem; color: var(--text-muted); }
.elvis-status-chip__value { font-family: var(--font-display); font-size: 1.1rem; }

/* ===== V19新增：AI 賽後教練卡片（規格書第7項）=====
   共用元件，插入各遊戲結算畫面的 #coachAnalysisMount。放在 components.css
   （而非各遊戲各自的css檔）是因為四個遊戲頁面（AI對決/急速競技/腦力工廠/
   字詞迷城）都會用到，components.css 是全站共用元件樣式表，所有遊戲頁面
   都已經有引入，不需要額外加 <link>。視覺沿用既有 tokens（不新增顏色/圓角/
   間距規格），符合規格書第9項「保持目前視覺風格」的原則。 */
.elvis-coach-card {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  text-align: left;
}
.elvis-coach-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--neon-gold);
  margin-bottom: var(--space-3);
}
.elvis-coach-card__header svg { width: 22px; height: 22px; }
.elvis-coach-card__score {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.elvis-coach-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.elvis-coach-tag {
  background: var(--bg-surface-3);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.elvis-coach-focus {
  font-size: 0.88rem;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.elvis-coach-streak-warning {
  font-size: 0.85rem;
  color: var(--neon-red);
  background: rgba(255,92,122,0.1);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.elvis-coach-suggestion {
  font-size: 0.88rem;
  color: var(--neon-cyan);
}

/* =========================================================
   V20新增：AI宿敵系統共用樣式（修改建議書第1、2、3、9項）
   同樣放在components.css（全站共用元件樣式表），供以下位置使用：
   - #battleIntelMount（AI對決結算畫面「戰鬥情報」卡，見aiBattle.js）
   - 首頁「我的宿敵」卡片（見home.js／nemesisCard.js）
   沿用既有色彩token（--neon-red代表警示/危機、--neon-gold代表強調），
   不引入新的視覺語言，維持與AI賽後教練卡一致的卡片語彙（同樣的圓角/
   間距/邊框風格），讓玩家一眼就能辨認「這是同一套系統的一部分」。
   ========================================================= */

/* ===== 戰鬥情報卡（結算畫面，僅輸了才顯示）===== */
.elvis-intel-card {
  background: rgba(255,92,122,0.08);
  border: 1px solid rgba(255,92,122,0.35);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  text-align: left;
}
.elvis-intel-card__header {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--neon-red);
  margin-bottom: var(--space-2);
}
.elvis-intel-card__body {
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.5;
}

/* ===== 復仇按鈕強調樣式（輸了時的主CTA，見aiBattle.js endBattle()）===== */
.elvis-btn--revenge {
  background: linear-gradient(135deg, var(--neon-red), #FF8A3D);
  box-shadow: 0 0 20px rgba(255,92,122,0.5);
  animation: elvis-revenge-pulse 1.6s ease-in-out infinite;
}
@keyframes elvis-revenge-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255,92,122,0.4); }
  50% { box-shadow: 0 0 28px rgba(255,92,122,0.7); }
}

/* ===== 首頁「我的宿敵」卡片（見js/components/nemesisCard.js）=====
   置於Hero區之後、遊戲入口之前，是首頁第一個「玩家狀態相關」內容，
   目的是讓玩家一進站就看到「有一個具體對手在等你」，呼應修改建議書
   第9項「首頁改成遊戲大廳」的精神，但刻意只新增一張卡片、不重寫整個
   首頁版面（風險與工作量都大幅降低，且不影響既有的六大遊戲入口／
   每日挑戰／AI圖鑑等區塊的既有版位與資料串接）。*/
.elvis-nemesis-card {
  background: linear-gradient(135deg, rgba(123,92,255,0.12), rgba(255,92,122,0.08));
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.elvis-nemesis-card__portrait {
  width: 76px; height: 76px;
  flex-shrink: 0;
  border-radius: 20px;
  background: var(--bg-surface-2);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border-glow);
}
/* V25：AI角色圖示已自帶滿框背景與光暈，改用圓角方形完整呈現，
   避免舊版圓形裁切把插畫的邊角細節（如天線、耳翼）切掉 */
.elvis-nemesis-card__portrait svg { width: 100%; height: 100%; display: block; }
.elvis-nemesis-card__body { flex: 1; min-width: 200px; }
.elvis-nemesis-card__label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.elvis-nemesis-card__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-bottom: 4px;
}
.elvis-nemesis-card__quote {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  font-style: italic;
}
.elvis-nemesis-card__stats {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.elvis-nemesis-card__recent { display: inline-flex; gap: 2px; letter-spacing: 1px; }
.elvis-nemesis-card__revenge {
  font-size: 0.85rem;
  color: var(--neon-gold);
  margin-top: var(--space-2);
}
.elvis-nemesis-card__cta { flex-shrink: 0; }
.elvis-nemesis-card--empty {
  text-align: center;
  justify-content: center;
}
.elvis-nemesis-card--empty .elvis-nemesis-card__body { text-align: center; }

/* ===== V23新增：BOSS對決「出題角色」徽章（修改建議書第6項後半） ===== */
/* 呼應弱項攻擊/陷阱題/BOSS題三種出題角色（"normal"角色刻意不設計徽章樣式，
   維持一般題目的簡潔，見 aiBattle.js 的 BOSS_ROLE_LABEL）。 */
.elvis-boss-role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-left: var(--space-2);
}
.elvis-boss-role-badge.is-weak { background: rgba(255,107,157,0.15); color: var(--neon-pink); }
.elvis-boss-role-badge.is-trap { background: rgba(255,196,0,0.15); color: var(--neon-gold); }
.elvis-boss-role-badge.is-boss {
  background: rgba(255,92,122,0.22);
  color: var(--neon-red);
  animation: elvis-boss-role-pulse 1.4s ease-in-out infinite;
}
@keyframes elvis-boss-role-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}