@charset "UTF-8";
/* ==========================================================================
   直播列表页专用样式（纯 CSS2：float / inline-block / margin 模拟 gap）
   --------------------------------------------------------------------------
   按兼容模式编写：不使用 display:flex / display:grid / 媒体查询里的布局 /
   calc() / CSS 变量。现代内核与 360 兼容模式（剥离 @supports 与媒体查询、
   禁 flex gap）渲染完全一致。
   加载顺序：home.css → site.css → livelist.css → compat.css

   对应关系（旧站 Tailwind → 本文件）：
     flex items-center gap-2/3      → .ll-ib 行内块 + margin（8/12px）
     flex justify-between           → 左右两个 float（见 .ll-headbar）
     flex-1 min-w-0（文字区）        → 前面 float 的 margin-right 撑出间距，
                                      文字块本身不浮动，行盒自动避开浮动
                                      （等价 flex 的「占满剩余宽度」，且能省略号）
     grid grid-cols-2/3             → .ll-hero-grid / .ll-card-grid（float 百分比栅格）
     grid gap-4                     → 子元素 margin（与 site.css 的 gr-grid-* 同参）
     卡内 absolute flex 居中         → .ll-center（100% 高的行内占位 + vertical-align）
   ========================================================================== */

/* ==========================================================================
   1. 通用（容器 / 行内块 / 清浮动）
   ========================================================================== */

/* max-w-7xl mx-auto px-4 的等价写法（float 栅格的百分比基准） */
.ll-wrap { max-width: 1280px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* 行内块 + 行内中线对齐：替换 flex items-center 的「图标 + 文字」组合。
   注意：图标与文字在页面里必须紧挨着输出（中间不能有换行空白），
   否则行内流里的空白会多出一格空格（flex 没有这个问题）。 */
.ll-ib { display: inline-block; vertical-align: middle; }

/* 和文字排在同一行的图标统一走这一组（详细说明见 profile.css 同一处）：
   1) home.css 的 preflight 把 svg 设成 display:block，行内混排必须显式拉回来；
   2) vertical-align: middle 按「基线 + 半个 x 高度」对齐（拉丁字母的视觉中心），
      中文方块字会整体低 1px，用相对定位上提 1px —— 相对定位不参与排版。 */
.ll-ib svg,
svg.ll-ib,
.ll-head-r svg,
.ll-pill svg,
.ll-verified svg,
.ll-card-more svg,
.ll-streamer-row .ll-crown svg,
.ll-icon-line svg {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* 主区两栏：flex gap-6（左 flex-1 + 右 w-80=320px）→ 左 72.4% / 右 25.6% 双向浮动。
   1248px 版心宽下：左 904px（原 flex 值 904px）、右 319px（原 320px）、
   中间余 25px（原 gap-6 = 24px）。两列都用百分比，窗口变窄时一起缩，不会掉行。 */
.ll-cols { display: block; }
.ll-cols:after { content: ""; display: block; clear: both; }
.ll-main { float: left; width: 72.4%; }
.ll-aside { float: right; width: 25.6%; }

/* py-6（旧站 max-w-7xl mx-auto px-4 py-6） */
.ll-body { padding-top: 24px; padding-bottom: 24px; }

/* ==========================================================================
   2. 页头条（左：图标 + 标题；右：实时更新）
   --------------------------------------------------------------------------
   旧站是 flex items-center justify-between，右组还是 hidden sm:flex（窄屏隐藏）。
   这里是纯 CSS2，没有媒体查询：右组始终显示，用 float 靠右。
   ========================================================================== */

.ll-headbar { padding-top: 16px; padding-bottom: 16px; }
.ll-headbar:after { content: ""; display: block; clear: both; }
.ll-head-l { float: left; }
.ll-head-l h1 { margin-left: 12px; }              /* gap-3 = 12px */
/* items-center 的等价：右组内容 20px、左组 28px，补 4px 让两组中线对齐 */
.ll-head-r { float: right; padding-top: 4px; }
.ll-head-r svg { vertical-align: middle; margin-right: 8px; }   /* gap-2 = 8px */

/* ==========================================================================
   3. 区块标题行（图标 + section-title[+ 计数]）
   --------------------------------------------------------------------------
   .section-title 在 home.css 里是 display:flex（::before 竖条 + 文字），
   这里整体 float:left 排在一行里：float 元素仍然是 flex 容器，
   gap / margin-right 两套模拟逻辑（home.css 的 @supports）继续生效，不会被拆开。
   ========================================================================== */

.ll-sec-head { display: block; margin-bottom: 16px; }
.ll-sec-head:after { content: ""; display: block; clear: both; }
.ll-sec-head > svg { float: left; margin: 4px 8px 0 0; }   /* w-5(20px) 在 28px 行高里居中 */
.ll-sec-head > .section-title { float: left; }
.ll-sec-head > .ll-count { float: left; margin-left: 16px; line-height: 28px; }   /* gap-2 + ml-2 */

/* ==========================================================================
   4. 封面覆盖层（徽标行 / 居中层 / 圆形播放键 / 胶囊）
   ========================================================================== */

/* absolute inset-0 的居中：CSS2 用「100% 高的行内占位 + vertical-align:middle」，
   等价 flex items-center justify-center（IE8+ 有效，且两个内核一致）。 */
.ll-center { text-align: center; }
.ll-center:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
.ll-center > * { display: inline-block; vertical-align: middle; }
.ll-emoji { line-height: 1; }                     /* 表情包不受行高影响，保证是垂直居中 */

/* 左上角徽标行：flex items-center gap-2 / gap-1.5 → 相邻 margin。
   注意只对齐、不改 display：.live-badge 自身是 inline-flex（圆点 + 文字）。 */
.ll-tagrow > * { vertical-align: middle; }
.ll-tagrow > * + * { margin-left: 8px; }          /* gap-2 = 8px */
.ll-tagrow-sm > * + * { margin-left: 6px; }       /* gap-1.5 = 6px */

/* 播放量 / 分类小胶囊：flex items-center gap-1 → inline-block + 图标 margin-right */
.ll-pill { display: inline-block; vertical-align: middle; }
.ll-pill svg { vertical-align: middle; margin-right: 4px; }     /* gap-1 = 4px */

/* 圆形播放键（w-16 h-16 / w-12 h-12）：flex 居中 → 行高居中。
   font-size: 0 同 .pf-entry-icon：这块只装一枚图标，留着字号会把字体度量算进
   行盒，line-height 居中就会偏下 1px 左右。 */
.ll-play-xl,
.ll-play-md {
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  text-align: center;
  font-size: 0;
}
.ll-play-xl { width: 64px; height: 64px; line-height: 64px; }
.ll-play-md { width: 48px; height: 48px; line-height: 48px; }
.ll-play-xl svg,
.ll-play-md svg { display: inline-block; vertical-align: middle; }

/* ==========================================================================
   5. 热门推荐（三张卡并排）
   --------------------------------------------------------------------------
   2026-09-18 按用户要求从旧站「左大卡 3:4 + 右两张小卡」改为三张同尺寸并排。
   栅格仍是 float 百分比（32.3% + 1% 间距），与第 6 节 ll-card-grid 同参，
   两套内核渲染一致。三张卡复用原大卡的样式（3:4 画面 + 底部头像信息行）。
   ========================================================================== */

.ll-hero-grid { display: block; }
.ll-hero-grid:after { content: ""; display: block; clear: both; }
.ll-hero-card {
  float: left;
  width: 32.3%;
  margin: 0 1% 0 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.ll-hero-card:nth-child(3n) { margin-right: 0; }
.ll-hero-card:nth-child(3n+1) { clear: left; }

/* 卡片底部信息行：flex items-center gap-3 → 头像 float + 文字块行盒避让 */
.ll-hero-foot { display: block; }
.ll-hero-foot:after { content: ""; display: block; clear: both; }
.ll-hero-foot .ll-foot-img { float: left; text-align: center; }
.ll-hero-foot .ll-foot-img { margin-right: 12px; }      /* gap-3 = 12px */
.ll-foot-img { line-height: 40px; }                /* w-10 h-10 的首字居中 */

/* ==========================================================================
   6. 直播间卡网格（3 列；旧站 xl:grid-cols-3 gap-4 + gr-grid-3 兜底）
   --------------------------------------------------------------------------
   与 site.css 的 .grid.gr-grid-3 同参（宽度 32.3% / 间距 1% ≈ 16px），
   但不再依赖 .grid：真 grid 会让整行等高、float 不会，两套内核要一致就得只用一套。
   ========================================================================== */

.ll-card-grid { display: block; }
.ll-card-grid:after { content: ""; display: block; clear: both; }
.ll-card-grid > * {
  float: left;
  width: 32.3%;
  margin: 0 1% 16px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ll-card-grid > *:nth-child(3n) { margin-right: 0; }
.ll-card-grid > *:nth-child(3n+1) { clear: left; }
.ll-card { display: block; text-decoration: none; color: inherit; }

/* 卡内主播行：flex items-center gap-2.5 → 头像 float（w-8=32px）+ 10px，
   文字块不浮动，行盒自动从头像右边开始排（等价 flex-1 min-w-0，且能出省略号） */
.ll-who-row { display: block; }
.ll-who-row:after { content: ""; display: block; clear: both; }
.ll-av { float: left; margin-right: 10px; text-align: center; line-height: 32px; }
.ll-who { display: block; }
.ll-who p { line-height: 32px; }                   /* 与头像同高，文字中线对齐 */

/* 「已实名」徽标：inline-flex items-center gap-0.5 → 行内块 + 图标 margin-right */
.ll-verified { display: inline-block; vertical-align: middle; margin-left: 4px; }
.ll-verified svg { vertical-align: middle; margin-right: 2px; }

/* ==========================================================================
   7. 侧栏（主播排行榜 / 即将开播 / 直播分类 / 在线用户动态）
   --------------------------------------------------------------------------
   旧站侧栏是 hidden lg:block（窄屏隐藏）：纯 CSS2 没有媒体查询，
   这里侧栏始终显示，宽度由 .ll-aside 的百分比栅格给定。
   原 flex gap-3 的「行内文字与右侧装饰」用 float 复刻：
   左侧 float:left + margin-right，右侧 float:right + margin-left，
   中间的文字块不浮动 —— 行盒自动避开左右两边的浮动，宽度与 flex 完全一致。
   ========================================================================== */

/* 侧栏卡头：flex items-center justify-between */
.ll-card-head { display: block; margin-bottom: 16px; }
.ll-card-head:after { content: ""; display: block; clear: both; }
.ll-card-head .ll-card-head-l { float: left; }
.ll-card-head-l { display: block; }
.ll-card-head-l .ll-ib + .ll-ib { margin-left: 8px; }            /* gap-2 = 8px */
.ll-card-more { float: right; padding-top: 2px; text-decoration: none; }
.ll-card-more svg { vertical-align: middle; margin-left: 2px; }   /* gap-0.5 = 2px */

/* 主播排行榜行：flex items-center gap-3（名次 20 + 头像 32 + 文字 + 皇冠 14） */
.ll-streamer-row { display: block; }
.ll-streamer-row:after { content: ""; display: block; clear: both; }
.ll-streamer-row .ll-rank {
  float: left;
  width: 20px;                  /* w-5：名次列定宽，数字才不会把头像挤歪 */
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 32px;
}
.ll-streamer-row .ll-av-lg {
  float: left;
  width: 32px;
  height: 32px;
  margin-left: 12px;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
}
/* 皇冠在 DOM 里排在文字块之前（float 不能出现在块级兄弟后面，否则会掉到下一行） */
.ll-streamer-row .ll-crown { float: right; margin-left: 12px; line-height: 32px; }
.ll-streamer-row .ll-crown svg { vertical-align: middle; }
.ll-rk-info { display: block; }

/* 图标 + 文字的小行（热度 / 开播时间）：flex items-center gap-1 → 图标 margin-right */
.ll-icon-line { display: block; }
.ll-icon-line svg { vertical-align: middle; margin-right: 4px; }   /* gap-1 = 4px */

/* 即将开播行：flex items-start gap-3（表情 32px + 12px + 文字块） */
.ll-upcoming-row { display: block; }
.ll-upcoming-row:after { content: ""; display: block; clear: both; }
.ll-upcoming-row .ll-emoji-xl { float: left; margin: 2px 12px 0 0; }   /* mt-0.5 + gap-3 */
.ll-up-info { display: block; }

/* 直播分类标签云：flex flex-wrap gap-2 → float 换行（float 不会吃到行内空白） */
.ll-tag-wrap { display: block; }
.ll-tag-wrap:after { content: ""; display: block; clear: both; }
.ll-tag-wrap > * { float: left; margin: 0 8px 8px 0; }

/* 在线用户动态行：flex items-center gap-2.5（头像 24 + 10px + 文字块） */
.ll-online-row { display: block; }
.ll-online-row:after { content: ""; display: block; clear: both; }
.ll-av-sm { float: left; margin-right: 10px; }
.ll-on-info { display: block; }

/* ==========================================================================
   9. 手机端（低于 lg 1024px）：直播卡一行两个、侧栏整体下移
   --------------------------------------------------------------------------
   桌面基础布局仍是纯 CSS2 float（两套内核一致）；这个媒体查询只在现代内核
   生效——老内核（360 兼容等）剥离媒体查询后拿到的是桌面布局，桌面宽度下
   三列 + 右侧栏本来就是对的，没有损失。手机上没有兼容内核用户。
   ========================================================================== */

@media (max-width: 1023.98px) {
  /* 主区与侧栏上下堆叠：主播排行榜等侧栏内容出现在正文下面 */
  .ll-main { float: none; width: auto; }
  .ll-aside { float: none; width: auto; margin-top: 32px; }

  /* 正在直播：一行两个 */
  .ll-card-grid > * {
    width: 49%;
    margin: 0 2% 16px 0;
  }
  .ll-card-grid > *:nth-child(n) { clear: none; }        /* 覆盖桌面 3n+1 的 clear */
  .ll-card-grid > *:nth-child(3n) { margin-right: 2%; }  /* 覆盖桌面 3n 的零右边距 */
  .ll-card-grid > *:nth-child(2n) { margin-right: 0; }
  .ll-card-grid > *:nth-child(2n+1) { clear: left; }

  /* 热门推荐：同样一行两个（第三张卡在第二行左侧） */
  .ll-hero-grid .ll-hero-card {
    width: 49%;
    margin: 0 2% 0 0;
  }
  .ll-hero-grid .ll-hero-card:nth-child(n) { clear: none; }
  .ll-hero-grid .ll-hero-card:nth-child(3n) { margin-right: 2%; }
  .ll-hero-grid .ll-hero-card:nth-child(2n) { margin-right: 0; }
  .ll-hero-grid .ll-hero-card:nth-child(2n+1) { clear: left; }
}