/*
 * 随机小姐姐（/xjj）—— 版式对齐 eeenav.com/xjj
 *
 * 实测它的骨架（1440 视口）：
 *   内容区 1080 居中，左说明卡 300 + 右播放卡 1fr，gap 20，通栏无侧栏
 *   说明卡：橙黄渐变、圆角 18、padding 28/26
 *   分类 chip：32px 高、圆角 9、选中时浅橙底 + 右上角小圆点
 *   提示条：浅黄底、圆角 10、12.5px
 *   播放器：16:9、圆角 16、深色底
 *
 * 前缀 xj-，和 st-* 完全隔离（detail 页撞车的教训）。
 */

.xj-shell {
    max-width: 1120px;
    /* 顶部导航是 fixed 的，必须自己让出高度（其他内页用 .st-wrap--page 的 96px） */
    margin: 96px auto 44px;
    padding: 0 16px;
}

.xj-wrap {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* ---------- 左：说明卡 ---------- */
.xj-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 26px 0;
    border-radius: 18px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(160deg, #ffc247 0%, #ff9a1f 42%, #f77b0c 100%);
    box-shadow: 0 18px 40px -24px rgba(247, 123, 12, .75);
}
/* 右下角一团柔光，别让纯渐变太平 */
.xj-intro::after {
    content: '';
    position: absolute;
    right: -30%;
    top: -10%;
    width: 90%;
    padding-top: 90%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .32), transparent);
    pointer-events: none;
}
.xj-title {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .02em;
}
.xj-sub {
    position: relative;
    z-index: 1;
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .82;
}
.xj-desc {
    position: relative;
    z-index: 1;
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.85;
    opacity: .95;
}
.xj-points {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.xj-points li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    opacity: .96;
}
.xj-points i { font-size: 15px; opacity: .9; }

/* 底部那张半透明的「视频卡」装饰 */
.xj-illus {
    position: relative;
    flex: 1;
    min-height: 210px;
    margin-top: 22px;
}
.xj-illus-card {
    position: absolute;
    left: 0;
    right: -26px;
    bottom: -30px;
    height: 190px;
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .1));
    border: 1px solid rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-4deg);
}
.xj-illus-card i {
    font-size: 54px;
    color: rgba(255, 255, 255, .55);
}

/* ---------- 右：播放卡 ---------- */
.xj-panel {
    padding: 24px 26px 20px;
    border-radius: 18px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--line-color);
    box-shadow: 0 18px 44px -34px rgba(16, 24, 40, .35);
    min-width: 0;
}
.xj-lb {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .3px;
}
.xj-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.xj-chip {
    position: relative;
    height: 32px;
    padding: 0 13px;
    border-radius: 9px;
    border: 1px solid var(--line-color);
    background: var(--card-bg, #fff);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.xj-chip:hover { border-color: rgba(247, 123, 12, .5); color: #a86a00; }
.xj-chip.on {
    background: rgba(247, 123, 12, .12);
    border-color: rgba(247, 123, 12, .45);
    color: #a86a00;
}
.xj-chip.on::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f77b0c;
}

/* 提示条 */
.xj-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(247, 123, 12, .1);
    color: #8a5a00;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.7;
}
.xj-notice i { flex: none; font-size: 16px; }

/* 播放器 */
.xj-player {
    position: relative;
    margin: 0 0 14px;
    border-radius: 16px;
    overflow: hidden;
    background: #0e0f14;
    box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .7);
    aspect-ratio: 16 / 9;
}
.xj-player video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #0e0f14;
}
/* 封面层：没点播放时盖在上面，点了淡出 */
.xj-poster {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 0;
    cursor: pointer;
    background:
        radial-gradient(120% 100% at 18% 0%, rgba(247, 123, 12, .22), transparent 62%),
        linear-gradient(160deg, #1b1e29 0%, #0c0e14 58%, #141821 100%);
    transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.xj-player.playing .xj-poster { opacity: 0; visibility: hidden; }
.xj-pb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
    color: #fff;
}
.xj-pb i { font-size: 32px; }
.xj-tip { font-size: 12.5px; color: rgba(255, 255, 255, .7); }

/*
 * 「点击开启声音」补救按钮
 *
 * 默认是带声音起播的，但 Chrome / Safari 对「未静音的自动播放」有硬性限制：
 * 只有在用户跟本站有过交互（点了页面、或媒体参与度高）时才放行。
 * 被拦时脚本自动退回静音播放，同时把这个按钮显示出来 —— 用户点一下就有声音，
 * 而且这次点击属于用户手势，之后连播换片都不会再被拦。
 */
.xj-sound {
    position: absolute;
    left: 12px;
    bottom: 58px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(20, 22, 30, .72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    animation: xjSoundPulse 2.2s ease-in-out infinite;
    transition: background .18s var(--ease), transform .18s var(--ease);
}
.xj-sound[hidden] { display: none; }
.xj-sound i { font-size: 16px; }
.xj-sound:hover {
    background: var(--xj-orange, #f77b0c);
    border-color: transparent;
    transform: translateY(-1px);
    animation: none;
}
@keyframes xjSoundPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(247, 123, 12, .5); }
    55%      { box-shadow: 0 0 0 7px rgba(247, 123, 12, 0); }
}

/* 底部一行 */
.xj-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.xj-next {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff9a1f, #f77b0c);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 8px 18px -10px rgba(247, 123, 12, .9);
    transition: filter .16s var(--ease), transform .16s var(--ease);
}
.xj-next:hover { filter: brightness(1.06); transform: translateY(-1px); }
.xj-next i { font-size: 16px; }

.xj-meta { font-size: 12.5px; color: var(--text-muted); }
.xj-meta b { color: var(--text-color); font-weight: 700; }

.xj-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.xj-switch input { accent-color: #f77b0c; width: 14px; height: 14px; cursor: pointer; }

.xj-ghost {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line-color);
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.xj-ghost:hover { border-color: #f77b0c; color: #f77b0c; }
.xj-ghost i { font-size: 15px; }
.xj-ghost[aria-pressed="true"] {
    background: rgba(247, 123, 12, .1);
    border-color: #f77b0c;
    color: #f77b0c;
}
.xj-ghost[aria-pressed="true"] i { color: #f77b0c; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
    .xj-wrap { grid-template-columns: 1fr; }
    .xj-intro { min-height: 0; }
    .xj-illus { display: none; }
}
@media (max-width: 768px) {
    .xj-shell { margin-top: 76px; }
}
@media (max-width: 640px) {
    .xj-shell { margin: 76px auto 30px; padding: 0 10px; }
    .xj-intro { padding: 22px 20px 24px; border-radius: 14px; }
    .xj-title { font-size: 21px; }
    .xj-desc { font-size: 12.5px; margin-bottom: 14px; }
    .xj-points { gap: 7px; }
    .xj-points li { font-size: 12px; }
    .xj-panel { padding: 16px 14px 14px; border-radius: 14px; }
    .xj-chip { height: 30px; padding: 0 11px; font-size: 12.5px; }
    .xj-player { border-radius: 12px; }
    .xj-foot { gap: 8px; }
    .xj-next { height: 34px; padding: 0 16px; font-size: 13px; }
    .xj-ghost { height: 34px; padding: 0 11px; font-size: 12.5px; }
    .xj-meta { font-size: 12px; }
}