/* ============================================================
   cards.css — 游戏卡片 + 横向行（主页与探索共用）
   原则：默认态信息给全，不靠悬停；不加位移，只提亮和描边。
   ============================================================ */

/* ---------- 网格（探索页） ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
}
@media (min-width: 620px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; } }
@media (min-width: 900px)  { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- 卡片 ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-md);
}

/* 整卡热区：不把按钮包进 <a>，避免嵌套交互 */
.card__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--r-md);
}

.card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), var(--shadow-1);
  transition: box-shadow var(--base) var(--ease);
}

.card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease), filter var(--base) var(--ease);
}

/* 底部压暗：封面再亮，角标和按钮也读得清 */
.card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 8, 10, 0.34), rgba(6, 8, 10, 0) 46%);
  pointer-events: none;
}

.card:hover .card__cover,
.card:focus-within .card__cover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), var(--shadow-2);
}
.card:hover .card__cover img,
.card:focus-within .card__cover img {
  filter: brightness(1.08);
  transform: scale(1.025);
}

.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 2px 0;
}

.card__title {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--fast) var(--ease);
}
.card:hover .card__title { color: #fff; }

.card__desc {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}

.card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  /* 有简介和没简介的卡片，标签都对齐到同一条线 */
  margin-top: auto;
  padding-top: 6px;
  min-height: 18px;
}
.card__meta .tag { flex-shrink: 0; }

/* ---------- 收藏按钮 ---------- */
.card__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 10, 12, 0.62);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--fast) var(--ease), color var(--fast) var(--ease),
              background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.card:hover .card__fav,
.card:focus-within .card__fav,
.card__fav[aria-pressed="true"] { opacity: 1; }
.card__fav:hover { background: rgba(8, 10, 12, 0.9); color: #fff; }
.card__fav[aria-pressed="true"] {
  color: #ff7b8c;
  border-color: rgba(255, 123, 140, 0.42);
}
.card__fav[aria-pressed="true"] svg { fill: currentColor; }

/* 触屏没有悬停，收藏按钮常显 */
@media (hover: none) {
  .card__fav { opacity: 0.9; }
}

/* ---------- 角标 ---------- */
.card__badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 3;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(8, 10, 12, 0.66);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font-size: 10.5px;
  line-height: 18px;
  letter-spacing: 0.06em;
  pointer-events: none;
}

/* ---------- 横向行（主页） ---------- */
.row { margin-top: 44px; }
.row--mine { margin-top: 36px; }

.row__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px 2px 8px;
  margin: 0 -2px;
  /* 隐藏滚动条：右侧被切一半的卡片本身就是可横滑的暗示 */
  scrollbar-width: none;
}
.row__track::-webkit-scrollbar { display: none; }

.row__track .card {
  flex: 0 0 clamp(152px, 42vw, 208px);
  scroll-snap-align: start;
}
@media (min-width: 900px) { .row__track .card { flex-basis: 208px; } }