/* Global CSS Custom Variables */
:root {
  --bg-gradient-start: #0a0d14;
  --bg-gradient-end: #141923;
  --color-text: #f1f3f9;
  --color-text-muted: #8e9aaf;
  --color-primary: #6366f1; /* Indigo */
  --color-primary-hover: #4f46e5;
  --color-accent: #f59e0b; /* Amber */
  --color-success: #10b981; /* Emerald */
  --color-danger: #ef4444; /* Red */
  
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: rgba(0, 0, 0, 0.25);
  --glass-shadow-lg: rgba(0, 0, 0, 0.4);
  
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* 預設值等於 100vh，在 Telegram 環境裡 app.js 開頁時會用 Telegram WebApp
     提供的 viewportStableHeight 覆寫成「這支手機、這個 Telegram 版本實際能用
     的高度」——100vh 在行動裝置的 WebView 裡常常不準（有沒有展開、系統列
     算不算進去，各機型/版本不一致），直接用 Telegram 自己回報的高度撐滿，
     卡片才會自動吃滿每個人手機實際有的空間，不用猜一個固定值去賭別人的
     手機夠不夠高。 */
  --app-vh: 100vh;
}

/* Generic visibility utility — many toggles in app.js rely on this class
   (audio button, answer-reveal panels, etc.), not just .modal/.toast-notification. */
.hidden {
  display: none !important;
}

/* Telegram Theme Overrides if available */
body.tg-theme {
  background: var(--tg-theme-bg-color, var(--bg-gradient-start));
  color: var(--tg-theme-text-color, var(--color-text));
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior-y: none;
}

html {
}

body {
  font-family: 'Outfit', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(circle at 50% 0%, #1a1e30 0%, var(--bg-gradient-start) 70%);
  background-attachment: fixed;
  color: var(--color-text);
  display: flex;
  justify-content: center;
  line-height: 1.5;
}

/* Core Layout Container */
.app-container {
  width: 100%;
  max-width: 480px;
  height: var(--app-vh);
  display: flex;
  flex-direction: column;
  position: relative;
  background: #0d111d; /* Solid dark background instead of laggy blur */
  border-left: 1px solid var(--glass-border);
  border-right: 1px solid var(--glass-border);
  padding-bottom: 76px; /* Space for bottom tab nav */
  overflow: hidden;
}

/* Views Management */
.app-view {
  display: none;
  flex-direction: column;
  flex: 1;
  padding: 20px 10px;
  animation: fadeIn var(--transition-normal);
}

.app-view.active {
  display: flex;
}

/* Landing / 登入畫面（見 index.html #view-landing）：還沒登入時取代 dashboard
   顯示，品牌介紹跟登入按鈕當成一組置中，中間固定間距，不要拉滿到上下兩端。 */
#view-landing.active {
  justify-content: center;
  gap: 48px;
  text-align: center;
}

.landing-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.landing-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
  object-fit: cover;
  margin-bottom: 8px;
}

.landing-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #a5b4fc 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-subtitle {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.landing-desc {
  color: #cdd5e0;
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 0 4px;
}

.landing-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.landing-login-subtitle {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.landing-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.landing-divider::before,
.landing-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--glass-border);
}

#landing-telegram-widget,
#landing-g-signin {
  min-height: 40px;
  max-width: 100%;
  overflow: hidden;
}

#landing-login-error {
  color: var(--color-danger);
  font-size: 0.85rem;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar styling */
.scrollable {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: none; /* 避免拉到底/拉過頭時把捲動效果傳給外層，並且在手機上避免拉伸感 */
  flex: 1;
  min-height: 0; /* 讓 flex:1 真正依父層剩餘空間收縮，而不是被內容撐開 */
  max-height: calc(var(--app-vh) - 160px);
  padding-right: 4px;
  padding-bottom: 24px; /* 捲到底時最後一項留點呼吸空間，不會貼著底部導覽列 */
}

.scrollable::-webkit-scrollbar {
  width: 4px;
}
.scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.scrollable::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

/* Common Header */
.app-header, .view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}

.view-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* User Profile Header */
.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.avatar-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  overflow: hidden;
}

.avatar-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.user-greeting {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.user-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
}

.currency-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-name {
  font-size: 1.15rem;
  font-weight: 600;
}

.user-diamonds,
.user-coins {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-accent);
}

.btn-exchange-coins {
  border: 1px solid rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-accent);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.btn-exchange-coins:active {
  background: rgba(245, 158, 11, 0.2);
}

.btn-currency-info {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--color-text-muted);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.btn-currency-info:active {
  background: rgba(255, 255, 255, 0.08);
}

/* Streak Badge */
.streak-badge {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 20px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08);
}

.streak-value {
  font-weight: 700;
  color: var(--color-accent);
}

.streak-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Dashboard Progress Circular */
.claire-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
  margin-bottom: 16px;
}

.claire-intro-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.claire-intro-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #ffffff;
}

.progress-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--glass-shadow);
}

.progress-title {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.circle-progress-container {
  position: relative;
  width: 140px;
  height: 140px;
  margin-bottom: 20px;
}

.circle-progress {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.03);
  stroke-width: 8;
}

.circle-bar {
  fill: none;
  stroke: url(#progress-gradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 314;
  stroke-dashoffset: 314;
  transition: stroke-dashoffset 1s ease-out;
}

/* Injected SVG Gradient in JS if needed or CSS fallback */
.circle-bar {
  stroke: var(--color-primary);
}

.circle-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.circle-label .number {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}

.circle-label .text {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.status-grid {
  display: flex;
  width: 100%;
  border-top: 1px solid var(--glass-border);
  padding-top: 16px;
}

.status-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-num {
  font-size: 1.25rem;
  font-weight: 700;
}

.status-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.border-left {
  border-left: 1px solid var(--glass-border);
}

.text-success { color: var(--color-success); }
.text-accent { color: var(--color-accent); }

/* Buttons */
.btn {
  font-family: inherit;
  border-radius: var(--radius-md);
  border: none;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), #5a5eed);
  color: #fff;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.btn-secondary {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
}

.btn-secondary:active {
  background: rgba(255, 255, 255, 0.08);
}

.btn-danger {
  background: var(--color-danger);
  color: #fff;
}

.btn-danger:active {
  background: #d33d3d;
}

.confirm-modal-content {
  max-width: 320px;
  text-align: center;
}

.confirm-modal-message {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
  white-space: pre-line;
}

/* 鑽石／金幣說明是兩段較長的說明文字，跟其他短句確認訊息不同，靠左排比置中好讀 */
#currency-info-modal .confirm-modal-message {
  text-align: left;
}

.confirm-modal-actions {
  display: flex;
  gap: 12px;
}

.confirm-modal-actions .btn {
  flex: 1;
  padding: 16px 0;
}

/* 比照 .confirm-modal-actions／.game-result-actions 的做法：兩顆按鈕併排
   各佔一半寬度，而不是各自滿版疊兩層——疊兩層滿版即使字級/padding調小，
   視覺份量還是很重，併排才是其他「一次兩顆按鈕」畫面真正在用的做法 */
.manage-cards-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.manage-cards-actions .btn {
  flex: 1;
  padding: 16px 0;
}

/* 管理／預覽卡片：右側浮動捲動鍵（到最上/往上/往下/到最下），卡片一多就不用
   一路滑手指。position absolute 是相對 .app-container（position: relative +
   overflow: hidden 的固定尺寸外殼），不用 fixed——手機版滿版時跟桌機置中版
   兩種情況下都會正確貼齊卡片外殼右側，不會跑到畫面外。 */
.scroll-fab-group {
  position: absolute;
  right: 2px;
  bottom: 92px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
}

.scroll-fab {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--color-accent);
  color: var(--color-text);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: all var(--transition-fast);
}

.scroll-fab:active {
  transform: scale(0.92);
  background: #d98b09;
}

.btn-lg {
  padding: 16px 28px;
  width: 100%;
  font-size: 1.05rem;
  border-radius: var(--radius-md);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
}

.btn-icon-only {
  background: var(--color-accent);
  border: 1px solid var(--glass-border);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
}

.btn-icon-only:active {
  background: #d98b09;
}

.btn-icon-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}

.btn-icon-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn-icon-ghost:active {
  background: rgba(255, 255, 255, 0.25);
}

.w-100 { width: 100%; }

/* Pulse & Shimmer animation for CTA button */
.pulse-animation {
  position: relative;
  overflow: hidden;
  animation: pulse-breathe 3s infinite ease-in-out;
}

.pulse-animation::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  animation: shimmer 6s infinite ease-in-out;
}

@keyframes pulse-breathe {
  0% {
    transform: scale(0.96);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4), 0 0 0 0 rgba(99, 102, 241, 0.6);
  }
  50% {
    transform: scale(1);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.6), 0 0 0 12px rgba(99, 102, 241, 0);
  }
  100% {
    transform: scale(0.96);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4), 0 0 0 0 rgba(99, 102, 241, 0);
  }
}

@keyframes shimmer {
  0% { left: -150%; }
  25% { left: 150%; }
  100% { left: 150%; }
}

/* Quick Nav Cards */
.quick-nav-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 24px;
}

.nav-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--glass-shadow);
}

.nav-card:active {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.nav-card.disabled {
  opacity: 0.4;
}

.nav-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.bg-violet-tint { background: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.2); }
.bg-amber-tint { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.2); }
.bg-blue-tint { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.2); }
.bg-red-tint { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.2); }
.bg-green-tint { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.2); }

.nav-card-info {
  flex: 1;
}

.nav-card-title {
  font-weight: 600;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.nav-card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 公開挑戰／召喚魔王獲勝拿鑽石，自我測驗／生存挑戰／尋寶挑戰拿金幣，
   各標一個小圖示區分兩種獎勵 */
.diamond-reward-badge,
.coin-reward-badge {
  font-size: 0.8rem;
  line-height: 1;
  cursor: default;
  flex-shrink: 0;
}

.nav-card-desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* 遊戲選單每張卡片秀「目前這個遊戲分數最高的人」，見 app.js::loadGameTopScores。
   跟標題／金幣或鑽石獎勵圖示同一列，margin-left: auto 把它推到最右邊，
   跟左邊的標題之間留出空白，不佔用說明文字那一列。 */
.nav-card-topscore {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-left: 8px;
  min-width: 0;
  font-size: 0.7rem;
  color: var(--color-accent);
}

.nav-card-topscore-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-card-topscore-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
  overflow: hidden;
}

.nav-card-topscore-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 遊戲選單／排行榜分頁切換 --- */
.games-tab-row {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}

.games-tab-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.games-tab-btn.selected {
  background: var(--color-primary);
  color: #fff;
}

/* --- 排行榜面板 --- */
.leaderboard-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lb-filter-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.lb-filter-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-filter-btn.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.lb-period-row {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.lb-period-btn {
  padding: 4px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.lb-period-btn.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.lb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lb-empty {
  text-align: center;
  padding: 32px 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.lb-rank-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.lb-rank-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.lb-rank-item:first-child .lb-rank-num {
  background: var(--color-accent);
  color: #fff;
}

.lb-rank-item:nth-child(2) .lb-rank-num {
  background: rgba(168, 85, 247, 0.6);
  color: #fff;
}

.lb-rank-item:nth-child(3) .lb-rank-num {
  background: rgba(59, 130, 246, 0.6);
  color: #fff;
}

.lb-rank-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  overflow: hidden;
}

.lb-rank-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-rank-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-rank-score {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* 跟 .btn-icon-only（各頁面頂部的 ◀️ 返回鈕）同一組淡橙色圓形樣式，
   縮小尺寸給卡片裡的行內指示用，方向相反（▶️ 進入，◀️ 返回） */
.nav-card-arrow {
  background: var(--color-accent);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* --- STUDY PANEL & FLASHCARD --- */
.view-header .header-center {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.study-deck-title {
  font-size: 1.1rem;
  font-weight: 600;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.study-progress {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.queue-badge {
  background: var(--color-primary);
  color: white;
}

/* .study-content 本身要是 flex column，.flashcard-container 的 flex:1 才會
   真的生效——之前這裡沒有 display:flex，flashcard 就只能吃自己的
   min-height，不會撐滿畫面剩餘空間，長答案就只能在一個很矮的框裡捲動。 */
.study-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* 讓 flex 子元素（flashcard-container）能正確依可用空間收縮/捲動，而不是撐爆容器 */
}

.progress-bar-wrapper {
  background: rgba(255, 255, 255, 0.05);
  height: 6px;
  border-radius: 3px;
  width: 100%;
  margin-bottom: 24px;
  overflow: hidden;
  flex-shrink: 0;
}

.progress-bar {
  background: linear-gradient(90deg, var(--color-primary), #ec4899);
  height: 100%;
  border-radius: 3px;
  width: 0%;
  transition: width var(--transition-normal);
}

/* Deck progress bar (learning/young/mature/unstarted stacked segments) */
.deck-progress-bar {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.05);
}
.deck-progress-segment { height: 100%; transition: width 0.3s; }
.deck-progress-segment.seg-learning { background: #f59e0b; }  /* amber */
.deck-progress-segment.seg-young { background: #3b82f6; }     /* blue */
.deck-progress-segment.seg-mature { background: #22c55e; }    /* green */
.deck-progress-segment.seg-unstarted { background: rgba(255,255,255,0.06); }
.deck-progress-stats {
  display: flex;
  gap: 6px;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
}

/* 3D Flipping Card Container */
.flashcard-container {
  flex: 1;
  perspective: 1000px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 50vh;
  margin-bottom: 0px;
}

.flashcard {
  width: 100%;
  height: 100%;
  min-height: 50vh;
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--transition-slow);
  cursor: pointer;
}

.flashcard.flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--glass-shadow-lg);
}

.btn-star {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.3);
  transition: all var(--transition-fast);
  z-index: 10;
  padding: 8px;
  line-height: 1;
}

.btn-star:hover {
  transform: scale(1.15);
  color: #f59e0b;
}

.btn-star.starred {
  color: #f59e0b;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
  animation: star-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes star-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1.1); }
}

.card-front {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--glass-border);
}

.card-back {
  /* 答案本身不再另外包一層有外框的面板，直接用整個背面卡片的顏色來區別
     題目／答案（比正面的漸層更深一點的靛色，取代原本內層小面板的外框）。 */
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.04));
  border: 1px solid rgba(99, 102, 241, 0.3);
  transform: rotateY(180deg);
}

/* 背面文字改用跟背景呼應的淺靛色（不是純白），視覺上跟正面明確區隔開；
   答案／重複題目用比較亮的靛色，例句用稍微深一點的靛色維持主次區隔。 */
/* 答案第一行（.card-text）維持跟正面一樣的白色（不覆寫），只有例句這段
   用比較淡的靛色跟答案本身區隔。 */
.card-back .card-text-examples {
  color: #a5b4fc;
}

/* 拉近「答案」標籤跟答案文字的距離：margin 要放在可捲動容器本身
   （.card-text-container 在外層），不能放在容器裡面的 .card-text 上——
   放在裡面的話，負 margin 會把文字推到可捲動區域自己的裁切邊界之外，
   答案太長需要捲動時，最上面那行會被裁掉又永遠捲不回去看到。 */
.card-back .card-text-container {
  margin-top: 0;
}

.card-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.card-text-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin: 16px 0;
}

.card-text-container::before,
.card-text-container::after {
  content: "";
  flex: 1 1 0%;
}

.card-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  word-break: break-word;
}

/* 答案卡背面：重複顯示的題目、跟第一行答案都維持跟正面問題一樣的字型
   （直接沿用 .card-text，不再另外縮小/變淡）；例句這類補充內容才用比較小的
   字級，視覺上明確分出主要答案跟次要說明。 */
.card-text-examples {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.5;
  margin-top: 10px;
  width: 100%;
  text-align: left;
  word-break: break-word;
  white-space: pre-line; /* 例句可能不只一行（back 裡有多個 \n），保留換行顯示 */
}

.card-audio-btn-wrapper {
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.audio-disclaimer {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.card-action-hint {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-align: center;
  flex-shrink: 0;
}

.btn-play-audio {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  color: white;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-play-audio:active {
  background: rgba(255, 255, 255, 0.15);
}

/* 按鈕直接放在各自的卡面（.card-front / .card-back）裡面，跟著卡片的 3D
   翻轉一起轉——不再是卡片外面另一塊獨立區域、要用 JS 計時去同步兩者。這樣
   翻面時「哪一面看得到、哪一面的按鈕能按」完全由同一個 transform 決定，
   不會有卡片轉到一半但按鈕已經先切換的不同步問題，卡片大小也不會因為
   按鈕高度不同而跟著變（兩面本來就都是同一個 .flashcard 的 height:100%）。 */
.card-face-controls {
  width: 100%;
  flex-shrink: 0;
  margin-bottom: -8px;
}

/* 背面朝著使用者時，正面（含裡面的按鈕）在視覺上翻到看不見，但預設還是可以
   被點到；這裡明確擋掉，避免翻到答案面時意外點到藏在背後的「顯示答案」，
   翻到正面時同理擋掉自評按鈕。 */
.flashcard:not(.flipped) .card-back .card-face-controls button {
  pointer-events: none;
}

.flashcard.flipped .card-front .card-face-controls button {
  pointer-events: none;
}

.rating-title {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: 6px;
}

.rating-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* 壓縮高度，讓答案面（有這排自評按鈕）跟問題面（只有一顆「顯示答案」按鈕）
   佔用的高度接近，翻面時卡片本身大小才不會跟著變——像真的在翻一張實體卡片。 */
.btn-rating {
  flex-direction: column;
  padding: 6px 6px;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
  font-size: 0.7rem;
  gap: 2px;
}

.rating-emoji {
  font-size: 1.1rem;
  margin-bottom: 0px;
}

.rating-name {
  font-weight: 600;
}

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

.btn-again:active { background: rgba(239, 68, 68, 0.15); border-color: var(--color-danger); }
.btn-hard:active { background: rgba(245, 158, 11, 0.15); border-color: var(--color-accent); }
.btn-good:active { background: rgba(99, 102, 241, 0.15); border-color: var(--color-primary); }
.btn-easy:active { background: rgba(16, 185, 129, 0.15); border-color: var(--color-success); }

/* --- DECKS TAB STYLING --- */
.tabs-header {
  display: flex;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
}

.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 0;
  cursor: pointer;
  border-radius: 8px;
  transition: all var(--transition-fast);
}

.tab-btn.active {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.custom-deck-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.custom-deck-actions .btn-sm {
  white-space: nowrap;
  flex-shrink: 0;
}

.custom-deck-limit-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 4px;
}

.custom-deck-limit {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

.btn-buy-slot {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  color: white;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-buy-slot:active {
  background: rgba(255, 255, 255, 0.15);
}

/* Deck Search Bar */
.deck-search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  position: relative;
}
.deck-search-bar input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.deck-search-bar input::placeholder {
  color: var(--color-text-muted);
}
.deck-search-bar input:focus {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.08);
}
.deck-search-bar .btn-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.deck-search-bar .btn-icon:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.08);
}

/* Deck Cards List */
.deck-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.empty {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 24px 12px;
}

.empty.retry-hint {
  cursor: pointer;
  color: var(--color-danger, #ef4444);
  font-weight: 600;
}

/* 管理卡片頁的空狀態下面接的是 .btn-lg（大按鈕），沿用其他「訊息＋按鈕」畫面
   （例如 .confirm-modal-message）的字級，跟大按鈕的視覺份量搭起來才不會失衡 */
#manage-cards-list .empty {
  font-size: 0.95rem;
  line-height: 1.6;
}

.custom-deck-limit {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}

.deck-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--transition-fast);
}

/* 還沒買的付費卡組：邊框改用跟警告提示同一色系的琥珀色，一眼能跟免費／
   已購買的卡組分開，但不用整張卡背景變色、跟深色玻璃卡片風格保持一致。 */
.deck-item-paid {
  border-color: rgba(245, 158, 11, 0.5);
}

.deck-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.deck-title {
  font-size: 1rem;
  font-weight: 700;
}

.deck-price-inline {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);
}

.deck-tag {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--color-text-muted);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 0.65rem;
}

.deck-desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* 管理／預覽卡片：答案（第一行）跟詳細解釋分開顯示，答案字級稍微亮一點、
   詳細解釋更淡一階，呼應學習卡片背面 card-back-answer/card-text-examples
   的主次區隔。pre-line 讓詳細解釋裡原本的換行（例如多個例句）也能保留。
   正面／背面第一行字級都比卡組列表原本的 .deck-title/.deck-desc 大一點，
   同時把這張卡片內的行距收緊，只縮小這裡（card-preview-item），不影響
   卡組列表本身的排版。 */
.card-preview-item {
  gap: 6px;
}

.card-preview-front {
  font-size: 1.1rem;
}

.card-preview-answer {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.25;
  white-space: pre-line;
}

.card-preview-explain {
  margin-top: 2px;
  line-height: 1.25;
  white-space: pre-line;
}

.deck-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--glass-border);
  padding-top: 12px;
  margin-top: 4px;
}

.deck-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.deck-actions {
  display: flex;
  gap: 8px;
}

/* Modals */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #1a1f2c; /* Solid semi-transparent card instead of laggy blur */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 400px;
  padding: 24px;
  box-shadow: var(--glass-shadow-lg);
  animation: modalIn var(--transition-fast) ease-out;
}

@keyframes modalIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* 自我測驗：選完卡組後跳浮窗選題數 */
.quiz-rounds-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.quiz-rounds-option {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quiz-rounds-option:active {
  transform: scale(0.95);
  background: rgba(99, 102, 241, 0.25);
  border-color: var(--color-primary);
}

/* 取消按鈕改用跟 #confirm-modal-cancel 一致的樣式（.btn-secondary + 同樣的
   padding），跟其他確認浮窗的取消按鈕視覺統一。但這裡只有一顆按鈕、沒有
   併排的「確定」分掉一半寬度，不能直接套 w-100（那樣會變成滿版、比參照的
   取消鍵長很多）——改成固定 50% 寬、置中，比例才會跟 confirm-modal-actions
   裡半寬的取消鍵一致。 */
.quiz-rounds-cancel-wrap {
  display: flex;
  justify-content: center;
}

.quiz-rounds-cancel-wrap .btn {
  width: 50%;
  padding: 16px 0;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.close-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Forms */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.form-group input, .form-group textarea, .form-group select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: white;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: all var(--transition-fast);
}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.08);
}

.form-help {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Settings View：先前 .settings-group / .settings-item / .glass-form
   完全沒有對應的 CSS 規則，等於是瀏覽器預設樣式硬疊在一起，
   這裡補上跟其他頁面一致的玻璃卡片風格（.progress-card / .deck-item 那一套）。 */
.settings-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.settings-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(99, 102, 241, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.settings-card-header label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}

.settings-card input,
.settings-card select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: white;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: all var(--transition-fast);
}

.settings-card input:focus,
.settings-card select:focus {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.08);
}

.settings-card .form-help {
  margin-top: 0;
}

.settings-card .btn-sm:not(.btn-remove-reminder):not(.avatar-option),
.settings-card .btn:not(.btn-remove-reminder):not(.avatar-option) {
  width: 150px !important;
  justify-content: center;
}

/* Help View：說明文字的閱讀舒適度 */
#view-help .settings-card .form-help {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--color-text);
}
/* Push notification toggle */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}

.settings-toggle-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
  width: 150px;
  justify-content: center;
}

.settings-toggle-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  flex: 1;
}

/* Multi-reminder time rows */
.multi-reminder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reminder-time-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reminder-time-input {
  flex: 1;
}

.btn-remove-reminder {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-remove-reminder:hover {
  background: rgba(255, 80, 80, 0.15);
  color: var(--color-danger);
}

.btn-add-reminder {
  margin-top: 8px;
}


.avatar-editor {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.avatar-editor-preview {
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.avatar-editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.avatar-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.avatar-option {
  aspect-ratio: 1;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
}

.avatar-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.avatar-option.selected {
  border-color: var(--color-primary);
  background: rgba(99, 102, 241, 0.2);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

/* --- STATS STYLING --- */
.stats-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}


.stat-box {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px 8px;
  text-align: center;
}

.stat-val {
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
}

.stat-lbl {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.stats-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}

.stats-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.stats-card-header-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.stats-card-header-row .stats-card-title {
  margin-bottom: 0;
}

.stats-range-toggle {
  display: flex;
  gap: 4px;
}

.stats-range-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  padding: 4px 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.stats-range-btn.selected {
  background: rgba(99, 102, 241, 0.2);
  border-color: var(--color-primary);
  color: var(--color-text);
}

.distribution-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dist-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dist-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
}

.dist-label {
  color: var(--color-text-muted);
}

.dist-value {
  font-weight: 600;
}

.bg-new { background: linear-gradient(90deg, #10b981, #34d399); }
.bg-young { background: linear-gradient(90deg, #6366f1, #818cf8); }
.bg-mature { background: linear-gradient(90deg, #a855f7, #c084fc); }

.chart-container {
  width: 100%;
  margin-top: 10px;
}

.activity-chart {
  width: 100%;
  height: auto;
}

/* Toast Alerts */
.toast-notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(99, 102, 241, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 2000;
  transition: all var(--transition-fast);
}

.toast-notification.hidden {
  opacity: 0;
  top: 10px;
  pointer-events: none;
}

.toast-notification.error {
  background: rgba(239, 68, 68, 0.95);
}

/* Loading indicators */
.loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, 0.05);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 40px auto;
}

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

/* Bottom Tab Navigation Bar */
.app-navigation {
  /* fixed（不是 absolute）：定住在螢幕底部，不會隨頁面內容捲動——比照一般手機
     App 的底部導覽列習慣。absolute 是定位在 .app-container 這個外層容器的底部，
     容器變高（例如某個 view 內容較長）時導覽列會跟著被推下去，捲動時就看不到了。 */
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px; /* 跟 .app-container 的寬度上限一致，桌面瀏覽器打開時導覽列才會對齊置中的內容欄，不會撐滿整個視窗寬度 */
  height: 76px;
  background: #0d111d; /* Solid dark bar instead of laggy blur */
  border-top: 1px solid var(--glass-border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
}

.nav-item {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
  padding: 8px 12px;
  border-radius: 12px;
}

.nav-icon {
  font-size: 1.35rem;
  margin-bottom: 4px;
  transition: transform var(--transition-fast);
}

.nav-label {
  font-size: 0.68rem;
  font-weight: 600;
}

.nav-item.active {
  color: var(--color-primary);
}

.nav-item.active .nav-icon {
  transform: translateY(-3px) scale(1.1);
}

/* --- GAMES: menu, deck picker, play view --- */
.game-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  gap: 8px 14px;
}

.game-status-bar .status-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.game-status-bar .lives-display { color: var(--color-danger); letter-spacing: 2px; }
.game-status-bar .combo-display { color: var(--color-accent); }

.game-question-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.game-question-card .question-text {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 16px;
  min-height: 48px;
  text-align: center;
}

.game-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.game-option-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.game-option-btn:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.08);
}

.game-option-btn.correct {
  border-color: var(--color-success);
  background: rgba(16, 185, 129, 0.15);
}

.game-option-btn.wrong {
  border-color: var(--color-danger);
  background: rgba(239, 68, 68, 0.15);
}

.game-option-btn:disabled {
  cursor: default;
  opacity: 0.75;
}

.game-option-label {
  font-weight: 800;
  color: var(--color-text-muted);
}

/* Hunt 5x5 grid：寬度吃滿容器（最多到 400px，桌機/平板不會被撐得誇張大），
   絕對不會超過螢幕寬度——容器本身已經有 padding 擋著，格子只是跟著容器縮放。 */
.hunt-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 40px auto 16px;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 400px;
}

.hunt-tile {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.hunt-tile:active {
  transform: scale(0.95);
}

.hunt-tile.revealed {
  cursor: default;
  background: rgba(255, 255, 255, 0.03);
}

.hunt-tile.locked {
  opacity: 0.45;
}

/* Result overlay (shared by all 4 games) */
.game-result-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.game-result-card {
  background: #1a1f2c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 400px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--glass-shadow-lg);
  animation: modalIn var(--transition-fast) ease-out;
}

.game-result-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.game-result-body {
  text-align: left;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.game-result-body .result-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed var(--glass-border);
  padding: 5px 0;
}

.game-result-actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.game-result-actions .btn {
  flex: 1;
  padding: 16px 0;
}

/* 學習前選卡組：改回單欄直排，跟卡組管理列表一致 */
#learn-deck-picker-list.deck-list {
  display: flex;
  flex-direction: column;
}

.deck-item-pickable {
  cursor: pointer;
  transition: all var(--transition-fast);
}

.deck-item-pickable:active {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

/* 學習前選卡組：跟卡組管理主頁一樣使用單欄直排，每列一個卡組 */
/* （原先的 2 欄 grid 已移除 — 單欄在手機上更好讀、不會壓縮文字。） */

/* Recovery code display in settings */
.recovery-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
#btn-copy-recovery-code,
#btn-regenerate-recovery-code {
  flex: 1;
  width: auto !important;
  margin-left: 0;
}
.recovery-code-display {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  color: var(--color-accent);
  font-family: 'Courier New', monospace;
}
#btn-regenerate-recovery-code {
  flex-shrink: 0;
}

/* Landing recovery link */
.landing-recovery-link {
  text-align: center;
  margin-top: 12px;
}
.landing-recovery-link .btn-link {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px;
}
.landing-recovery-link .btn-link:hover {
  color: var(--color-primary);
}
#landing-recovery-form {
  margin-top: 10px;
}
#landing-recovery-form .form-group {
  margin-bottom: 10px;
}
#landing-recovery-form input {
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.3em;
  font-family: 'Courier New', monospace;
}
#btn-landing-recovery-back {
  margin-top: 8px;
}

/* Accordion styles for Help View */
.help-details {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
  margin-bottom: 12px;
  overflow: hidden;
  transition: all var(--transition-fast);
}
.help-details[open] {
  border-color: rgba(99, 102, 241, 0.4);
}
.help-summary {
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  list-style: none; /* Hide default arrow */
  position: relative;
  user-select: none;
}
.help-summary::-webkit-details-marker {
  display: none; /* Hide default Safari arrow */
}
.help-summary::after {
  content: "▼";
  position: absolute;
  right: 16px;
  font-size: 0.8rem;
  color: var(--muted);
  transition: transform var(--transition-fast);
}
.help-details[open] .help-summary::after {
  transform: rotate(180deg);
}
.help-content {
  padding: 0 16px 16px 16px;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--color-text);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
}
.help-content p {
  margin-bottom: 10px;
}
.help-content p:last-child {
  margin-bottom: 0;
}
.help-content ul {
  list-style: disc;
  padding-left: 1.2em;
  margin-top: 4px;
  margin-bottom: 8px;
}
.help-content li {
  margin-bottom: 4px;
}
.help-content code {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-family: monospace;
  font-size: 0.85em;
}
.help-content strong {
  color: var(--color-primary);
}

/* Heatmap styling */
.heatmap-scroll-wrapper {
  overflow-x: auto;
  margin-top: 10px;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.heatmap-scroll-wrapper::-webkit-scrollbar {
  height: 5px;
}
.heatmap-scroll-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 99px;
}
.heatmap-container {
  display: grid;
  grid-template-rows: repeat(7, 10px);
  grid-auto-columns: 10px;
  grid-auto-flow: column;
  gap: 3px;
  width: max-content;
  min-width: 100%;
}
.heatmap-day {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}
.heatmap-day:hover {
  transform: scale(1.3);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
  z-index: 10;
}
.heatmap-day.lvl-0 { background-color: rgba(255, 255, 255, 0.05); }
.heatmap-day.lvl-1 { background-color: #0e4429; }
.heatmap-day.lvl-2 { background-color: #006d32; }
.heatmap-day.lvl-3 { background-color: #26a641; }
.heatmap-day.lvl-4 { background-color: #39d353; }

.heatmap-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 8px;
}
.heatmap-months-labels {
  display: flex;
  gap: 12px;
}
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
}
.legend-box {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.legend-box.lvl-0 { background-color: rgba(255, 255, 255, 0.05); }
.legend-box.lvl-1 { background-color: #0e4429; }
.legend-box.lvl-2 { background-color: #006d32; }
.legend-box.lvl-3 { background-color: #26a641; }
.legend-box.lvl-4 { background-color: #39d353; }

/* Study Squad styling */
.squad-member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.squad-member-item.is-me {
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.06);
}
.squad-member-name {
  font-size: 0.82rem;
  font-weight: normal;
  color: white;
}
.squad-member-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.prompt-input {
  width: 100%;
  margin-bottom: 16px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: normal;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: white;
  padding: 10px 12px;
  font-family: inherit;
  outline: none;
  transition: all var(--transition-fast);
}
.prompt-input:focus {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.08);
}

/* ========== Card Match (連連看) Game Styles ========== */

.match-game-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.match-status-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 8px 0;
}

.match-combo-display {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent);
}

.match-pairs-display {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.match-grid {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 600px;
  justify-content: center;
}

/* Dynamic column count controlled via JS: --match-cols */
.match-grid {
  grid-template-columns: repeat(var(--match-cols, 4), 1fr);
}

.match-tile {
  aspect-ratio: 1;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  word-break: break-word;
  overflow: hidden;
  line-height: 1.25;
  transition: transform 0.2s, box-shadow 0.2s;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  perspective: 600px;
}

.match-tile:active {
  transform: scale(0.95);
}

/* Default face-down state */
.match-tile-face-down {
  background: 
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.05) 8px,
      transparent 8px,
      transparent 16px
    ),
    linear-gradient(135deg, #4a6fa5, #293f5c);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  position: relative;
}

.match-tile-face-down::after {
  content: "✦";
  position: absolute;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.15);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Face-up / flipped state */
.match-tile-face-up {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
  animation: match-flip-in 0.3s ease;
}

@keyframes match-flip-in {
  0% { transform: scaleX(0); opacity: 0.5; }
  60% { transform: scaleX(1.05); }
  100% { transform: scaleX(1); opacity: 1; }
}

/* Matched pair state */
.match-tile-matched {
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  cursor: default;
  opacity: 0.7;
  animation: match-pop 0.4s ease;
}

@keyframes match-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 0.7; }
}

/* Mismatch shake animation */
.match-tile-mismatch {
  animation: match-shake 0.5s ease;
}

@keyframes match-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* Tile text sizing for different difficulty levels */
.match-tile.easy-tile {
  font-size: 0.8rem;
}

.match-tile.medium-tile {
  font-size: 0.7rem;
}

.match-tile.hard-tile {
  font-size: 0.62rem;
}

/* Lock tile during mismatch animation */
.match-tile-locked {
  pointer-events: none;
  opacity: 0.85;
}

/* Difficulty selector inside match start flow */
.match-difficulty-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.match-difficulty-label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.match-difficulty-options {
  display: flex;
  gap: 8px;
}

.match-difficulty-btn {
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}

.match-difficulty-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.match-difficulty-btn.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.match-difficulty-btn .diff-stars {
  display: block;
  font-size: 0.7rem;
  margin-top: 2px;
  color: inherit;
  opacity: 0.8;
}

.match-difficulty-btn .diff-desc {
  display: block;
  font-size: 0.65rem;
  margin-top: 2px;
  color: inherit;
  opacity: 0.7;
}

/* Raid / Challenge Banner */
.raid-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #ef4444, #f87171);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
  pointer-events: none;
}

.raid-banner.hidden {
  transform: translateX(-50%) translateY(-100%);
}

.raid-banner-text {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
}

.raid-banner-join, .raid-banner-close {
  pointer-events: auto;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  cursor: pointer;
}

.raid-banner-join {
  background: white;
  color: #ef4444;
  font-size: 0.8rem;
}

.raid-banner-close {
  background: transparent;
  color: white;
  font-size: 1.1rem;
  padding: 0 4px;
}

.raid-banner.challenge-banner {
  top: 54px;
  background: linear-gradient(135deg, var(--color-primary), #a855f7);
}

.raid-banner.challenge-banner.hidden {
  transform: translateX(-50%) translateY(-200%);
}

.challenge-banner .raid-banner-join {
  color: var(--color-primary);
}