/* ============================================================
   梦想社区 (bbs) 自定义覆盖样式 — mxbbs.css
   批次: D:\WorkBuddy\design\bbs-v2-fresh-20260925\
   引入: template/discuzx5/common/header_common.php (csstemplate 之后)
   说明: 导航底色/深色文字由官方风格变量 top_nav_bgc / top_nav_dark
         提供（后台: 界面→风格管理→编辑→导航背景颜色），本文件不再
         覆盖背景色，只做磨砂、阴影、banner、图标与响应式。
   日期: 2026-09-25
   ============================================================ */

:root {
    --mx-ac: #41618f;      /* 与 love 主站一致的钢蓝（点缀用） */
    --mx-body: #F7F9FA;    /* 正文底色 */
    --mx-nav-h: 73px;      /* 导航高度（窄屏 60px，见底部媒体查询） */
}

/* ---------- 1) 顶部导航：#333 半透明磨砂（与版权区同色） ---------- */
.topbox,
.dz_layer_top,
#dz_btm_layer {
    background: rgba(51, 51, 51, 0.82) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
}

/* 强制吸顶，让半透明深色玻璃在滚动时产生层次 */
#dz_btm_layer.topbox { position: sticky; }

/* 黑白边界：导航(深)底部与主体(浅)交界处的投影 */
.dz_layer_top {
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
}

/* 深色导航下保留站点自有 logo（不用模板自带的 Discuz 白字标） */
.dzlogo { background: none !important; }
.dzlogo img { display: inline !important; }

/* 深色导航配白色文字 */
.dz_layer_nav ul li a { color: var(--dz-ff) !important; }
.dz_layer_nav ul li.a a,
.dz_layer_nav ul li a:hover { color: #fff !important; }
.header-notice .notice-icon .dzicon { color: var(--dz-ff) !important; }
.dz_menumore::after { color: var(--dz-ff) !important; }

/* ---------- 2) 导航下方 Banner（下沉一个导航条高度，紧贴导航下缘） ---------- */
#mxbanner {
    position: relative;
    width: 100%;
    height: clamp(200px, 23vw, 420px);
    margin-top: 0;
    overflow: hidden;
    background: url("../static/images/mx_banner.jpg") center 40% / cover no-repeat;
}
/* 主站钢蓝轻染色 + 底部多段缓动渐入正文底色（深图不生硬） */
#mxbanner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(65, 97, 143, 0.10) 0%,
        rgba(65, 97, 143, 0.04) 28%,
        rgba(247, 249, 250, 0.00) 46%,
        rgba(247, 249, 250, 0.22) 64%,
        rgba(247, 249, 250, 0.55) 78%,
        rgba(247, 249, 250, 0.84) 91%,
        rgba(247, 249, 250, 1.00) 100%);
}
/* banner 与导航交界：承接导航投下的阴影（深色玻璃压在浅 banner 上的落影） */
#mxbanner::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 24px;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.16),
        rgba(0, 0, 0, 0));
    pointer-events: none;
}

/* ---------- 3) 板块图标 16:10 PNG（144x90 = 原 96 宽 +50%） ---------- */
td.fl_g .fl_icn_g,
.fl_row .fl_icn_g {
    width: 144px !important;
    min-height: 90px !important;
    margin-right: 14px !important;
}
td.fl_g .fl_icn_g img,
.fl_row .fl_icn_g img,
.fl_icn_g svg {
    width: 144px !important;
    height: 90px !important;
    object-fit: contain;
    border-radius: 6px;
    background: transparent;
    box-shadow: 0 2px 6px rgba(31, 41, 55, 0.10);
}
/* 文字块与图标对齐：统一缩进，名称与统计行同一起点 */
td.fl_g dl,
.fl_row dl {
    margin-left: 158px !important;
}
td.fl_g dt,
.fl_row dt {
    margin-left: 0 !important;
    padding-top: 12px;   /* 文字块相对 90px 高图标垂直居中 */
}

/* ---------- 5) 主导航布局：栏目在 logo 与右簇之间居中排列 ---------- */
.dz_nav {
    display: flex !important;
    align-items: center;
}
.dz_nav .dz_nav_logo { float: none !important; flex: 0 0 auto; }
.dz_nav .dz_layer_nav {
    float: none !important;
    width: auto !important;   /* 覆盖模板内联的 609px 定宽 */
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;   /* 导航组在剩余槽内居中 */
}
.dz_nav .dz_layer_nav ul {
    display: flex;
    justify-content: center;   /* 导航组居中；搜索框为绝对定位（照搬主站），展开时覆盖其上，导航永远不动 */
    align-items: center;
    width: auto;
    gap: 30px;
    flex-wrap: nowrap;
    float: none;
}
.dz_nav .dz_layer_nav ul li { float: none; }
.dz_nav .dz_layer_nav ul li a { margin-right: 0; white-space: nowrap; }   /* 间距交给 gap；栏目名不截字 */

/* ---------- 5b) 顶部搜索：照搬主站(.sch)设计 —— 绝对定位脱离排版流 ---------- */
/* 主站做法：搜索框 absolute 定位，铃铛/头像/导航永远不动；
   折叠=40px 透明圆钮只显放大镜，点击向左展开 190px 圆角白底框（覆盖在导航之上）。
   锚点：right:100% 相对 .header-right（其本身 position:relative），
   即搜索框右缘贴住右簇左缘再留间距 —— 与铃铛零接触，从根上杜绝遮挡/裁切。 */
.dz_layer_dl .header-searcher {
    position: absolute;
    right: 100%;                /* 右缘 = 右簇左缘；margin 再留出与铃铛的间距 */
    top: 50%;
    transform: translateY(-50%);
    margin-right: 14px;
    width: 40px;                /* 折叠态：只显示放大镜圆钮（主站同款） */
    height: 40px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;  /* 放大镜永远贴容器右缘（主站同款） */
    z-index: 30;                /* 展开时覆盖在导航之上 */
    transition: width .35s ease, border-color .35s, background .35s, box-shadow .35s;
}
.dz_layer_dl .header-searcher.open {
    width: 190px;               /* 展开态（对齐主站 190px）：向左长出圆角白底输入框 */
    border-color: #41618f;
    background: #fff;
    box-shadow: 0 8px 20px rgba(28, 54, 108, .10);
}
.dz_layer_dl .header-searcher .mx-sch-input {
    flex: 1 1 0%;
    width: 0;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    outline: none;
    font-size: 14px;
    padding: 0 4px 0 16px;
    color: #1f2937;
    opacity: 0;
    transition: opacity .25s;
}
.dz_layer_dl .header-searcher.open .mx-sch-input { opacity: 1; transition-delay: .12s; }
.dz_layer_dl .header-searcher .mx-sch-input::placeholder { color: #94a3b8; }
/* 单一放大镜按钮：既是开合开关、又是提交（展开时有内容=提交 / 无内容=收回）；折叠态白色(深色顶栏)，展开态主题蓝 */
.dz_layer_dl .header-searcher .mx-sch-btn {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;                /* 折叠态：深色顶栏上白色放大镜 */
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: 50%;
    transition: color .3s, background .3s;
}
.dz_layer_dl .header-searcher .mx-sch-btn:hover { background: rgba(65, 97, 143, .12); }
.dz_layer_dl .header-searcher.open .mx-sch-btn { color: #41618f; }
.dz_layer_dl .header-searcher .mx-sch-btn svg { width: 18px; height: 18px; transition: transform .3s; }
.dz_layer_dl .header-searcher.open .mx-sch-btn svg { transform: rotate(90deg); }   /* 展开态旋转，提示可收回 */

/* ---------- 6) 二级下拉菜单：水平居中于父栏目 ---------- */
/* 水平位置交由 JS(mxbbs_search.js 包裹 setMenuPosition) 精确计算 left，
   使面板中心对齐父栏目中心（不受栏目字数影响）；此处去掉默认位移/自定义动画，
   避免与 JS 的 left 叠加导致偏左。缩放入场沿用 Discuz 默认 winAlertIn(仅 scale，无位移，不跳变)。 */
#hds .p_pop.h_pop[id^="mn_N"],
#hds .p_pop.h_pop[id="mn_forum_16_menu"] {
    min-width: 112px;   /* 收窄下拉框：覆盖模板默认 150px */
}
#hds .p_pop.h_pop[id^="mn_N"] a,
#hds .p_pop.h_pop[id="mn_forum_16_menu"] a {
    padding: 0 12px;    /* 收窄左右内边距，减少两侧空白 */
}
/* 下拉子项 hover：钢蓝背景从中央向两端铺开（借鉴 dream 站，与站点主色 #41618f 一致） */
#hds .p_pop.h_pop[id^="mn_N"] a,
#hds .p_pop.h_pop[id="mn_forum_16_menu"] a {
    background: linear-gradient(rgba(65,97,143,.92), rgba(65,97,143,.92)) center / 0% 100% no-repeat;
    transition: background-size .28s ease, color .2s ease;
}
#hds .p_pop.h_pop[id^="mn_N"] a:hover,
#hds .p_pop.h_pop[id="mn_forum_16_menu"] a:hover {
    background-size: 100% 100%;
    color: #fff;
}

/* ---------- 7) 底部版权区：恢复原深色，补顶部边界阴影 ---------- */
.dz_footc {
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.14);
}

/* ---------- 8) 响应式（X5 默认 min-width:1200，向下放宽） ---------- */
@media (max-width: 1240px) {
    body { min-width: 0 !important; }
    .wp { width: auto !important; margin: 0 16px !important; }
    .dz_btm_layer { min-width: 0 !important; padding: 0 12px !important; }
    .dz_layer_nav { width: auto !important; }
    .dz_layer_nav ul { gap: 16px; }
    .dz_layer_nav ul li a { margin-right: 0; letter-spacing: 0; }
}
@media (max-width: 900px) {
    :root { --mx-nav-h: 60px; }
    .dz_layer_dl { display: none; }          /* 窄屏收起搜索/登录浮层，保留移动版入口 */
    .dz_layer_nav ul li a { font-size: 14px; height: 60px; line-height: 60px; }
    .dz_btm_layer { height: 60px !important; }
    #mxbanner { height: clamp(140px, 30vw, 260px); margin-top: 0; }
    .fl_icn_g { width: 108px !important; min-height: 68px !important; margin-right: 12px !important; }
    .fl_icn_g img { width: 108px !important; height: 68px !important; }
    td.fl_g dl, .fl_row dl { margin-left: 120px !important; }
    td.fl_g dt, .fl_row dt { padding-top: 6px; }
}

/* ---------- 9) 首页热点：love 新闻资讯风（左轮播 520x325 + 右滑动门五页签） ---------- */
.mxnw { display: grid; grid-template-columns: 520px 1fr; gap: 26px; align-items: stretch; margin-bottom: 20px; }
.mxnw > * { min-width: 0; }
.mxcar { position: relative; margin: 0; padding: 0; list-style: none; height: 325px; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 24px rgba(15, 23, 42, .14), 0 3px 7px rgba(15, 23, 42, .07); }
.mxcar li { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.mxcar li.on { opacity: 1; }
.mxcar .lk { display: block; width: 100%; height: 100%; }
.mxcar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mxcar .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); color: #fff; font-size: 16px; }
.mxcar .cap a { color: #fff; }
.mxarr { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .75); color: #1f2937; font-size: 16px; display: grid; place-items: center; opacity: 0; cursor: pointer; transition: opacity .3s; z-index: 2; }
.mxcar:hover .mxarr { opacity: 1; }
.mxarr:hover { background: #41618f; color: #fff; }
.mxarr.l { left: 12px; }
.mxarr.r { right: 12px; }
.mxdot { position: absolute; right: 20px; bottom: 25px; display: flex; align-items: center; gap: 7px; z-index: 2; }
.mxdot i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .6); cursor: pointer; transition: all .3s; }
.mxdot i.on { width: 24px; border-radius: 5px; background: #41618f; }
.mxtabs { display: flex; gap: 4px; border-bottom: 1px solid #cbd5e1; margin: 0 0 4px; padding: 0; list-style: none; }
.mxtabs li { flex: 1 1 0; padding: 0; cursor: pointer; text-align: center; }
.mxtabs a { display: block; padding: 8px 0; font-size: 15px; color: #64748b; position: relative; white-space: nowrap; }
.mxtabs li.on a { color: #41618f; font-weight: 600; }
.mxtabs li.on a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: #41618f; }
.mxpanel { display: none; }
.mxpanel.on { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; animation: mxFade .4s; }
@keyframes mxFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
.mxrec { display: block; padding: 6px 4px 10px; border-bottom: 1px dashed #cbd5e1; text-align: center; }
.mxpn { height: 325px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.mxpn::before, .mxpn::after { content: ""; position: absolute; bottom: 0; width: calc(50% - 10px); height: 0; border-top: 1px dashed #cbd5e1; }
.mxpn::before { left: 0; }
.mxpn::after { right: 0; }
.mxrec b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 4px; color: #1f2937; transition: color .2s, transform .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mxrec:hover b { color: #41618f; transform: translateX(3px); }
.mxrec p { font-size: 13px; color: #64748b; }
.mxnews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; column-gap: 20px; flex: 1 1 auto; margin: 0; padding: 0; list-style: none; }
.mxnews li { display: flex; align-items: center; gap: 8px; padding: 11.5px 2px; border-bottom: 1px dashed #cbd5e1; }
.mxnews .d { flex: none; width: 34px; text-align: center; line-height: 1.15; color: #64748b; }
.mxnews .d b { display: block; font-size: 15px; color: #1f2937; font-weight: 600; }
.mxnews .tag { flex: none; font-size: 12px; color: #41618f; background: rgba(65, 97, 143, .08); border-radius: 4px; padding: 2px 6px; }
.mxnews .t { flex: 1; min-width: 0; font-size: 14px; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s, transform .2s; }
.mxnews li:hover .t { color: #41618f; transform: translateX(3px); }
@media (max-width: 1100px) {
  .mxnw { grid-template-columns: 1fr; }
  .mxcar { height: 240px; }
  .mxpn { height: auto; }
}
.mxempty { padding: 28px 0; text-align: center; font-size: 13px; color: #94a3b8; }

/* ---------- 13) 商品交易：列表价格与交易状态徽标（自由市场） ---------- */
.mxtrade-price { display: inline-block; padding: 1px 8px; border-radius: 3px; color: #e74c3c; background: rgba(231, 76, 60, .07); border: 1px solid rgba(231, 76, 60, .3); font-size: 12px; line-height: 18px; white-space: nowrap; }
.mxtrade-price strong { font-size: 13px; }
.mxtrade-st { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 12px; line-height: 18px; white-space: nowrap; }
.mxtrade-st.on { color: #27ae60; background: rgba(39, 174, 96, .07); border: 1px solid rgba(39, 174, 96, .3); }
.mxtrade-st.out { color: #e67e22; background: rgba(230, 126, 34, .07); border: 1px solid rgba(230, 126, 34, .35); }
.mxtrade-st.end { color: #94a3b8; background: rgba(148, 163, 184, .1); border: 1px solid rgba(148, 163, 184, .4); }
.mxtrade-op { margin-left: 6px; font-size: 12px; line-height: 18px; color: #8aa0bf; vertical-align: middle; }
.mxtrade-op:hover { color: #41618f; text-decoration: underline; }

/* ============================================================
   14) banner slogan 宣传片触发 + 宣传片弹窗（复用 game 站统一 #mdVideo）
   ============================================================ */

/* ---------- 14.1) banner 中央 slogan 点击图（绝对居中，位于渐变之上可点击） ---------- */
#mxbanner .slogan {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;                       /* 高于 ::before/::after 渐变叠层，保证可点击 */
    display: block;
    cursor: pointer;
    line-height: 0;
    transition: transform .35s ease, filter .35s ease;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .35));
}
#mxbanner .slogan img {
    display: block;
    width: 260px;
    max-width: 46vw;
    height: auto;
}
#mxbanner .slogan:hover {
    transform: translate(-50%, -50%) scale(1.05);
    filter: drop-shadow(0 14px 32px rgba(0, 0, 0, .5));
}

/* ---------- 14.2) 宣传片弹窗：原生 <dialog id="mdVideo">（与 game 全站统一 1080×675 / 16:10） ---------- */
dialog.md {
    position: fixed;
    inset: 0;
    margin: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
    width: fit-content;
    max-width: 88vw;
    overflow: visible;
}
dialog.md[open] { animation: mdIn .28s ease; }
@keyframes mdIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
dialog.md::backdrop { background: rgba(15, 23, 42, .78); backdrop-filter: blur(4px); animation: mdBg .28s ease; }
@keyframes mdBg { from { opacity: 0; } to { opacity: 1; } }
/* 关闭按钮：复用 game 站 /skin/game/images/close1.png（原生 dialog 裁负偏移，须放框内） */
.md-x {
    position: absolute;
    top: 0;
    right: -40px;
    z-index: 5;
    width: 40px;
    height: 40px;
    background: url(/skin/game/images/close1.png) center / 40px 40px no-repeat;
    cursor: pointer;
    transition: transform .3s ease;
}
.md-x:hover { transform: rotate(180deg); }
dialog.md.md-video {
    width: min(1080px, 88vw, calc(82vh * 1.6));
    aspect-ratio: 16 / 10;            /* 1080 宽 → 675 高，正好是用户要求的 1080×675 */
    background: #000;
    border-radius: 0;
}
dialog.md.md-video video {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0;
    object-fit: contain;
}

/* ---------- 14.3) 窄屏：弹窗收宽、关闭按钮移入框内右上角（避免被屏外裁掉） ---------- */
@media (max-width: 1100px) {
    dialog.md.md-video { width: 94vw; }
    dialog.md .md-x { right: 6px; top: 6px; }
}