/* ======= Site Resource Stats ======= */
.xstats {
  --xs-bg: #ffffff;
  --xs-fg: #111827;
  --xs-muted: #6b7280;
  --xs-card: #f9fafb;
  --xs-border: rgba(17,24,39,0.08);
  --xs-accent: #2563eb;
  --xs-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);

  /* 尺寸變數（不再用固定卡片高度，交給 CSS Grid 行高自動等高） */
  --xs-pad: 14px;         /* 內邊距 */
  --xs-gap: 10px;         /* 內容間距 */
  --xs-head-h: 36px;      /* 第3欄頭部高度（標題+按鈕區） */

  background: var(--xs-bg);
  color: var(--xs-fg);
  border-radius: 16px;
  border: 1px solid var(--xs-border);

  /* 左右留白 + 居中 + 最大寬度 */
  max-width: 1280px;
  margin: 16px auto;
  padding: clamp(14px, 1.8vw, 22px) clamp(28px, 6vw, 96px);
}

html[data-bs-theme="dark"] .xstats,
.xstats[data-theme="dark"] {
  /* ✅ 深色模式最外層背景固定為 #222529 */
  --xs-bg: #222529;
  --xs-fg: #e5e7eb;
  --xs-muted: #9ca3af;
  --xs-card: #111827;
  --xs-border: rgba(255,255,255,0.08);
  --xs-accent: #60a5fa;
  --xs-shadow: 0 1px 2px rgba(0,0,0,.6), 0 6px 20px rgba(0,0,0,.35);
}

.xstats .xstats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  /* row 高度為該行內最高卡片高度；卡片默認 stretch 等高（不需寫） */
}

/* ✅ 最少兩列：無論多窄也至少 2 欄 */
@media (max-width: 900px) {
  .xstats .xstats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 不設置單欄回退，確保不會變成 1 欄 */

.xstats .xcard {
  background: var(--xs-card);
  border: 1px solid var(--xs-border);
  border-radius: 14px;
  padding: var(--xs-pad);
  box-shadow: var(--xs-shadow);
  display: flex;               /* 方便內部元素撐滿剩餘空間 */
  flex-direction: column;
  gap: var(--xs-gap);
  position: relative;
  overflow: hidden;
  /* ❌ 不再固定高度；讓該行以最高卡片為基準自動等高 */
}

.xstats .xcard::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(60% 60% at 10% 10%, var(--xs-accent) 0%, transparent 60%);
  opacity: .06;
  pointer-events: none;
}

/* ===== 針對前兩張統計卡（使數字更好地佔位） ===== */
.xstats .xcard.stat {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
}
.xstats .xcard.stat .xlabel {
  align-self: start;
  font-size: 0.88rem;
}
.xstats .xcard.stat .xvalue {
  align-self: center;
  justify-self: start;  /* 可改 center */
  font-size: 2.2rem;
  line-height: 1;
}

/* 標簽與數字（其他場景通用） */
.xstats .xlabel { font-size: 0.9rem; color: var(--xs-muted); letter-spacing: .02em; }
.xstats .xvalue { font-weight: 800; font-size: 1.8rem; line-height: 1.05; }

/* 骨架屏 */
.xstats .xskeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.04), rgba(0,0,0,.08));
  animation: xskeleton 1.4s infinite linear;
}
html[data-bs-theme="dark"] .xstats .xskeleton,
.xstats[data-theme="dark"] .xskeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.05), rgba(255,255,255,.10));
}
@keyframes xskeleton { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* ===== 第3欄：隨機遊戲（下方整塊為圖片，覆蓋標題） ===== */
.xstats .xcard.xgame { padding-top: 12px; }
.xstats .xgame-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  height: var(--xs-head-h);
}
.xstats .xgame-refresh {
  appearance:none; border:1px solid var(--xs-border); background:transparent;
  padding:6px 10px; border-radius:8px; cursor:pointer; font-size:.92rem;
  color: inherit; /* 深色模式文字顏色繼承容器前景色 */
}
.xstats .xgame-refresh[disabled] { opacity:.6; cursor:not-allowed; color: inherit; }
.xstats .xgame-refresh:focus-visible {
  outline: 2px solid var(--xs-accent);
  outline-offset: 2px;
}

/* ✅ 不用固定高度；用 flex 填滿剩餘空間，行高由本行最高卡片決定 */
.xstats .xgame-cover {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
  flex: 1 1 auto;     /* 佔滿卡片剩餘高度 */
  min-height: 0;      /* 防止子元素溢出 */
}
html[data-bs-theme="dark"] .xstats .xgame-cover,
.xstats[data-theme="dark"] .xgame-cover { background: rgba(255,255,255,.08); }
.xstats .xgame-cover[hidden] { display:none !important; }

/* 圖片裁切填充：展示部分（不會改變容器高度） */
.xstats .xgame-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 覆蓋標題（單行省略） */
.xstats .xgame-overlay {
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.55) 100%);
}
.xstats .xgame-title a {
  display:block; color:#fff; text-decoration:none; font-weight:800; font-size:1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ===== 第4欄：簽到入口（黃色主題） ===== */
.xstats .xcard.checkin {
  --xs-accent: #fbbf24;
  background: linear-gradient(180deg, rgba(251,191,36,.12), transparent 50%), var(--xs-card);
}
html[data-bs-theme="dark"] .xstats .xcard.checkin,
.xstats[data-theme="dark"] .xcard.checkin {
  background: linear-gradient(180deg, rgba(251,191,36,.18), transparent 50%), var(--xs-card);
}
.xstats .checkin-wrap {
  display:flex; flex-direction:column; gap:10px;
  /* 不設高度，讓內容自然決定本卡片高度，進而作為本行行高基準 */
}
.xstats .checkin-title { font-weight:800; font-size:1.1rem; }
.xstats .checkin-btn {
  align-self:flex-start; appearance:none; border:none; border-radius:10px;
  padding:9px 12px; font-weight:700; font-size:.92rem; cursor:pointer;
  background:#fbbf24; color:#111827;
}
.xstats .checkin-link { text-decoration:none; color:inherit; }
.xstats .checkin-card-click { position:absolute; inset:0; z-index:1; }
.xstats .checkin-cta { position:relative; z-index:2; } /* 讓按鈕可點 */