/* =============================================================================
 * 构筑库顶部『交互图文面板』样式
 *   左栏：底图 + 覆盖在图上的多个按钮（圆点，内含 text）
 *   右栏（四行）：标题 / 描述 / 上一个-下一个 / 上一组-下一组
 *
 * 这套样式只服务于 #heroPanel（由 app/library-hero.js 渲染），
 * 不影响其他 poe2_deep 相关组件。配置数据来自 library-hero-panel.json。
 * ============================================================================= */

.hero-panel {
    margin-bottom: 20px;
    padding: 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.hero-panel__grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 16px;
    align-items: stretch;
}

/* -------- 左栏：图片 + 按钮 -------- */
.hero-panel__image-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hero-chapter-selector {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 70;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.hero-chapter-selector__toggle {
    position: absolute;
    top: 0;
    left: 50%;
    height: 32px;
    min-width: 74px;
    padding: 0 14px;
    border: 2px dashed #22c55e;
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel, #ffffff) 78%, transparent);
    color: #16a34a;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    text-shadow: 0 0 7px rgba(34, 197, 94, 0.45);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.22);
    backdrop-filter: blur(3px);
    transform: translateX(-50%);
    transition: opacity 0.12s ease, transform 0.12s ease, background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.hero-chapter-selector__toggle:hover,
.hero-chapter-selector__toggle:focus-visible {
    outline: none;
    background: color-mix(in srgb, var(--panel, #ffffff) 86%, transparent);
    border-color: #4ade80;
    color: #15803d;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.55);
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.28);
}

.hero-chapter-selector:hover .hero-chapter-selector__toggle,
.hero-chapter-selector:focus-within .hero-chapter-selector__toggle,
.hero-chapter-selector.is-open .hero-chapter-selector__toggle {
    opacity: 0;
    transform: translate(-50%, -8px);
    pointer-events: none;
}

.hero-chapter-selector__drawer {
    width: 100%;
    margin-top: 0;
    border: 1px solid rgba(74, 222, 128, 0.18);
    border-radius: 10px;
    padding: 8px 8px 6px;
    background: rgba(7, 14, 10, 0.86);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(10px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.hero-chapter-selector:hover .hero-chapter-selector__drawer,
.hero-chapter-selector:focus-within .hero-chapter-selector__drawer,
.hero-chapter-selector.is-open .hero-chapter-selector__drawer {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hero-chapter-selector__scroller {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 222, 128, 0.42) rgba(255, 255, 255, 0.08);
    padding: 2px 2px 5px;
    touch-action: pan-x;
}

.hero-chapter-selector__scroller::-webkit-scrollbar {
    height: 4px;
}

.hero-chapter-selector__scroller::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.hero-chapter-selector__scroller::-webkit-scrollbar-thumb {
    background: rgba(74, 222, 128, 0.42);
    border-radius: 999px;
}

.hero-chapter-chip {
    flex: 0 0 auto;
    position: relative;
    width: 126px;
    height: 72px;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.76);
    color: #e5eefb;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.hero-chapter-chip:hover,
.hero-chapter-chip:focus-visible {
    border-color: rgba(34, 197, 94, 0.72);
    color: #ffffff;
    outline: none;
}

.hero-chapter-chip.is-active {
    border-color: #22c55e;
    background: rgba(22, 163, 74, 0.18);
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.14) inset;
}

.hero-chapter-chip__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    color: #86efac;
    font-size: 22px;
    font-weight: 800;
}

.hero-chapter-chip__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-chapter-chip__label {
    position: absolute;
    left: 50%;
    bottom: 5px;
    max-width: calc(100% - 12px);
    transform: translateX(-50%);
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.58);
    color: #ffffff;
    font-size: 11px;
    line-height: 1.08;
    overflow-wrap: anywhere;
    white-space: normal;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.78);
}

.hero-chapter-chip__plus {
    color: #86efac;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-6px);
}

.hero-chapter-chip__check {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid rgba(34, 197, 94, 0.72);
    color: #fff;
    background: transparent;
    font-size: 12px;
    line-height: 1;
}

.hero-chapter-chip.is-included .hero-chapter-chip__check {
    background: #22c55e;
    border-color: #22c55e;
}

.hero-chapter-chip.is-prompt {
    border-style: dashed;
    color: #86efac;
}

.hero-panel__image-wrap {
    position: relative;
    --hero-chapter-drawer-offset: 130px;
    width: 100%;
    aspect-ratio: var(--hero-map-aspect-ratio, 1000 / 563);
    border-radius: 12px;
    overflow: hidden;
    background: #050505;
    border: 0;
    user-select: none;
    touch-action: none;
}

.hero-panel__map-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    will-change: transform;
    cursor: grab;
}

.hero-panel__image-wrap.is-zoomed .hero-panel__map-layer {
    cursor: grab;
}

.hero-panel__image-wrap.is-dragging .hero-panel__map-layer {
    cursor: grabbing;
}

.hero-panel.is-map-editing .hero-panel__map-layer,
.hero-panel.is-map-editing .hero-panel__image-wrap.is-zoomed .hero-panel__map-layer,
.hero-panel.is-map-editing .hero-panel__image-wrap.is-dragging .hero-panel__map-layer {
    cursor: default;
}

.hero-panel__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #050505;
    pointer-events: none;
}

/* 图片加载失败或尚未配置时的占位 */
.hero-panel__image-wrap.is-empty {
    aspect-ratio: var(--hero-map-aspect-ratio, 1000 / 563);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
    color: var(--muted);
    font-size: 14px;
}

.hero-panel__image-wrap.is-editing-disabled .hero-panel__map-layer {
    cursor: not-allowed;
}

/* -------- 圆点热点（按钮） --------
 *   默认样式：浅蓝色半透明底 + 白色边框 + 白色文字 + 浅蓝发光光晕
 *   选中样式：实心橙色（变量 --hero-dot-fill），白字
 * ---------------------------------------------------------------------------- */
.hero-dot {
    position: absolute;
    z-index: 36;
    transform: translate(-50%, -50%);
    width: var(--hero-dot-size, 32px);
    height: var(--hero-dot-size, 32px);
    padding: 0;
    overflow: visible;
    border-radius: 50%;
    border: 2px solid var(--hero-dot-ring, #ffffff);
    background: color-mix(in srgb, var(--hero-dot-glow, #60a5fa) 35%, transparent);
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.35),
        0 0 12px color-mix(in srgb, var(--hero-dot-glow, #60a5fa) 65%, transparent),
        inset 0 0 8px color-mix(in srgb, var(--hero-dot-glow, #60a5fa) 30%, transparent);
    cursor: pointer;
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--hero-dot-ring, #ffffff);
    font-size: var(--hero-dot-font-size, 13px);
    font-weight: 800;
    font-family: inherit;
    --hero-dot-ring: #ffffff;           /* 边框 + 文字：白色 */
    --hero-dot-glow: #60a5fa;           /* 背景/光晕/箭头主色：浅蓝 (blue-400) */
    --hero-dot-fill: #f97316;           /* 选中实心：橙 (orange-500) */
}

.hero-dot--official {
    --hero-dot-ring: #eff6ff;
    --hero-dot-glow: #60a5fa;
    --hero-dot-fill: #2563eb;
}

.hero-dot--custom {
    --hero-dot-ring: #ecfdf5;
    --hero-dot-glow: #22c55e;
    --hero-dot-fill: #16a34a;
}

.hero-dot--unplanned {
    --hero-dot-ring: #f8fafc;
    --hero-dot-glow: #94a3b8;
    --hero-dot-fill: #64748b;
    border-width: 3px;
    border-style: dashed;
    background: rgba(15, 23, 42, 0.34);
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.46),
        0 0 16px rgba(148, 163, 184, 0.42),
        inset 0 0 10px rgba(148, 163, 184, 0.16);
}

.hero-dot--editing-disabled {
    opacity: 0.58;
    cursor: not-allowed;
    filter: grayscale(0.45);
}

.hero-panel.is-map-editing .hero-dot {
    width: var(--hero-dot-edit-size, 40px);
    height: var(--hero-dot-edit-size, 40px);
    cursor: pointer;
}

.hero-panel.is-map-editing .hero-dot::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    pointer-events: auto;
}

.hero-panel.is-map-editing .hero-dot:hover {
    cursor: pointer;
    border-color: #fed7aa;
    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.42),
        0 0 0 6px rgba(249, 115, 22, 0.34),
        0 0 24px rgba(249, 115, 22, 0.72),
        inset 0 0 8px rgba(255, 255, 255, 0.18);
}

.hero-panel.is-map-editing .hero-dot.is-active {
    cursor: grab;
}

.hero-panel.is-map-editing .hero-dot.is-active:active {
    cursor: grabbing;
}

.hero-dot__text {
    position: relative;
    z-index: 2;
    pointer-events: none;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    max-width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    text-align: center;
}

.hero-dot__tooltip {
    position: absolute;
    z-index: 20;
    width: max-content;
    min-width: 54px;
    max-width: 180px;
    padding: 6px 9px;
    border: 1px solid rgba(187, 247, 208, 0.72);
    border-radius: 6px;
    background: rgba(10, 20, 14, 0.94);
    color: #f0fdf4;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(22, 163, 74, 0.16);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    text-shadow: none;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 22px));
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.hero-dot__tooltip--editable {
    min-width: 116px;
    max-width: 220px;
    padding: 4px;
    border-color: rgba(147, 197, 253, 0.9);
    background: rgba(15, 23, 42, 0.96);
    pointer-events: auto;
}

.hero-dot__name-editor {
    display: block;
    min-width: 92px;
    max-width: 196px;
    padding: 5px 7px;
    border: 1px solid rgba(147, 197, 253, 0.44);
    border-radius: 5px;
    background: rgba(30, 41, 59, 0.9);
    color: #eff6ff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    outline: none;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    cursor: text;
}

.hero-dot__name-editor:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.28);
}

.hero-dot__tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(10, 20, 14, 0.94);
}

.hero-dot:focus-visible + .hero-dot__tooltip,
.hero-dot:hover + .hero-dot__tooltip,
.hero-dot.is-active + .hero-dot__tooltip--editable,
.hero-dot__tooltip--editable:focus-within {
    z-index: 80;
    opacity: 1;
    transform: translate(-50%, calc(-100% - 16px));
}

.hero-dot.is-tooltip-pinned + .hero-dot__tooltip {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 16px));
}

/* -------- 指引箭头（按钮→按钮）--------
 *   - 用一个铺满 image-wrap 的 SVG 容器统一画所有箭头
 *   - viewBox 0~100 的归一化坐标系，跟 .hero-dot 的 left/top 百分比保持一致
 *   - vector-effect=non-scaling-stroke 让线宽不跟随容器拉伸
 *   - pointer-events:none 不影响圆点点击
 *   - fill=context-stroke 让箭头头自动取 line 的 stroke 颜色（SVG2 特性，主流浏览器都支持）
 */
.hero-arrows {
    position: absolute;
    z-index: 34;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.hero-image-nav {
    position: absolute;
    inset: 12px;
    z-index: 68;
    pointer-events: none;
}

.hero-image-nav__group {
    position: absolute;
    top: 0;
    display: inline-flex;
    gap: 8px;
    pointer-events: none;
    transition: top 0.14s ease;
}

.hero-chapter-selector:hover ~ .hero-image-nav .hero-image-nav__group,
.hero-chapter-selector:focus-within ~ .hero-image-nav .hero-image-nav__group,
.hero-chapter-selector.is-open ~ .hero-image-nav .hero-image-nav__group {
    top: var(--hero-chapter-drawer-offset, 130px);
}

.hero-image-nav__group--chapter {
    left: 0;
}

.hero-image-nav__group--step {
    right: 0;
}

.hero-panel .hero-image-nav-btn {
    position: relative;
    z-index: 10;
    width: 118px;
    height: 46px;
    min-width: 118px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: color-mix(in srgb, var(--panel, #ffffff) 78%, transparent);
    border: 3px dashed #22c55e;
    border-radius: 10px;
    color: #16a34a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 7px rgba(34, 197, 94, 0.45);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.22);
    pointer-events: auto;
    backdrop-filter: blur(3px);
}

.hero-panel .hero-image-nav-btn:hover:not([disabled]) {
    background: color-mix(in srgb, var(--panel, #ffffff) 86%, transparent);
    border-color: #4ade80;
    color: #15803d;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.55);
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.28);
}

.hero-panel .hero-image-nav-btn[disabled] {
    border-color: #22c55e;
    color: #16a34a;
    text-shadow: 0 0 6px rgba(34, 197, 94, 0.35);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.16);
}

.hero-arrow {
    fill: none;
    stroke: var(--hero-dot-glow, #60a5fa);
    stroke-width: 2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.65));
}

.hero-arrow--dashed {
    stroke-dasharray: 6 5;
}

/* 箭头激活态 —— 只有从"当前选中按钮出发"的箭头会被加 .is-active，
 *   并表现为：
 *     · 线条本身变橙色（与选中点配色一致），
 *     · 实线：保持完整实线，由叠加的 .hero-arrow-runner（小三角）沿线滑动；
 *     · 虚线：经典 marching ants —— 虚线段沿方向流动。
 *   所有动效均为 SVG 原生 SMIL 或 CSS keyframes，浏览器合成层处理，几乎零 CPU。
 */
.hero-arrow.is-active {
    stroke: var(--hero-dot-fill, #f97316);
}

@keyframes hero-arrow-flow {
    to { stroke-dashoffset: -11; }
}

.hero-arrow--dashed.is-active {
    animation: none;
}

/* 沿 active 实线移动的小三角形箭头。
 *   形状以 (0,0) 为几何中心，顶点指向 +X，由 <animateMotion rotate="auto"> 自动沿线段方向旋转。
 *   path 属性由 JS 在 adjustHeroArrows() 里写成与对应 line 完全相同的端点。 */
.hero-arrow-runner {
    fill: var(--hero-dot-fill, #f97316);
    filter: drop-shadow(0 0 3px rgba(249, 115, 22, 0.75));
}

.hero-arrow-runner--dashed {
    fill: #fb923c;
    filter: drop-shadow(0 0 4px rgba(251, 146, 60, 0.82));
}

/* 这里的 transform 必须显式写回，
 * 因为 poe2-deep.css 里有 `button:hover { transform: translateY(-1px) }` 全局规则，
 * 会把 .hero-dot 的居中 translate(-50%,-50%) 盖掉，导致 hover 时圆点向左上角位移。 */
.hero-dot:hover {
    z-index: 76;
    transform: translate(-50%, -50%);
    background: color-mix(in srgb, var(--hero-dot-glow) 55%, transparent);
    border-color: var(--hero-dot-ring);
}

.hero-dot:focus-visible {
    z-index: 76;
    transform: translate(-50%, -50%);
    outline: none;
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.4),
        0 0 0 4px var(--hero-dot-glow),
        0 0 16px color-mix(in srgb, var(--hero-dot-glow) 75%, transparent);
}

.hero-dot.is-active {
    z-index: 38;
    --hero-dot-ring: #ffedd5;
    --hero-dot-glow: #fb923c;
    --hero-dot-fill: #f97316;
    transform: translate(-50%, -50%);
    background: var(--hero-dot-fill);
    border-color: color-mix(in srgb, var(--hero-dot-fill) 60%, #ffffff);
    color: #ffffff;
    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.45),
        0 0 22px color-mix(in srgb, var(--hero-dot-fill) 85%, transparent),
        inset 0 0 8px rgba(255, 255, 255, 0.2);
}

.hero-dot.is-active:hover,
.hero-dot.is-active:focus-visible {
    z-index: 76;
    transform: translate(-50%, -50%);
}

.hero-dot.is-tooltip-pinned {
    z-index: 38;
}

/* -------- 右栏：标题 / 描述 / 翻单 / 翻组 -------- */
.hero-panel__info-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: transparent;
    border: 0;
    border-radius: 12px;
    min-width: 0;
}

/* 标题：字号翻倍、左右居中 */
.hero-panel__info-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 38px;
}

.hero-panel__info-head .hero-panel__info-title {
    flex: 0 1 auto;
    min-width: 0;
}

.hero-panel__info-title-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-panel__info-title-actions .build-feed-card__action-btn {
    width: 38px;
    height: 38px;
}

.hero-panel__info-title-actions .build-feed-card__action-icon {
    width: 25px;
    height: 25px;
}

.hero-panel__info-head .story-guide-hero-comment-mode {
    flex: 0 0 auto;
    justify-content: flex-start;
    margin: 0;
}

.hero-panel__info-head .story-guide-hero-comment-mode .story-guide-mode-segmented {
    height: 30px;
}

.hero-panel__info-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--brand-2, #e8d48b);
    line-height: 1.2;
    text-align: center;
    padding: 0;
    border-bottom: 0;
    min-height: 1.2em;
    word-break: break-word;
}

.hero-panel__info-title.is-empty {
    color: var(--muted);
    font-weight: 600;
    font-size: 18px;
}

/* 行 2：描述 */
.hero-panel__info-desc {
    flex: 1;
    min-height: 80px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text, #e6e6ea);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, rgba(255, 255, 255, 0.2)) transparent;
}

.hero-panel__info-title + .hero-panel__info-desc {
    margin-top: -14px;
}

.hero-panel__info-head + .hero-panel__info-desc {
    margin-top: -14px;
}

.hero-panel__info-desc--combined {
    display: flex;
    flex-direction: column;
    gap: 12px;
    white-space: normal;
}

.hero-panel__info-title + .hero-panel__info-desc--combined {
    margin-top: -8px;
}

.hero-panel__info-head + .hero-panel__info-desc--combined {
    margin-top: -8px;
}

.hero-panel__info-desc-block {
    white-space: pre-wrap;
}

.hero-panel__info-desc-block--rich {
    white-space: normal;
}

.hero-panel__info-desc-block.is-empty {
    color: var(--muted);
    opacity: 0.75;
    font-style: italic;
}

.hero-panel__info-desc-divider {
    flex: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--line-bright, #7ea7ff) 58%, transparent) 18%,
        color-mix(in srgb, var(--line-bright, #7ea7ff) 58%, transparent) 82%,
        transparent 100%);
}

.hero-panel__info-mode {
    --story-guide-segment-w: 64px;
    align-self: center;
    height: 30px;
    margin: -6px 0 -4px;
    padding: 3px;
    border-radius: 8px;
}

.hero-panel__info-mode .story-guide-mode-segmented__thumb {
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    border-radius: 6px;
}

.hero-panel__info-mode .story-guide-mode-segment {
    border-radius: 6px;
    font-size: 12px;
}

.hero-panel__info-desc::-webkit-scrollbar {
    width: 4px;
}

.hero-panel__info-desc::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, rgba(255, 255, 255, 0.2));
    border-radius: 2px;
}

.hero-panel__info-desc.is-empty {
    color: var(--muted);
    opacity: 0.75;
    font-style: italic;
}

/* 翻按钮组：
 *   --group   ——『上一章/下一章』，置于右栏最顶部（切图）
 *   默认       ——『上一个/下一个』，置于最底部（同一图内按钮翻动）
 */
.hero-panel__info-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-top: 10px;
    border-top: 0;
}

.hero-panel__info-nav--group {
    gap: 18px;
    padding-top: 0;
    padding-bottom: 2px;
    border-top: none;
    border-bottom: 0;
}

.hero-nav-btn {
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #a855f7;
    background:
        repeating-linear-gradient(to right, #a855f7 0 7px, transparent 7px 12px) top left / 100% 2px no-repeat,
        repeating-linear-gradient(to right, #a855f7 0 7px, transparent 7px 12px) bottom left / 100% 2px no-repeat,
        repeating-linear-gradient(to bottom, #a855f7 0 7px, transparent 7px 12px) top left / 2px 100% no-repeat,
        repeating-linear-gradient(to bottom, #a855f7 0 7px, transparent 7px 12px) top right / 2px 100% no-repeat;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.05s ease;
}

.hero-nav-btn:hover:not([disabled]) {
    background:
        repeating-linear-gradient(to right, #c084fc 0 7px, transparent 7px 12px) top left / 100% 2px no-repeat,
        repeating-linear-gradient(to right, #c084fc 0 7px, transparent 7px 12px) bottom left / 100% 2px no-repeat,
        repeating-linear-gradient(to bottom, #c084fc 0 7px, transparent 7px 12px) top left / 2px 100% no-repeat,
        repeating-linear-gradient(to bottom, #c084fc 0 7px, transparent 7px 12px) top right / 2px 100% no-repeat;
    color: #c084fc;
    box-shadow: none;
    outline: none;
}

.hero-nav-btn:active:not([disabled]) {
    transform: translateY(1px);
}

.hero-nav-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    color: #a855f7;
}

.hero-panel__info-nav--group .hero-nav-btn {
    padding: 12px 18px;
    background: transparent;
    border: 3px dashed #a855f7;
    border-radius: 10px;
    color: #a855f7;
    font-size: 16px;
    font-weight: 800;
    text-shadow: 0 0 7px rgba(168, 85, 247, 0.45);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}

.hero-panel__info-nav--group .hero-nav-btn:hover:not([disabled]) {
    background: transparent;
    border-color: #c084fc;
    color: #c084fc;
    text-shadow: 0 0 8px rgba(192, 132, 252, 0.55);
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.25);
}

.hero-panel__info-nav--group .hero-nav-btn[disabled] {
    border-color: #a855f7;
    color: #a855f7;
    text-shadow: 0 0 6px rgba(168, 85, 247, 0.35);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.16);
}

/* -------- 响应式 -------- */
@media (max-width: 900px) {
    .hero-panel__grid {
        grid-template-columns: 1fr;
    }

    .hero-panel__info-col {
        min-height: 180px;
    }

    .hero-panel__info-desc {
        max-height: 220px;
    }
}

@media (max-width: 520px) {
    .hero-panel {
        padding: 12px;
    }

    .hero-chapter-selector__scroller {
        gap: 6px;
        padding-bottom: 6px;
    }

    .hero-chapter-chip {
        width: 106px;
        height: 62px;
        font-size: 10px;
    }

    .hero-chapter-chip__thumb {
        width: 100%;
        height: 100%;
    }

    .hero-panel__image-wrap {
        --hero-chapter-drawer-offset: 112px;
    }

    .hero-image-nav {
        inset: 8px;
    }

    .hero-panel .hero-image-nav-btn {
        width: 76px;
        min-width: 76px;
        height: 38px;
        min-height: 38px;
        border-width: 2px;
        font-size: 12px;
    }

    .hero-image-nav__group {
        gap: 6px;
    }

    .hero-dot {
        width: var(--hero-dot-mobile-size, var(--hero-dot-size, 26px));
        height: var(--hero-dot-mobile-size, var(--hero-dot-size, 26px));
        font-size: var(--hero-dot-font-size, 11px);
    }
}