/* ============================================================================
   首页视觉精修 · v2（2026-11-09）
   ----------------------------------------------------------------------------
   这一层**只改视觉，不改结构**：不动任何 PHP 输出的标签，不动 home.css。
   由 views/site/index.php 在 home.css 之后追加注册，所以这里的规则优先。
   回滚：删掉 index.php 里那行 registerCssFile，首页立刻回到旧样子。

   目标：把「九张等权小图 + 六个同形面板」拆出层级——
        公告 = 全页唯一有色块（先看它）
        面板 = 有厚度、有起点标记（品牌竖条）
        内容 = 图框统一、名次成骨架
   色板沿用 theme.css 变量，不新增颜色。
   ============================================================================ */

.site-index .wrap > .container {
    padding: 24px 15px 46px;
}

/* ------------------------------------------------------------- 主栅格节奏 */
.site-index .home-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
}
.col-main,
.site-index .col-side {
    gap: 20px;
}
/* ⚠ 这两条媒体查询里的选择器必须也带 .site-index：
   主规则是 .site-index .home-grid (0,2,0)，这里若只写 .home-grid (0,1,0)，
   特异性低一档，媒体查询**永远不生效** —— 结果是 1024~1180 右栏仍是 340，
   再窄就直接两列硬塞（375 下主栏被压成 0 宽，卡片只剩 2px，
   「最近讨论」四个字竖着排）。2026-11-09 发现并修。 */
@media (max-width: 1180px) {
    .site-index .home-grid { grid-template-columns: minmax(0, 1fr) 312px; }
}
@media (max-width: 1024px) {
    .site-index .home-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ 置顶条 */
/* 从「白卡 + 左粗边」改成「浅品牌底 + 实心徽章」：
   现在是页面上唯一一块有色底，眼睛先落在这里，再往下看内容 */
.site-index .notice-bar {
    background-color: #F1F6F5;
    border: 1px solid #DCE7E5;
    border-left: 1px solid #DCE7E5;
    border-radius: 6px;
    padding: 11px 16px;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 13px;
}
.site-index .notice-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .5px;
    padding: 4px 8px 4px 7px;
    border-radius: 3px;
}
/* 呼吸灯：徽章里那个小白点。3 秒一个来回，只动透明度与光晕，
   不缩放、不位移 —— 首页已经有很多内容，再来一个会跳舞的元素就成了噪音。
   鼠标移上去停一下（有「我要认真看这条通知」的暗示）。 */
.site-index .notice-tag::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .55);
    animation: notice-breath 2.6s ease-in-out infinite;
}
/* 只让光晕呼吸，**不把点本身调到看不见**：
   试过 opacity 1→.35，截图那帧正好落在暗处，那颗点成了一块脏灰。
   现在点最低保留 .62，靠外圈光晕 0→5px 的扩散做呼吸，看得见「在动」又不会闪。 */
@keyframes notice-breath {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .55);
    }
    50% {
        opacity: .62;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
    }
}
.site-index .notice-bar:hover .notice-tag::before,
.site-index .notice-bar:focus-within .notice-tag::before {
    animation-play-state: paused;
    opacity: 1;
}
/* 系统里关掉了「动态效果」就静止 —— 前庭敏感的人对这类闪烁最难受 */
@media (prefers-reduced-motion: reduce) {
    .notice-tag::before {
        animation: none;
        opacity: 1;
    }
}
.site-index .notice-link {
    color: var(--ink);
    font-weight: 500;
}

/* -------------------------------------------------------------------- 面板 */
.site-index .panel {
    border: 1px solid #E6E9E6;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 32, 42, .035);
}
.site-index .panel-head {
    height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid #EFF1EF;
    gap: 14px;
}
/* 标题前的 3px 品牌竖条：一眼看出「这里是这一块的起点」 */
.site-index .panel-title {
    position: relative;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    padding-left: 11px;
    line-height: 1.3;
}
.site-index .panel-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 14px;
    margin-top: -7px;
    border-radius: 2px;
    background-color: var(--brand);
}
.site-index .panel-title small {
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
    margin-left: 8px;
    letter-spacing: 0;
}
.site-index .panel-more {
    font-size: 12px;
    color: #939F9A;
}
.site-index .panel-more::after {
    content: "›";
    font-size: 15px;
    margin-left: 3px;
    vertical-align: -1px;
}
.site-index .panel-more:hover {
    color: var(--brand);
}
.site-index .panel-body {
    padding: 18px;
}

/* ---------------------------------------------------------------- 新闻卡 */
/* 海报图大小不一，框统一、底色统一，让九宫格「读起来是一排一排」而不是一堆图 */
.site-index .news-grid {
    gap: 24px 18px;
}
.site-index .news-img {
    aspect-ratio: 16 / 10;
    border: 1px solid #ECEFEC;
    border-radius: 5px;
    background-color: #F4F6F4;
    transition: border-color .18s ease;
}
.site-index .news-card:hover .news-img {
    border-color: #BFD2CF;
}
.site-index .news-card:hover .news-img img {
    opacity: .94;
}
.site-index .news-title {
    margin: 10px 0 6px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    min-height: calc(1.5em * 2);
}
.site-index .news-card:hover .news-title a {
    color: var(--brand);
}
.site-index .news-meta {
    gap: 16px;
    font-size: 11.5px;
    color: #8A9490;
}

/* ------------------------------------------------------------ 最近讨论 */
.site-index .dis-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 13.5px;
}
.site-index .dis-item {
    gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid #F2F4F2;
}
.site-index .dis-title {
    font-size: 13.5px;
    line-height: 1.45;
}
.site-index .dis-meta {
    gap: 14px;
    margin-top: 4px;
    font-size: 11.5px;
}

/* ------------------------------------------------------------ 比赛信息 */
.site-index .contest-item {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 5px 12px;
    padding: 9px 0;
    font-size: 12.5px;
    border-bottom: 1px dashed #F0F2F0;
}
.site-index .contest-label {
    color: #939F9A;
}
.site-index .contest-value {
    color: var(--ink);
}

/* -------------------------------------------------------------- 榜单/热榜 */
.site-index .rank-item {
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #F2F4F2;
}
/* 名次从 11px 灰字改成小方块：排行类信息，序号本身是视觉骨架。
   ------------------------------------------------------------------
   ⚠ 这一块三条规则都写 !important，不是图省事，是踩过一次：
   第一版用 `.rank-no` + `.rank-item:nth-child(1) .rank-no`，
   线上第 1 名的数字整块看不见 —— 深青背影里一个深青的「1」。
   原因是「深青字」和「白字」两条规则特异性相同，谁在后面谁赢，
   而线上有别的样式表（home.css / site.css）插在中间，把顺序改掉了。
   现在：几何用 flex 居中（不依赖 line-height / text-align 是否被改），
   选择器统一抬到 `.site-index .rank-list` 下，配色一律 !important。
   以后再有同名规则插进来也压不动它。 */
.site-index .rank-list .rank-no {
    flex: 0 0 22px;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #F3F5F3;
    color: #7C8A85;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1 !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}
.site-index .rank-list .rank-item:nth-child(-n+3) .rank-no {
    background-color: var(--brand-soft) !important;
    color: var(--brand) !important;
}
/* 第 1 名：深青实底 + 白字。这条**必须排在上面那条之后**（同为 !important 时靠顺序决胜） */
.site-index .rank-list .rank-item:first-child .rank-no {
    background-color: var(--brand) !important;
    color: #fff !important;
}
.site-index .rank-name {
    font-size: 13.5px;
}
/* 分数是这张卡的主信息，原来 11px 灰字太弱 */
.site-index .rank-val {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.site-index .rank-val .ico {
    color: #A6B0AC;
}
.site-index .rank-sub {
    margin-top: 3px;
    font-size: 11.5px;
    color: #939F9A;
}

/* 段位小徽章：圆角 2 → 3，行高抬一点，不贴着姓名 */
.site-index .grade {
    border-radius: 3px;
    padding: 2.5px 6px;
    margin-left: 7px;
    font-size: 10px;
    vertical-align: 1px;
}

/* ------------------------------------------------------------------ 页脚 */
.site-index .footer,
.site-index footer {
    border-top: 1px solid #E9ECE9;
}

/* ------------------------------------------------------------------ 窄屏 */
/* 900 以下 home.css 已收成 2 列；再窄到 560 时两列各只剩 ~150px，
   标题会挤成三行、日期换行，改单列更可读。只影响手机，桌面无变化。 */
@media (max-width: 560px) {
    .notice-bar {
        padding: 10px 12px;
        gap: 9px;
        font-size: 12.5px;
        flex-wrap: wrap;
    }
    .panel-head {
        height: 44px;
        padding: 0 14px;
    }
    .panel-body {
        padding: 14px;
    }
    .news-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .news-title {
        min-height: 0;
    }
}

/* 右栏卡片被内容撑宽（既有问题，不是这轮动画引入的）：
   .col-side 是 grid，子项默认 min-width:auto，榜单里那个
   「------监狱栅栏------」之类的长名字把轨道顶到 422px，而列宽只有
   340 —— 卡片右侧压到页面留白上，跟左边新闻卡不齐。
   给 min-width:0 让轨道能收缩，超长行交给 .rank-line 的省略号。 */
.site-index .col-main > .panel,
.site-index .col-side > .panel {
    min-width: 0;
}

/* ============================================================
   榜单「逐行点亮」走马灯（2026-11-09）
   需求原话：个人排名这里，第 1 行先变色/放大，过一两秒第 2 行，
   依次循环。三个榜单（个人 / 新闻 / 讨论）都按这个走。
   ------------------------------------------------------------
   实现：5 行共用同一套 keyframes，各自 animation-delay 错开 1.4s，
   一圈 7 秒。纯 CSS，不写 JS —— 这块内容由 PHP 直出，加 JS 还要
   额外处理「重新渲染后怎么接着走」，反而更容易出错。
   ⚠ 三条不能碰：
   ① 不动 padding 纵向值、font-size、字重 —— 行高或文字宽度一变，
      5 行一起「抽筋」。左右内边距用 margin 负值抵消，行高不变。
   ② 不给整行 transform: scale —— 会溢出卡片被裁、相邻行错位。
      「放大」只放在序号方块上（1 → 1.1）。
   ③ 不改 .rank-no 的 background / color —— 修隐形序号时那两条带了
      !important，动画压不住；改用 box-shadow 画光圈。
   ============================================================ */

/* 5 行各自起跑时间：第 k 行晚 (k-1)×1.4s。用自定义属性传递，
   .rank-no 作为子元素能直接继承，不必再写五条 */
.site-index .rank-list .rank-item:nth-child(1) { --rank-d: 0s; }
.site-index .rank-list .rank-item:nth-child(2) { --rank-d: 1.4s; }
.site-index .rank-list .rank-item:nth-child(3) { --rank-d: 2.8s; }
.site-index .rank-list .rank-item:nth-child(4) { --rank-d: 4.2s; }
.site-index .rank-list .rank-item:nth-child(5) { --rank-d: 5.6s; }

.site-index .rank-list .rank-item {
    position: relative;
    /* 左右各留 8px 让色块不贴文字；用负 margin 抵回，行宽与原来一致 */
    padding: 10px 8px;
    margin: 0 -8px;
    border-radius: 6px;
    background-color: rgba(15, 92, 107, 0);
    animation: rank-scan 7s ease-in-out infinite;
    animation-delay: var(--rank-d, 0s);
}

/* 左侧那道 3px 竖条用 inset 阴影画 —— 用伪元素要占位，会影响 flex 排布 */
@keyframes rank-scan {
    0%, 12% {
        background-color: rgba(15, 92, 107, .075);
        box-shadow: inset 3px 0 0 var(--brand);
    }
    20%, 100% {
        background-color: rgba(15, 92, 107, 0);
        box-shadow: inset 3px 0 0 rgba(15, 92, 107, 0);
    }
}

/* 序号方块跟着「放大一下」：光圈扩散 + 轻微缩放，不换底色 */
.site-index .rank-list .rank-no {
    animation: rank-no-ping 7s ease-in-out infinite;
    animation-delay: var(--rank-d, 0s);
}
@keyframes rank-no-ping {
    0%, 12% {
        box-shadow: 0 0 0 3px rgba(15, 92, 107, .18);
        transform: scale(1.1);
    }
    20%, 100% {
        box-shadow: 0 0 0 0 rgba(15, 92, 107, 0);
        transform: scale(1);
    }
}

/* 鼠标移到榜单上就停：正在看名次时不该被旁边的行牵着走。
   这里用 animation:none 而不是 play-state:paused —— 暂停会把某一行
   冻在半亮状态，看着像卡住了。 */
.site-index .rank-list:hover .rank-item,
.site-index .rank-list:hover .rank-no {
    animation: none;
}

/* 系统里关掉了「动态效果」：一律静止 */
@media (prefers-reduced-motion: reduce) {
    .site-index .rank-list .rank-item,
    .site-index .rank-list .rank-no {
        animation: none;
    }
}