/* ==========================================================================
   Sunny 主题 · 功能主页（home.css）
   --------------------------------------------------------------------------
   仅服务「最近在听 + 最近在玩」双面板。完全对齐主题默认设计语言：
   白卡 .cat_block（--background/--radius/--box-shadow，无边框）+ 内嵌卡
   （--under-background 底 + --O 边，hover 变 --theme-10/--theme-30）。
   仅使用主题令牌，深浅色模式自动适配，不修改主题任何文件。
   ========================================================================== */

.fp {
    /* 主题令牌别名（带兜底值，脱离主题预览时也不会崩） */
    --fp-bg:     var(--background, #fff);
    --fp-under:  var(--under-background, #f7f7f7e6);
    --fp-main:   var(--main, #34495e);
    --fp-c:      var(--C, rgb(52 73 94 / 70%));
    --fp-b:      var(--B, rgb(52 73 94 / 40%));
    --fp-o:      var(--O, rgb(52 73 94 / 3%));
    --fp-p:      var(--P, rgb(52 73 94 / 6%));
    --fp-theme:  var(--theme, #607ab3);
    --fp-theme-10: var(--theme-10, rgb(96 122 179 / 10%));
    --fp-theme-30: var(--theme-30, rgb(96 122 179 / 30%));
    --fp-radius: var(--radius, 1rem);
    --fp-margin: var(--margin, 1.5rem);
    --fp-ncm:    #c20c0c;
    --fp-green:  #3fbf6b;

    display: flex;
    flex-direction: column;
    gap: var(--fp-margin);
    color: var(--fp-main);
}

/* ---------- 区块白卡 + 标题（主题 little_card_title 同款竖条） ---------- */
.fp-sec-t {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fp-main);
}
.fp-sec-t .little_card_title {
	margin-bottom: 0;
}

.fp-sec-more {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    height: 1.9rem;
    padding: 0 .8rem;
    border-radius: 999rem;
    background: var(--fp-under);
    color: var(--fp-c);
    font-size: .75rem;
    font-weight: 400;
    transition: .25s;
}
.fp-sec-more:hover { background: var(--fp-theme-10); color: var(--fp-theme); transform: translateX(.15rem); }

/* ---------- 双栏 ---------- */
.fp-duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: var(--fp-margin);
    align-items: stretch;
}
/* 白卡变 flex 纵向：标题固定，列表吃剩余高度（用 flex:1 而非 height:100%，
   否则 100% + 标题高度 = 列表底部顶出白卡边界） */
.fp-duo .fp-sec {
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.fp-duo .fp-sec-t { flex: none; }

/* ==========================================================================
   最近在听（主题内嵌卡同款：under 底 + O 边，hover 主题化）
   ========================================================================== */
.fp .fp-ncm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;          /* 占白卡内标题以外的剩余高度 */
    height: auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden; /* 兜底：极端情况内部截断，绝不越界 */
}
.fp .fp-ncm-list > li {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .6rem;
    background: var(--fp-under);
    border: 1px solid var(--fp-o);
    border-radius: .9rem;
    cursor: pointer;
    transition: .25s;
}
.fp .fp-ncm-list > li:hover {
    background: var(--fp-theme-10);
    border-color: var(--fp-theme-30);
}
.fp-nc-cover {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: .6rem;
    object-fit: cover;
    background: var(--fp-p);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 4%);
    transition: transform .3s ease;
}
.fp-nc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .18rem; }
.fp-nc-name {
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fp-nc-art { color: var(--fp-c); font-size: .76rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-nc-plays {
    flex: 0 0 auto;
    padding: .18rem .6rem;
    border-radius: 999rem;
    background: var(--fp-o);
    color: var(--fp-c);
    font-size: .72rem;
    font-style: normal;
    white-space: nowrap;
}
.fp-nc-plays.is-fav { color: #fff; background: var(--fp-ncm); opacity: .85; }

/* ==========================================================================
   最近在玩（正在玩的游戏卡直接变绿 + 脉动圆点）
   ========================================================================== */
.fp-games {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;  /* 3 行均分，撑满白卡剩余高度 */
    gap: .75rem;
    flex: 1;
    min-height: 0;
}
.fp-game {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--fp-under);
    border: 1px solid var(--fp-o);
    border-radius: .9rem;
    transition: .25s;
    transform: translateZ(0);
}
.fp-game:hover { background: var(--fp-theme-10); border-color: var(--fp-theme-30); }

/* 2-5 款：上图下文，图区弹性填充（行高压缩时先缩图区，文字始终完整） */
.fp-game-cap {
    flex: 1 1 auto;
    min-height: 0;
    background: var(--fp-p);
    overflow: hidden;
}
.fp-game-cap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.fp-game-body {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: .18rem;
    padding: .55rem .75rem .6rem;
    min-width: 0;
}
.fp-game-name {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}
.fp-game-meta { color: var(--fp-c); font-size: .73rem; opacity: .85; }

/* ---------- 第 1 款大卡：横跨两列，封面铺满做背景 + 白字压图 ---------- */
.fp-game.is-featured { grid-column: span 2; }
.fp-game.is-featured .fp-game-cap {
    position: absolute;
    inset: 0;
    flex: none;
}
.fp-game.is-featured::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(18 24 38 / 0%) 34%, rgb(18 24 38 / 72%) 100%);
    pointer-events: none;
}
.fp-game.is-featured:hover .fp-game-cap img { transform: scale(1.06); }
.fp-game.is-featured .fp-game-body {
    position: relative;
    z-index: 1;
    color: #fff;
    margin: auto 0 0;
}
.fp-game.is-featured .fp-game-name {
    font-size: 1rem;
    color: #fff;
    text-shadow: 0 1px 6px rgb(0 0 0 / 45%);
}
.fp-game.is-featured .fp-game-meta {
    font-size: .78rem;
    color: rgb(255 255 255 / 78%);
    text-shadow: 0 1px 4px rgb(0 0 0 / 45%);
}

/* ---------- 正在玩：整卡绿色状态 ---------- */
.fp-game.is-playing {
    background: rgb(63 191 107 / 9%);
    border-color: rgb(63 191 107 / 32%);
}
.fp-game.is-playing:hover {
    background: rgb(63 191 107 / 16%);
    border-color: rgb(63 191 107 / 48%);
}
.fp-game.is-playing .fp-game-name { color: var(--fp-green); }
.fp-game.is-playing .fp-game-meta { color: rgb(63 191 107 / 85%); opacity: 1; }
/* 大卡同时在玩：绿框 + 时长绿字（白字名字保证图上可读） */
.fp-game.is-featured.is-playing { border-color: rgb(63 191 107 / 55%); }
.fp-game.is-featured.is-playing .fp-game-meta { color: rgb(134 226 170 / 95%); }

.fp-now-dot {
    position: relative;
    flex: none;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fp-green);
}
.fp-now-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--fp-green);
    animation: fpPulse 1.6s ease-out infinite;
}
@keyframes fpPulse {
    0%   { transform: scale(.6); opacity: .9; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ==========================================================================
   空状态
   ========================================================================== */
.fp-mini-empty {
    padding: 1.4rem 1rem;
    color: var(--fp-c);
    font-size: .85rem;
    text-align: center;
    background: var(--fp-under);
    border-radius: .9rem;
    opacity: .8;
}

/* ==========================================================================
   进场动画（.fp-reveal + JS .is-in）
   ========================================================================== */
.fp-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}
.fp-reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 860px) {
    .fp-duo { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .fp-sec { padding: 1.1rem 1rem; }
    .fp-sec-t { margin-bottom: .9rem; }
    .fp-games { grid-template-columns: 1fr 1fr; gap: .55rem; }
    .fp-game.is-featured .fp-game-name { font-size: .92rem; }
}