/* ==========================================================================
   欢乐影院 · base（结构层：令牌 / 布局 / 通用组件）
   --------------------------------------------------------------------------
   只放「全站复用」的东西：容器、按钮、胶囊、印章、顶栏、区块头、卡片、行式榜、
   面包屑、分页、页脚。单页专属的版式一律写在 joy.css（页面层）。
   类名族：jo- = 结构组件；joy- = 页面版式（见 joy.css）。
   ========================================================================== */

:root {
    /* ---- 奶油爆米花 ------------------------------------------------------ */
    --jo-paper: #fff7e6;          /* 页面底：奶油爆米花（暖黄，非米白非纯白） */
    --jo-surface: #fffdf7;        /* 卡片面：奶油白，圆角与彩条分面 */
    --jo-surface-2: #ffefd2;      /* 次级面：标签底 / 输入框 */
    --jo-surface-3: #f6e0bd;      /* 图占位 / 骨架 */
    --jo-ink: #2f2340;            /* 葡萄墨：深紫棕，比纯黑更有糖果感 */
    --jo-ink-2: #5d4f6a;          /* 次级文字 */
    --jo-ink-3: #9686a1;          /* 弱文字（时间 / 计数） */
    --jo-line: #f0dfc3;           /* 1px 分隔线：糖纸压纹 */
    --jo-line-2: #e2c9a2;         /* 强一点的线（表格头 / 输入框） */

    /* ---- 欢乐珊瑚（主强调）+ 糖果辅色 ----------------------------------- */
    --jo-accent: #ff5f4d;
    --jo-accent-strong: #e8452f;  /* hover 压深 */
    --jo-accent-ink: #fffaf2;     /* 珊瑚底上的字 */
    --jo-accent-soft: rgba(255, 95, 77, .10);
    --jo-accent-soft-2: rgba(255, 95, 77, .22);
    --jo-mint: #2ec4b6;           /* 汽水薄荷：备注签 / 辅线 */
    --jo-mint-ink: #0f5f58;
    --jo-lemon: #ffc93c;          /* 柠檬糖：评分贴纸 / 印章 */
    --jo-sky: #3aa8e8;            /* 晴空蓝：三色轮换的第三色 */
    --jo-cream: #fff3dc;
    --jo-gold: #b97800;           /* 深柠檬：仅用于评分数字，保证浅底可读 */
    --jo-gold-soft: rgba(255, 201, 60, .20);
    --jo-candy: repeating-linear-gradient(90deg, #ff5f4d 0 26px, #fff3dc 26px 52px, #ffc93c 52px 78px, #fff3dc 78px 104px);
    --jo-rainbow: linear-gradient(90deg, #ff5f4d 0%, #ffc93c 50%, #2ec4b6 100%);
    --jo-cta: linear-gradient(135deg, #ff7a54 0%, #ff5f4d 48%, #e8452f 100%);
    --jo-plum: #33213f;
    --jo-plum-deep: #22142e;

    /* 错误态：同色系深珊瑚，不引入第四种彩色 */
    --jo-danger: #d63a2b;
    --jo-danger-soft: rgba(214, 58, 43, .3);
    --jo-danger-bg: rgba(214, 58, 43, .07);

    /* ---- 字号（最大标题 26px，需求方硬约束） ----------------------------- */
    --jo-fs-2xs: 11px;
    --jo-fs-xs: 12px;
    --jo-fs-sm: 13px;
    --jo-fs-base: 14px;
    --jo-fs-md: 15px;
    --jo-fs-lg: 18px;
    --jo-fs-xl: 20px;
    --jo-fs-h1: 24px;
    --jo-fs-max: 26px;
    --jo-lh: 1.7;
    --jo-lh-tight: 1.35;

    /* ---- 字体：圆体展示字 + 无衬线正文（原宋体编年体 → 嘉年华圆体） ------ */
    --jo-serif: "YouYuan", "Yuanti SC", "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei", sans-serif;
    --jo-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
    --jo-num: "Arial Rounded MT Bold", "Trebuchet MS", "PingFang SC", sans-serif;   /* 序号/评分用圆体数字 */

    /* ---- 容器与间距 ------------------------------------------------------ */
    --jo-shell: 1320px;
    --jo-gutter: clamp(14px, 2vw, 26px);
    --jo-gap-block: clamp(22px, 2.2vw, 34px);
    --jo-gap-inline: clamp(12px, 1.2vw, 18px);

    /* ---- 圆角：糖果圆角，最小 8px，卡片 18px ---------------------------- */
    --jo-r-xs: 8px;
    --jo-r-sm: 12px;
    --jo-r-md: 18px;
    --jo-r-lg: 26px;
    --jo-r-seal: 999px;

    /* ---- 阴影：暖珊瑚投影，不用黑色重影 ---------------------------------- */
    --jo-sh-1: 0 2px 0 rgba(255, 95, 77, .05), 0 7px 18px rgba(120, 74, 30, .07);
    --jo-sh-2: 0 10px 0 rgba(255, 95, 77, .10), 0 20px 38px rgba(120, 74, 30, .14);

    --jo-ease: cubic-bezier(.22, .9, .3, 1.25);
    --jo-t: .24s;

    --jo-header-h: 68px;
    --jo-anchor-offset: 86px;     /* 顶栏 68 + 彩条呼吸位 */

    color-scheme: light;
}

/* --------------------------------------------------------------------------
   1. 容器
   -------------------------------------------------------------------------- */
.jo-shell {
    width: 100%;
    max-width: var(--jo-shell);
    margin-inline: auto;
    padding-inline: var(--jo-gutter);
}
.jo-main { padding-block: var(--jo-gap-block); min-height: 50vh; }

/* --------------------------------------------------------------------------
   2. 按钮 / 胶囊 / 印章
   -------------------------------------------------------------------------- */
.jo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;                 /* 硬约束：行内不压缩 */
    height: 38px;
    padding: 0 20px;
    border-radius: var(--jo-r-seal);
    background: var(--jo-cta);
    color: var(--jo-accent-ink);
    font-size: var(--jo-fs-base);
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 3px 0 rgba(232, 69, 47, .22);
    transition: transform var(--jo-t) var(--jo-ease), box-shadow var(--jo-t) var(--jo-ease), filter var(--jo-t) var(--jo-ease), color var(--jo-t) var(--jo-ease), border-color var(--jo-t) var(--jo-ease), background var(--jo-t) var(--jo-ease);
}
.jo-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 6px 0 rgba(232, 69, 47, .18), 0 12px 20px rgba(255, 95, 77, .20);
}
.jo-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(232, 69, 47, .24); }
.jo-btn svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; }
.jo-btn--ghost {
    background: transparent;
    color: var(--jo-ink);
    border: 1px solid var(--jo-line-2);
    box-shadow: none;
}
.jo-btn--ghost:hover { background: var(--jo-accent-soft); border-color: var(--jo-accent); color: var(--jo-accent); filter: none; box-shadow: none; }
.jo-btn--sm { height: 32px; padding: 0 14px; font-size: var(--jo-fs-sm); }

.jo-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    height: 29px;
    padding: 0 13px;
    border-radius: var(--jo-r-seal);
    background: var(--jo-surface-2);
    border: 1px solid transparent;
    font-size: var(--jo-fs-xs);
    color: var(--jo-ink-2);
    white-space: nowrap;
    max-width: 100%;
    transition: color var(--jo-t) var(--jo-ease), background var(--jo-t) var(--jo-ease), border-color var(--jo-t) var(--jo-ease), transform var(--jo-t) var(--jo-ease);
}
.jo-chip:hover { color: var(--jo-accent); background: var(--jo-accent-soft); transform: translateY(-1px); }
.jo-chip.is-active { background: var(--jo-accent); color: var(--jo-accent-ink); font-weight: 700; box-shadow: 0 3px 0 rgba(232, 69, 47, .18); }

/* 印章编号：柠檬糖圆贴纸，用于楼层序号 / 榜单单号 */
.jo-seal {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: var(--jo-r-seal);
    background: var(--jo-lemon);
    color: var(--jo-ink);
    font: 800 var(--jo-fs-2xs)/1 var(--jo-serif);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 0 rgba(185, 120, 0, .18);
}
.jo-seal--ghost { background: var(--jo-accent-soft); color: var(--jo-accent); box-shadow: none; }

/* 编号数字（圆体，弱色）：行式榜的 01/02/03 */
.jo-num {
    font-family: var(--jo-num);
    font-variant-numeric: tabular-nums;
    color: var(--jo-ink-3);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   3. 顶栏（传统横排频道菜单；窄屏收进抽屉）
   -------------------------------------------------------------------------- */
.jo-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--jo-surface);
    border-bottom: 1px solid var(--jo-line);
    box-shadow: 0 6px 20px rgba(120, 74, 30, .05);
}
/* 顶栏下沿的嘉年华渐变线：平滑过渡，不做棚布分段 */
.jo-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, #ff5f4d 0%, #ffc93c 38%, #2ec4b6 72%, #3aa8e8 100%);
    pointer-events: none;
}
.jo-header__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--jo-header-h);
}

.jo-brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.jo-brand__mark {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50% 50% 50% 10px;
    background: var(--jo-lemon);
    color: var(--jo-ink);
    font: 800 18px/1 var(--jo-serif);
    transform: rotate(-4deg);
    box-shadow: 0 3px 0 rgba(185, 120, 0, .22);
}
.jo-brand__name {
    font-family: var(--jo-serif);
    font-size: var(--jo-fs-lg);
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--jo-ink);
}
.jo-brand__slogan {
    font-size: var(--jo-fs-2xs);
    color: var(--jo-ink-3);
    padding: 2px 8px;
    margin-left: 2px;
    border-radius: var(--jo-r-seal);
    background: var(--jo-surface-2);
    white-space: nowrap;
}

.jo-nav { display: flex; align-items: center; gap: 3px; min-width: 0; }
.jo-nav__item { position: relative; }
.jo-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 13px;
    border-radius: var(--jo-r-seal);
    font-size: var(--jo-fs-base);
    color: var(--jo-ink-2);
    white-space: nowrap;
    transition: color var(--jo-t) var(--jo-ease), background var(--jo-t) var(--jo-ease);
}
.jo-nav__item:hover > .jo-nav__link,
.jo-nav__link.is-active { color: var(--jo-accent); background: var(--jo-accent-soft); }
.jo-nav__caret {
    width: 10px; height: 10px;
    fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
    opacity: .55;
    transition: transform var(--jo-t) var(--jo-ease);
}
.jo-nav__item:hover > .jo-nav__link .jo-nav__caret { transform: rotate(180deg); }

.jo-nav__sub {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 3;
    width: max-content;             /* 不写会被条目宽度收缩成一条 */
    max-width: 460px;
    padding: 11px 13px;
    margin-top: 6px;
    background: var(--jo-surface);
    border: 1px solid var(--jo-line);
    border-radius: var(--jo-r-md);
    box-shadow: var(--jo-sh-1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--jo-t) var(--jo-ease), visibility var(--jo-t) var(--jo-ease), transform var(--jo-t) var(--jo-ease);
}
.jo-nav__sub a {
    display: inline-block;
    padding: 5px 10px;
    margin: 2px 2px 2px 0;
    border-radius: var(--jo-r-seal);
    font-size: var(--jo-fs-sm);
    color: var(--jo-ink-2);
}
.jo-nav__sub a:hover { background: var(--jo-accent-soft); color: var(--jo-accent); }
@media (min-width: 1024px) {
    .jo-nav__item:hover > .jo-nav__sub,
    .jo-nav__item:focus-within > .jo-nav__sub,
    .jo-nav__item[data-open="1"] > .jo-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
}

.jo-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.jo-search {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--jo-line-2);
    border-radius: var(--jo-r-seal);
    background: var(--jo-surface-2);
    transition: border-color var(--jo-t) var(--jo-ease), background var(--jo-t) var(--jo-ease), box-shadow var(--jo-t) var(--jo-ease);
}
.jo-search:focus-within { border-color: var(--jo-accent); background: var(--jo-surface); box-shadow: 0 0 0 4px var(--jo-accent-soft); }
.jo-search svg { width: 14px; height: 14px; fill: none; stroke: var(--jo-ink-3); stroke-width: 2; flex: 0 0 auto; }
.jo-search input {
    width: 148px;
    border: 0;
    background: none;
    outline: none;
    font-size: var(--jo-fs-sm);
}
.jo-search input::placeholder { color: var(--jo-ink-3); }
.jo-iconbtn {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: var(--jo-r-seal);
    border: 1px solid var(--jo-line-2);
    color: var(--jo-ink-2);
    transition: border-color var(--jo-t) var(--jo-ease), color var(--jo-t) var(--jo-ease), background var(--jo-t) var(--jo-ease);
}
.jo-iconbtn:hover { border-color: var(--jo-accent); color: var(--jo-accent); background: var(--jo-accent-soft); }
.jo-iconbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.jo-header__burger { display: none; }
@media (max-width: 1023.98px) {
    .jo-nav, .jo-search { display: none; }
    .jo-header__burger { display: grid; }
}

/* 抽屉（窄屏把整棵菜单搬进来，见 js/joy.js） */
.jo-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    background: rgba(34, 20, 46, .48);
}
.jo-drawer.is-open { display: block; }
.jo-drawer__panel {
    position: absolute;
    top: 0; right: 0;
    width: min(86vw, 360px);
    height: 100%;
    overflow-y: auto;
    background: var(--jo-paper);
    border-left: 1px solid var(--jo-line);
    border-radius: var(--jo-r-lg) 0 0 var(--jo-r-lg);
    padding: 18px;
}
.jo-drawer__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.jo-drawer__head strong { font-family: var(--jo-serif); font-size: var(--jo-fs-md); }
.jo-drawer__close { margin-left: auto; }
.jo-drawer__search { margin-bottom: 14px; }
.jo-drawer__search .jo-search { display: flex; }
.jo-drawer__search .jo-search input { width: 100%; }

/* 抽屉里承载的是**被搬进来的同一棵菜单**（不是第二份 DOM）：
   窄屏竖排渲染，子分类就地展开成标签云。 */
.jo-drawer .jo-nav { display: block; }
.jo-drawer .jo-nav__item { display: block; border-bottom: 1px solid var(--jo-line); }
.jo-drawer .jo-nav__link {
    display: flex;
    width: 100%;
    height: auto;
    padding: 12px 8px;
    border-radius: 0;
    font-family: var(--jo-serif);
    font-size: var(--jo-fs-md);
    font-weight: 700;
    color: var(--jo-ink);
}
.jo-drawer .jo-nav__caret { display: none; }
.jo-drawer .jo-nav__sub {
    position: static;
    width: auto;
    max-width: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin: 0;
    padding: 0 8px 10px;
    border: 0;
    box-shadow: none;
    background: none;
    display: flex;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   4. 区块头 / 面
   -------------------------------------------------------------------------- */
.jo-sec { margin-top: var(--jo-gap-block); }
.jo-sec__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--jo-line);
}
.jo-sec__head h2 { font-size: var(--jo-fs-lg); }
.jo-sec__head h2 a:hover { color: var(--jo-accent); }
.jo-sec__head em {
    font-style: normal;
    font-size: var(--jo-fs-sm);
    color: var(--jo-ink-3);
}
.jo-sec__more {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: var(--jo-fs-sm);
    color: var(--jo-ink-3);
}
.jo-sec__more:hover { color: var(--jo-accent); }

.jo-panel {
    background: var(--jo-surface);
    border: 1px solid var(--jo-line);
    border-radius: var(--jo-r-md);
    padding: 14px;
}

/* --------------------------------------------------------------------------
   5. 海报卡（全站共用）· 欢乐糖果卡
   --------------------------------------------------------------------------
   语言：奶油糖纸卡面 + 顶部糖果棚布条 + 左上薄荷票签 + 右上柠檬星章。
   交互签名：悬停时棚布条纹横向走动、彩纸屑从卡底升起、标题下彩虹线展开；
   卡片本体不位移、海报不缩放（避免回到旧版「上浮 + 图片放大」的普通过渡）。
   角标预算 = 2：左上「更新状态」+ 右上「评分」。不得再加第三个。
   -------------------------------------------------------------------------- */
.jo-card {
    position: relative;
    min-width: 0;
    background: var(--jo-surface);
    border: 1px solid var(--jo-line);
    border-radius: 20px 20px 20px 8px;
    overflow: hidden;
    box-shadow: 0 2px 0 rgba(47, 35, 64, .03);
    transition: border-color var(--jo-t) var(--jo-ease), box-shadow var(--jo-t) var(--jo-ease);
}
/* 顶部糖果棚布条 */
.jo-card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    z-index: 5;
    height: 7px;
    background: var(--jo-candy);
    background-size: 104px 7px;
    transition: background-position .55s var(--jo-ease);
}
/* 彩纸屑：只在悬停时从卡底升起，不做位移/缩放 */
.jo-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 7px;
    height: 66%;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 86%, var(--jo-accent) 0 3px, transparent 3.5px),
        radial-gradient(circle at 27% 68%, var(--jo-lemon) 0 2.5px, transparent 3px),
        radial-gradient(circle at 52% 92%, var(--jo-mint) 0 3px, transparent 3.5px),
        radial-gradient(circle at 73% 62%, var(--jo-sky) 0 2px, transparent 2.5px),
        radial-gradient(circle at 90% 82%, var(--jo-lemon) 0 3px, transparent 3.5px);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s var(--jo-ease), transform .5s var(--jo-ease);
}
.jo-card:hover {
    border-color: var(--jo-accent);
    box-shadow: 0 8px 0 rgba(255, 95, 77, .10), 0 16px 30px rgba(120, 74, 30, .14);
}
.jo-card:hover::before { background-position: 52px 0; }
.jo-card:hover::after { opacity: .9; transform: translateY(0); }
.jo-card > a { display: block; }
.jo-card__frame { position: relative; display: block; padding: 7px 7px 0; }
.jo-card__pic {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 16px 16px 12px 12px;
    background: var(--jo-surface-3);
    overflow: hidden;
}
.jo-card__pic img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: filter .4s var(--jo-ease);
}
.jo-card:hover .jo-card__pic img { filter: saturate(1.08) brightness(1.03); }
/* 左上：薄荷票签 */
.jo-card__note {
    position: absolute;
    left: 13px; top: 15px;
    z-index: 4;
    max-width: calc(100% - 66px);
    padding: 3px 10px 3px 9px;
    border-radius: var(--jo-r-seal) 6px 6px var(--jo-r-seal);
    background: var(--jo-mint);
    color: #0b3b36;
    font-size: var(--jo-fs-2xs);
    font-weight: 700;
    line-height: 1.55;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 2px 0 rgba(15, 95, 88, .20);
}
/* 右上：柠檬星章（评分） */
.jo-card__score {
    position: absolute;
    right: 9px; top: 10px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 38px; height: 38px;
    padding-top: 1px;
    background: var(--jo-lemon);
    color: var(--jo-ink);
    font: 800 var(--jo-fs-2xs)/1 var(--jo-num);
    transform: rotate(8deg);
    clip-path: polygon(50% 0%, 59% 18%, 76% 8%, 79% 27%, 98% 29%, 88% 45%, 100% 58%, 82% 66%, 86% 85%, 67% 84%, 57% 100%, 45% 84%, 27% 92%, 22% 73%, 3% 70%, 12% 53%, 0% 40%, 18% 32%, 13% 13%, 32% 17%, 40% 0%);
    filter: drop-shadow(0 3px 0 rgba(185, 120, 0, .22));
}
.jo-card__score i { font: 600 8px/1 var(--jo-sans); font-style: normal; }
.jo-card__body { display: block; padding: 10px 12px 13px; }
.jo-card__body h3 {
    position: relative;
    padding-bottom: 7px;
    font-family: var(--jo-serif);
    font-size: var(--jo-fs-base);
    font-weight: 800;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--jo-t) var(--jo-ease);
}
.jo-card__body h3::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 3px;
    border-radius: var(--jo-r-seal);
    background: var(--jo-rainbow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .32s var(--jo-ease);
}
.jo-card:hover .jo-card__body h3 { color: var(--jo-accent-strong); }
.jo-card:hover .jo-card__body h3::after { transform: scaleX(1); }
.jo-card__body p {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--jo-fs-xs);
    color: var(--jo-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jo-card__body p::before {
    content: "";
    flex: 0 0 auto;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--jo-accent);
    opacity: .7;
}
@media (prefers-reduced-motion: reduce) {
    .jo-card::before, .jo-card::after, .jo-card__pic img, .jo-card__body h3, .jo-card__body h3::after { transition: none; }
    .jo-card:hover::after { opacity: 0; }
}

/* --------------------------------------------------------------------------
   6. 行式条目（资讯 / 榜单 / 搜索结果共用）
   ⚠️ 多列布局要定义在**行内层**，不能定义在 ul/ol 上（li 会被依次塞进各列）
   -------------------------------------------------------------------------- */
.jo-vrow {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: var(--jo-r-sm);
    transition: background var(--jo-t) var(--jo-ease);
}
.jo-vrow:hover { background: var(--jo-surface-2); }
.jo-vrow__pic {
    width: 46px;
    aspect-ratio: 2 / 3;
    border-radius: var(--jo-r-xs);
    overflow: hidden;
    background: var(--jo-surface-3);
}
.jo-vrow__pic img { width: 100%; height: 100%; object-fit: cover; }
.jo-vrow__copy { display: grid; gap: 3px; min-width: 0; }
.jo-vrow__copy b {
    font-size: var(--jo-fs-base);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jo-vrow__copy i {
    font-style: normal;
    font-size: var(--jo-fs-xs);
    color: var(--jo-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 文字榜：序号 / 标题 / 右侧计数 三列 —— 三列定义在行内 <a> 上 */
.jo-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.jo-rows > li { min-width: 0; }
.jo-rows > li > a {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: var(--jo-r-sm);
    font-size: var(--jo-fs-base);
    min-width: 0;
    transition: background var(--jo-t) var(--jo-ease), color var(--jo-t) var(--jo-ease);
}
.jo-rows > li > a:hover { background: var(--jo-surface-2); color: var(--jo-accent); }
.jo-rows > li > a > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.jo-rows > li > a em {
    font-style: normal;
    font-size: var(--jo-fs-xs);
    color: var(--jo-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* 带缩略图的文字榜：序号 / 图 / 标题+副行 / 计数 */
.jo-rows--pic > li > a { grid-template-columns: 22px 42px minmax(0, 1fr) auto; }
.jo-rows--pic .pic {
    width: 42px;
    aspect-ratio: 2 / 3;
    border-radius: var(--jo-r-xs);
    overflow: hidden;
    background: var(--jo-surface-3);
}
.jo-rows--pic .pic img { width: 100%; height: 100%; object-fit: cover; }
.jo-rows--pic .tt { display: grid; gap: 2px; min-width: 0; }
.jo-rows--pic .tt b { font-size: var(--jo-fs-base); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jo-rows--pic .tt em { font-size: var(--jo-fs-xs); color: var(--jo-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jo-rows > li > a.is-top .jo-num { color: var(--jo-accent); }

/* --------------------------------------------------------------------------
   7. 资料表（详情页 / 演员页共用）
   -------------------------------------------------------------------------- */
.jo-facts { display: grid; gap: 0; }
.jo-facts > div {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
    font-size: var(--jo-fs-sm);
    border-bottom: 1px dashed var(--jo-line);
}
.jo-facts > div:last-child { border-bottom: 0; }
.jo-facts dt { color: var(--jo-ink-3); }
.jo-facts dd { min-width: 0; overflow-wrap: anywhere; color: var(--jo-ink-2); }
.jo-facts dd a { border-bottom: 1px solid var(--jo-line-2); }
.jo-facts dd a:hover { color: var(--jo-accent); border-color: var(--jo-accent); }
.jo-facts--links dd { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.jo-facts--links dd a { border-bottom: 0; }

/* 横排资料带（详情页顶卡底部）：dt:dd 成对横排、自动换行。
   ⚠️ 用横排带而不是竖排资料表，是为了让顶卡不必「三栏等高」——
      等高 + 某一栏内容短，必然在那一栏底部留一个洞（vela 实测 219px）。 */
.jo-facts--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
}
.jo-facts--inline > div {
    display: flex;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: var(--jo-fs-sm);
}
.jo-facts--inline dt { color: var(--jo-ink-3); flex: 0 0 auto; }
.jo-facts--inline dt::after { content: "："; }
.jo-facts--inline dd { color: var(--jo-ink-2); min-width: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   8. 正文排版（资讯正文 / 详情页简介共用）
   宽度由调用方容器决定，本组件不设 max-width
   -------------------------------------------------------------------------- */
.jo-copy { color: var(--jo-ink-2); font-size: var(--jo-fs-md); line-height: 1.9; }
.jo-copy p { margin-bottom: 14px; }
.jo-copy p:last-child { margin-bottom: 0; }
.jo-copy h2, .jo-copy h3 {
    margin: 22px 0 10px;
    font-family: var(--jo-serif);
    color: var(--jo-ink);
}
.jo-copy h2 { font-size: var(--jo-fs-lg); }
.jo-copy h3 { font-size: var(--jo-fs-md); }
.jo-copy a { color: var(--jo-accent); border-bottom: 1px solid var(--jo-accent-soft-2); }
.jo-copy ul, .jo-copy ol { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
.jo-copy ol { list-style: decimal; }
.jo-copy li { margin: 4px 0; }
.jo-copy img { border-radius: var(--jo-r-sm); margin: 14px auto; }
.jo-copy blockquote {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-left: 3px solid var(--jo-accent);
    background: var(--jo-accent-soft);
    color: var(--jo-ink-2);
}
.jo-copy table { margin-bottom: 14px; font-size: var(--jo-fs-sm); }
.jo-copy th, .jo-copy td { padding: 7px 10px; border: 1px solid var(--jo-line); text-align: left; }
.jo-copy th { background: var(--jo-surface-2); font-weight: 600; }
.jo-copy strong { color: var(--jo-ink); }

/* --------------------------------------------------------------------------
   9. 面包屑 / 页头
   -------------------------------------------------------------------------- */
.jo-pagehead {
    padding: 12px 0;
    border-bottom: 1px solid var(--jo-line);
}
.jo-pagebar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.jo-pagebar__side { margin-left: auto; }
.jo-pagebar__hint { font-size: var(--jo-fs-xs); color: var(--jo-ink-3); }
.jo-pagebar__hint b { color: var(--jo-ink-2); font-weight: 600; }
.jo-pagebar__hint i { font-style: normal; padding: 0 5px; opacity: .6; }

.jo-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: var(--jo-fs-sm); color: var(--jo-ink-3); min-width: 0; }
.jo-crumb svg {
    width: 11px; height: 11px;
    fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
    opacity: .5;
    flex: 0 0 auto;
}
.jo-crumb a:hover { color: var(--jo-accent); }
.jo-crumb [aria-current="page"] {
    color: var(--jo-ink-2);
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10. 分页 / 空态
   -------------------------------------------------------------------------- */
.jo-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.jo-pager a, .jo-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--jo-line-2);
    border-radius: var(--jo-r-sm);
    font-size: var(--jo-fs-sm);
    color: var(--jo-ink-2);
}
.jo-pager a:hover { border-color: var(--jo-accent); color: var(--jo-accent); }
.jo-pager .is-active { background: var(--jo-accent); border-color: var(--jo-accent); color: var(--jo-accent-ink); font-weight: 600; }
.jo-pager .is-disabled { color: var(--jo-ink-3); opacity: .6; }
.jo-pager__meta { border: 0 !important; color: var(--jo-ink-3); font-size: var(--jo-fs-xs); }

/* 结果统计条：由 widget/page 在列表之后输出（此时 $__PAGING__ 才有值）。
   左右分栏：左「共 N 条」右「第 x / y 页」，窄屏换行居中。 */
.jo-resultbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--jo-line);
    font-size: var(--jo-fs-sm);
    color: var(--jo-ink-3);
}
.jo-resultbar b { color: var(--jo-ink); font-family: var(--jo-num); font-size: var(--jo-fs-md); }
@media (max-width: 560px) { .jo-resultbar { justify-content: center; } }

.jo-empty {
    padding: 40px 20px;
    text-align: center;
    background: var(--jo-surface);
    border: 1px solid var(--jo-line);
    border-radius: var(--jo-r-md);
}
.jo-empty h2 { font-size: var(--jo-fs-md); margin-bottom: 6px; }
.jo-empty p { font-size: var(--jo-fs-sm); color: var(--jo-ink-3); }

/* --------------------------------------------------------------------------
   11. 页脚（嘉年华拱门 + 频道全量内链，SEO 用）
   --------------------------------------------------------------------------
   结构：糖果棚布拱檐 → 招牌横幅（品牌 + 回顶）→ 频道彩签带 → 三张票券面板 → 底座。
   与原来的「浅色四栏平铺」不同：深葡萄底 + 拱檐 + 票券卡片，明暗和栅格都换了。
   -------------------------------------------------------------------------- */
.joy-foot {
    position: relative;
    margin-top: var(--jo-gap-block);
    padding: 0 0 22px;
    color: #f7ead8;
    background:
        radial-gradient(760px 260px at 18% 0%, rgba(255, 201, 60, .18), transparent 70%),
        radial-gradient(680px 300px at 92% 12%, rgba(46, 196, 182, .12), transparent 70%),
        linear-gradient(180deg, var(--jo-plum) 0%, var(--jo-plum-deep) 100%);
    overflow: hidden;
}
.joy-foot::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 243, 220, .10) 0 1.5px, transparent 2px);
    background-size: 38px 38px;
    opacity: .45;
    pointer-events: none;
}
.joy-foot__awning {
    position: relative;
    display: block;
    height: 9px;
    background: var(--jo-accent);
}
.joy-foot__awning::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 14px;
    background:
        radial-gradient(circle at 12px 0, var(--jo-accent) 0 11.5px, transparent 12px) 0 0 / 72px 14px repeat-x,
        radial-gradient(circle at 12px 0, var(--jo-lemon) 0 11.5px, transparent 12px) 24px 0 / 72px 14px repeat-x,
        radial-gradient(circle at 12px 0, var(--jo-mint) 0 11.5px, transparent 12px) 48px 0 / 72px 14px repeat-x;
}
.joy-foot__inner { position: relative; z-index: 1; padding-top: 34px; }
.joy-foot__marquee {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 28px;
    padding-bottom: 22px;
    border-bottom: 1px dashed rgba(255, 243, 220, .22);
}
.joy-foot__brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.joy-foot__badge {
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    flex: 0 0 auto;
    border-radius: 50% 50% 50% 14px;
    background: var(--jo-lemon);
    color: var(--jo-ink);
    font: 800 26px/1 var(--jo-serif);
    transform: rotate(-6deg);
    box-shadow: 0 0 0 5px rgba(255, 201, 60, .14), 0 6px 0 rgba(34, 20, 46, .18);
}
.joy-foot__copy { min-width: 0; }
.joy-foot__copy h2 {
    font-family: var(--jo-serif);
    font-size: var(--jo-fs-h1);
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff8ea;
}
.joy-foot__copy p {
    margin-top: 7px;
    max-width: 62ch;
    font-size: var(--jo-fs-sm);
    line-height: 1.8;
    color: #cdbdd2;
}
.joy-foot__top {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(255, 243, 220, .35);
    border-radius: var(--jo-r-seal);
    color: #fff3dc;
    font-size: var(--jo-fs-sm);
    transition: background var(--jo-t) var(--jo-ease), border-color var(--jo-t) var(--jo-ease), color var(--jo-t) var(--jo-ease), transform var(--jo-t) var(--jo-ease);
}
.joy-foot__top span {
    display: grid;
    place-items: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--jo-lemon);
    color: var(--jo-ink);
    font-size: 11px;
    font-weight: 800;
}
.joy-foot__top:hover { background: var(--jo-lemon); border-color: var(--jo-lemon); color: var(--jo-ink); transform: translateY(-1px); }
.joy-foot__top:hover span { background: var(--jo-ink); color: var(--jo-lemon); }

.joy-foot__band { padding: 20px 0 2px; }
.joy-foot__bandhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px; }
.joy-foot__bandhead h3 { font-family: var(--jo-serif); font-size: var(--jo-fs-md); color: #fff8ea; }
.joy-foot__bandhead em { font-style: normal; font-size: var(--jo-fs-xs); color: #a994b5; letter-spacing: .12em; }
.joy-foot__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.joy-foot__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 13px;
    border: 1px solid rgba(255, 243, 220, .24);
    border-radius: var(--jo-r-seal);
    background: rgba(255, 243, 220, .04);
    font-size: var(--jo-fs-xs);
    color: #f2e4d2;
    transition: background var(--jo-t) var(--jo-ease), border-color var(--jo-t) var(--jo-ease), color var(--jo-t) var(--jo-ease), transform var(--jo-t) var(--jo-ease);
}
.joy-foot__chip::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--jo-accent);
    flex: 0 0 auto;
}
.joy-foot__chip:nth-child(3n+2)::before { background: var(--jo-lemon); }
.joy-foot__chip:nth-child(3n)::before { background: var(--jo-mint); }
.joy-foot__chip:hover { border-color: var(--jo-accent); background: var(--jo-accent); color: #fff; transform: translateY(-1px); }
.joy-foot__chip:hover::before { background: #fff; }

.joy-foot__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 18px;
}
@media (min-width: 760px) { .joy-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.joy-foot__panel {
    padding: 16px 18px;
    border: 1px dashed rgba(255, 243, 220, .20);
    border-radius: var(--jo-r-md);
    background: rgba(255, 243, 220, .045);
}
.joy-foot__panel h3 {
    margin-bottom: 10px;
    font-family: var(--jo-serif);
    font-size: var(--jo-fs-sm);
    letter-spacing: .08em;
    color: var(--jo-lemon);
}
.joy-foot__links, .joy-foot__meta { display: grid; gap: 7px; }
.joy-foot__links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--jo-fs-sm);
    color: #e8d9e0;
    transition: color var(--jo-t) var(--jo-ease), transform var(--jo-t) var(--jo-ease);
}
.joy-foot__links a::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--jo-accent);
    flex: 0 0 auto;
}
.joy-foot__links li:nth-child(2) a::before { background: var(--jo-lemon); }
.joy-foot__links li:nth-child(3) a::before { background: var(--jo-mint); }
.joy-foot__links li:nth-child(4) a::before { background: var(--jo-sky); }
.joy-foot__links a:hover { color: #fff8ea; transform: translateX(3px); }
.joy-foot__meta li { font-size: var(--jo-fs-xs); line-height: 1.75; color: #b9a7c0; overflow-wrap: anywhere; }
.joy-foot__meta a { color: #e8d9e0; }
.joy-foot__meta a:hover { color: var(--jo-lemon); }
.joy-foot__panel--note p { font-size: var(--jo-fs-xs); line-height: 1.9; color: #b9a7c0; }
.joy-foot__panel--note p + p { margin-top: 6px; }
.joy-foot__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 243, 220, .20);
    font-size: var(--jo-fs-xs);
    color: #a994b5;
}
.joy-foot__basemark { margin-left: auto; color: var(--jo-lemon); letter-spacing: .08em; }
@media (max-width: 639.98px) {
    .joy-foot__inner { padding-top: 26px; }
    .joy-foot__marquee { padding-bottom: 18px; }
    .joy-foot__badge { width: 48px; height: 48px; font-size: 22px; }
    .joy-foot__top { width: 100%; justify-content: center; }
    .joy-foot__basemark { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   12. 广告位 / 工具
   -------------------------------------------------------------------------- */
.jo-ad { display: block; margin: 0 auto; text-align: center; }
.jo-ad img { margin-inline: auto; }

.jo-clamp-1, .jo-clamp-2, .jo-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.jo-clamp-1 { -webkit-line-clamp: 1; }
.jo-clamp-2 { -webkit-line-clamp: 2; }
.jo-clamp-3 { -webkit-line-clamp: 3; }