/* 顶部公告 — 兑换码跑马灯 */

html.kb-floating-scrollbars,
html.kb-floating-scrollbars body,
html.kb-floating-scrollbars *,
html.kb-floating-scrollbars body > :not(.kb-recent-update-bar):not(.kb-scroll-hint):not(.ambient-bg):not(script):not(link):not(style):not(noscript),
html.kb-floating-scrollbars [class$="-shell"],
html.kb-floating-scrollbars [class$="-body"],
html.kb-floating-scrollbars #reader-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html.kb-floating-scrollbars::-webkit-scrollbar,
html.kb-floating-scrollbars body::-webkit-scrollbar,
html.kb-floating-scrollbars *::-webkit-scrollbar,
html.kb-floating-scrollbars body > :not(.kb-recent-update-bar):not(.kb-scroll-hint):not(.ambient-bg):not(script):not(link):not(style):not(noscript)::-webkit-scrollbar,
html.kb-floating-scrollbars [class$="-shell"]::-webkit-scrollbar,
html.kb-floating-scrollbars [class$="-body"]::-webkit-scrollbar,
html.kb-floating-scrollbars #reader-container::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.kb-scroll-hint {
    position: fixed;
    top: var(--kb-scroll-top, 3rem);
    right: 3px;
    z-index: 12000;
    flex: none !important;
    width: 4px;
    height: var(--kb-scroll-height, 3rem) !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.48);
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
    transition: opacity 0.16s ease;
}

.kb-scroll-hint.is-visible {
    opacity: 1;
}

.shell-notice-layer {
    position: fixed;
    z-index: 1002;
    top: 0.75rem;
    left: calc(280px + 1.5rem);
    right: 1.5rem;
    pointer-events: none;
}

.shell-notice-layer[hidden] {
    display: none !important;
}

.shell-notice-layer .kb-recent-update-bar {
    width: 100%;
    max-width: none;
    min-height: 42px;
    margin: 0;
    pointer-events: auto;
}

@media (min-width: 769px) {
    body.has-shell-notice .content-area.has-tool-frame {
        padding-top: max(3.55rem, var(--shell-notice-clearance, 3.55rem));
    }
}

@media (max-width: 768px) {
    .shell-notice-layer {
        top: max(0.75rem, calc(env(safe-area-inset-top, 0px) + 0.5rem));
        left: calc(max(0.75rem, calc(env(safe-area-inset-left, 0px) + 0.5rem)) + 52px);
        right: max(0.75rem, calc(env(safe-area-inset-right, 0px) + 0.5rem));
    }

    .shell-notice-layer .kb-recent-update-bar {
        min-height: 44px;
        border-radius: 12px;
    }

    body.has-shell-notice .content-area.has-tool-frame {
        position: fixed;
        top: calc(var(--shell-notice-clearance, calc(5.25rem + env(safe-area-inset-top, 0px))) + 0.45rem);
        right: 0;
        bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
        left: 0;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0 0.65rem;
        overflow: hidden;
        z-index: 1;
    }

    body.has-shell-notice .content-area.has-tool-frame #reader-container,
    body.has-shell-notice .content-area.has-tool-frame #tool-frame-container,
    body.has-shell-notice .content-area.has-tool-frame .tool-frame {
        height: 100%;
        min-height: 0;
    }

    .shell-notice-layer .kb-recent-update-label {
        padding: 0.13rem 0.46rem;
        font-size: 0.68rem;
    }

    .shell-notice-layer .kb-recent-update-viewport {
        margin-right: 1rem;
    }

    .shell-notice-layer .kb-redeem-link {
        max-width: 7.5em;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 400px) {
    .shell-notice-layer {
        top: max(0.5rem, calc(env(safe-area-inset-top, 0px) + 0.4rem));
        left: calc(max(0.5rem, calc(env(safe-area-inset-left, 0px) + 0.4rem)) + 48px);
        right: max(0.5rem, calc(env(safe-area-inset-right, 0px) + 0.4rem));
    }

    .shell-notice-layer .kb-recent-update-bar {
        min-height: 40px;
    }

    body.has-shell-notice .content-area.has-tool-frame {
        top: calc(var(--shell-notice-clearance, calc(4.9rem + env(safe-area-inset-top, 0px))) + 0.35rem);
        right: 0;
        bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
        left: 0;
        padding: 0 0.5rem;
    }

    .shell-notice-layer .kb-recent-update-label {
        padding: 0.1rem 0.4rem;
        font-size: 0.64rem;
    }

    .shell-notice-layer .kb-redeem-link {
        max-width: 6.5em;
    }
}

/* 独立打开时避免 body 固定 100vh 与子页「100vh 主壳」叠压把顶栏挤出可视区域 */
body:not(.is-embedded):has(> .kb-recent-update-bar) {
    height: auto;
    min-height: 100vh;
}

/* 总站 iframe 内 fallback：若通知条仍是 body 直系节点，则保持原来的可滚动布局 */
html:has(body.is-embedded > .kb-recent-update-bar) {
    height: 100%;
    overflow: hidden;
}

body.is-embedded:has(> .kb-recent-update-bar) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

body.is-embedded:has(> .kb-recent-update-bar) > .kb-recent-update-bar {
    flex: 0 0 auto;
}

body.is-embedded:has(> .kb-recent-update-bar) > *:not(.kb-recent-update-bar):not(.ambient-bg) {
    flex: 1 1 auto;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}

.kb-recent-update-bar {
    position: relative;
    z-index: 10050;
    flex: 0 0 auto;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem auto 0.4rem;
    /* 默认值：与多数子页不完全一致时仍居中 */
    max-width: min(1520px, calc(100vw - 2rem));
    box-sizing: border-box;
    font-size: 0.8125rem;
    line-height: 1.45;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.kb-recent-update-bar.kb-notice-tone-green .kb-recent-update-text {
    color: #15803d;
}

/*
 * 与下方主内容区同宽、左右与主列内边距对齐：
 * 宽 = min(max - 2*pad, 100vw - 2*pad)，水平居中偏移与 page_shell 主列一致。
 */
body:has(> .season-page-shell) > .kb-recent-update-bar,
body:has(> .kb-page) > .kb-recent-update-bar,
body:has(> .map-page) > .kb-recent-update-bar,
body:has(> .page) > .kb-recent-update-bar,
body:has(> .guide-page) > .kb-recent-update-bar,
body:has(> .detail-page) > .kb-recent-update-bar {
    --kb-amax: var(--kb-content-max-width, 1440px);
    --kb-apad: var(--kb-content-pad-x, 1.5rem);
    width: min(calc(var(--kb-amax) - 2 * var(--kb-apad)), calc(100vw - 2 * var(--kb-apad)));
    max-width: none;
    margin-left: max(var(--kb-apad), calc((100vw - var(--kb-amax)) / 2 + var(--kb-apad)));
    margin-right: max(var(--kb-apad), calc((100vw - var(--kb-amax)) / 2 + var(--kb-apad)));
}

/* 性价比计算器 */
body:has(> .vc-shell) > .kb-recent-update-bar {
    --kb-amax: 1520px;
    --kb-apad: 0.65rem;
    width: min(calc(var(--kb-amax) - 2 * var(--kb-apad)), calc(100vw - 2 * var(--kb-apad)));
    max-width: none;
    margin-left: max(var(--kb-apad), calc((100vw - var(--kb-amax)) / 2 + var(--kb-apad)));
    margin-right: max(var(--kb-apad), calc((100vw - var(--kb-amax)) / 2 + var(--kb-apad)));
}

/* 图鉴类 shell（与各自页面 .xx-shell 一致） */
body:has(> .pk-shell) > .kb-recent-update-bar,
body:has(> .sk-shell) > .kb-recent-update-bar,
body:has(> .rk-shell) > .kb-recent-update-bar,
body:has(> .fd-shell) > .kb-recent-update-bar,
body:has(> .cp-shell) > .kb-recent-update-bar {
    --kb-amax: 1200px;
    --kb-apad: 1.25rem;
    width: min(calc(var(--kb-amax) - 2 * var(--kb-apad)), calc(100vw - 2 * var(--kb-apad)));
    max-width: none;
    margin-left: max(var(--kb-apad), calc((100vw - var(--kb-amax)) / 2 + var(--kb-apad)));
    margin-right: max(var(--kb-apad), calc((100vw - var(--kb-amax)) / 2 + var(--kb-apad)));
}

body:has(> .iv-shell) > .kb-recent-update-bar {
    --kb-amax: 1320px;
    --kb-apad: 1rem;
    width: min(calc(var(--kb-amax) - 2 * var(--kb-apad)), calc(100vw - 2 * var(--kb-apad)));
    max-width: none;
    margin-left: max(var(--kb-apad), calc((100vw - var(--kb-amax)) / 2 + var(--kb-apad)));
    margin-right: max(var(--kb-apad), calc((100vw - var(--kb-amax)) / 2 + var(--kb-apad)));
}

.kb-recent-update-label {
    flex-shrink: 0;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.52rem;
    border-radius: 999px;
    background: #fff7d6;
    color: #a16207;
    border: 1px solid #facc15;
}

.kb-recent-update-viewport {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 1.85rem;
    margin-right: 1.25rem;
    overflow: hidden;
}

.kb-recent-update-track {
    position: absolute;
    top: 50%;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    white-space: nowrap;
    transform: translate(100%, -50%);
    will-change: transform;
}

.kb-recent-update-bar:hover .kb-recent-update-track {
    animation-play-state: paused;
}

.kb-recent-update-text {
    flex: 0 0 auto;
    color: #d97706;
    font-weight: 800;
}

.kb-redeem-link {
    flex: 0 0 auto;
    border: 1px solid #facc15;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font: inherit;
    font-weight: 800;
    line-height: 1;
    padding: 0.28rem 0.68rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.kb-redeem-link:hover,
.kb-redeem-link:focus-visible {
    background: #fde68a;
    border-color: #eab308;
    color: #78350f;
    outline: none;
}

.kb-notice-next {
    position: absolute;
    right: 0.34rem;
    bottom: 0.22rem;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(234, 179, 8, 0.55);
    border-radius: 999px;
    background: rgba(255, 247, 214, 0.86);
    color: #a16207;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 14px;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    opacity: 0.78;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}

.kb-notice-next:hover,
.kb-notice-next:focus-visible {
    opacity: 1;
    background: #fef3c7;
    border-color: #eab308;
    outline: none;
}

@keyframes kb-notice-marquee {
    0% {
        transform: translate(var(--kb-marquee-start, 100%), -50%);
    }
    100% {
        transform: translate(var(--kb-marquee-end, -100%), -50%);
    }
}

.kb-redeem-modal[hidden] {
    display: none !important;
}

.kb-redeem-modal {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.kb-redeem-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(4px);
}

.kb-redeem-dialog {
    position: relative;
    width: min(440px, calc(100vw - 2rem));
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.kb-redeem-close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 30px;
    height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
}

.kb-redeem-head {
    padding: 1.1rem 1.25rem 0.85rem;
    border-bottom: 1px solid #e5edf6;
    background: #f8fbff;
}

.kb-redeem-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
}

.kb-redeem-head p {
    margin: 0.35rem 2.1rem 0 0;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.55;
}

.kb-redeem-codes {
    display: grid;
    gap: 0.75rem;
    padding: 1.3rem 1.25rem;
    color: #475569;
    font-size: 0.88rem;
}

.kb-redeem-codes strong {
    color: #0f172a;
    font-size: 0.95rem;
}

.kb-redeem-code-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kb-redeem-code-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.58rem 0.68rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
}

.kb-redeem-code-item code {
    color: #78350f;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.9rem;
    font-weight: 800;
}

.kb-redeem-copy {
    flex: 0 0 auto;
    border: 1px solid #facc15;
    border-radius: 999px;
    background: #fff7d6;
    color: #92400e;
    cursor: pointer;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.35rem 0.62rem;
}

.kb-redeem-copy:hover,
.kb-redeem-copy:focus-visible {
    background: #fde68a;
    border-color: #eab308;
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .kb-recent-update-track {
        position: static;
        transform: none;
        animation: none;
    }
}

.is-embedded .kb-recent-update-bar {
    padding: 0.42rem 0.68rem;
    font-size: 0.76rem;
    margin: 0 0 0.55rem;
    border-radius: 12px;
    max-width: unset;
}

.is-embedded .season-page-shell > .kb-recent-update-bar,
.is-embedded .kb-page > .kb-recent-update-bar,
.is-embedded .map-page > .kb-recent-update-bar,
.is-embedded .page > .kb-recent-update-bar,
.is-embedded .guide-page > .kb-recent-update-bar,
.is-embedded .detail-page > .kb-recent-update-bar,
.is-embedded .vc-shell > .kb-recent-update-bar,
.is-embedded .pk-shell > .kb-recent-update-bar,
.is-embedded .sk-shell > .kb-recent-update-bar,
.is-embedded .rk-shell > .kb-recent-update-bar,
.is-embedded .fd-shell > .kb-recent-update-bar,
.is-embedded .cp-shell > .kb-recent-update-bar,
.is-embedded .iv-shell > .kb-recent-update-bar {
    width: 100%;
    max-width: none;
}

@media (max-width: 720px) {
    .is-embedded .kb-recent-update-bar {
        margin-top: 0;
    }

    .is-embedded .kb-page > .kb-recent-update-bar,
    .is-embedded .map-page > .kb-recent-update-bar,
    .is-embedded .page > .kb-recent-update-bar,
    .is-embedded .guide-page > .kb-recent-update-bar,
    .is-embedded .detail-page > .kb-recent-update-bar,
    .is-embedded .vc-shell > .kb-recent-update-bar,
    .is-embedded .pk-shell > .kb-recent-update-bar,
    .is-embedded .sk-shell > .kb-recent-update-bar,
    .is-embedded .rk-shell > .kb-recent-update-bar,
    .is-embedded .fd-shell > .kb-recent-update-bar,
    .is-embedded .cp-shell > .kb-recent-update-bar,
    .is-embedded .iv-shell > .kb-recent-update-bar {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 560px) {
    .kb-recent-update-bar {
        min-height: 38px;
        gap: 0.45rem;
        padding: 0.42rem 0.52rem;
        border-radius: 12px;
    }
    .kb-recent-update-label {
        font-size: 0.68rem;
        padding: 0.12rem 0.42rem;
    }
    .kb-recent-update-viewport {
        height: 1.85rem;
        margin-right: 1rem;
    }
    .kb-redeem-link {
        padding: 0.24rem 0.5rem;
    }
}