/* 幻梦系列专题页 - 素材叠放布局；十三梦网格默认 .dn9-card（B1/B2/B3/B4 与 .huanmeng-frame* 规则共用，后者保留作历史 DOM 兼容）；无金框素材时的渐变壳与返回条在 page-dreams-nine.css；金框 PNG 仅占位卡输出、有成片不叠框 */

/*
 * 全局 style.css 中 body 为 flex + align-items:center，子项会按内容 min-width 收缩。
 * 幻梦 14 列网格为 minmax(1px,1fr)，主内容区若不拉满视口宽度会塌成 ~14px，金框呈中心小点。
 */
body.huanmeng-page #htblog-main-content {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

/* 覆盖 body 默认背景，避免粉色透出；允许纵向滚动 */
body.huanmeng-page {
    /* style.css 中 body 为 align-items:center，会收缩未设宽的 flex 子项；幻梦页须整行拉伸 */
    align-items: stretch;
    background: transparent !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

html:has(body.huanmeng-page) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.huanmeng-page {
    min-height: 100vh;
    height: auto;
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    overflow-x: hidden;
}

/* 1. 背景 - 全页铺满，固定覆盖整个视口 */
.huanmeng-bg-full {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* 舞台容器：须高于四周边框图（边框 z-index:1），否则金框会被缎带层盖住 */
.huanmeng-stage {
    position: relative;
    min-height: 100vh;
    width: 100%;
    max-width: min(2400px, 98vw);
    margin: 0 auto;
    z-index: 3;
}

/* 通用图层 */
.huanmeng-layer {
    position: absolute;
    pointer-events: none;
}

.huanmeng-layer.huanmeng-signature-wrap {
    pointer-events: auto;
}

/* 2. 上下边框 - 比例不变，宽度占满屏幕 */
.huanmeng-border-top,
.huanmeng-border-bottom {
    position: fixed;
    left: 0;
    width: 100vw;
    height: 25vh;
    min-height: 240px;
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 1;
}

.huanmeng-border-top {
    top: 0;
}

.huanmeng-border-bottom {
    bottom: 0;
    background-position: center bottom;
}

/* 3. 左右边框 - 比例不变，高度占满屏幕 */
.huanmeng-border-left,
.huanmeng-border-right {
    position: fixed;
    top: 0;
    left: 0;
    width: 12vw;
    min-width: 140px;
    height: 100vh;
    background-size: auto 100%;
    background-position: left center;
    background-repeat: no-repeat;
    z-index: 1;
}

.huanmeng-border-left {
    left: 0;
}

.huanmeng-border-right {
    left: auto;
    right: 0;
    background-position: right center;
}

/* 13梦网格布局 */
.huanmeng-grid-section {
    position: relative;
    z-index: 4;
    isolation: isolate;
    padding: clamp(180px, 20vh, 280px) clamp(16px, 5vw, 56px) clamp(100px, 12vh, 160px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.huanmeng-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 36px;
    width: 100%;
    max-width: min(2200px, 100%);
    box-sizing: border-box;
}

.huanmeng-grid-bottom {
    margin-left: 0;
}

/* 卡片容器 B1：比例约 5:7 — .huanmeng-frame / .huanmeng-grid-section .dn9-card */
.huanmeng-frame,
.huanmeng-grid-section .dn9-card {
    position: relative;
    width: 228px;
    height: 318px;
    cursor: pointer;
    flex-shrink: 0;
    isolation: isolate;
    transition: transform 0.25s ease;
}

.huanmeng-grid-section .dn9-card {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    aspect-ratio: auto;
}

/* 成品图 B2：.huanmeng-frame-art / .dn9-card-art */
.huanmeng-frame-art,
.dn9-card-art {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: auto;
}

/* 成品图卡片：确保整个卡片可点击 */
.huanmeng-frame-has-art,
.dn9-card--has-art {
    pointer-events: auto;
}

.huanmeng-frame-has-art .huanmeng-frame-inner,
.dn9-card--has-art .dn9-card-inner {
    display: none;
}

/* 占位卡片：金色边框装饰 */
.huanmeng-frame-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
    pointer-events: none;
}


/* 占位卡片：无成品图时显示占位内容 */
.huanmeng-frame-no-bg .huanmeng-frame-inner {
    margin: 0;
    background: transparent;
}

.huanmeng-frame-inner,
.dn9-card-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px;
    margin: clamp(20px, 5%, 32px) clamp(14px, 4%, 22px);
    box-sizing: border-box;
    pointer-events: none;
}

.huanmeng-frame-inner img,
.dn9-card-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.huanmeng-frame-placeholder,
.dn9-card-label {
    font-size: clamp(1.1rem, 2.6vw, 26px);
    color: #b8a080;
    text-align: center;
    padding: 8px;
}

/* 第 9～13 梦：罗马数字占位，字号大于普通占位 */
.huanmeng-frame-placeholder--roman,
.dn9-card-label--roman {
    font-size: 2.5rem;
    font-weight: 600;
    font-family: "Times New Roman", Georgia, "Noto Serif SC", "Source Han Serif SC", serif;
    letter-spacing: 0.06em;
    line-height: 1.05;
    padding: 4px 8px;
    color: #a08060;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 占位卡片：金色边框装饰 */
.huanmeng-frame-border {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
    pointer-events: none;
}

.huanmeng-frame:hover,
.huanmeng-frame-hover-active,
.dn9-card:hover,
.dn9-card:focus-visible {
    transform: scale(1.05);
    cursor: pointer;
}

.huanmeng-frame:active,
.dn9-card:active {
    transform: scale(1.02);
}

.huanmeng-frame:focus,
.dn9-card:focus {
    outline: 2px solid rgba(212, 175, 55, 0.75);
    outline-offset: 4px;
}

.huanmeng-frame:focus:not(:focus-visible),
.dn9-card:focus:not(:focus-visible) {
    outline: none;
}

/* 7. 签名 - 固定右下角，再放大三倍 */
.huanmeng-signature-wrap {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
}

.huanmeng-signature-img {
    max-width: 2400px;
    width: 1600px;
    height: auto;
    display: block;
}

/* 响应式 */
@media (max-width: 1400px) {
    .huanmeng-border-left,
    .huanmeng-border-right {
        width: 10vw;
        min-width: 120px;
    }
    .huanmeng-grid-section {
        padding: clamp(160px, 18vh, 260px) clamp(14px, 4vw, 48px) clamp(100px, 12vh, 160px);
    }
}

@media (max-width: 1199px) {
    .huanmeng-border-left,
    .huanmeng-border-right {
        width: 10vw;
        min-width: 110px;
    }
    .huanmeng-title-img {
        max-width: 840px;
    }
    .huanmeng-grid-section {
        padding: clamp(150px, 16vh, 240px) clamp(12px, 3.5vw, 40px) clamp(88px, 11vh, 140px);
    }
    .huanmeng-frame,
    .huanmeng-grid-section .dn9-card {
        width: 178px;
        height: 249px;
    }
    .huanmeng-frame-inner,
    .dn9-card-inner {
        margin: 22px 15px;
    }
    .huanmeng-frame-placeholder,
    .dn9-card-label {
        font-size: 18px;
    }
    .huanmeng-frame-placeholder--roman,
    .dn9-card-label--roman {
        font-size: 2rem;
    }
    .huanmeng-signature-img {
        max-width: 1200px;
        width: 800px;
    }
}

@media (max-width: 900px) {
    .huanmeng-border-left,
    .huanmeng-border-right {
        width: 8vw;
        min-width: 90px;
    }
    .huanmeng-title-img {
        max-width: 640px;
    }
    .huanmeng-grid-section {
        padding: clamp(120px, 14vh, 200px) clamp(10px, 3vw, 32px) clamp(72px, 10vh, 120px);
        gap: 24px;
    }
    .huanmeng-grid {
        gap: 28px;
    }
    .huanmeng-grid-bottom {
        margin-left: 0;
    }
    .huanmeng-frame,
    .huanmeng-grid-section .dn9-card {
        width: 154px;
        height: 216px;
    }
    .huanmeng-frame-inner,
    .dn9-card-inner {
        margin: 18px 12px;
    }
    .huanmeng-frame-placeholder,
    .dn9-card-label {
        font-size: 16px;
    }
    .huanmeng-frame-placeholder--roman,
    .dn9-card-label--roman {
        font-size: 1.65rem;
    }
    .huanmeng-signature-img {
        max-width: 960px;
        width: 640px;
    }
    .huanmeng-signature-wrap {
        right: 20px;
        bottom: 20px;
    }
}

@media (max-width: 600px) {
    .huanmeng-border-left,
    .huanmeng-border-right {
        width: 6vw;
        min-width: 60px;
    }
    .huanmeng-title-img {
        max-width: 480px;
    }
    .huanmeng-grid-section {
        padding: clamp(100px, 15vh, 160px) 16px clamp(64px, 9vh, 100px);
        gap: 16px;
    }
    .huanmeng-grid {
        gap: 20px;
    }
    .huanmeng-grid-bottom {
        margin-left: 0;
    }
    .huanmeng-frame,
    .huanmeng-grid-section .dn9-card {
        width: 106px;
        height: 149px;
    }
    .huanmeng-frame-inner,
    .dn9-card-inner {
        margin: 12px 8px;
    }
    .huanmeng-frame-placeholder,
    .dn9-card-label {
        font-size: 12px;
    }
    .huanmeng-frame-placeholder--roman,
    .dn9-card-label--roman {
        font-size: 1.35rem;
        letter-spacing: 0.04em;
    }
    .huanmeng-signature-img {
        max-width: 640px;
        width: 420px;
    }
    .huanmeng-signature-wrap {
        right: 16px;
        bottom: 16px;
    }
}

/* 进入页时：设定简介弹窗，背景毛玻璃 */
.huanmeng-intro-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    pointer-events: none;
}

.huanmeng-intro-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.huanmeng-intro-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(253, 248, 240, 0.35);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.huanmeng-intro-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(520px, 92vw);
    max-height: min(80vh, 640px);
    overflow-y: auto;
    padding: 28px 28px 22px;
    box-sizing: border-box;
    background: rgba(253, 248, 240, 0.94);
    border: 2px solid #d4af37;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(212, 175, 55, 0.25) inset;
}

.huanmeng-intro-modal__heading {
    margin: 0 0 16px;
    padding-right: 36px;
    font-size: clamp(1.15rem, 2.8vw, 1.35rem);
    font-weight: 600;
    color: #8b6914;
    text-align: center;
    letter-spacing: 0.06em;
}

.huanmeng-intro-modal__p {
    margin: 0 0 14px;
    font-size: 0.95rem;
    line-height: 1.75;
    color: #5c4a3a;
    text-align: justify;
}

.huanmeng-intro-modal__p:last-of-type {
    margin-bottom: 20px;
}

.huanmeng-intro-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    font-size: 1.5rem;
    color: #8b6914;
    cursor: pointer;
    line-height: 1;
}

.huanmeng-intro-modal-ok {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: #5c4a3a;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.35), rgba(212, 175, 55, 0.2));
    cursor: pointer;
    box-sizing: border-box;
}

.huanmeng-intro-modal-ok:hover {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.45), rgba(212, 175, 55, 0.28));
}

/* 弹窗（保持原有样式） */
.huanmeng-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.huanmeng-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.huanmeng-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

.huanmeng-modal-content {
    position: relative;
    background: #FDF8F0;
    border: 2px solid #D4AF37;
    border-radius: 8px;
    padding: 24px;
    width: 640px;
    max-width: calc(100vw - 32px);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

/* 未发布：仅展示“敬请期待”短文案的紧凑弹框 */
.huanmeng-modal-content.huanmeng-modal-content--coming {
    width: auto;
    max-width: min(280px, calc(100vw - 32px));
    min-width: 180px;
    padding: 22px 24px;
}

.huanmeng-modal-content.huanmeng-modal-content--coming .huanmeng-modal-info {
    text-align: center;
}

.huanmeng-modal-content.huanmeng-modal-content--coming .huanmeng-modal-title,
.huanmeng-modal-content.huanmeng-modal-content--coming .huanmeng-modal-dream-words {
    display: none !important;
}

.huanmeng-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    font-size: 1.5rem;
    color: #8b6914;
    cursor: pointer;
    line-height: 1;
}

.huanmeng-modal-video-wrap {
    width: 100%;
    max-width: none;
    aspect-ratio: 16/9;
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
}

.huanmeng-modal-video-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.huanmeng-modal-title { font-size: 1.1rem; color: #8b6914; margin: 0 0 8px; }
.huanmeng-modal-dream-words {
    font-size: 0.9rem;
    color: #6b5a4a;
    margin: 0;
    line-height: 1.7;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.huanmeng-modal-coming { font-size: 1rem; color: #a08040; margin: 0; }
.huanmeng-modal-content.huanmeng-modal-content--coming .huanmeng-modal-coming {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
}

/* 宽屏桌面：上排 7 框 + 下排 6 框（14 列网格：上排各占 2 列；下排 6 框居中，左右各空 1 列）；需足够宽度以免单框过窄 */
@media (min-width: 1200px) {
    /*
     * 单列舞台不要用 place-content:center：会把唯一列轨收成子项 min-content（14 列网格最小 ~14px），
     * 整列居中后视觉上像「正中间一个小点」，浏览器放大到 300% 才像正常尺寸。
     * 显式 1fr 让列轨始终占满舞台宽度。
     */
    .huanmeng-stage {
        width: 100%;
        max-width: min(2400px, 98vw);
        min-height: 100vh;
        min-height: 100svh;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        justify-items: stretch;
        align-content: start;
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
        box-sizing: border-box;
    }

    .huanmeng-grid-section {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        min-height: auto;
        min-width: 0;
        /* 与参考图一致：标题/上边框下方留白较多，金框区偏中下 */
        padding-top: clamp(140px, 18vh, 260px);
        padding-bottom: clamp(64px, 8vh, 120px);
        padding-left: clamp(8px, 1.2vw, 32px);
        padding-right: clamp(8px, 1.2vw, 32px);
        gap: clamp(14px, 2vh, 28px);
        width: 100%;
        box-sizing: border-box;
    }

    .huanmeng-grid-top {
        display: grid;
        grid-template-columns: repeat(14, minmax(1px, 1fr));
        column-gap: clamp(6px, 0.75vw, 18px);
        row-gap: clamp(10px, 1.5vh, 20px);
        align-items: start;
        justify-items: stretch;
        width: 100%;
        max-width: 82%;
        margin-left: auto;
        margin-right: auto;
    }

    .huanmeng-grid-top .huanmeng-frame,
    .huanmeng-grid-top .dn9-card {
        grid-column: span 2;
        /* 确保Grid单元格包裹内容，不被拉伸 */
        align-self: start;
        justify-self: stretch;
    }

    .huanmeng-grid-bottom {
        display: grid;
        grid-template-columns: repeat(14, minmax(1px, 1fr));
        column-gap: clamp(6px, 0.75vw, 18px);
        row-gap: clamp(10px, 1.5vh, 20px);
        align-items: start;
        justify-items: stretch;
        width: 100%;
        max-width: 82%;
        margin-left: auto;
        margin-right: auto;
    }

    .huanmeng-grid-bottom .huanmeng-frame,
    .huanmeng-grid-bottom .dn9-card {
        /* 确保Grid单元格包裹内容，不被拉伸 */
        align-self: start;
        justify-self: stretch;
    }

    /* 下排 6 框：列 2–3、4–5 … 12–13，左右各留 1 列，与上排 7 框视觉对齐 */
    .huanmeng-grid-bottom .huanmeng-frame:nth-child(1),
    .huanmeng-grid-bottom .dn9-card:nth-child(1) { grid-column: 2 / span 2; }
    .huanmeng-grid-bottom .huanmeng-frame:nth-child(2),
    .huanmeng-grid-bottom .dn9-card:nth-child(2) { grid-column: 4 / span 2; }
    .huanmeng-grid-bottom .huanmeng-frame:nth-child(3),
    .huanmeng-grid-bottom .dn9-card:nth-child(3) { grid-column: 6 / span 2; }
    .huanmeng-grid-bottom .huanmeng-frame:nth-child(4),
    .huanmeng-grid-bottom .dn9-card:nth-child(4) { grid-column: 8 / span 2; }
    .huanmeng-grid-bottom .huanmeng-frame:nth-child(5),
    .huanmeng-grid-bottom .dn9-card:nth-child(5) { grid-column: 10 / span 2; }
    .huanmeng-grid-bottom .huanmeng-frame:nth-child(6),
    .huanmeng-grid-bottom .dn9-card:nth-child(6) { grid-column: 12 / span 2; }

    /* 宽屏：使用固定尺寸，确保激活区域稳定不变 */
    .huanmeng-grid-top .huanmeng-frame,
    .huanmeng-grid-bottom .huanmeng-frame,
    .huanmeng-grid-top .dn9-card,
    .huanmeng-grid-bottom .dn9-card {
        width: 100%;
        max-width: none;
        height: 0;
        padding-bottom: 148%;
        aspect-ratio: unset;
        justify-self: stretch;
        align-self: start;
        box-sizing: border-box;
        overflow: visible;
    }

    .huanmeng-grid {
        gap: 0;
    }

    .huanmeng-frame-inner,
    .huanmeng-grid-section .dn9-card-inner {
        margin: clamp(16px, 1.2vw, 24px) clamp(10px, 0.85vw, 16px);
    }

    .huanmeng-frame-placeholder--roman,
    .dn9-card-label--roman {
        font-size: clamp(2.1rem, 2.8vw, 3.2rem);
    }
}

@media (min-width: 1600px) {
    .huanmeng-stage {
        max-width: min(2560px, 98vw);
    }

    .huanmeng-grid-section {
        padding-left: clamp(12px, 1.5vw, 48px);
        padding-right: clamp(12px, 1.5vw, 48px);
    }
}