/* ============================================================
 * leaderboard.css
 * 位置：static/runtime/games/leaderboard.css（运行时容器目录）
 * Leaderboard 排行榜容器样式 —— 同时服务两种密度：
 *   - is-overlay  小游戏全屏弹层（密度大、字号大、头像大）
 *   - is-inline   社区 slide 内联（密度小、字号小、头像小，靠外层 slide 滚动）
 * 视觉：深色半透明 + 强 blur + saturate 抬升 + 细白边 + 浮层阴影；
 *       白文字 + 白色虚线分隔；头像/名字可点击跳对方主页。
 * 同一份 panel / tabs / list / rowHtml 由两种模式共用，差异只来自 modifier。
 * ============================================================ */

/* ---------- overlay 模式：全屏弹层（仅 .is-overlay 用 .lb-overlay） ---------- */
.lb-overlay {
    position: fixed;
    inset: 0;
    /* 三层层级：游戏 stdModal 4100（底）→ 排行榜 4150（中）→ 主页（顶，临时开）。
       之前用 20000 把排行榜顶到最上层是错的：关闭主页后排行榜反而罩住游戏，
       用户看到的是排行榜而不是游戏。4150 让排行榜始终落在「游戏之上、主页之下」
       这一中间位置，符合正常栈式弹窗的交互逻辑。 */
    z-index: 4150;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    -webkit-tap-highlight-color: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 面板：两种模式共用基础样式，密度由 modifier 调 ---------- */
.lb-panel {
    display: flex;
    flex-direction: column;
    background: rgba(15, 20, 30, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    cursor: default;
    overflow: hidden;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

/* overlay 密度：宽 560、字号 0.95rem、头像 32px、内边距 10/16、列表自带滚动 */
.lb-panel.is-overlay {
    width: min(560px, calc(100% - 24px));
    max-height: calc(100vh - 60px);
}
.lb-panel.is-overlay .lb-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    -webkit-overflow-scrolling: touch;
}

/* inline 密度：宽度撑满外层容器（slide 列宽），字号 0.82rem、头像 22px、
   紧凑内边距；不滚动 —— 让外层 slide（已 overflow-y:auto）负责滚动 */
.lb-panel.is-inline {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------- overlay 标题栏 ---------- */
.lb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}
.lb-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #e2e8f0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lb-close {
    flex: none;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.4rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    font-family: inherit;
}
.lb-close:active { background: rgba(255, 255, 255, 0.12); }

/* ---------- tabs：两种模式共用，仅密度不同 ---------- */
.lb-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    background: transparent;     /* 浮层本身是玻璃,tab 区不再叠一层浅灰 */
}
.lb-panel.is-inline .lb-tabs {
    gap: 4px;
    padding: 0 2px 6px;
    margin-bottom: 4px;
}
.lb-tab {
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
    border-radius: 999px;
    padding: 4px 14px;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.lb-panel.is-inline .lb-tab {
    flex: 1;
    font-size: 0.8rem;
    min-height: 30px;
    padding: 4px 8px;
    border-radius: 6px;
}
.lb-tab:hover { background: rgba(255, 255, 0.08); }
.lb-tab.active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
}
.lb-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.lb-tab:disabled:hover {
    background: transparent;
}

/* ---------- list：两种模式共用（仅 padding 微调） ---------- */
.lb-panel.is-inline .lb-list {
    padding: 4px 10px;
}

/* ---------- tip / total ---------- */
.lb-tip {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    padding: 26px 16px;
    font-size: 0.92rem;
}
.lb-panel.is-inline .lb-tip {
    padding: 16px 12px;
    font-size: 0.85rem;
}

.lb-total {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 8px 16px 12px;
    font-size: 0.78rem;
}
.lb-panel.is-inline .lb-total {
    font-size: 0.72rem;
    padding: 6px 0 2px;
    margin-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

/* ---------- 行：两种模式共用基础，密度由 modifier 调 ---------- */
.lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    min-height: 48px;
    box-sizing: border-box;
}
.lb-row:last-child { border-bottom: none; }
.lb-row.me { background: rgba(255, 255, 255, 0.06); }

.lb-panel.is-inline .lb-row {
    gap: 8px;
    padding: 4px 0;
    font-size: 0.82rem;
    min-height: 0;
    cursor: pointer;        /* 内联模式下,业务方通常希望整行可点进游戏 */
}

.lb-rank {
    flex: none;
    width: 36px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}
.lb-rank.medal { font-size: 1.2rem; }
.lb-panel.is-inline .lb-rank {
    width: 22px;
    color: #a0aec0;
    font-size: 0.82rem;
}
.lb-panel.is-inline .lb-rank.medal {
    width: 26px;
    font-size: 1.15rem;
    line-height: 1;
}

/* 头像：硬卡尺寸,避免大图(原图可能是几百 px)被拉爆。
   avatarHtml() 直接产出 <img class="avatar"> / <span class="avatar">,
   全局 .avatar 没设宽高,会按原图原始尺寸渲染 —— 必须在这里按 .lb-row 上下文
   显式约束,否则会出现一张大图占满整个浮层(用户实际遇到过)。 */
.lb-row .avatar {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 0.85rem;
}
.lb-panel.is-inline .lb-row .avatar {
    width: 22px;
    height: 22px;
    font-size: 0.65rem;
    background: #eaf3fc;
    color: #4a90d9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
/* 兼容老逻辑(没 avatarHtml 时回退到 <span class="lb-avatar"> 空占位)。 */
.lb-avatar {
    flex: none;
    width: 32px;
    height: 32px;
}
.lb-panel.is-inline .lb-avatar {
    width: 22px;
    height: 22px;
}
.lb-avatar .avatar {
    width: 100%;
    height: 100%;
}

/* 头像 wrap：社区排行专用 —— data-u 落在 wrap 上，点头像跳作者主页。
   avatarHtml() 输出的元素不能塞属性，业务侧用 wrap 包一层。 */
.lb-avatar-wrap,
.lb-row .lb-avatar-wrap {
    flex: none;
    display: inline-flex;
    cursor: pointer;
}
.lb-avatar-wrap:hover { opacity: 0.82; }

/* 行内文字区：主标题 + 副标题（副标题可选，给「社区排行 by author」用） */
.lb-row-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.lb-uname {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e2e8f0;
    font-size: 0.95rem;
}
.lb-panel.is-inline .lb-uname {
    font-size: 0.82rem;
    font-weight: 500;
}
.lb-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
}
.lb-panel.is-inline .lb-sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
}

/* 头像 / 名字可点击跳主页 —— 鼠标手型提示 */
.lb-row .avatar,
.lb-row .lb-uname,
.lb-row .lb-sub {
    cursor: pointer;
}
.lb-panel.is-inline .lb-row .avatar,
.lb-panel.is-inline .lb-row .lb-uname {
    cursor: pointer;
}

.lb-score {
    flex: none;
    color: #5a67d8;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.95rem;
    min-width: 40px;
    text-align: right;
}
.lb-panel.is-inline .lb-score {
    color: #5a67d8;
    font-weight: 700;
    min-width: 50px;
    font-size: 0.95rem;
}

/* ---------- 滚动哨兵（IO 触发加载下一页） ---------- */
.lb-sentinel {
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
}