/* ============================================================
 * 官网 3D 二手交易世界 · 页面样式（market-world.css）
 *
 * 作用域：market-world.html 的 3D 画布区与 HTML 覆盖层
 *（HUD / 集市面板 / 转让面板 / 发布面板 / 详情弹窗 / 登录弹窗 / 摇杆 / toast）
 * 设计口径：弹出框全部为"游戏化窗体"——胡桃木九宫格窗框（img/mw-window.svg
 *           的 border-image）+ 羊皮纸窗面 + 黄铜描线 + 琥珀宝石角饰，
 *           与 Q版岛屿、橙衣白猫的世界观一致；HUD 保持轻玻璃拟态。
 * ============================================================ */

/* ---------- 世界容器：占满首屏（扣除固定导航高度） ---------- */
.mw-world {
    position: relative;
    width: 100%;
    height: calc(100dvh - var(--header-h-mobile));
    min-height: 480px;
    overflow: hidden;
    background: linear-gradient(180deg, #5FB8FF 0%, #CDEFFF 100%); /* 加载期间的兜底天空 */

    /* ---------- 游戏化窗体调色板（木框 / 羊皮纸 / 黄铜 / 球衣橙） ---------- */
    --mw-wood-1: #B07A4C;        /* 木框亮面 */
    --mw-wood-2: #8A5A3B;        /* 木框主色 */
    --mw-wood-3: #6B4325;        /* 木框暗面 */
    --mw-gold-1: #FFEDB0;        /* 黄铜高光 */
    --mw-gold-2: #F0BF5F;        /* 黄铜主色 */
    --mw-gold-3: #C08430;        /* 黄铜暗面 */
    --mw-parch-1: #FFF9EA;       /* 羊皮纸亮面 */
    --mw-parch-2: #F6E7C4;       /* 羊皮纸暗面 */
    --mw-ink: #5B4326;           /* 窗面正文（深木色） */
    --mw-ink-soft: #8A6D45;      /* 窗面次要文字 */
    --mw-line: #E3CE9E;          /* 窗面内分隔线 */
    --mw-orange-1: #FFB066;      /* 主按钮亮面（球衣橙） */
    --mw-orange-2: #F07E1F;      /* 主按钮主色 */
    --mw-orange-3: #D96A12;      /* 主按钮暗面 */

    /* 游戏窗体共用：木框九宫格（素材按 26px 边框 1:1 绘制） */
    --mw-frame: url("../img/mw-window.svg") 26 fill round;
}
@media (min-width: 768px) {
    .mw-world { height: calc(100dvh - var(--header-h-desktop)); }
}

/* ---------- 关键修复：hidden 属性优先于任何 display 设置 ----------
 * 本样式表给面板/胶囊/按钮设置了 display:flex|inline-flex，
 * 作者样式会覆盖 [hidden] 的 UA 默认 display:none，
 * 导致"降级提示卡/用户胶囊/加载更多"等带 hidden 的元素常显（盖住 3D 世界）。
 * 用 !important 恢复 hidden 语义，作用于世界容器内的全部覆盖层元素。 */
#mwWorld [hidden] { display: none !important; }

#mwCanvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none; /* 指针手势由应用自行处理 */
}

/* ---------- 加载层 ---------- */
.mw-loading {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: linear-gradient(180deg, #5FB8FF 0%, #CDEFFF 100%);
    transition: opacity .5s ease;
}
.mw-loading.hide { opacity: 0; pointer-events: none; }
.mw-loading p { color: #fff; font-size: 15px; letter-spacing: .12em; text-shadow: 0 2px 8px rgba(0,0,0,.15); }
/* 加载插画：Qwen 生成的梦屿概念图（圆形裁切 + 轻微浮动 + 白色描边） */
.mw-loading-art {
    width: 168px;
    height: 168px;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid rgba(255,255,255,.85);
    box-shadow: 0 16px 40px rgba(0,0,0,.25);
    animation: mw-art-float 2.2s ease-in-out infinite;
}
@keyframes mw-art-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- WebGL 降级提示 ---------- */
.mw-fallback {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #5FB8FF 0%, #CDEFFF 100%);
}
.mw-fallback-card {
    background: rgba(255,255,255,.92);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    padding: 32px 36px;
    text-align: center;
}
.mw-fallback-emoji { font-size: 44px; display: block; margin-bottom: 10px; color: var(--brand-purple); }
.mw-fallback-sub { color: var(--muted); font-size: 13px; margin-top: 6px; }
.mw-fallback-card .mw-btn { margin-top: 14px; }
.mw-fallback-tip { color: var(--muted); font-size: 11px; margin-top: 12px; line-height: 1.7; max-width: 340px; }

/* ---------- HUD 总层（默认穿透点击，子元素按需恢复） ---------- */
.mw-hud {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}
.mw-hud button, .mw-hud input { pointer-events: auto; }

/* 左上：标题与统计（纯展示） */
.mw-hud-left { position: absolute; top: 14px; left: 16px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.mw-world-title { font-size: 20px; font-weight: 800; letter-spacing: .04em; }
.mw-world-sub {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--r-full);
    background: var(--brand-grad);
    font-size: 11px;
    font-weight: 700;
    vertical-align: 3px;
}
/* 玩家信息卡紧跟标题下方（统计行已按需求移除） */
.mw-player-card { margin-top: 14px; }

/* 左侧玩家信息卡（游戏风角色面板）：头部行（头像+昵称+登录/退出）
 * + 发布统计行 + 快捷入口，纵向堆叠，常驻世界标题下方 */
.mw-player-card {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    padding: 8px 10px;
    max-width: 320px;
    border-radius: 16px;
    background: rgba(13, 20, 40, .55);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 22px rgba(4, 10, 30, .35);
    color: #eaf2ff;
}
.mw-player-head { display: flex; align-items: center; gap: 10px; }
.mw-player-avatar {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.14);
    border: 2px solid rgba(255,255,255,.4);
}
.mw-player-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mw-player-avatar .mw-icon { width: 22px; height: 22px; color: rgba(255,255,255,.8); }
.mw-player-meta { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.mw-player-meta b { font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-player-meta i { font-style: normal; font-size: 11px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-player-logout {
    border: none;
    background: none;
    color: rgba(234,242,255,.65);
    font-size: 12px;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    flex: none;
}
.mw-player-logout:hover { color: #fff; background: rgba(255,255,255,.12); }

/* 发布统计行：三枚游戏风数据芯片（数字 + 标签） */
.mw-player-stats {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.mw-pstat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 4px 2px;
    border-radius: 10px;
    background: rgba(255,255,255,.07);
}
.mw-pstat b { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.2; }
.mw-pstat i { font-style: normal; font-size: 10px; opacity: .65; white-space: nowrap; }

/* 快捷入口：直达"我的发布 / 我的转让"（与底部浏览入口互补） */
.mw-player-links { display: flex; gap: 6px; margin-top: 8px; }
.mw-player-links button {
    flex: 1;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: #eaf2ff;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
}
.mw-player-links button:hover { background: rgba(255,255,255,.18); }

/* 底部：快捷操作按钮组 */
.mw-hud-actions {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.mw-hud-actions button {
    pointer-events: auto;
    border: none;
    cursor: pointer;
    padding: 10px 18px;
    border-radius: var(--r-full);
    background: rgba(255,255,255,.92);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--sh-md);
    transition: transform .15s ease, background .15s ease;
}
.mw-hud-actions button:hover { transform: translateY(-2px); }
.mw-hud-actions button.primary { background: var(--brand-grad); color: #fff; }
/* 窄屏：4 个操作按钮收紧内距，避免换行溢出 */
@media (max-width: 520px) {
    .mw-hud-actions { gap: 6px; bottom: 14px; }
    .mw-hud-actions button { padding: 9px 12px; font-size: 12px; }
}

/* ---------- 移动端跳跃按钮（仅触摸设备；摇杆在左、跳跃在右的经典手位） ---------- */
.mw-jump-btn {
    position: absolute;
    right: 14px;
    bottom: 158px;
    z-index: 11;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.22);
    backdrop-filter: blur(6px);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    touch-action: manipulation;   /* 防双击缩放，保证连按手感 */
    box-shadow: 0 8px 20px rgba(4, 10, 30, .35);
}
.mw-jump-btn:active { transform: scale(.92); background: rgba(255,255,255,.34); }
.mw-jump-btn .mw-icon { width: 26px; height: 26px; }
@media (pointer: coarse) { .mw-jump-btn { display: flex; } }

/* 左下：操作提示（右下角已让给聊天盒） */
.mw-hud-hint {
    position: absolute;
    bottom: 18px;
    left: 16px;
    padding: 6px 12px;
    border-radius: var(--r-full);
    background: rgba(24,30,37,.4);
    color: #fff;
    font-size: 12px;
    backdrop-filter: blur(4px);
}
@media (max-width: 767px) { .mw-hud-hint { display: none; } }

/* ---------- 全屏模式（点击「全屏」按钮进入） ----------
 * 双层实现：支持原生 Fullscreen API 的浏览器直接铺满屏幕（隐藏地址栏）；
 * 不支持的环境（iOS Safari）降级为"网页全屏"——世界 fixed 铺满视口，
 * 隐藏固定导航与页脚、锁定页面滚动。退出路径：按钮 / Esc / 浏览器返回键。 */
body.mw-fs { overflow: hidden; }
body.mw-fs #site-nav,
body.mw-fs #site-footer { display: none; }
body.mw-fs .mw-world {
    position: fixed;
    inset: 0;
    z-index: 90;
    height: 100dvh;
    min-height: 0;
    border-radius: 0;
}

/* ---------- 通用按钮（游戏风：上亮下暗的厚实斜面 + 描边） ---------- */
.mw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    border-radius: 12px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    transition: opacity .15s ease, transform .15s ease, filter .15s ease;
    text-decoration: none;
}
.mw-btn:disabled { opacity: .55; cursor: not-allowed; }
/* 主按钮：球衣橙渐变 + 深橙描边 + 内嵌高光/暗边（立体按键感） */
.mw-btn.primary {
    background: linear-gradient(180deg, var(--mw-orange-1), var(--mw-orange-2) 55%, var(--mw-orange-3));
    border-color: #B85410;
    color: #fff;
    text-shadow: 0 1px 1px rgba(120, 50, 0, .5);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .45),
        inset 0 -3px 0 rgba(120, 50, 0, .3),
        0 4px 10px rgba(217, 106, 18, .35);
}
.mw-btn.primary:hover:not(:disabled) { filter: brightness(1.06); }
/* 次按钮：羊皮纸面 + 木色描边 */
.mw-btn.ghost {
    background: linear-gradient(180deg, var(--mw-parch-1), var(--mw-parch-2));
    border-color: #C9A05E;
    color: var(--mw-ink);
    box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(122, 74, 26, .18);
}
.mw-btn.sm { padding: 7px 15px; font-size: 13px; }
.mw-btn.block { width: 100%; }
.mw-btn:hover:not(:disabled) { transform: translateY(-1px); }
.mw-btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }

/* ---------- 面板型弹窗（集市 / 转让 / 发布）：统一居中游戏窗体 ----------
 * 原桌面右侧抽屉 / 移动端底部抽屉已下线——全部业务窗体统一为屏幕居中、
 * 遮罩 + 回弹入场的游戏弹窗（与背包 / 详情 / 登录同款 .mw-modal 结构）。
 * 外层 .mw-modal / 窗体 .mw-modal-card 样式见下方弹窗段（宽度修饰类也
 * 定义在 .mw-modal-card 之后，确保覆盖其默认 480px 宽度）；
 * 头部横幅 / 工具栏 / 内容滚动区 / 底栏等 .mw-panel-* 内部结构样式继续沿用。 */

/* 头部：木质横幅带 + 黄铜底线，标题带菱形宝石徽记（横幅在窗面内部，不盖窗框角饰） */
.mw-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 10px;
    background: linear-gradient(180deg, var(--mw-wood-1), var(--mw-wood-2) 60%, var(--mw-wood-3));
    border-bottom: 2px solid var(--mw-gold-2);
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, .25);
    flex-shrink: 0;
    color: var(--mw-parch-1);
}
.mw-panel-head h3 {
    font-size: 16px;
    font-weight: 800;
    margin-right: auto;
    color: var(--mw-parch-1);
    text-shadow: 0 1px 0 rgba(58, 32, 12, .65);
    letter-spacing: .04em;
}
.mw-panel-head h3::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    background: linear-gradient(135deg, var(--mw-gold-1), #ECAB48);
    border: 1px solid var(--mw-gold-3);
    transform: rotate(45deg);
    vertical-align: 1px;
}
/* 页签：木质横幅上的羊皮纸页签（选中页签亮起） */
.mw-panel-tabs {
    display: flex;
    gap: 2px;
    background: rgba(46, 24, 8, .45);
    border: 1px solid rgba(255, 233, 184, .28);
    border-radius: var(--r-full);
    padding: 3px;
}
.mw-panel-tabs button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #E8D5AC;
    padding: 5px 12px;
    border-radius: var(--r-full);
    text-shadow: 0 1px 0 rgba(58, 32, 12, .5);
}
.mw-panel-tabs button.active {
    background: linear-gradient(180deg, var(--mw-parch-1), #F2DFAC);
    color: #7A4E22;
    text-shadow: none;
    box-shadow: inset 0 0 0 1.5px var(--mw-gold-2), 0 1px 2px rgba(46, 24, 8, .45);
}
/* 关闭按钮：红宝石圆钮 + 黄铜包边 */
.mw-panel-close {
    border: 2px solid var(--mw-gold-2);
    background: radial-gradient(circle at 35% 30%, #E8836B, #B03A2A 70%);
    color: #FFEFD9;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 4px rgba(46, 24, 8, .5);
    transition: transform .15s ease, filter .15s ease;
}
.mw-panel-close:hover { transform: scale(1.1); filter: brightness(1.12); }
.mw-panel-close:active { transform: scale(.94); }

.mw-panel-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1.5px solid var(--mw-line);
    flex-shrink: 0;
}
/* 转让须知：羊皮纸卷轴提示条 */
.mw-panel-toolbar-note {
    font-size: 12px;
    color: var(--mw-ink-soft);
    padding: 9px 14px;
    background: linear-gradient(180deg, rgba(240, 191, 95, .16), rgba(240, 191, 95, .06));
}
.mw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* 分类胶囊：羊皮纸小标签，选中点亮为球衣橙 */
.mw-chip {
    border: 1.5px solid #C9A05E;
    background: linear-gradient(180deg, var(--mw-parch-1), #F3E3BD);
    color: var(--mw-ink-soft);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    cursor: pointer;
    transition: all .15s ease;
}
.mw-chip:hover { border-color: var(--mw-gold-2); color: var(--mw-ink); }
.mw-chip.active {
    background: linear-gradient(180deg, var(--mw-orange-1), var(--mw-orange-2));
    border-color: #B85410;
    color: #fff;
    text-shadow: 0 1px 1px rgba(120, 50, 0, .4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.mw-panel-toolbar input[type="search"] {
    width: 100%;
    border: 1.5px solid #C9A05E;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    outline: none;
    background: #FFFDF4;
    color: var(--mw-ink);
}
.mw-panel-toolbar input[type="search"]::placeholder { color: #B49B72; }
.mw-panel-toolbar input[type="search"]:focus {
    border-color: var(--mw-gold-2);
    box-shadow: 0 0 0 3px rgba(240, 191, 95, .4);
}

.mw-panel-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.mw-panel-foot { padding: 10px 14px 12px; border-top: 1.5px solid var(--mw-line); flex-shrink: 0; }

/* ---------- 卡片网格与商品卡片（羊皮纸货架小卡） ---------- */
.mw-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.mw-card {
    background: #FFFDF4;
    border: 1.5px solid #D9BC85;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mw-card:hover {
    transform: translateY(-2px);
    border-color: var(--mw-gold-2);
    box-shadow: 0 8px 18px rgba(122, 74, 26, .22);
}
.mw-card-cover {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(160deg, #FBF0D2, #F3E0B2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mw-card-cover img { width: 100%; height: 100%; object-fit: cover; }
/* 无图商品封面占位：SVG 分类图标（浅紫圆角底 + 品牌紫描边图标） */
.mw-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64%;
    aspect-ratio: 1;
    border-radius: 22%;
    background: rgba(255, 253, 244, .72);
    border: 1.5px solid rgba(201, 160, 94, .55);
    color: #C47A28;
    font-size: 42px;
    filter: drop-shadow(0 4px 8px rgba(122, 74, 26, .14));
}
.mw-card-info { padding: 9px 10px 10px; }
.mw-card-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.mw-card-meta { font-size: 11px; color: var(--mw-ink-soft); margin-top: 3px; }
.mw-card-price { font-size: 15px; font-weight: 800; color: #B85410; margin-top: 5px; }
.mw-card-price s { font-size: 11px; color: var(--mw-ink-soft); font-weight: 400; margin-left: 4px; }

/* 状态徽标（我的发布 / 我的转让） */
.mw-badge {
    position: absolute;
    top: 8px; left: 8px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-full);
    color: #fff;
    border: 1px solid rgba(255, 240, 200, .75);
    box-shadow: 0 2px 5px rgba(58, 32, 12, .35);
}
.mw-badge-on_sale { background: #34b36a; }
.mw-badge-off_sale { background: #9aa3ad; }
.mw-badge-sold { background: #e05252; }
.mw-badge-transferred { background: #4a90e2; }

.mw-card-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mw-card-actions button {
    border: 1.5px solid #C9A05E;
    background: linear-gradient(180deg, var(--mw-parch-1), #F3E3BD);
    color: var(--mw-ink-soft);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 9px;
    cursor: pointer;
}
.mw-card-actions button:hover { border-color: var(--mw-gold-2); color: var(--mw-ink); }
.mw-card-actions button.danger:hover { border-color: #C0392B; color: #C0392B; background: #FFF0EC; }

/* 空状态 */
.mw-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--mw-ink-soft);
    font-size: 13px;
    line-height: 1.9;
    padding: 42px 12px;
}

/* ---------- 表单（羊皮纸卷轴上的手写栏） ---------- */
.mw-form-title { font-size: 14px; font-weight: 800; margin-bottom: 12px; color: var(--mw-ink); }
.mw-form-title::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 7px;
    background: linear-gradient(135deg, var(--mw-gold-1), #ECAB48);
    border: 1px solid var(--mw-gold-3);
    transform: rotate(45deg);
    vertical-align: 1px;
}
.mw-field { margin-bottom: 12px; }
.mw-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mw-field label { display: block; font-size: 12px; color: var(--mw-ink-soft); margin-bottom: 5px; font-weight: 600; }
.mw-field label i { color: #D14B3A; font-style: normal; }
.mw-field input, .mw-field select, .mw-field textarea {
    width: 100%;
    border: 1.5px solid #C9A05E;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: var(--font-zh);
    outline: none;
    background: #FFFDF4;
    color: var(--mw-ink);
    resize: vertical;
}
.mw-field input::placeholder, .mw-field textarea::placeholder { color: #BFA77C; }
.mw-field input:focus, .mw-field select:focus, .mw-field textarea:focus {
    border-color: var(--mw-gold-2);
    box-shadow: 0 0 0 3px rgba(240, 191, 95, .4);
}
.mw-form-note { font-size: 11px; color: var(--mw-ink-soft); margin-top: 8px; line-height: 1.6; }

/* 图片上传预览 */
.mw-img-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.mw-img-thumb {
    position: relative;
    width: 62px; height: 62px;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid #D9BC85;
    background: #FFFDF4;
}
.mw-img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mw-img-thumb button {
    position: absolute;
    top: 0; right: 0;
    width: 18px; height: 18px;
    border: none;
    border-radius: 0 0 0 var(--r-sm);
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
}
.mw-img-uploading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mw-ink-soft);
    font-size: 16px;
    background: rgba(240, 191, 95, .15);
}
.mw-img-upload {
    display: inline-block;
    border: 1.5px dashed #C9A05E;
    color: var(--mw-ink-soft);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    background: rgba(255, 253, 244, .6);
}
.mw-img-upload:hover { border-color: var(--mw-gold-2); color: var(--mw-ink); }

/* 转让订单选择卡片 */
.mw-order-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.mw-order-card {
    border: 1.5px solid #D9BC85;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    background: #FFFDF4;
    transition: all .15s ease;
}
.mw-order-card:hover { border-color: var(--mw-gold-2); }
.mw-order-card.selected {
    border-color: var(--mw-orange-2);
    background: linear-gradient(180deg, rgba(255, 176, 102, .18), rgba(255, 176, 102, .08));
    box-shadow: inset 0 0 0 1px rgba(184, 84, 16, .35);
}
.mw-order-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mw-order-venue { font-size: 13px; font-weight: 700; color: var(--mw-ink); }
.mw-order-amount { font-size: 12px; color: #B85410; font-weight: 700; white-space: nowrap; }
.mw-order-items { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.mw-order-items span { font-size: 11px; color: var(--mw-ink-soft); }

/* ---------- 弹窗（详情 / 登录）：游戏木框窗体 ---------- */
.mw-modal {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 18, 6, .42);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}
.mw-modal.open { opacity: 1; pointer-events: auto; }
.mw-modal-card {
    position: relative;
    width: min(480px, calc(100% - 32px));
    max-height: 86%;
    /* 游戏窗体：木框九宫格 + 羊皮纸窗面（与侧边面板同款） */
    border: 24px solid transparent;
    border-image: var(--mw-frame);
    background: var(--mw-parch-2);
    box-shadow: 0 22px 50px rgba(40, 22, 6, .5);
    color: var(--mw-ink);
    transform: translateY(16px) scale(.92);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);   /* 游戏弹窗的回弹入场 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mw-modal.open .mw-modal-card { transform: none; }
.mw-modal-card .mw-panel-close { position: absolute; top: 10px; right: 10px; z-index: 2; }
.mw-modal-scroll { overflow-y: auto; padding-right: 2px; }
.mw-modal-login { width: min(380px, calc(100% - 32px)); }
/* 面板型弹窗宽度修饰（集市/转让 780px、发布 720px）：
 * 必须定义在 .mw-modal-card 之后才能覆盖其默认 480px 宽度 */
.mw-modal-panel { width: min(780px, calc(100% - 32px)); }
.mw-modal-publish { width: min(720px, calc(100% - 32px)); }
@media (max-width: 767px) {
    .mw-modal-card { border-width: 18px; }
}

.mw-login-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 4px;
    color: var(--mw-ink);
    text-align: center;
    letter-spacing: .04em;
}
.mw-login-sub { font-size: 12px; color: var(--mw-ink-soft); margin-bottom: 16px; }
.mw-login-error { font-size: 12px; color: #C0392B; min-height: 16px; margin: 2px 0 10px; text-align: center; }
.mw-login-agreement { font-size: 11px; color: var(--mw-ink-soft); text-align: center; margin-top: 12px; }
.mw-login-agreement a { color: #B85410; }
/* ---------- 微信扫码登录面板 ---------- */
.mw-qr-wrap {
    position: relative;
    width: 216px;
    height: 216px;
    margin: 4px auto 0;
    background: #fff;                 /* 白底保证二维码扫码对比度，不套羊皮纸 */
    border: 3px solid var(--mw-gold-2);
    border-radius: 12px;
    box-shadow: 0 0 0 1.5px #FFFDF4, 0 6px 16px rgba(122, 74, 26, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mw-qr-wrap img { width: 100%; height: 100%; object-fit: contain; }
.mw-qr-mask {
    position: absolute;
    inset: 0;
    background: rgba(255, 253, 244, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    color: var(--mw-ink-soft);
}
.mw-qr-mask p { margin: 0; }
.mw-qr-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--mw-ink);
}
.mw-qr-sub {
    margin: 6px 0 0;
    font-size: 11px;
    color: var(--mw-ink-soft);
    text-align: center;
    line-height: 1.6;
}

/* ---------- 详情弹窗内容 ---------- */
.mw-detail-gallery { margin-bottom: 12px; }
.mw-detail-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    border: 1.5px solid #D9BC85;
    background: #FFFDF4;
}
.mw-detail-thumbs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; }
.mw-detail-thumbs img {
    width: 54px; height: 54px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
}
.mw-detail-thumbs img.active { border-color: var(--mw-orange-2); }
.mw-detail-noimg {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #FBF0D2, #F3E0B2);
    border: 1.5px solid #D9BC85;
    border-radius: 12px;
}
.mw-detail-noimg span { font-size: 64px; }
.mw-detail-noimg .mw-detail-icon { color: #C47A28; }
.mw-detail-price { font-size: 24px; font-weight: 800; color: #B85410; }
.mw-detail-price s { font-size: 13px; color: var(--mw-ink-soft); font-weight: 400; margin-left: 6px; }
.mw-detail-price .mw-tag { margin-left: 6px; }
.mw-detail-title { font-size: 16px; font-weight: 800; margin: 6px 0 8px; color: var(--mw-ink); }
.mw-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mw-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--r-full);
    background: linear-gradient(180deg, rgba(255, 176, 102, .22), rgba(255, 176, 102, .1));
    border: 1px solid rgba(184, 84, 16, .35);
    color: #B85410;
}
.mw-tag.plain { background: rgba(240, 191, 95, .14); border-color: #D9BC85; color: var(--mw-ink-soft); font-weight: 500; }
.mw-detail-desc {
    font-size: 13px;
    color: var(--mw-ink);
    line-height: 1.8;
    margin: 12px 0;
    white-space: pre-wrap;
    word-break: break-word;
}
.mw-detail-seller { font-size: 12px; color: var(--mw-ink-soft); margin-bottom: 10px; }
.mw-detail-note {
    font-size: 11px;
    color: var(--mw-ink-soft);
    background: rgba(240, 191, 95, .14);
    border: 1px solid #EBD9A8;
    border-radius: 10px;
    padding: 8px 10px;
    margin: 8px 0;
    line-height: 1.6;
}
.mw-detail-contact { margin: 12px 0 4px; }
.mw-detail-owner {
    margin-top: 12px;
    padding: 10px;
    background: rgba(240, 191, 95, .14);
    border: 1px solid #EBD9A8;
    border-radius: 10px;
    font-size: 12px;
    color: var(--mw-ink-soft);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.mw-detail-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12px; }
.mw-detail-table th { text-align: left; color: var(--mw-ink-soft); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--mw-line); }
.mw-detail-table td { padding: 7px 4px; border-bottom: 1px solid #EEDFB8; }

/* ---------- 移动端虚拟摇杆（仅触摸设备显示） ---------- */
.mw-joystick {
    position: absolute;
    left: 22px;
    bottom: 26px;
    width: 110px; height: 110px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.65);
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
    display: none;
    pointer-events: auto;
    touch-action: none;
    z-index: 11;
}
.mw-stick {
    position: absolute;
    left: 50%; top: 50%;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    box-shadow: var(--sh-md);
    transform: translate(-50%, -50%);
}
@media (pointer: coarse) { .mw-joystick { display: block; } }

/* ---------- toast 轻提示 ---------- */
.mw-toast {
    position: absolute;
    bottom: 76px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 25;
    max-width: calc(100% - 48px);
    /* 游戏风提示卷轴：木底 + 黄铜双线 */
    background: linear-gradient(180deg, var(--mw-wood-2), var(--mw-wood-3));
    border: 2px solid var(--mw-gold-2);
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, .3), 0 8px 20px rgba(40, 22, 6, .4);
    color: #FFF3D6;
    text-shadow: 0 1px 0 rgba(58, 32, 12, .6);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mw-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mw-toast.error {
    background: linear-gradient(180deg, #A93B2C, #7E2418);
    border-color: #E8A05A;
}

/* ---------- 底部 SEO 文案区 ---------- */
.mw-seo { background: var(--soft); }

/* ---------- SVG 图标基类（icons.js 与静态 HTML 内联图标共用） ---------- */
.mw-icon { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }

/* ---------- 世界频道（右下角游戏风聊天盒） ---------- */

/*
 * 聊天盒常驻右下角（低于面板 z12 / 高于画布），打开的集市面板可自然盖住它；
 * 收起后由 .mw-chat-fab 悬浮球顶位（未读红点挂悬浮球上）。
 */
.mw-chatbox {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 9;
    width: min(320px, calc(100% - 32px));
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: rgba(13, 20, 40, .62);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 32px rgba(4, 10, 30, .45);
    overflow: hidden;
}
.mw-chatbox.collapsed { display: none; }

/* 头部：标题 + 在线人数 + 收起按钮 */
.mw-chatbox-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: #eaf2ff;
}
.mw-chatbox-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.mw-chatbox-head .mw-chat-online { margin-left: auto; margin-right: 2px; color: rgba(234,242,255,.75); }

/* 连接状态点：连接中(黄,呼吸) / 在线(绿) / 离线(红)，让"聊天不可用"一眼可见 */
.mw-conn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: #f5c542;              /* connecting 默认黄 */
    box-shadow: 0 0 0 2px rgba(245,197,66,.25);
    animation: mw-conn-blink 1.2s ease-in-out infinite;
}
.mw-conn-dot.online { background: #43d17c; box-shadow: 0 0 0 2px rgba(67,209,124,.25); animation: none; }
.mw-conn-dot.offline { background: #ff5f5f; box-shadow: 0 0 0 2px rgba(255,95,95,.25); animation: none; }
@keyframes mw-conn-blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.mw-chat-online {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
}
.mw-chat-online b { color: #8ef0b6; font-family: var(--font-digit); }
.mw-chatbox-toggle {
    border: none;
    background: none;
    color: rgba(234,242,255,.7);
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    display: inline-flex;
}
.mw-chatbox-toggle:hover { color: #fff; background: rgba(255,255,255,.14); }

/* 消息区（滚动隔离，触摸滚动不穿透到 3D 画布） */
.mw-chatbox-log {
    height: 200px;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.mw-chat-msg {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: #eaf2ff;
}
.mw-chat-name { font-weight: 800; color: #9f8bff; white-space: nowrap; }
.mw-chat-msg.guest .mw-chat-name { color: rgba(234,242,255,.55); font-weight: 600; }
.mw-chat-text { word-break: break-word; min-width: 0; }
.mw-chat-time { margin-left: auto; flex-shrink: 0; font-size: 11px; color: rgba(234,242,255,.45); font-family: var(--font-digit); }
/* 自己的消息：淡紫整行高亮 */
.mw-chat-msg.self {
    background: rgba(124, 108, 255, .22);
    border-radius: 10px;
    padding: 5px 8px;
    margin: 0 -8px;
}

/* 输入区 */
.mw-chatbox-input {
    display: flex;
    gap: 8px;
    padding: 9px 10px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.mw-chatbox-input input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--r-full);
    padding: 8px 14px;
    font-size: 13px;
    outline: none;
    background: rgba(255,255,255,.94);
    color: var(--text);
}
.mw-chatbox-input input:focus { border-color: var(--brand-purple); }
.mw-chatbox-input #mwChatSend { flex: none; }
.mw-chat-hint {
    padding: 0 14px 9px;
    color: rgba(234,242,255,.5);
    font-size: 11px;
}

/* 收起后的右下角悬浮球（带未读角标） */
.mw-chat-fab {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 9;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(13, 20, 40, .66);
    backdrop-filter: blur(10px);
    color: #eaf2ff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(4, 10, 30, .45);
    transition: transform .15s ease, background .15s ease;
}
.mw-chat-fab:hover { transform: translateY(-2px); background: rgba(30, 42, 80, .78); }
.mw-chat-fab .mw-icon { width: 24px; height: 24px; }

/* 未读角标：红色圆点，超出 99 显示 99+（挂在聊天悬浮球上） */
.mw-chat-unread {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #FF4757;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(255,71,87,.45);
}

/* 窄屏：聊天盒避开底部操作按钮组，上移一层；发送按钮只留图标 */
@media (max-width: 767px) {
    .mw-chatbox { right: 12px; bottom: 86px; width: min(300px, calc(100% - 24px)); }
    .mw-chatbox-log { height: 30vh; }
    #mwChatSend .mw-btn-text { display: none; }
    .mw-chat-fab { right: 12px; bottom: 86px; }
    .mw-player-card { max-width: 230px; padding: 5px 6px; }
    .mw-player-avatar { width: 36px; height: 36px; }
}


/* ---------- 游戏风滚动条（窗面内的木轴滑轨） ---------- */
.mw-panel-body::-webkit-scrollbar,
.mw-modal-scroll::-webkit-scrollbar,
.mw-order-list::-webkit-scrollbar,
.mw-chatbox-log::-webkit-scrollbar,
.mw-detail-thumbs::-webkit-scrollbar,
.mw-venue-notice-text::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.mw-panel-body::-webkit-scrollbar-track,
.mw-modal-scroll::-webkit-scrollbar-track,
.mw-order-list::-webkit-scrollbar-track,
.mw-chatbox-log::-webkit-scrollbar-track,
.mw-detail-thumbs::-webkit-scrollbar-track,
.mw-venue-notice-text::-webkit-scrollbar-track {
    background: rgba(122, 74, 26, .14);
    border-radius: 8px;
}
.mw-panel-body::-webkit-scrollbar-thumb,
.mw-modal-scroll::-webkit-scrollbar-thumb,
.mw-order-list::-webkit-scrollbar-thumb,
.mw-chatbox-log::-webkit-scrollbar-thumb,
.mw-detail-thumbs::-webkit-scrollbar-thumb,
.mw-venue-notice-text::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #C89A62, #9C6B3F);
    border: 2px solid #F2E4BE;
    border-radius: 8px;
}
.mw-panel-body::-webkit-scrollbar-thumb:hover,
.mw-modal-scroll::-webkit-scrollbar-thumb:hover,
.mw-order-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #D4A66C, #8A5A3B);
}
/* Firefox */
.mw-panel-body, .mw-modal-scroll, .mw-order-list, .mw-chatbox-log, .mw-detail-thumbs, .mw-venue-notice-text {
    scrollbar-width: thin;
    scrollbar-color: #9C6B3F rgba(122, 74, 26, .14);
}


/* ---------- 场馆详情 · 本馆团购专区 ---------- */
.mw-venue-deals { margin-top: 14px; }
/* 团单卡片：羊皮纸底 + 橙铜描边（游戏窗体内的货架券卡） */
.mw-deal-card {
    border: 1.5px solid #E8A05A;
    border-radius: 12px;
    background: linear-gradient(180deg, #FFF6E4, #FDEFD2);
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 3px 8px rgba(122, 74, 26, .12);
}
.mw-deal-head { display: flex; align-items: baseline; gap: 8px; }
.mw-deal-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--mw-ink);
    line-height: 1.35;
    /* 长套餐名最多两行，超出省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 折扣角标：红底金字胶囊 */
.mw-deal-off {
    flex: none;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--r-full);
    background: linear-gradient(180deg, #E4604A, #C43A28);
    border: 1px solid rgba(255, 235, 176, .7);
    color: #FFEBB0;
    text-shadow: 0 1px 0 rgba(120, 30, 10, .4);
}
.mw-deal-sub {
    font-size: 12px;
    color: var(--mw-ink-soft);
    margin: 3px 0 6px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mw-deal-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.mw-deal-price { font-size: 20px; font-weight: 800; color: #D9531E; }
.mw-deal-orig { font-size: 12px; color: var(--mw-ink-soft); }
.mw-deal-valid { margin-left: auto; font-size: 11px; color: var(--mw-ink-soft); }
/* 销量进度条：橙色渐变填充 */
.mw-deal-progress {
    height: 8px;
    border-radius: 4px;
    background: rgba(122, 74, 26, .15);
    overflow: hidden;
    margin-top: 8px;
}
.mw-deal-progress i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--mw-orange-1), var(--mw-orange-2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.mw-deal-meta { font-size: 11px; color: var(--mw-ink-soft); margin-top: 5px; }

/* ---------- 场馆详情 · 公告专区（订场须知 / 退订须知） ---------- */
.mw-venue-notices { margin-top: 14px; }
.mw-venue-notice {
    border: 1.5px solid #D9BC85;
    border-radius: 10px;
    background: rgba(240, 191, 95, .12);
    padding: 9px 12px;
    margin-bottom: 10px;
}
.mw-venue-notice b {
    display: block;
    font-size: 12px;
    color: var(--mw-ink);
    margin-bottom: 5px;
    letter-spacing: .02em;
}
/* 须知标题徽记：金色菱形（与 .mw-form-title 同一套游戏化记号，不使用 emoji 图标） */
.mw-venue-notice b.mw-notice-title::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 6px;
    background: linear-gradient(135deg, var(--mw-gold-1), #ECAB48);
    border: 1px solid var(--mw-gold-3);
    transform: rotate(45deg);
    vertical-align: 1px;
}
/* 须知正文：限高滚动（长公告不撑爆弹窗，滚动条走游戏风木轴样式） */
.mw-venue-notice-text {
    font-size: 12px;
    line-height: 1.8;
    color: var(--mw-ink);
    max-height: 170px;
    overflow-y: auto;
    overscroll-behavior: contain;
    word-break: break-word;
}

/* ============================================================
 * 我的背包（B 键 / HUD 背包按钮）：物品格网格 + 悬停物品面板
 * 风格沿用游戏化窗体调色板——物品格为羊皮纸卡片，可转卖的
 * "可用物品"加黄铜亮边；物品面板为羊皮纸浮层（轻量描边，
 * 不用 26px 木框九宫格，避免小浮层被边框吃掉内容区）。
 * ============================================================ */

/* ---------- 背包居中游戏弹窗（木框窗体由 .mw-modal-card 提供，此处定宽度） ----------
 * 如需更华丽的效果，可用 Qwen 生图做一张储物栏底图，
 * 替换 .mw-modal-bag 的 background 即可（建议 1200x900 羊皮纸+皮质包边风格）。 */
.mw-modal-bag {
    width: min(900px, calc(100% - 32px));
    display: flex;
    flex-direction: column;
    padding: 14px 16px 12px;
}
.mw-bag-scroll { max-height: min(60vh, 520px); }
/* 标题行：背包图标 + 游戏风标题（黄铜色描字） + 容量计数（如 3/48） */
.mw-bag-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}
.mw-bag-title-icon { color: var(--mw-gold-3); }
.mw-bag-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--mw-ink);
    margin: 0;
    text-shadow: 0 1px 0 var(--mw-parch-1);
}
/* 容量计数徽章：经典游戏物品栏的 3/48 式容量提示 */
.mw-bag-count {
    padding: 2px 10px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 800;
    color: var(--mw-ink);
    background: linear-gradient(180deg, var(--mw-parch-1), #F3E3BD);
    border: 1.5px solid #C9A05E;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.mw-bag-tabs { justify-content: center; margin-bottom: 10px; }
/* 空背包提示（48 格物品栏上方居中一行；有物品时隐藏） */
.mw-bag-empty-hint {
    margin: 2px 0 10px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--mw-ink-soft);
}
.mw-bag-foot-note {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--mw-line);
    font-size: 11px;
    color: var(--mw-ink-soft);
    text-align: center;
}

/* ---------- 背包 48 格物品栏（经典 MMO 储物栏：桌面 8 列 × 6 行 / 移动端 6 列 × 8 行） ----------
 * 格子总数固定 48，物品按顺序占格，空槽保持常显（游戏物品栏的容量感）；
 * 物品名称与详情不在格内堆文字，统一走悬停/点击唤出的物品面板（.mw-hover-tip）。 */
.mw-bag-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 9px;
    align-content: start;
}
/* 加载中 / 出错文案占满整行，避免被挤进单个格子 */
.mw-bag-grid > .mw-empty { grid-column: 1 / -1; }
@media (max-width: 767px) {
    .mw-bag-grid { grid-template-columns: repeat(6, 1fr); gap: 7px; }
}
/* 槽位：深色皮革凹槽（内阴影 + 底部高光），空槽同样常显 */
.mw-bag-slot {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: linear-gradient(165deg, #E5CC95, #D6B478 55%, #C9A468);
    border: 1.5px solid #B08D4E;
    box-shadow: inset 0 3px 7px rgba(94, 58, 18, .3), inset 0 -1px 0 rgba(255, 246, 220, .35);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.mw-bag-slot.filled { cursor: pointer; }
.mw-bag-slot.filled:hover {
    border-color: var(--mw-gold-2);
    box-shadow: inset 0 3px 7px rgba(94, 58, 18, .3), 0 0 0 2px rgba(240, 191, 95, .55);
}
/* 未使用的券（可用物品）：黄铜亮边 + 微光，游戏背包"可用物品"的视觉信号 */
.mw-bag-slot.usable {
    border-color: var(--mw-gold-2);
    box-shadow: inset 0 3px 7px rgba(94, 58, 18, .3), 0 0 0 1.5px rgba(240, 191, 95, .5);
}
/* 物品图标：满格嵌入槽位（四周留少许槽边），悬停浮起——物品"放"在格子里的感觉 */
.mw-bag-slot-item {
    position: absolute;
    inset: 7%;
    border-radius: 9%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFDF4;
    box-shadow: 0 2px 5px rgba(84, 50, 14, .35);
    transition: transform .14s ease, box-shadow .14s ease;
    pointer-events: none;   /* 命中穿透到槽位本身，方便事件委托与角标不挡点击 */
}
.mw-bag-slot-item img { width: 100%; height: 100%; object-fit: cover; }
.mw-bag-slot.filled:hover .mw-bag-slot-item {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 14px rgba(84, 50, 14, .45);
}
/* 无封面券的礼盒图标占位（浅金底，与集市分类图标同语言） */
.mw-bag-slot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64%;
    aspect-ratio: 1;
    border-radius: 22%;
    background: rgba(255, 253, 244, .72);
    border: 1.5px solid rgba(201, 160, 94, .55);
    color: #C47A28;
}
.mw-bag-slot-icon svg { width: 46%; height: 46%; }
/* 槽位角标：迷你版徽标（状态在左上、转卖中在右上，互不遮挡） */
.mw-bag-slot .mw-badge { top: 3px; left: 3px; font-size: 9px; padding: 1px 5px; border-radius: 6px; }
.mw-bag-slot .mw-badge-resell { left: auto; right: 3px; }

/* 券状态徽标（背包物品格与物品面板共用配色） */
.mw-badge-unused { background: #34b36a; }
.mw-badge-reserved { background: #4a90e2; }
.mw-badge-used { background: #9aa3ad; }
.mw-badge-refunding { background: #4a90e2; }
.mw-badge-refunded { background: #8e6bb5; }
.mw-badge-expired { background: #9aa3ad; }
.mw-badge-disabled { background: #7a828c; }
/* "转卖中 / 券转卖"徽标：球衣橙（物品格左上角为绝对定位，
 * 集市卡片 meta 行内出现时改为行内样式） */
.mw-badge-resell { background: #E07B1A; }
.mw-card-meta .mw-badge-resell {
    position: static;
    display: inline-block;
    margin-right: 5px;
    padding: 1px 7px;
    vertical-align: 1px;
}

/* ---------- 订场场次 Tab（复用 .mw-order-card，补列表间距） ---------- */
#mwBagOrders { display: flex; flex-direction: column; gap: 10px; }
#mwBagOrders .mw-order-card { padding: 10px 12px; }
#mwBagOrders .mw-order-card .mw-btn { margin-top: 8px; }

/* ---------- 悬停物品面板（fixed 浮层：背包物品格 / 集市商品卡共用） ---------- */
.mw-hover-tip {
    position: fixed;
    z-index: 60;
    width: 264px;
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--mw-parch-1), var(--mw-parch-2));
    border: 1.5px solid var(--mw-gold-2);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(58, 32, 12, .35), inset 0 0 0 1px rgba(255, 253, 244, .6);
    color: var(--mw-ink);
    font-size: 12px;
}
.mw-hover-tip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mw-hover-tip-title {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}
.mw-hover-tip-head .mw-badge { position: static; flex-shrink: 0; }
.mw-hover-tip-sub {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--mw-ink-soft);
}
.mw-hover-tip-rows {
    list-style: none;
    margin: 10px 0 0;
    padding: 8px 0 0;
    border-top: 1px dashed var(--mw-line);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mw-hover-tip-rows li { display: flex; justify-content: space-between; gap: 10px; }
.mw-hover-tip-rows span { color: var(--mw-ink-soft); flex-shrink: 0; }
.mw-hover-tip-rows b { font-weight: 700; text-align: right; word-break: break-all; }
.mw-hover-tip-rows s { color: var(--mw-ink-soft); font-weight: 400; margin-left: 4px; }
.mw-hover-tip-no { font-family: ui-monospace, monospace; letter-spacing: .04em; }
.mw-hover-tip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.mw-hover-tip-note {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--mw-ink-soft);
}
/* 转卖价表单（点击"挂到集市转卖"在面板内展开） */
.mw-hover-tip-form {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--mw-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mw-hover-tip-form label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mw-ink-soft);
}
.mw-hover-tip-form input {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border: 1.5px solid #D9BC85;
    border-radius: 9px;
    background: #FFFDF4;
    color: var(--mw-ink);
    font-size: 13px;
}
.mw-hover-tip-form input:focus { outline: none; border-color: var(--mw-gold-2); }
.mw-hover-tip-form-btns { display: flex; gap: 6px; }

/* 移动端：物品面板宽度收窄并贴近视口边 */
@media (max-width: 767px) {
    .mw-hover-tip { width: 232px; }
}


/* ============================================================
 * 快捷键键帽（HUD 按钮内的 <span class="mw-key">）
 * 音乐按钮已移除（进岛自动播放，M 键唤出电台菜单）；
 * sway 动画保留给曲目菜单的播放中 ♪ 标记共用。
 * ============================================================ */
.mw-hud-actions .mw-key {
    display: inline-block;
    min-width: 17px;
    padding: 1px 5px;
    margin-left: 2px;
    border-radius: 5px;
    border: 1.5px solid rgba(0, 0, 0, .18);
    border-bottom-width: 2.5px;               /* 底边加粗模拟键帽厚度 */
    background: rgba(255, 255, 255, .65);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
}
.mw-hud-actions button.primary .mw-key {
    background: rgba(255, 255, 255, .9);
    border-color: rgba(255, 255, 255, .4);
}
@keyframes mw-music-sway {
    0%, 100% { transform: rotate(-9deg); }
    50% { transform: rotate(9deg); }
}

/* ============================================================
 * 轻音乐曲目菜单（「梦屿电台」：HUD 轻音乐按钮上方弹出)
 * 羊皮纸小面板与悬停物品面板同语言；曲目行由 ui.js 渲染。
 * ============================================================ */
.mw-music-menu {
    position: absolute;
    bottom: 84px;                 /* 底部操作条（含悬浮高度）上方 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;                  /* 高于 HUD、低于居中弹窗(z-20) */
    width: 224px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: linear-gradient(180deg, var(--mw-parch-1), var(--mw-parch-2));
    border: 1.5px solid var(--mw-gold-2);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(58, 32, 12, .35), inset 0 0 0 1px rgba(255, 253, 244, .6);
    color: var(--mw-ink);
    animation: mw-music-menu-in .16s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes mw-music-menu-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.94); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.mw-music-menu-title {
    margin: 2px 0 6px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--mw-ink);
}
/* 曲目行：曲名 + 乐风小字，当前播放中的行点亮金色并带 ♪ 律动 */
.mw-music-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--mw-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease;
}
.mw-music-menu button:hover { background: rgba(240, 191, 95, .18); border-color: rgba(201, 160, 94, .6); }
.mw-music-menu button.active {
    background: linear-gradient(180deg, rgba(246, 200, 99, .32), rgba(232, 169, 60, .22));
    border-color: var(--mw-gold-2);
}
.mw-music-track-name i {
    font-style: normal;
    font-size: 11px;
    font-weight: 500;
    color: var(--mw-ink-soft);
    margin-left: 6px;
}
.mw-music-playing {
    color: #B85410;
    font-weight: 800;
    animation: mw-music-sway 1.6s ease-in-out infinite;
    display: inline-block;
}
/* 停止/开启行：与曲目行用虚线分隔，弱化为次要操作 */
.mw-music-stop {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--mw-line);
    justify-content: center;
    color: var(--mw-ink-soft);
    font-weight: 500;
    font-size: 12px;
}
@media (max-width: 520px) {
    .mw-music-menu { bottom: 66px; width: 200px; }
}