/* 核心防抖与禁止页面滚动，启用全屏沉浸 */
:root {
    --topbar-h: 48px;
    --table-side-gutter: 0px;
}

body {
    background: radial-gradient(circle at 50% 40%, #17422a 0%, #0c2316 65%, #050e09 100%);
    font-family: 'Inter', 'PingFang SC', sans-serif;
    overflow: hidden;
    touch-action: none;
    margin: 0;
    padding: 0;
    /* svh：剔除移动端动态地址栏，防止内容被截断 */
    height: 100vh;
    height: 100svh;
}

/* 竖/横屏通用：高度减去顶部栏48px，居中桌面区 */
.table-wrapper {
    width: 100%;
    height: calc(100vh - var(--topbar-h));
    height: calc(100svh - var(--topbar-h));
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* iPhone 刘海 / Home 条安全区 */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mahjong-table {
    position: relative;
    width: 100%;
    max-width: min(calc(100vw - var(--table-side-gutter) * 2), calc(100vh - var(--topbar-h)));
    height: 100%;
    max-height: min(calc(100vw - var(--table-side-gutter) * 2), calc(100vh - var(--topbar-h)));
    aspect-ratio: 1 / 1;
    container-type: inline-size;
    /* 增加一个基础宽度变量供回退使用 */
    --cw: min(calc(100vw - var(--table-side-gutter) * 2), calc(100vh - var(--topbar-h)));

    /* 关键触控尺寸：必须和 --cw 同作用域，避免变量链路失效。 */
    --self-hand-w: clamp(24px, calc(var(--cw) * 0.062), 66px);
    --self-hand-h: clamp(35px, calc(var(--cw) * 0.088), 94px);
    --self-meld-w: clamp(14px, calc(var(--cw) * 0.036), 38px);
    --self-meld-h: clamp(20px, calc(var(--cw) * 0.052), 54px);
    --self-discard-w: clamp(15px, calc(var(--cw) * 0.038), 40px);
    --self-discard-h: clamp(21px, calc(var(--cw) * 0.054), 58px);
}
/* svh 支持时使用更精准的视口单位 */
@supports (height: 100svh) {
    .mahjong-table {
        max-width: min(calc(100svw - var(--table-side-gutter) * 2), calc(100svh - var(--topbar-h)));
        max-height: min(calc(100svw - var(--table-side-gutter) * 2), calc(100svh - var(--topbar-h)));
    }
}

/* 基础牌样式：使用不对称带厚度感的投影模拟3D材质，避免占用内部图片比例 */
.mj-tile {
    position: relative;
    border-radius: clamp(2px, calc(var(--cw, 360px) * 0.005), 6px);
    border: 1px solid #9ca3af;
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 0.7), 
        inset -1px -1px 2px rgba(0, 0, 0, 0.1), 
        1px 3px 0px #6b7280, 
        2px 5px 6px rgba(0, 0, 0, 0.3);
    user-select: none;
    flex-shrink: 0;
    background: linear-gradient(135deg, #fdfdfd 0%, #eef2f6 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s;
}

.mj-tile.selected {
    transform: translateY(-8px);
    box-shadow: 
        inset 1px 1px 3px rgba(255, 255, 255, 0.9), 
        inset -1px -1px 2px rgba(0, 0, 0, 0.1), 
        1px 11px 0px #6b7280, 
        2px 14px 14px rgba(0, 0, 0, 0.5);
}

.mj-tile img {
    width: 100%;
    height: 100%;
    border-radius: clamp(1px, calc(var(--cw, 360px) * 0.0025), 3px);
    object-fit: fill;
}

.mj-tile img[src*="/Sou"],
.mj-tile img[src*="/Pin"] {
    padding: 3% 5%;
    box-sizing: border-box;
}

/* ========================================================
   分级尺寸控制 (引入倒置宽高引擎解决侧边拉伸Bug)
   ======================================================== */

/* 1. 本家 (Self) 尺寸 */
.tile-self-hand {
    /* 先给出硬尺寸兜底，防止自定义变量链路失效时回退原图大小。 */
    width: clamp(24px, calc(var(--cw) * 0.062), 66px);
    height: clamp(35px, calc(var(--cw) * 0.088), 94px);
    width: var(--self-hand-w);
    height: var(--self-hand-h);
    margin: 0 calc(var(--cw) * 0.0025);
    cursor: pointer;
    transition: transform 0.1s;
}

.tile-self-meld {
    width: clamp(14px, calc(var(--cw) * 0.036), 38px);
    height: clamp(20px, calc(var(--cw) * 0.052), 54px);
    width: var(--self-meld-w);
    height: var(--self-meld-h);
    margin: 0 calc(var(--cw) * 0.002);
}

.tile-self-discard {
    width: clamp(15px, calc(var(--cw) * 0.038), 40px);
    height: clamp(21px, calc(var(--cw) * 0.054), 58px);
    width: var(--self-discard-w);
    height: var(--self-discard-h);
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 0.7), 
        inset -1px -1px 2px rgba(0, 0, 0, 0.1), 
        1px 1px 0px #6b7280, 
        1px 2px 3px rgba(0, 0, 0, 0.2);
}

/* 2. 对家 (Top) 尺寸 */
.tile-opp-h-hand {
    width: calc(var(--cw) * 0.038);
    height: calc(var(--cw) * 0.054);
    margin: 0;
}

.tile-opp-h-meld {
    width: calc(var(--cw) * 0.038);
    height: calc(var(--cw) * 0.054);
    margin: 0;
}

.tile-opp-h-discard {
    width: calc(var(--cw) * 0.040);
    height: calc(var(--cw) * 0.056);
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 0.7), 
        inset -1px -1px 2px rgba(0, 0, 0, 0.1), 
        1px 1px 0px #6b7280, 
        1px 2px 3px rgba(0, 0, 0, 0.2);
}

/* 3. 侧边 (Left/Right) 尺寸 - 宽长互换并传递给内部图片 */
.tile-opp-v-hand {
    width: calc(var(--cw) * 0.054);
    height: calc(var(--cw) * 0.038);
    --vw: calc(var(--cw) * 0.054);
    --vh: calc(var(--cw) * 0.038);
    margin: 0;
}

.tile-opp-v-meld {
    width: calc(var(--cw) * 0.054);
    height: calc(var(--cw) * 0.038);
    --vh: calc(var(--cw) * 0.038);
    margin: 0;
}

.tile-opp-v-discard {
    width: calc(var(--cw) * 0.056);
    height: calc(var(--cw) * 0.040);
    margin: 0;
    --vw: calc(var(--cw) * 0.056);
    --vh: calc(var(--cw) * 0.040);
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 0.7), 
        inset -1px -1px 2px rgba(0, 0, 0, 0.1), 
        1px 1px 0px #6b7280, 
        1px 2px 3px rgba(0, 0, 0, 0.2);
}

/* 4. 结算页面专属尺寸 (改为固定 px，彻底脱离 cqi 容器依赖) */
.tile-res-hand {
    width: 28px;
    height: 40px;
    margin: 0 1.5px;
}

.tile-res-meld {
    width: 38px;
    height: 54px;
    margin: 0 1px;
    border-radius: 3px;
}

.settlement-seat-name {
    min-height: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 1.35;
    word-break: break-word;
    gap: 0.3rem;
}

.settlement-seat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.12rem 0.4rem;
    border-radius: 9999px;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
}

.settlement-seat-badge-dealer {
    background: #f59e0b;
    color: #fff;
}

.settlement-seat-badge-self {
    background: #0ea5e9;
    color: #fff;
}

.settlement-special-zone {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.58), rgba(15, 23, 42, 0.34));
    border-color: rgba(148, 163, 184, 0.5);
    padding: 5px 6px;
    gap: 3px;
    margin-right: 4px;
}

.settlement-fa-zone {
    background: linear-gradient(180deg, rgba(120, 53, 15, 0.48), rgba(133, 77, 14, 0.28));
    border-color: rgba(250, 204, 21, 0.62) !important;
}

.settlement-special-tile {
    background: #fdfdfd;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5), 0 -1px 1px inset rgba(0, 0, 0, 0.3);
}

.settlement-meld-tile {
    border-width: 2px;
    border-color: rgba(16, 185, 129, 0.95);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.5), 0 -1px 1px inset rgba(0, 0, 0, 0.3);
}

.settlement-fa-tile {
    border-width: 2px;
    border-color: rgba(234, 179, 8, 0.98);
    box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.58), 1px 1px 3px rgba(0, 0, 0, 0.5), 0 -1px 1px inset rgba(0, 0, 0, 0.3);
}

.settlement-hand-scroll {
    padding: 4px 6px 10px 3px;
}

.settlement-hand-track {
    padding-bottom: 6px;
}

.settlement-winning-tile {
    margin-bottom: 2px;
}

.final-stat-card {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.55rem 0.35rem;
    text-align: center;
}

.final-stat-label {
    font-size: 10px;
    line-height: 1.1;
    font-weight: 800;
    color: rgba(209, 213, 219, 0.8);
    margin-bottom: 0.2rem;
}

.final-stat-value {
    font-size: 1.05rem;
    line-height: 1.1;
    font-weight: 900;
}

@media (min-width: 640px) {
    .tile-res-hand {
        width: 38px;
        height: 54px;
        margin: 0 2.5px;
    }

    .tile-res-meld {
        width: 38px;
        height: 54px;
        margin: 0 1.5px;
        border-radius: 4px;
    }

    .settlement-seat-name {
        min-height: 2.9rem;
    }

    .settlement-seat-badge {
        font-size: 10px;
        padding: 0.14rem 0.48rem;
    }

    .settlement-special-zone {
        padding: 6px 7px;
        gap: 4px;
        margin-right: 5px;
    }

    .settlement-hand-scroll {
        padding: 6px 8px 14px 4px;
    }

    .settlement-hand-track {
        padding-bottom: 8px;
    }

    .final-stat-card {
        padding: 0.7rem 0.45rem;
    }

    .final-stat-label {
        font-size: 11px;
    }

    .final-stat-value {
        font-size: 1.2rem;
    }
}

/* 5. 鸣牌交互提示框专属目标牌尺寸 */
.tile-action-target {
    width: 32px;
    height: 46px;
}

@media (min-width: 640px) {
    .tile-action-target {
        width: 44px;
        height: 62px;
    }
}

/* 完美的侧边图片旋转：宽高对调，防止红底被压缩挤占 */
.rot-left,
.rot-right {
    position: absolute;
    width: var(--vh) !important;
    height: var(--vw) !important;
}

.rot-top {
    transform: rotate(180deg);
}

.rot-left {
    transform: rotate(90deg);
}

.rot-right {
    transform: rotate(-90deg);
}

/* 状态与交互 */
.tile-self-hand.disabled {
    pointer-events: none;
    filter: brightness(0.85);
}

.tile-self-hand:not(.disabled):hover {
    transform: translateY(-10%);
}

.tile-self-hand.selected {
    transform: translateY(-20%) scale(1.05);
    border-color: #fbbf24;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6), 0px -2px 0px #fbbf24 inset;
    z-index: 30;
}

/* 摸牌间隙 */
.drawn-gap-h {
    margin-left: calc(var(--cw) * 0.015) !important;
}

.drawn-gap-v-left {
    margin-bottom: calc(var(--cw) * 0.015) !important;
}

.drawn-gap-v-right {
    margin-top: calc(var(--cw) * 0.015) !important;
}

/* 牌河网格：每排最多 8 张 */
.discard-river-h {
    display: grid;
    grid-template-columns: repeat(8, auto); /* 从 10 改为 8 */
    gap: 2px 1px;
    justify-content: center;
    align-content: start;
}

/* 自家弃牌：第一排固定在底部（近手牌），新行向上生长（向牌桌中心） */
.discard-river-h-self {
    transform: scaleY(-1);
}

.discard-river-h-self > .mj-tile {
    transform: scaleY(-1);
}

.discard-river-v {
    display: grid;
    grid-template-rows: repeat(8, auto); /* 从 10 改为 8 */
    grid-auto-flow: column;
    gap: 2px 1px;
    justify-content: center;
    align-content: center;
}

.player-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.player-name-main {
    max-width: calc(var(--cw) * 0.42);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
}

.player-name-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    writing-mode: horizontal-tb; /* 从 vertical-rl 改为水平 */
    text-orientation: mixed;
    letter-spacing: normal;
    width: calc(var(--cw) * 0.072); /* 略放宽，配合更大字号 */
    overflow: hidden;
    line-height: 1.2;
}

.dealer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: 9999px;
    border: 1px solid rgba(250, 204, 21, 0.7);
    background: rgba(120, 53, 15, 0.7);
    color: #fcd34d;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    writing-mode: horizontal-tb;
}

.rtl-grid {
    direction: rtl;
}

.game-topbar-collapsed {
    height: 0 !important;
    min-height: 0;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
}

.mobile-topbar-panel {
    backdrop-filter: blur(6px);
    /* 固定定位以便与触发按钮在视口上对齐，使用安全区偏移 */
    position: fixed;
    top: calc(max(6px, env(safe-area-inset-top, 6px)) + 38px);
    left: max(8px, env(safe-area-inset-left, 8px));
    z-index: 190;
}

.mobile-topbar-compact {
    position: fixed;
    top: max(6px, env(safe-area-inset-top, 6px));
    left: max(8px, env(safe-area-inset-left, 8px));
    right: max(8px, env(safe-area-inset-right, 8px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.mobile-topbar-trigger,
.mobile-fullscreen-btn {
    pointer-events: auto;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: rgba(15, 23, 42, 0.88);
    color: #e5e7eb;
    border-radius: 8px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.mobile-topbar-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
}

.mobile-fullscreen-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-more-panel {
    top: calc(100% + 4px) !important;
    right: 8px !important;
    width: min(88vw, 300px) !important;
}

/* 【优化2】减弱明牌区域底色与包裹：更柔和的线条 */
.meld-zone {
    background: rgba(0, 0, 0, 0.25);
    padding: calc(var(--cw) * 0.006) calc(var(--cw) * 0.005);
    padding-bottom: calc(var(--cw) * 0.01);
    border-radius: 6px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    /* 减弱了绿色边框的粗细和不透明度 */
    display: flex;
    gap: 1px;
    align-items: center;
    justify-content: center;
}

.fa-zone {
    background: rgba(133, 77, 14, 0.3);
    border: 1px solid rgba(234, 179, 8, 0.5) !important;
    /* 减弱了发财边框的粗细和不透明度 */
}

/* 动画过度 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s, transform 0.3s;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
}

/* ===================================================
   竖屏优化：桌面不强制正方形，充分利用屏幕高度
   原理：cqi = 容器宽度%，此值不变，tile 尺寸不受影响。
   效果：桌面撑满全高，玩家区域仍锚定四边，中间更宽敞。
   ================================================= */
@media (orientation: portrait) {
    .mahjong-table {
        max-width: 100%;
        max-height: none;
        height: 100%;
        aspect-ratio: auto;
    }

    /* 行动按钮靠近底部手牌区，不要浮在屏幕中部 */
    .action-panel {
        bottom: 14%;
    }
}

/* 超窄手机竖屏，进一步保证本家手牌点击面积。 */
@media (orientation: portrait) and (max-width: 420px) {
    .mahjong-table {
        --self-hand-w: clamp(25px, calc(var(--cw) * 0.066), 60px);
        --self-hand-h: clamp(37px, calc(var(--cw) * 0.094), 86px);
    }
}

@media (orientation: landscape) and (max-width: 1024px) and (max-height: 700px) {
    /* 横屏预留两侧缓冲区，提升视觉聚焦与误触容忍。 */
    :root {
        --topbar-h: 0px;
        --table-side-gutter: clamp(10px, 2.4vw, 32px);
    }
}

/* 更宽松的横屏阈值，覆盖多数手机横屏高度（含较高分辨率的长屏机型） */
@media (orientation: landscape) and (max-height: 760px) {
    :root {
        --topbar-h: 0px;
        --table-side-gutter: clamp(12px, 3vw, 32px);
    }
}

/* ===================================================
   横屏小屏（手机横屏，高度 < 480px）
   轻微压缩本家手牌，为行动按钮腾出空间
   ================================================= */
@media (orientation: landscape) and (max-height: 480px) {
    .mahjong-table {
        --self-hand-w: clamp(24px, calc(var(--cw) * 0.064), 54px);
        --self-hand-h: clamp(35px, calc(var(--cw) * 0.090), 76px);
        --self-meld-w: clamp(14px, calc(var(--cw) * 0.042), 30px);
        --self-meld-h: clamp(20px, calc(var(--cw) * 0.060), 44px);
        --self-discard-w: clamp(15px, calc(var(--cw) * 0.045), 32px);
        --self-discard-h: clamp(22px, calc(var(--cw) * 0.064), 46px);
    }

    .tile-self-meld {
        margin: 0 calc(var(--cw) * 0.0016);
    }

    .action-panel {
        /* use computed cw to peg panel above hand area to avoid overlap */
        bottom: calc(var(--cw) * 0.22);
        padding: 6px 10px;
    }
}

/* ===================================================
   全局触控优化：消除移动端 300ms 点击延迟
   ================================================= */
button, [role="button"], .mj-tile {
    touch-action: manipulation;
}

/* 粗指针设备（手机/平板触控）优先保证本家牌的可点尺寸。 */
@media (pointer: coarse) {
    .mahjong-table {
        --self-hand-w: clamp(25px, calc(var(--cw) * 0.066), 62px);
        --self-hand-h: clamp(37px, calc(var(--cw) * 0.094), 88px);
    }

    .tile-self-hand {
        margin: 0 clamp(1px, calc(var(--cw) * 0.003), 4px);
    }
}

/* 自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.5);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7);
}

/* 强制隐藏默认滚动条但保持可滚动 */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@media (orientation: landscape) and (max-height: 500px) {
    .mahjong-table {
        max-width: 100%;
        max-height: none;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        /* fallback using 100vh, prefer svh when supported to avoid soft-ui bars affecting size */
        --cw: calc(100vh - 4px);
    }

    @supports (height: 100svh) {
        .mahjong-table {
            --cw: calc(100svh - 4px);
        }
    }

    .discard-river-h, .discard-river-v {
        transform: none;
        gap: 1px 1px;
    }

    .table-center-info {
        width: calc(var(--cw) * 0.17) !important;
        height: calc(var(--cw) * 0.17) !important;
        inset: 0 !important;
        margin: auto !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }

    .player-name-row,
    .player-name-side {
        font-size: 9px !important;
        line-height: 1.05;
    }

    .top-player-name-row {
        position: absolute;
        left: calc(var(--cw) * 0.014);
        top: calc(var(--cw) * 0.012);
        z-index: 15;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .player-name-side {
        width: calc(var(--cw) * 0.06);
    }

    .player-name-side span:first-child,
    .player-name-main {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dealer-badge {
        font-size: 8px;
        padding: 1px 4px;
    }

    .tile-self-hand {
        width: clamp(26px, calc(var(--cw) * 0.068), 60px);
        height: clamp(38px, calc(var(--cw) * 0.096), 84px);
        margin: 0 clamp(1px, calc(var(--cw) * 0.0026), 4px);
    }

    .tile-self-discard {
        width: clamp(16px, calc(var(--cw) * 0.042), 36px);
        height: clamp(23px, calc(var(--cw) * 0.058), 50px);
    }

    .tile-opp-h-discard,
    .tile-opp-v-discard {
        width: clamp(16px, calc(var(--cw) * 0.042), 36px);
        height: clamp(23px, calc(var(--cw) * 0.058), 50px);
    }

    .discard-river-h-self {
        transform: scaleY(-1) !important;
    }

    .discard-river-h-self > .mj-tile {
        transform: scaleY(-1) !important;
    }

    .action-panel {
        /* peg panel above hand area based on computed cw */
        bottom: calc(var(--cw) * 0.22);
        padding: 8px 12px;
    }
    .action-panel button {
        min-height: 36px;
        padding: 6px 14px;
    }

    /* Limit side discard river rows to avoid overflow into center */
    .discard-river-v {
        grid-template-rows: repeat(6, auto);
        overflow: hidden;
        max-height: calc(var(--cw) * 0.50);
    }

    /* Settlement modal: cancel transform-based scaling and use compact tiles */
    .settlement-hand-track {
        transform: none !important;
    }
    .tile-res-hand {
        width: 22px;
        height: 32px;
        margin: 0 1px;
    }

    .left-player-zone {
        left: calc(var(--cw) * 0.025) !important;
    }

    .right-player-zone {
        right: calc(var(--cw) * 0.025) !important;
    }

    .left-player-zone,
    .right-player-zone {
        width: calc(var(--cw) * 0.22);
        overflow: visible;
    }

    .left-player-zone .discard-river-v,
    .right-player-zone .discard-river-v {
        overflow: visible;
    }

    .top-opponent-zone {
        gap: calc(var(--cw) * 0.008) !important;
    }
}

/* 防止在 Vue 未就绪时显示原始模板占位符 */
[v-cloak] {
    display: none !important;
}

/* 当 Vue 未加载（例如 CDN 被拦截）时显示的回退提示 */
.no-vue-fallback {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: rgba(0,0,0,0.82);
    color: #fff;
    padding: 20px;
}
.no-vue-fallback .box {
    background: #071018;
    border-radius: 12px;
    padding: 18px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    text-align: left;
}
.no-vue-fallback h3 { margin: 0 0 8px 0; font-size: 18px; font-weight: 700; }
.no-vue-fallback p { margin: 0; color: #cbd5e1; font-size: 14px; line-height: 1.45; }
.no-vue-fallback button { margin-top: 12px; padding: 10px 14px; background: #06b6d4; color: #062024; border-radius: 8px; border: none; cursor: pointer; font-weight: 700; }

/* 当页面已确认加载到 Vue 时隐藏回退提示（脚本会添加 .vue-ready 到根元素） */
.vue-ready .no-vue-fallback { display: none !important; }