/* ==============================================================
   游戏卡视图（cards.html）
   以卡片形式浏览全部游戏，可按档位筛选、搜索、排序。
   配色沿用 tokens.css 的 --app-* 变量，三档各有一个强调色。
   ============================================================== */

.cards-head {
  padding: 92px 0 18px;
  text-align: center;
}
.cards-head h1 {
  font-size: var(--app-fs-title);
  font-weight: 700;
  letter-spacing: 0;
}
.cards-head p {
  margin-top: 8px;
  font-size: var(--app-fs-sm);
  color: var(--app-text-muted);
}
.cards-head p b { color: var(--app-text); font-weight: 700; }

/* ---------- 工具栏 ---------- */
.cards-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 6px;
}

.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0;
}
.chip-row::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  min-height: 40px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: var(--app-surface);
  color: var(--app-text-muted);
  font-size: var(--app-fs-sm);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.chip:hover { border-color: var(--app-primary); color: var(--app-text); }
.chip.active {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: #fff;
  font-weight: 700;
}
.chip .chip-num { opacity: .72; margin-left: 4px; font-size: var(--app-fs-xs); }

.cards-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--app-fs-sm);
  color: var(--app-text-muted);
}
.cards-meta b { color: var(--app-text); font-weight: 700; }

.sort-select {
  padding: 8px 12px;
  min-height: 40px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-xs);
  background: var(--app-surface);
  color: var(--app-text);
  font-size: var(--app-fs-sm);
  cursor: pointer;
}

/* ---------- 卡片网格 ---------- */
.gcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
  gap: 14px;
  padding: 16px 0 28px;
}

.gcard {
  display: flex;
  flex-direction: column;
  background: var(--app-surface);
  border: 1px solid var(--app-border-soft);
  border-radius: var(--app-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover: hover) {
  .gcard:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--gcard-accent) 45%, var(--app-border-soft));
    box-shadow: 0 12px 26px rgba(15, 40, 60, .12);
  }
}

/* 三档强调色 */
.gcard[data-acc="1"] { --gcard-accent: #258bc4; }
.gcard[data-acc="2"] { --gcard-accent: #2b9e86; }
.gcard[data-acc="3"] { --gcard-accent: #c08a2e; }
.gcard { --gcard-accent: var(--app-primary); }

/* 封面：渐变 + 首字水印，不依赖外部图片 */
.gcard-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 120% at 12% 8%, color-mix(in srgb, var(--gcard-accent) 88%, #fff) 0%, transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--gcard-accent) 78%, #0b1a26) 0%, color-mix(in srgb, var(--gcard-accent) 30%, #0b1a26) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gcard-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, .22) 100%);
}
.gcard-initial {
  font-family: var(--app-font-display);
  font-size: 46px;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  position: relative;
  z-index: 1;
}

.gcard-body {
  padding: 12px 14px 8px;
  flex: 1;
}
.gcard-name {
  font-size: var(--app-fs-md);
  line-height: 1.42;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.gcard-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 12px;
  font-size: var(--app-fs-xs);
  color: var(--app-text-muted);
}
.gcard-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gcard-accent) 14%, transparent);
  color: color-mix(in srgb, var(--gcard-accent) 80%, #000);
  font-weight: 700;
  white-space: nowrap;
}
.gcard-dlc { white-space: nowrap; }
.gcard-dlc.is-dlc { color: color-mix(in srgb, var(--gcard-accent) 70%, var(--app-text)); }

/* ---------- 分页与空态 ---------- */
#cardPager { padding: 4px 0 48px; }

.cards-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 20px;
  color: var(--app-text-muted);
}
.cards-empty h3 { font-size: var(--app-fs-lg); color: var(--app-text); margin-bottom: 8px; font-weight: 700; }

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  .cards-head { padding: 78px 0 14px; }
  .gcard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .gcard-initial { font-size: 34px; }
  .gcard-body { padding: 10px 11px 6px; }
  .gcard-name { font-size: var(--app-fs-sm); -webkit-line-clamp: 2; }
  .gcard-foot { padding: 0 11px 10px; gap: 6px; flex-wrap: wrap; }
  .chip { padding: 7px 13px; }
}

/* ---------- 深色模式：渐变退一档，避免发灰泛白 ---------- */
:root[data-theme="dark"] .gcard-cover,
html[data-theme="dark"] .gcard-cover {
  background:
    radial-gradient(120% 120% at 12% 8%, color-mix(in srgb, var(--gcard-accent) 62%, #000) 0%, transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--gcard-accent) 40%, #050d14) 0%, color-mix(in srgb, var(--gcard-accent) 14%, #050d14) 100%);
}
:root[data-theme="dark"] .gcard-badge,
html[data-theme="dark"] .gcard-badge {
  background: color-mix(in srgb, var(--gcard-accent) 26%, transparent);
  color: color-mix(in srgb, var(--gcard-accent) 40%, #fff);
}

/* ---------- 首页入口 ---------- */
.site-links {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: var(--app-fs-sm);
  margin-bottom: 10px;
}
.site-links a {
  color: var(--app-text-muted);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.site-links a:hover { color: var(--app-primary); border-bottom-color: var(--app-primary); }

/* 首页「按卡片浏览」入口 */
.cards-entry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 9px 20px;
  min-height: 40px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: var(--app-surface);
  color: var(--app-text);
  font-size: var(--app-fs-sm);
  box-shadow: var(--app-shadow-xs);
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.cards-entry:hover {
  border-color: var(--app-primary);
  color: var(--app-primary);
  transform: translateY(-1px);
}

/* ==============================================================
   主推游戏卡（游戏卡标签页）
   两张独立大卡，配色由 data.json 里 cards[].theme 决定
   ============================================================== */

.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 10px 0 44px;
}

.fcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 10;
  padding: 28px;
  border-radius: calc(var(--app-radius) * 1.5);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .07);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* 细斜纹，给纯色底一点织物感 */
.fcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(118deg,
      rgba(255, 255, 255, .035) 0 1px, transparent 1px 10px);
  pointer-events: none;
  z-index: 0;
}

/* —— 主题：影之刃零（墨黑 + 暗金） —— */
.fcard.theme-ink {
  --fcard-accent: #d8a24a;
  background:
    radial-gradient(95% 120% at 16% 10%, #44331d 0%, transparent 58%),
    linear-gradient(150deg, #17130f 0%, #251a12 46%, #0b0908 100%);
}

/* —— 主题：福利（暗红 + 橙） —— */
.fcard.theme-warm {
  --fcard-accent: #ff7a45;
  background:
    radial-gradient(95% 120% at 16% 10%, #832c1a 0%, transparent 58%),
    linear-gradient(150deg, #2a0f0a 0%, #4e1a11 46%, #180705 100%);
}

.fcard-glow {
  position: absolute;
  right: -18%;
  bottom: -32%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
      color-mix(in srgb, var(--fcard-accent) 42%, transparent) 0%, transparent 68%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}

.fcard-badge {
  position: absolute;
  top: 20px;
  left: 22px;
  z-index: 2;
  padding: 5px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fcard-accent) 94%, #000);
  color: #1a1208;
  font-size: var(--app-fs-xs);
  font-weight: 700;
  line-height: 1.5;
}

.fcard-body {
  position: relative;
  z-index: 1;
  max-width: 88%;
}

.fcard-title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.24;
  margin-bottom: 10px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}

.fcard-sub {
  font-size: var(--app-fs-sm);
  color: rgba(255, 255, 255, .76);
  margin-bottom: 6px;
  letter-spacing: .01em;
}

.fcard-desc {
  font-size: var(--app-fs-xs);
  color: rgba(255, 255, 255, .52);
}

.fcard-arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 17px;
  line-height: 1;
  transition: transform .2s ease, background-color .2s ease;
}

@media (hover: hover) {
  .fcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .26);
    border-color: color-mix(in srgb, var(--fcard-accent) 40%, transparent);
  }
  .fcard:hover .fcard-arrow {
    transform: translateX(4px);
    background: rgba(255, 255, 255, .22);
  }
}

@media (max-width: 720px) {
  .featured-grid {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 8px 0 36px;
  }
  .fcard {
    aspect-ratio: 16 / 9;
    padding: 20px;
  }
  .fcard-badge { top: 15px; left: 16px; }
  .fcard-title { font-size: 24px; margin-bottom: 7px; }
  .fcard-sub { font-size: var(--app-fs-xs); }
  .fcard-arrow { width: 34px; height: 34px; right: 16px; bottom: 16px; font-size: 15px; }
}

/* ==============================================================
   主推卡：封面模式 / 特征标签 / 警示条
   ============================================================== */

.fcard {
  aspect-ratio: 16 / 10;
  min-height: 360px;
}
.fcard-body { max-width: 100%; padding-right: 54px; }

/* —— 有封面时：图片铺满 + 底部压暗，保证文字可读 —— */
.fcard.has-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: rgba(255, 255, 255, .12);
}
.fcard.has-cover::after { display: none; }
.fcard.has-cover .fcard-glow { display: none; }
.fcard.has-cover::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 72%;
  background: linear-gradient(180deg,
      rgba(6, 5, 4, 0) 0%,
      rgba(6, 5, 4, .52) 44%,
      rgba(6, 5, 4, .93) 100%);
  z-index: 0;
  pointer-events: none;
}

/* —— 特征标签（玻璃小胶囊） —— */
.fcard-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.fcard-feat {
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .93);
  font-size: var(--app-fs-xs);
  line-height: 1.55;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}

.fcard-desc {
  margin-top: 12px;
  font-size: var(--app-fs-sm);
  line-height: 1.65;
  color: rgba(255, 255, 255, .8);
}

.fcard-warn {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 12px;
  border-radius: 9px;
  background: rgba(255, 84, 48, .16);
  border: 1px solid rgba(255, 84, 48, .38);
  color: #ffb4a1;
  font-size: var(--app-fs-xs);
  line-height: 1.55;
  font-weight: 700;
}

@media (max-width: 720px) {
  .fcard { min-height: 300px; }
  .fcard.has-cover { min-height: 320px; }
  .fcard-body { padding-right: 44px; }
  .fcard-desc { font-size: var(--app-fs-xs); }
}

/* ==============================================================
   首页交互升级：圆润玻璃搜索框 / 胶囊标签 / 视图切换动画
   ============================================================== */

.search-bar {
  border-radius: 999px;
  padding-left: 22px;
  padding-right: 22px;
  background: color-mix(in srgb, var(--app-surface) 68%, transparent);
  backdrop-filter: blur(16px) saturate(165%);
  -webkit-backdrop-filter: blur(16px) saturate(165%);
  border-color: color-mix(in srgb, var(--app-border) 62%, transparent);
}
.search-bar:focus-within {
  background: color-mix(in srgb, var(--app-surface) 86%, transparent);
}

.search-tabs {
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-surface) 52%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-border-soft) 72%, transparent);
  backdrop-filter: blur(14px) saturate(155%);
  -webkit-backdrop-filter: blur(14px) saturate(155%);
}

.search-tab {
  border-radius: 999px;
  transition: background-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.search-tab.active {
  background: var(--app-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--app-primary) 34%, transparent);
}

/* 视图切换：淡入 + 轻微上移 */
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#gameView,
#accountView,
#cardsView {
  animation: viewEnter .34s cubic-bezier(.22, .61, .36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  #gameView,
  #accountView,
  #cardsView { animation: none; }
}

/* 移动端：搜索框与胶囊标签更紧凑 */
@media (max-width: 640px) {
  .search-bar { padding-left: 16px; padding-right: 16px; }
  .search-tabs { padding: 3px; }
  .search-tab { padding: 9px 10px; }
}

/* ==============================================================
   移动端修复
   问题根源：.fcard 同时设 aspect-ratio 与 min-height 时，
   高度被 min-height 顶住后浏览器会按比例反推宽度，卡片被撑出屏幕。
   这里统一改回由内容与 min-height 决定高度，宽度始终 100%。
   ============================================================== */

.fcard {
  aspect-ratio: auto;
  min-height: 380px;
}

@media (max-width: 720px) {
  .fcard {
    min-height: 0;
    padding: 18px;
    border-radius: 18px;
  }
  .fcard.has-cover { min-height: 300px; }
  .fcard-title { font-size: 22px; line-height: 1.3; }
  .fcard-sub { font-size: 12px; }
  .fcard-body { padding-right: 46px; }
  .fcard-feats { gap: 6px; margin-top: 10px; }
  .fcard-feat { font-size: 12px; padding: 3px 9px; }
  .fcard-desc { font-size: 12.5px; line-height: 1.6; margin-top: 10px; }
  .fcard-warn { font-size: 12px; padding: 6px 10px; margin-top: 10px; }
  .fcard-badge { font-size: 11px; padding: 4px 10px; }
}

/* 手机首屏：压缩头部留白，让卡片尽早出现在屏幕里 */
@media (max-width: 480px) {
  .home-header { padding: 2.1rem 14px 18px; }
  .home-logo { width: 38px; height: 38px; margin-bottom: 12px; }
  .home-title { font-size: 21px; }
  .home-desc { font-size: 13px; }
  .search-area { margin-bottom: 26px; padding: 0 14px; }
  .featured-grid { padding-top: 2px; }
}

/* 无封面卡在手机上内容会把标题顶到顶部，与左上角徽章重叠：
   抬高最小高度，并给正文留出徽章的安全距离 */
@media (max-width: 720px) {
  .fcard { min-height: 244px; }
  .fcard.has-cover { min-height: 312px; background-position: center 30%; }
  .fcard-body { padding-top: 44px; }
}

/* 手机首屏修正：顶部导航是 fixed 的，头部留白不能小于导航高度，
   否则品牌 logo 会被压到导航底下。手机端直接收掉重复的大 logo，
   只留导航里的小头像。 */
@media (max-width: 480px) {
  .home-header { padding: 4rem 14px 16px; }
  .home-logo { display: none; }
  .home-title { font-size: 22px; margin-bottom: 0.5rem; }
  .home-desc { font-size: 12.5px; }
}

/* 桌面端比例修正：卡片区可用宽约 400px，380 高显得太方，
   压到 320 更接近横版封面；标题同步收一档 */
.fcard {
  aspect-ratio: auto;
  min-height: 320px;
}
@media (min-width: 721px) {
  .fcard-title { font-size: 30px; }
  .fcard { padding: 24px; }
  .fcard-body { padding-right: 50px; }
}

/* 手机搜索框略降高度，原来偏高显得笨重 */
@media (max-width: 640px) {
  .search-bar { padding-top: 9px; padding-bottom: 9px; }
}

/* 手机端卡片高度回收：v=8 的全局 320 会覆盖移动端设定，
   导致内容少的卡片下方空一大块。这里重新锁死移动端高度。 */
@media (max-width: 720px) {
  .fcard { min-height: 236px; }
  .fcard.has-cover { min-height: 300px; }
  .fcard-feat { font-size: 11.5px; padding: 4px 6px; }
}

/* 特征标签改成 2×2 网格，避免 3+1 的残缺排布 */
.fcard-feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.fcard-feat {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
}