/* =========================================================
 * 匹配首页专用样式（v20261011-16）
 * 作用域仅 body.home 内的 .h-* 类，不改 app.css 公共样式，防回归
 * 目标：三张匹配卡上下分区（顶部整行文字 + 下半区插画），主卡总高约 420，群组区 top 约 565
 * ========================================================= */

/* ---- 页面氛围：顶部淡紫雾化渐变（纯背景绘制，不产生溢出） ---- */
body.home {
  background:
    radial-gradient(140% 340px at 18% -60px, rgba(183, 160, 255, .42) 0%, rgba(183, 160, 255, 0) 62%),
    radial-gradient(120% 300px at 88% -40px, rgba(255, 176, 205, .34) 0%, rgba(255, 176, 205, 0) 60%),
    radial-gradient(90% 260px at 55% 130px, rgba(168, 200, 255, .20) 0%, rgba(168, 200, 255, 0) 65%),
    #F4F5FB;
}
.home .home-topbar { background: transparent; border-bottom-color: transparent; }

/* ---- 在线区：诚实状态提示（无真实数据，不摆占位破折号） ---- */
.home .h-live-honest {
  display: flex; align-items: center; gap: 8px;
  margin: 0 2px 14px; padding: 10px 14px;
  background: #FFFFFF; border-radius: 14px;
  box-shadow: 0 3px 10px rgba(60, 50, 120, 0.05);
}
.home .h-live-honest .h-dot-off { flex-shrink: 0; }
.home .h-live-honest-txt {
  font-size: 12px; font-weight: 600; color: #8A8FA3; line-height: 1.5;
}

/* ---- 匹配方式拼贴：上下分区（群组标题落至 ~y565） ---- */
.home .h-tiles {
  grid-template-rows: 204px 204px;   /* 副卡两行各 204，主卡跨两行总高 204+204+12=420 */
  gap: 12px;
  margin-bottom: 10px;               /* 真实尺寸主导落位，不靠大空白撑高 */
}
.home .h-tile {
  border-radius: 26px;
  padding: 16px 16px;
  display: flex; flex-direction: column; justify-content: flex-start;
  overflow: hidden;
}
/* 卡片层次：顶部内高光 + 底部内阴影，营造玻璃质感（不改动布局尺寸） */
.home .h-tile {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -14px 24px rgba(120, 40, 90, .10),
    0 10px 22px rgba(140, 110, 255, .22);
}
/* 主卡：层次更深，图形更大 */
.home .h-tile.h-t1 {
  padding: 18px 18px;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .45),
    inset 0 -20px 32px rgba(150, 30, 80, .14),
    0 16px 32px rgba(255, 111, 160, .38);
}
/* 顶部文字整行可读：名称/副文不为插画预留横向 padding */
.home .h-tile .h-t-name { font-size: 18px; line-height: 1.3; white-space: nowrap; padding-right: 0; }
.home .h-tile.h-t1 .h-t-name { font-size: 20px; letter-spacing: 1px; line-height: 1.3; padding-right: 0; }
.home .h-tile .h-t-sub { font-size: 12px; line-height: 1.4; margin-top: 6px; padding-right: 0; opacity: .95; }
.home .h-tile.h-t1 .h-t-sub { font-size: 12px; margin-top: 6px; opacity: .95; padding-right: 0; }
/* 下半区插画：真实上下分区防重叠（文字在上，图形在下） */
.home .h-tile .h-t-emoji {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  width: auto; height: 112px; margin: 0;
  display: flex; align-items: flex-end; justify-content: center;
}
.home .h-tile.h-t1 .h-t-emoji { left: 18px; right: 18px; bottom: 18px; height: 240px; }
.home .h-tile .h-t-emoji svg { width: auto; height: 100%; max-width: 100%; }
.home .h-tile.h-t1 .h-t-tag { font-size: 9px; padding: 3px 9px; }
/* 次卡：精致化 */
.home .h-tile.h-t2, .home .h-tile.h-t3 { box-shadow: 0 10px 22px rgba(140, 110, 255, .26); }
.home .h-tile.h-t3 { box-shadow: 0 10px 22px rgba(91, 155, 255, .26); }
.home .h-tile .h-t-tag { top: 10px; right: 10px; }
/* 键盘可达焦点态（匹配卡已加 tabindex） */
.home .h-tile:focus-visible {
  outline: 3px solid rgba(123, 97, 255, .55); outline-offset: 2px;
}

/* ---- 群组区：与焦点区拉开呼吸距离，标题贴近首屏下沿 ---- */
.home .h-gzone { margin-top: 4px; }
.home .h-g-head { padding-top: 2px; }

/* 群组 2 列渐变卡：整卡柔和粉紫/蓝青/薄荷渐变（非 5px 彩条 + 白卡） */
.home .h-gcard {
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 10px 22px rgba(60, 50, 120, .10);
}
.home .h-gcard.h-gc1 {
  background:
    radial-gradient(120% 130% at 100% 110%, rgba(201, 166, 255, .45) 0%, rgba(201, 166, 255, 0) 62%),
    linear-gradient(160deg, #FFE1EC 0%, #F3D9FF 60%, #E7D4FF 100%);
}
.home .h-gcard.h-gc2 {
  background:
    radial-gradient(120% 130% at 100% 110%, rgba(127, 214, 220, .42) 0%, rgba(127, 214, 220, 0) 62%),
    linear-gradient(160deg, #DCEDFF 0%, #D9F0F6 60%, #D6F3EC 100%);
}
.home .h-gcard.h-gc3 {
  background:
    radial-gradient(120% 130% at 100% 110%, rgba(143, 227, 200, .42) 0%, rgba(143, 227, 200, 0) 62%),
    linear-gradient(160deg, #E2F7EA 0%, #DCF4EE 60%, #E2F2F9 100%);
}
.home .h-gcard.h-gc4 {
  background:
    radial-gradient(120% 130% at 100% 110%, rgba(156, 184, 255, .45) 0%, rgba(156, 184, 255, 0) 62%),
    linear-gradient(160deg, #E4ECFF 0%, #E9E4FF 60%, #F2E2F8 100%);
}
/* 顶部主题渐变带：保留为同色系强化条（整卡已是渐变，此条为精致度加分） */
.home .h-gcard::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  border-radius: 22px 22px 0 0; opacity: .85;
}
.home .h-gcard.h-gc1::before { background: linear-gradient(90deg, #FF8FB8, #C9A6FF); }
.home .h-gcard.h-gc2::before { background: linear-gradient(90deg, #7FB4FF, #7FD6DC); }
.home .h-gcard.h-gc3::before { background: linear-gradient(90deg, #8FE3C8, #9CC8F0); }
.home .h-gcard.h-gc4::before { background: linear-gradient(90deg, #9CB8FF, #C9A6FF); }
/* 角落柔彩晕染：提高浓度，配合整卡渐变增强体积感 */
.home .h-gcard::after {
  content: ""; position: absolute; width: 120px; height: 120px; right: -48px; bottom: -62px;
  border-radius: 50%; pointer-events: none;
}
.home .h-gcard.h-gc1::after { background: radial-gradient(circle, rgba(255, 143, 184, .30) 0%, rgba(255, 143, 184, 0) 70%); }
.home .h-gcard.h-gc2::after { background: radial-gradient(circle, rgba(96, 170, 250, .28) 0%, rgba(96, 170, 250, 0) 70%); }
.home .h-gcard.h-gc3::after { background: radial-gradient(circle, rgba(110, 214, 178, .30) 0%, rgba(110, 214, 178, 0) 70%); }
.home .h-gcard.h-gc4::after { background: radial-gradient(circle, rgba(140, 160, 250, .30) 0%, rgba(140, 160, 250, 0) 70%); }
/* 确保文字内容在装饰层之上 */
.home .h-gcard > * { position: relative; z-index: 1; }
/* 整卡渐变下文字可读性：名称/描述/角标对比度加强 */
.home .h-gcard .h-gc-name { color: #23263A; }
.home .h-gcard .h-gc-desc { color: #5F6478; }
.home .h-gcard .h-gc-badge { color: #6B5B8E; background: rgba(255, 255, 255, .88); }
.home .h-gcard .h-gc-count { color: #4E5266; }

/* ---- 较宽屏（≥400px 逻辑宽）微调：同比例放大插画，标题仍整行不换 ---- */
@media (min-width: 400px) {
  .home .h-tiles { gap: 14px; }
  .home .h-tile .h-t-emoji { height: 120px; }
  .home .h-tile.h-t1 .h-t-emoji { height: 252px; }
}