/* 妹妹搜搜怀旧 · mmsoso.site
   深色 + 蘑菇红，移动优先。电视外壳与滤镜用纯 CSS，不依赖图片。 */

:root {
  --底: #14171d;
  --底-浅: #191d25;
  --卡: #1c2029;
  --卡-悬: #232833;
  --边: #2a3040;
  --边-浅: #343b4d;
  --字: #e9ecf1;
  --字-次: #98a1b0;
  --字-弱: #6b7484;
  --主: #e5484d;
  --主-暗: #c93a3f;
  --圆: 12px;
  --宽: 1120px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--底);
  color: var(--字);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
        "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* ── 顶栏 ───────────────────────────────── */
.顶栏 {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; height: 56px; padding: 0 16px;
  background: rgba(20, 23, 29, .86);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--边);
}
.品牌 { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.品牌 img { width: 28px; height: 28px; border-radius: 7px; }
.顶栏-链 { display: flex; gap: 14px; font-size: 13px; color: var(--字-次); }
.顶栏-链 a:hover { color: var(--字); }

/* ── 主区 ───────────────────────────────── */
.主区 {
  max-width: var(--宽);
  margin: 0 auto;
  padding: 20px 16px 40px;
}

/* 首屏 */
.首屏 {
  position: relative;
  padding: 46px 0 12px;
  border-bottom: 1px solid var(--边);
  /* 🔴 2026-11-05 修：下面 ::before 光晕层 left/right 各 -60px，手机上是满宽的，
     不裁就会把 document 撑到 434px（视口 390）⇒ 整页出现横向滚动、卡片被挤到左边。 */
  overflow: hidden;
}
.首屏::before {
  content: "";
  position: absolute; top: -60px; left: -60px; right: -60px; bottom: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 76% at 16% 4%, rgba(229, 72, 77, .14), rgba(229, 72, 77, 0) 68%),
    radial-gradient(46% 60% at 92% 0%, rgba(88, 120, 255, .07), rgba(88, 120, 255, 0) 70%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.015) 0 1px, rgba(0,0,0,0) 1px 3px);
}
.首屏 > *:not(.首屏-堆) { position: relative; }

/* 桌面首屏右侧：三张封面斜叠，给个视觉落点（纯装饰，手机上不显示） */
.首屏-堆 { display: none; }
@media (min-width: 980px) {
  .首屏-堆 {
    display: block; position: absolute;
    right: 0; top: 50%; transform: translateY(-50%);
    width: 340px; height: 296px; pointer-events: none;
  }
  .首屏-堆 img {
    position: absolute; width: 150px; height: 200px;
    object-fit: cover; object-position: center top;
    border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12);
    background: #1c2029;
    box-shadow: 0 26px 52px -20px rgba(0, 0, 0, .98);
  }
  .首屏-堆 img:nth-child(1) { left: 0;    top: 38px; transform: rotate(-8deg); }
  .首屏-堆 img:nth-child(2) { left: 95px; top: 14px; transform: rotate(-1deg); z-index: 2; }
  .首屏-堆 img:nth-child(3) { left: 190px; top: 44px; transform: rotate(7deg); }
  .首屏-标, .首屏-副 { max-width: 660px; }
}

.首屏-年表 {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 5px 13px; border-radius: 999px;
  background: rgba(229, 72, 77, .1);
  border: 1px solid rgba(229, 72, 77, .26);
  font-size: 11.5px; letter-spacing: .13em; color: #ff9a9d;
  font-variant-numeric: tabular-nums;
}
.首屏-标 {
  margin: 0 0 15px;
  font-size: clamp(30px, 4.6vw, 47px); line-height: 1.13; font-weight: 800;
  letter-spacing: -1.2px;
}
.首屏-标 em {
  font-style: normal;
  background: linear-gradient(100deg, #ff8f5c 0%, #e5484d 52%, #ff6f90 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.首屏-副 {
  margin: 0 0 28px; max-width: 640px;
  color: var(--字-次); font-size: 15px; line-height: 1.75;
}
.首屏-数 {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin: 26px 0 0; padding: 0; list-style: none;
}
.首屏-数 li { display: flex; align-items: baseline; gap: 5px; }
.首屏-数 b {
  font-size: 21px; font-weight: 700; letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
}
.首屏-数 span { font-size: 12px; color: var(--字-弱); }
@media (max-width: 559px) {
  .首屏 { padding: 34px 0 10px; }
  .首屏-副 { font-size: 14px; margin-bottom: 22px; }
  .首屏-数 { gap: 8px 20px; margin-top: 22px; }
  .首屏-数 b { font-size: 18px; }
  .首屏-数 span { font-size: 11.5px; }
}

.搜框 { position: relative; max-width: 580px; }
.搜框-标 {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  color: var(--字-弱); pointer-events: none; display: flex;
}
.搜框-标 svg { width: 18px; height: 18px; }
.搜框 input {
  width: 100%; height: 52px; padding: 0 96px 0 46px;
  background: var(--卡); color: var(--字);
  border: 1px solid var(--边); border-radius: 999px;
  font-size: 15px; outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.搜框 input::placeholder { color: var(--字-弱); }
.搜框 input:focus {
  border-color: var(--主); background: var(--底-浅);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .14);
}
.搜框 kbd {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  padding: 3px 8px; border-radius: 6px;
  background: #252b36; border: 1px solid #39414f; border-bottom-width: 2px;
  font: 600 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
  color: var(--字-弱); pointer-events: none;
}
@media (max-width: 559px) {
  .搜框 kbd { display: none; }
  .搜框 input { padding-right: 18px; }
}

.搜结果 { margin-top: 14px; display: grid; gap: 8px; }
.搜结果-项 {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--卡); border: 1px solid var(--边);
  border-radius: 10px; font-size: 14px;
}
.搜结果-项:hover { background: var(--卡-悬); border-color: var(--边-浅); }
.搜结果-项 img { width: 40px; height: 27px; object-fit: cover; border-radius: 4px; flex: none; }
.搜结果-空 { color: var(--字-次); font-size: 14px; padding: 8px 2px; }

/* ── 区块 ───────────────────────────────── */
.区 { margin-top: 42px; }
.区-头 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.区-标 {
  position: relative; margin: 0; padding-left: 13px;
  font-size: 17px; font-weight: 700; letter-spacing: -.2px;
}
.区-标::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, var(--主), var(--主-暗));
}
.区-注 { font-size: 12.5px; color: var(--字-弱); }
.区-更多 { font-size: 12.5px; color: var(--字-次); white-space: nowrap; }
.区-更多:hover { color: var(--主); }

/* ── 平台卡 ─────────────────────────────── */
.平台网格 {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.平台卡 {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px;
  padding: 13px 12px 14px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.03), rgba(255,255,255,0) 62%),
    var(--卡);
  border: 1px solid var(--边);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.平台卡::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--平台色, var(--主));
  transition: width .18s;
}
.平台卡::after {
  content: ""; position: absolute; right: -34px; top: -34px;
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--平台色, var(--主)); opacity: .1; filter: blur(26px);
  pointer-events: none; transition: opacity .2s;
}
.平台卡:hover {
  transform: translateY(-3px); border-color: #3d465c;
  box-shadow: 0 16px 32px -20px rgba(0,0,0,.95);
}
.平台卡:hover::before { width: 5px; }
.平台卡:hover::after { opacity: .2; }
.平台卡-logo {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  height: 36px; padding: 5px 10px; margin-bottom: 5px;
  /* 固定宽度：10 个平台的 logo 原图高矮胖瘦差很多，白底框跟着内容变宽
     就一行里对不齐。钉死 104 让它们纵向排成一条线。 */
  width: 104px; max-width: 100%;
  background: #f6f7f9; border-radius: 7px;
}
.平台卡-logo img { height: 21px; width: auto; max-width: 84px; object-fit: contain; }
.平台卡-名 { position: relative; z-index: 1; font-size: 13.5px; font-weight: 600; }
.平台卡-数 {
  position: relative; z-index: 1;
  font-size: 11.5px; color: var(--字-次); font-variant-numeric: tabular-nums;
}
.平台卡-述 { position: relative; z-index: 1; font-size: 12px; color: var(--字-弱); line-height: 1.55; margin-top: 2px; }

/* 平台索引页的大卡还是左对齐，读起来顺 */
body.平台页 .平台卡 { align-items: flex-start; text-align: left; }
body.平台页 .平台卡-logo { width: auto; min-width: 0; }

.平台卡.大 { padding-bottom: 16px; }
.平台卡.大 .平台卡-logo { height: 56px; }
.平台卡.大 .平台卡-logo img { height: 36px; max-width: 160px; }

/* ── 游戏海报卡 ───────────────────────────
   图框锁死 3:4、图片一律 cover —— 封面原图尺寸千奇百怪（盒图竖、截图横），
   只有把比例钉在外层容器上，每张卡的高度才会绝对一致。别改成 img 决定高度。 */
.小卡网格 {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.小卡网格.密 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
/* 首页「先玩这几个」：桌面固定 5 列，20 张正好 4 行 */
.小卡网格.精 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.小卡 {
  display: flex; flex-direction: column;
  background: var(--卡); border: 1px solid var(--边);
  border-radius: 12px; overflow: hidden;
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.小卡:hover {
  transform: translateY(-3px); border-color: #3f4a60;
  box-shadow: 0 18px 36px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(229,72,77,.2);
}
.小卡-图 {
  position: relative; display: block; width: 100%;
  aspect-ratio: 3 / 4; overflow: hidden;
  background: linear-gradient(165deg, #222834 0%, #14181f 100%);
}
.小卡-图 img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transition: transform .35s ease, filter .25s;
}
.小卡:hover .小卡-图 img { transform: scale(1.045); filter: brightness(1.07); }
.小卡-图::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(to top, rgba(9,11,15,.9), rgba(9,11,15,0));
  pointer-events: none;
}
/* 图挂了：不留黑块，把游戏名首字压上去当占位 */
.小卡-图.无图::before {
  content: attr(data-首);
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px; font-weight: 800; line-height: 1;
  color: rgba(255, 255, 255, .13);
  letter-spacing: 2px;
  pointer-events: none;
}
.小卡-播 {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(229, 72, 77, .95); color: #fff;
  opacity: 0; transform: scale(.82);
  transition: opacity .2s, transform .2s;
  box-shadow: 0 8px 20px -6px rgba(229, 72, 77, .9);
}
.小卡-播 svg { width: 17px; height: 17px; margin-left: 2px; }
.小卡:hover .小卡-播 { opacity: 1; transform: scale(1); }
.小卡-机 {
  position: absolute; left: 7px; top: 7px; z-index: 2;
  padding: 2px 7px; border-radius: 5px;
  background: rgba(9, 11, 15, .8);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 10px; font-weight: 600; color: #d2d9e4;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.小卡-名 {
  padding: 9px 10px 0;
  height: 44px;                        /* 两行固定高度，名字长短不影响整体对齐 */
  font-size: 12.5px; line-height: 1.4; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.小卡-平 { padding: 3px 10px 10px; font-size: 11px; color: var(--字-弱); }

/* ── 面包屑 / 页标 ──────────────────────── */
.面包 { font-size: 12.5px; color: var(--字-弱); margin-bottom: 12px; }
.面包 a:hover { color: var(--字); }
.页标 { margin: 0 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -.4px; }
.页副 { margin: 0 0 18px; color: var(--字-次); font-size: 14px; }
.平台介绍 {
  padding: 14px 16px; margin-bottom: 20px;
  background: var(--卡); border: 1px solid var(--边); border-radius: var(--圆);
  font-size: 13.5px; color: var(--字-次); line-height: 1.75;
}
.平台介绍 p { margin: 0 0 8px; }
.平台介绍 p:last-child { margin-bottom: 0; }
.贴士 { color: var(--字-弱); font-size: 12.5px; }

/* ── 详情页 ─────────────────────────────── */
.详情-头 { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.详情-封 {
  position: relative; width: 100%; aspect-ratio: 4 / 3; max-width: 420px;
  background: var(--卡); border: 1px solid var(--边);
  border-radius: var(--圆); overflow: hidden;
}
.详情-封 img { width: 100%; height: 100%; object-fit: cover; }
.详情-封.无图::after {
  content: "🎮"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; font-size: 42px; opacity: .3;
}
.详情-文 { flex: 1; min-width: 0; }
.详情-标 { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.3; }
.详情-平 { margin: 0 0 16px; font-size: 13px; color: var(--字-次); }
.详情-平 a { color: var(--主); }
.详情-提 { margin: 8px 0 0; font-size: 12px; color: var(--字-弱); }

.开始键 {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 26px;
  background: linear-gradient(180deg, #ef5a5f, var(--主));
  color: #fff; border: 0; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: .2px;
  box-shadow: 0 6px 18px -6px rgba(229, 72, 77, .7);
  transition: transform .14s, box-shadow .14s;
}
.开始键:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(229, 72, 77, .85); }
.开始键:active { transform: translateY(0); }

.详情-述 h2 { font-size: 16px; margin: 0 0 10px; }
.详情-述 p { font-size: 14px; color: var(--字-次); line-height: 1.8; margin: 0 0 10px; }

.信息表 {
  width: 100%; margin: 24px 0 8px;
  border-collapse: collapse; font-size: 13.5px;
  background: var(--卡); border: 1px solid var(--边);
  border-radius: var(--圆); overflow: hidden;
}
.信息表 th, .信息表 td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--边); }
.信息表 tr:last-child th, .信息表 tr:last-child td { border-bottom: 0; }
.信息表 th { width: 32%; color: var(--字-次); font-weight: 500; }
.信息表 td { color: var(--字); }

/* ── 404 ────────────────────────────────── */
.失踪-头 { text-align: center; padding: 44px 0 36px; }
.失踪-码 {
  margin: 0 0 6px; font-size: 82px; font-weight: 800; line-height: 1;
  letter-spacing: .04em; color: #2c3342;
}
.失踪-标 { margin: 0 0 12px; font-size: 23px; }
.失踪-副 { margin: 0 auto 24px; max-width: 470px; font-size: 14px; color: var(--字-次); line-height: 1.8; }
.失踪 .搜框 { max-width: 470px; margin: 0 auto; }
.失踪-键 { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.失踪-次 {
  display: inline-flex; align-items: center; height: 46px; padding: 0 24px;
  border-radius: 999px; border: 1px solid var(--边); color: var(--字-次); font-size: 14px;
}
.失踪-次:hover { color: var(--字); border-color: var(--主); }

/* ── 平台小链接 ─────────────────────────── */
.平台小链组 { display: flex; flex-wrap: wrap; gap: 8px; }
.平台小链 {
  padding: 7px 14px; font-size: 13px;
  background: var(--卡); border: 1px solid var(--边); border-radius: 999px;
  color: var(--字-次);
}
.平台小链:hover { color: var(--字); border-color: var(--主); }

/* ── 页脚 ───────────────────────────────── */
.页脚 {
  max-width: var(--宽); margin: 0 auto;
  padding: 28px 16px 40px;
  border-top: 1px solid var(--边);
  font-size: 13px; color: var(--字-次);
}
.页脚 p { margin: 0 0 8px; }
.页脚-细 { font-size: 12px; color: var(--字-弱); line-height: 1.7; }
.页脚 a { color: var(--主); }

/* ── 播放弹层：电视外壳 + 滤镜 ──────────── */
.播层 {
  position: fixed; z-index: 9999;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none; flex-direction: column;
  background: #0a0c10;
}
.播层.开 { display: flex; }

.播层-顶 {
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 12px; flex: none;
  background: #12151b; border-bottom: 1px solid #232a36;
}
.播层-名 {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.播层-键 {
  height: 32px; padding: 0 12px; flex: none;
  background: #1e232d; color: var(--字); border: 1px solid #2e3644;
  border-radius: 8px; font-size: 12.5px;
}
.播层-键:hover { background: #262c38; }
.播层-键.关 { background: var(--主); border-color: var(--主); color: #fff; }

/* 电视外壳 */
.电视区 {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  background:
    radial-gradient(ellipse at 50% 0%, #1c212b 0%, #0a0c10 70%);
}
.电视 {
  position: relative;
  width: 100%; max-width: 960px;
  aspect-ratio: 4 / 3;
  padding: 2.2%;
  background: linear-gradient(160deg, #2b2f38 0%, #1a1d24 45%, #101319 100%);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 6px rgba(0,0,0,.6),
    0 18px 50px -12px rgba(0,0,0,.9);
}
.电视-屏 {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 2px #0b0d11, inset 0 0 40px rgba(0,0,0,.9);
}
.电视-屏 iframe {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; border: 0; display: block;
}

/* 扫描线 / CRT / 老电视 */
.滤镜层 {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none; z-index: 2; display: none;
}
.滤镜层.开 { display: block; }

/* 细扫描线 */
.电视-屏[data-滤="扫描线"] .滤镜层 {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.22) 0, rgba(0,0,0,.22) 1px,
    rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px
  );
}
/* 粗扫描线 + 轻微色散 */
.电视-屏[data-滤="CRT"] .滤镜层 {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.34) 0, rgba(0,0,0,.34) 2px,
      rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px
    ),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
}
/* 老电视：暗角 + 暖色 + 噪点 */
.电视-屏[data-滤="老电视"] .滤镜层 {
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 48%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.2) 0, rgba(0,0,0,.2) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px
    );
  mix-blend-mode: multiply;
}
.电视-屏[data-滤="老电视"] iframe {
  filter: saturate(1.18) contrast(1.06) sepia(.12);
}

/* 加载态 */
.播层-等 {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: #06080b; color: var(--字-次);
  font-size: 13px; text-align: center; padding: 24px;
}
.播层-等.隐 { display: none; }
.转圈 {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid #262c38; border-top-color: var(--主);
  animation: 转 .85s linear infinite;
}
@keyframes 转 { to { transform: rotate(360deg); } }

/* ── 响应式 ─────────────────────────────── */
@media (min-width: 560px) {
  .平台网格 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .小卡网格 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .小卡网格.密 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .小卡网格.精 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .主区 { padding: 24px 20px 48px; }
}

@media (min-width: 760px) {
  .主区 { padding: 28px 24px 60px; }
  .首屏 { padding: 54px 0 16px; }
  .平台网格 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .小卡网格 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .小卡网格.密 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .小卡网格.精 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .详情-头 { flex-direction: row; gap: 24px; }
  .详情-封 { width: 340px; flex: none; }
  .详情-标 { font-size: 26px; }
  .电视区 { padding: 20px; }
  .小卡-名 { font-size: 13px; }
}

@media (min-width: 1000px) {
  .平台网格 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .小卡网格.密 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .首屏 { padding: 62px 0 20px; }
}

@media (min-width: 1200px) {
  .小卡网格.密 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}