/* art 皮肤 — M5 精修版：深色暗房从 M3 起就生效，这版收口排版分寸——
   密排墙密度、封面卡的「展墙」质感（细边框+悬停微亮，像夜里点灯的画框）、
   窄屏断点。 */

:root {
  --bg: #0d0d0f;
  --bg-raised: #17161a;
  --ink: #e8e6e1;
  --muted: #8b8983;
  --line: rgba(232, 230, 225, 0.12);
  --accent: #d9a15b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "PingFang SC", "Noto Sans CJK SC", sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }

main { max-width: 64rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: 0.02em; }
.crumb { color: var(--muted); font-size: 0.85rem; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent); }

.theme-grid, .wall-grid, .card-grid {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

/* 首页封面卡：细边框 + 悬停微微点亮，像墙上挂着的画框。 */
.theme-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.theme-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem;
  background: var(--bg-raised);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.theme-card:has(a:hover) { border-color: var(--accent); transform: translateY(-2px); }
.theme-card img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; display: block; }
.theme-title { display: block; margin-top: 0.5em; text-align: center; font-size: 0.95rem; }

/* 未来主题占位卡：虚线边框、不可点，视觉上明确区分于真内容。 */
.theme-card--pending {
  border-style: dashed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 2 / 3;
  color: var(--muted);
  gap: 0.4em;
}
.theme-card--pending .theme-title { color: var(--muted); margin-top: 0; }
.theme-card-pending-mark { font-size: 1.6rem; line-height: 1; color: var(--muted); }
.theme-blurb { font-size: 0.78rem; padding: 0 0.5em; }

/* 密排墙：小狮子密度——缝隙收紧，让表情包紧挨着摆，才有「密排」的墙感。
   grid-auto-flow: dense 让横图/竖图/放大格能正常跨列跨行铺开、缝隙自动
   回填——出「横竖大小不一」的拼贴感（M5 用户要的「随便点」，靠宽高比+
   feature 名单算出来，不是真随机，见 render.mjs 的 wallCellClass）。
   列宽固定像素（不用 minmax(...,1fr)）——之前用 1fr 让列宽随视口浮动，
   格子的像素宽高比跟 span 数算出来的名义比例对不上，cover 裁得不干净，
   改 contain 又露出「贴不满的框」（两轮用户反馈都在说这个）。列宽跟
   grid-auto-rows 用同一个基准单位，wide/portrait/feature 的 span 数按
   小狮子素材实际的两种比例（1:1、3:2）精确反推，格子像素比例跟图片
   原生比例基本重合，cover 直接贴满、几乎不裁、也不用留背景色垫边。
   justify-content: center 让整墙居中，行尾凑不满一列的空隙分两边，不
   露右边一条空白。窄屏断点在下面把单位一起收一档。 */
.wall-grid {
  grid-template-columns: repeat(auto-fill, 48px);
  grid-auto-rows: 48px;
  grid-auto-flow: dense;
  gap: 0.4rem;
  justify-content: center;
}
.wall-grid img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 4px; display: block;
  transition: transform 0.15s ease;
}
.wall-grid img:hover { transform: scale(1.04); }
.wall-item { grid-column: span 2; grid-row: span 2; }
.wall-item-wide { grid-column: span 3; grid-row: span 2; }
.wall-item-portrait { grid-column: span 2; grid-row: span 3; }
.wall-item-feature { grid-column: span 4; grid-row: span 4; }
.wall-item-feature-wide { grid-column: span 6; grid-row: span 4; }
.wall-item-feature-portrait { grid-column: span 4; grid-row: span 6; }

.card-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.card-grid img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; display: block; }

.site-foot { text-align: center; padding: 2rem 0; font-size: 0.8rem; color: var(--muted); }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--accent); }

@media (max-width: 480px) {
  main { padding: 2rem 1rem 3rem; }
  .theme-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .wall-grid {
    grid-template-columns: repeat(auto-fill, 36px);
    grid-auto-rows: 36px;
    gap: 0.3rem;
  }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}