/* =============================================================================
   VRX immersive layer · 沉浸式启动页与聚焦式控制条
   QSTAR / vr.qstar.center —— 原创实现（VRIX immersive layer v1, 2026-10-07）
   -----------------------------------------------------------------------------
   设计依据（2026 沉浸式设计趋势的提炼，非任何站点源码）：
     1) 交互优先：启动页用真实作品封面做模糊背景，先建立"空间感"再进引擎；
     2) 视锥分区：中央 30° 只承载标题与主操作，参数型控件下沉到两侧可折叠面板；
     3) 三态反馈：所有可点元素具备 idle / hover / active 三态（VR 里摸不到按钮，
        视觉反馈是唯一反馈通道）；
     4) 声音反馈：用 Web Audio 实时合成，不引入任何音频素材；
     5) 无障碍：完整键盘层 + prefers-reduced-motion 降级 + 高对比模式挂钩。
   所有数值取自本站既有令牌（--azure/--cyan/--gold），不引入外部字体或图标库。
   ========================================================================== */

.vr-wrap {
    /* VRX 设计令牌（与全站令牌同名同义，便于统一改） */
    --vx-accent: #2F6BFF;
    --vx-accent-2: #27C6E8;
    --vx-gold: #E9C46A;
    --vx-ink: #EAF1FB;
    --vx-muted: #A8B8D8;
    --vx-glass: rgba(12, 22, 48, .52);
    --vx-stroke: rgba(255, 255, 255, .16);
    --vx-stroke-hi: rgba(255, 255, 255, .30);
    --vx-shadow: 0 24px 64px rgba(2, 8, 24, .58);
    --vx-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- 启动页 */
.vrm-launch {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #050B1C;
    transition: opacity .72s var(--vx-ease), visibility .72s;
    -webkit-tap-highlight-color: transparent;
}
.vrm-launch.vrm-gone {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 背景：封面大图 + 缓慢尺度漂移，制造"进入前已在场景中"的错觉 */
.vrm-launch-bg {
    position: absolute;
    inset: -6%;
    background-size: cover;
    background-position: center;
    filter: blur(18px) saturate(1.15) brightness(.62);
    transform: scale(1.08);
    animation: vrm-drift 26s var(--vx-ease) infinite alternate;
    will-change: transform;
}
.vrm-launch-bg::after {
    /* 二次柔化，避免大图放大后出现明显像素块 */
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(26px);
    transform: scale(.94);
}
@keyframes vrm-drift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.16) translate3d(0, -1.6%, 0); }
}

/* 渐晕：把注意力压到中心，同时藏住模糊边缘 */
.vrm-launch-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 88% at 50% 46%, rgba(5, 11, 28, .18) 0%, rgba(5, 11, 28, .74) 58%, rgba(3, 7, 18, .95) 100%),
        linear-gradient(180deg, rgba(3, 7, 18, .58) 0%, transparent 26%, transparent 62%, rgba(3, 7, 18, .86) 100%);
}

.vrm-launch-body {
    position: relative;
    width: min(92vw, 760px);
    padding: 0 24px;
    text-align: center;
    color: var(--vx-ink);
}

/* 入场级联：eyebrow → 标题 → 元信息 → 按钮 → 提示 */
.vrm-launch-body > * {
    opacity: 0;
    transform: translateY(18px);
    animation: vrm-rise .86s var(--vx-ease) forwards;
}
.vrm-launch-body > *:nth-child(1) { animation-delay: .06s; }
.vrm-launch-body > *:nth-child(2) { animation-delay: .16s; }
.vrm-launch-body > *:nth-child(3) { animation-delay: .26s; }
.vrm-launch-body > *:nth-child(4) { animation-delay: .36s; }
.vrm-launch-body > *:nth-child(5) { animation-delay: .46s; }
@keyframes vrm-rise {
    to { opacity: 1; transform: none; }
}

.vrm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 14px 6px 11px;
    border-radius: 999px;
    background: var(--vx-glass);
    border: 1px solid var(--vx-stroke);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: var(--vx-cyan, #27C6E8);
    text-transform: uppercase;
}
.vrm-eyebrow::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--vx-gold);
    box-shadow: 0 0 0 4px rgba(233, 196, 106, .16);
}

.vrm-title {
    margin: 18px 0 0;
    font-size: clamp(28px, 5.4vw, 54px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.6px;
    text-shadow: 0 6px 34px rgba(0, 0, 0, .5);
}

.vrm-meta {
    margin: 14px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--vx-muted);
    font-size: 13.5px;
}
.vrm-meta span { display: inline-flex; align-items: center; gap: 6px; }
.vrm-meta i {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
}

/* 主操作：三态反馈（idle / hover / active） */
.vrm-enter {
    position: relative;
    margin: 30px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.vrm-enter-ring {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 34px 15px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--vx-accent), var(--vx-accent-2));
    box-shadow: 0 16px 44px rgba(47, 107, 255, .42);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .6px;
    transition: transform .28s var(--vx-ease), box-shadow .28s var(--vx-ease), filter .2s var(--vx-ease);
}
.vrm-enter:hover .vrm-enter-ring {
    transform: translateY(-3px);
    box-shadow: 0 22px 58px rgba(47, 107, 255, .55);
    filter: brightness(1.06);
}
.vrm-enter:active .vrm-enter-ring {
    transform: translateY(-1px) scale(.985);
    box-shadow: 0 10px 28px rgba(47, 107, 255, .38);
}
.vrm-enter:focus-visible .vrm-enter-ring {
    outline: 2px solid var(--vx-accent-2);
    outline-offset: 4px;
}
.vrm-enter-ring svg { flex: none; }

/* 呼吸光环：明确"可点" */
.vrm-enter::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 168px; height: 56px;
    margin: -28px 0 0 -84px;
    border-radius: 999px;
    border: 1px solid rgba(120, 190, 255, .40);
    animation: vrm-breathe 3.4s ease-out infinite;
    pointer-events: none;
}
@keyframes vrm-breathe {
    0%   { transform: scale(1);    opacity: .7; }
    70%  { transform: scale(1.32); opacity: 0; }
    100% { transform: scale(1.32); opacity: 0; }
}

.vrm-tip {
    margin: 22px 0 0;
    color: var(--vx-muted);
    font-size: 12.5px;
    letter-spacing: .3px;
}
.vrm-tip kbd {
    display: inline-block;
    margin: 0 2px;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid var(--vx-stroke);
    background: rgba(255, 255, 255, .07);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--vx-ink);
}

/* 右上角「直接跳过」：任何时候都能进全景，绝不把人困住 */
.vrm-skip {
    position: absolute;
    top: 18px; right: 20px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(8, 16, 38, .46);
    border: 1px solid var(--vx-stroke);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--vx-ink);
    font-size: 12.5px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s var(--vx-ease), border-color .2s var(--vx-ease);
}
.vrm-skip:hover { background: rgba(28, 52, 110, .62); border-color: var(--vx-stroke-hi); }
.vrm-skip:focus-visible { outline: 2px solid var(--vx-accent-2); outline-offset: 3px; }

/* 加载中的进度环 */
.vrm-enter[data-loading="1"] { pointer-events: none; opacity: .72; }
.vrm-enter[data-loading="1"] .vrm-enter-ring::after {
    content: "";
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .34);
    border-top-color: #fff;
    animation: vrm-spin .8s linear infinite;
}
@keyframes vrm-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------- 手势引导（移动端首入） */
.vrm-gesture {
    position: fixed;
    left: 50%;
    bottom: 15%;
    z-index: 9100;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    border-radius: 999px;
    background: rgba(8, 16, 38, .58);
    border: 1px solid var(--vx-stroke);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--vx-shadow);
    color: var(--vx-ink);
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s var(--vx-ease), transform .5s var(--vx-ease);
}
.vrm-gesture.vrm-show {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
}
.vrm-gesture .vrm-ico {
    width: 26px; height: 26px;
    flex: none;
    color: var(--vx-cyan, #27C6E8);
}
@media (pointer: coarse) and (max-width: 900px) {
    .vrm-gesture { display: inline-flex; }
}

/* --------------------------------------------------------- 快捷键提示条 */
.vrm-keys {
    position: fixed;
    left: 50%;
    bottom: 14px;
    z-index: 9050;
    transform: translateX(-50%) translateY(14px);
    display: flex;
    gap: 14px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(8, 16, 38, .46);
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--vx-muted);
    font-size: 11.5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s var(--vx-ease), transform .4s var(--vx-ease);
}
.vrm-keys.vrm-show {
    opacity: 1;
    transform: translateX(-50%);
}
.vrm-keys kbd {
    display: inline-block;
    min-width: 20px;
    margin-right: 5px;
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid var(--vx-stroke);
    background: rgba(255, 255, 255, .08);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: var(--vx-ink);
    text-align: center;
}
@media (pointer: coarse), (max-width: 900px) {
    .vrm-keys { display: none; }
}

/* ------------------------------------------------ 陀螺仪微视差（可选授权） */
@media (hover: none) and (pointer: coarse) {
    .vrm-launch-body { transform: translate3d(var(--vx-px, 0), var(--vx-py, 0), 0); transition: transform .5s var(--vx-ease); }
}

/* ------------------------------------------------------- 无障碍 / 降级 */
@media (prefers-reduced-motion: reduce) {
    .vrm-launch-bg { animation: none; transform: scale(1.04); }
    .vrm-launch-body > * { animation-duration: .01ms; opacity: 1; transform: none; }
    .vrm-enter::before { animation: none; opacity: 0; }
}
@media (prefers-contrast: more) {
    .vrm-launch-veil { background: rgba(3, 7, 18, .82); }
    .vrm-enter-ring { border: 2px solid #fff; }
}

/* 打印：不需要启动页 */
@media print {
    .vrm-launch, .vrm-gesture, .vrm-keys { display: none !important; }
}
/* =============================================================================
   VRX 专注模式（沉浸）· v1  2026-10-07 原创
   -----------------------------------------------------------------------------
   动机：播放页原有左右两栏共 12 个按钮 + 底部 339 个场景缩略图，
        静止观看时这些元素始终压在画面上，遮挡视野。
   做法：**零模板改动** —— 聚焦条由 vr-immersive.js 动态创建并挂到 body，
        模板里的 #vrLeftPanel / #vrRightPanel / .vr-thumbs-strip 一个字节都不改，
        所有按钮都是代理调用页面既有函数（zoomIn/fullscreen/toggleGyro…），
        因此不存在 onclick 丢失或布局被破坏的风险。
   ========================================================================== */

/* 专注模式：隐藏原有 HUD（用 opacity+pointer-events，不用 display，避免布局跳动） */
html.vrx-focus #vrLeftPanel,
html.vrx-focus #vrRightPanel,
html.vrx-focus #vrBottomBar {        /* 底部条容器：内含 .vr-thumbs-strip + .vr-bottom-nav-btns */
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(10px);
    transition: opacity .42s var(--vx-ease), transform .42s var(--vx-ease);
}

/* ---------------------------------------------------------- 底部聚焦控制条 */
.vrx-bar {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 9200;
    transform: translate(-50%, 130%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(8, 16, 38, .58);
    border: 1px solid var(--vx-stroke);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: var(--vx-shadow);
    opacity: 0;
    transition: transform .46s var(--vx-ease), opacity .38s var(--vx-ease);
    -webkit-tap-highlight-color: transparent;
}
html.vrx-focus .vrx-bar {
    transform: translate(-50%, 0);
    opacity: 1;
}
html.vrx-focus-focusbar .vrx-bar {      /* 鼠标停在条上时不完全隐藏 */
    transform: translate(-50%, 0) scale(1.02);
}

.vrx-bar-btn {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--vx-ink);
    font-size: 15px;
    cursor: pointer;
    transition: background .2s var(--vx-ease), transform .2s var(--vx-ease), color .2s var(--vx-ease);
}
.vrx-bar-btn:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.vrx-bar-btn:active { transform: translateY(0) scale(.94); }
.vrx-bar-btn:focus-visible { outline: 2px solid var(--vx-accent-2); outline-offset: 2px; }
.vrx-bar-btn[aria-pressed="true"] { background: rgba(47, 107, 255, .34); color: #fff; }
.vrx-bar-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.vrx-bar-sep {
    width: 1px; height: 20px;
    margin: 0 5px;
    background: rgba(255, 255, 255, .14);
    flex: none;
}

/* 场景进度：条 + 当前/总数 */
.vrx-bar-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    font-size: 12px;
    color: var(--vx-muted);
    font-variant-numeric: tabular-nums;
}
.vrx-bar-track {
    position: relative;
    width: clamp(80px, 18vw, 180px);
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
}
.vrx-bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--vx-accent), var(--vx-accent-2));
    transition: width .3s var(--vx-ease);
}

/* 进入专注的入口按钮（平时藏在右上角，专注态下作为退出） */
.vrx-focus-toggle {
    position: fixed;
    top: 18px; right: 20px;
    z-index: 9050;
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vx-stroke);
    border-radius: 50%;
    background: rgba(8, 16, 38, .46);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--vx-ink);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .38s var(--vx-ease), background .2s var(--vx-ease), transform .2s var(--vx-ease);
}
html.vrx-focus .vrx-focus-toggle {
    opacity: .55;
    pointer-events: auto;
}
.vrx-focus-toggle:hover { opacity: 1 !important; background: rgba(28, 52, 110, .7); transform: scale(1.06); }
.vrx-focus-toggle:focus-visible { outline: 2px solid var(--vx-accent-2); outline-offset: 3px; }
.vrx-focus-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }

@media (pointer: coarse) {
    .vrx-focus-toggle { top: auto; bottom: 84px; right: 14px; }
    .vrx-bar { bottom: 14px; padding: 6px 8px; gap: 2px; }
    .vrx-bar-btn { width: 40px; height: 40px; }   /* 触屏最小可点尺寸 */
    .vrx-bar-progress { display: none; }          /* 触屏不显示进度，横向空间留给按钮 */
}

@media (prefers-reduced-motion: reduce) {
    html.vrx-focus #vrLeftPanel,
    html.vrx-focus #vrRightPanel,
    html.vrx-focus #vrBottomBar,
    .vrx-bar { transition: none; }
}

/* =============================================================================
   VRX Cinematic · 热点信息卡 + 场景加载条（Phase 2, 2026-10-09）
   设计前提：公开站 .vr-hotspot-card 此前在 redefine.css 里完全无样式（裸 DOM），
   这里用玻璃拟态 + 品牌色一次性补齐，纯增量、零冲突。
   ========================================================================== */

/* ---------- 场景加载条：krpano onnewscene 触发，onloadcomplete 收起 ---------- */
.vrx-loadbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 9099;
    pointer-events: none;
    opacity: 0;
    transform-origin: left center;
    background: linear-gradient(90deg, var(--vx-accent), var(--vx-accent-2));
    box-shadow: 0 0 14px rgba(47, 107, 255, .65);
    transition: opacity .25s var(--vx-ease);
}
.vrx-loadbar.vrx-loading {
    opacity: 1;
    animation: vrx-loadrun 1.15s var(--vx-ease) infinite;
}
@keyframes vrx-loadrun {
    0%   { transform: scaleX(.02); opacity: 1; }
    55%  { transform: scaleX(.65); opacity: 1; }
    100% { transform: scaleX(1);   opacity: .15; }
}

/* ---------- 热点信息卡：玻璃拟态 ---------- */
.vr-hotspot-card {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9070;
    width: min(360px, 86vw);
    background: var(--vx-glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
    border: 1px solid var(--vx-stroke-hi);
    border-radius: 18px;
    box-shadow: var(--vx-shadow);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    /* 只过渡透明度/可见性；入场位移交给动画，避免与内联 transform 打架 */
    transition: opacity .3s var(--vx-ease), visibility .3s var(--vx-ease);
    color: var(--vx-ink);
    font-family: inherit;
}
.vr-hotspot-card.show { opacity: 1; visibility: visible; }
.vr-hotspot-card.vrx-card-in { animation: vrx-card-in .42s var(--vx-ease) both; }
@keyframes vrx-card-in {
    0%   { opacity: 0; transform: translate(-50%, -46%) scale(.94); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.vr-hotspot-card-img {
    display: block;
    width: 100%;
    height: 184px;
    object-fit: cover;
    background: rgba(255, 255, 255, .04);
}
/* 空 src（文本/外链热点）时隐藏图片占位，避免破版 */
.vr-hotspot-card-img[src=""],
.vr-hotspot-card-img:not([src]) { display: none; }

.vr-hotspot-card-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: .2px;
    padding: 15px 16px 4px;
    color: var(--vx-ink);
}
.vr-hotspot-card-desc {
    font-size: 13.5px;
    line-height: 1.58;
    padding: 0 16px 14px;
    color: var(--vx-muted);
    max-height: 132px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.vr-hotspot-card-desc:empty { display: none; }

.vr-hotspot-card-close {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 2;
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--vx-stroke);
    background: rgba(8, 16, 38, .55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--vx-ink);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s var(--vx-ease), transform .2s var(--vx-ease);
}
.vr-hotspot-card-close:hover {
    background: rgba(28, 52, 110, .82);
    transform: scale(1.08) rotate(90deg);
}

.vr-hotspot-card-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    padding: 11px 0;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--vx-accent), var(--vx-accent-2));
    box-shadow: 0 8px 22px rgba(47, 107, 255, .35);
    transition: transform .18s var(--vx-ease), box-shadow .2s var(--vx-ease);
}
.vr-hotspot-card-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(47, 107, 255, .52);
}
.vr-hotspot-card-btn:active { transform: translateY(0); }

/* 卡片内文字选中也用品牌色，统一观感 */
.vr-hotspot-card ::selection { background: rgba(47, 107, 255, .4); }

@media (prefers-reduced-motion: reduce) {
    .vr-hotspot-card.vrx-card-in { animation: none; }
    .vrx-loadbar.vrx-loading { animation: none; opacity: 1; }
}

/* =============================================================================
   VRX Marker · 热点标记本体（切片 #4, 2026-10-09）
   规范：design_tokens.md §2/§3/§5 —— 同一形状 + 分类图标 + 语义色
   红线：hover/active 一律用独立属性 translate/scale，**不写 transform** ——
        历史坑① `.reveal.in{transform:none}` 与 hover 同特异性靠后压死位移；
        历史坑② `animation:...forwards` 的填充值压 transform。独立属性可免疫。
   ========================================================================== */

:root {
    --vx-mk-size:    44px;
    --vx-mk-size-m:  40px;                         /* 触屏 */
    --vx-mk-icon:    24px;
    --vx-mk-shadow:  0 6px 18px rgba(2, 8, 24, .45);
    --vx-mk-gap:     10px;
    --vx-mk-z:       9060;                         /* 低于卡片 9070，高于 HUD */
    --vx-mk-accent:  var(--vx-accent-2);
}

.vrx-marker {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--vx-mk-size);
    height: var(--vx-mk-size);
    border-radius: 50%;
    background: var(--vx-glass);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    border: 1px solid var(--vx-stroke-hi);
    box-shadow: var(--vx-mk-shadow);
    color: var(--vx-mk-accent);
    z-index: var(--vx-mk-z);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: translate .22s var(--vx-ease), scale .22s var(--vx-ease),
                border-color .22s var(--vx-ease), box-shadow .22s var(--vx-ease);
}
.vrx-marker > svg,
.vrx-marker > img {
    display: block;
    width: var(--vx-mk-icon);
    height: var(--vx-mk-icon);
    pointer-events: none;
    stroke: currentColor;
}
.vrx-marker.vrx-marker-in { animation: vrx-marker-in .4s var(--vx-ease) both; }
@keyframes vrx-marker-in {
    from { opacity: 0; scale: .72; }
    to   { opacity: 1; scale: 1; }
}

/* 三态：hover / active —— 仅独立属性，绝不写 transform */
.vrx-marker:hover {
    translate: 0 -2px;
    scale: 1.06;
    border-color: var(--vx-mk-accent);
    box-shadow: 0 10px 26px rgba(2, 8, 24, .55);
}
.vrx-marker:active { translate: 0 0; scale: .94; }
.vrx-marker:focus-visible { outline: 2px solid var(--vx-mk-accent); outline-offset: 3px; }

/* 11 类语义色（design_tokens §3） */
.vrx-marker--scene   { --vx-mk-accent: #27C6E8; }
.vrx-marker--link    { --vx-mk-accent: #7CC4FF; }
.vrx-marker--image   { --vx-mk-accent: #9AE6B4; }
.vrx-marker--text    { --vx-mk-accent: #FFD479; }
.vrx-marker--voice   { --vx-mk-accent: #C4A0FF; }
.vrx-marker--imgtext { --vx-mk-accent: #FFB38A; }
.vrx-marker--obj     { --vx-mk-accent: #8FD3FF; }
.vrx-marker--product { --vx-mk-accent: #FF8FA3; }
.vrx-marker--redpack { --vx-mk-accent: #FF6B6B; }
.vrx-marker--video   { --vx-mk-accent: #FF9F6B; }
.vrx-marker--polygon { --vx-mk-accent: #A0E7E5; }

/* 呼吸圈：可跳转/未读提示，默认不开启，加 --pulse 才亮 */
.vrx-marker--pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--vx-mk-accent);
    opacity: .55;
    pointer-events: none;
    animation: vrx-marker-pulse 2.4s var(--vx-ease) infinite;
}
@keyframes vrx-marker-pulse {
    0%   { scale: .9;  opacity: .6; }
    70%  { scale: 1.35; opacity: 0; }
    100% { scale: 1.35; opacity: 0; }
}

/* tooltip：居中用自身 translate，与父级 hover 位移互不干扰 */
.vrx-marker__tip {
    position: absolute;
    bottom: calc(100% + var(--vx-mk-gap));
    left: 50%;
    translate: -50% 0;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(8, 16, 36, .82);
    border: 1px solid var(--vx-stroke);
    color: var(--vx-ink);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s var(--vx-ease), visibility .2s;
    z-index: calc(var(--vx-mk-z) + 1);
}
.vrx-marker:hover .vrx-marker__tip,
.vrx-marker:focus-visible .vrx-marker__tip { opacity: 1; visibility: visible; }

/* 原生 krpano 热点 tooltip 浮层（由 vr-immersive.js 的 __vrHotspotTip 驱动）
   VRX-TIP_V2：品牌化 + 富信息（类型徽标 + 名称）+ 边缘夹取由 JS 负责 */
.vrx-marker-tip {
    position: fixed;
    left: 50%;
    bottom: 84px;
    translate: -50% 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(280px, 82vw);
    padding: 8px 14px 8px 9px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(14, 24, 52, .92), rgba(8, 16, 36, .9));
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(122, 162, 255, .38);
    color: var(--vx-ink);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .48), 0 0 0 1px rgba(90, 145, 252, .12) inset;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 9065;
    transform-origin: 50% 100%;
    transition: opacity .18s var(--vx-ease), visibility .18s, translate .18s var(--vx-ease), scale .18s var(--vx-ease);
}
.vrx-marker-tip.show { opacity: 1; visibility: visible; translate: -50% 0; scale: 1; }
/* 类型徽标：与 PNG 图标同一语义色，8px 小圆点 + 文字标签 */
.vrx-marker-tip__dot {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    line-height: 1;
    color: #fff;
    background: var(--mkc, #5A91FC);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .22), 0 2px 8px rgba(0, 0, 0, .35);
}
.vrx-marker-tip__label { font-weight: 600; letter-spacing: .2px; }
.vrx-marker-tip__name {
    color: rgba(226, 236, 255, .72);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vrx-marker-tip__sep { color: rgba(226, 236, 255, .32); }
/* 11 类语义色（与 tour.xml / 图标 PNG 严格一致） */
.vrx-marker-tip[data-type="scene"]    { --mkc: #22D3EE; }
.vrx-marker-tip[data-type="link"]     { --mkc: #7CC4FF; }
.vrx-marker-tip[data-type="image"]    { --mkc: #9AE6B4; }
.vrx-marker-tip[data-type="text"]     { --mkc: #FFD479; }
.vrx-marker-tip[data-type="voice"]    { --mkc: #C4A0FF; }
.vrx-marker-tip[data-type="imgtext"]  { --mkc: #FFB38A; }
.vrx-marker-tip[data-type="obj"]      { --mkc: #8FD3FF; }
.vrx-marker-tip[data-type="product"]  { --mkc: #FF8FA3; }
.vrx-marker-tip[data-type="redpack"]  { --mkc: #FF6B6B; }
.vrx-marker-tip[data-type="video"]    { --mkc: #FF9F6B; }
.vrx-marker-tip[data-type="polygon"]  { --mkc: #A0E7E5; }

@media (pointer: coarse) {
    .vrx-marker { width: var(--vx-mk-size-m); height: var(--vx-mk-size-m); }
    .vrx-marker:hover { translate: 0 0; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .vrx-marker.vrx-marker-in { animation: none; }
    .vrx-marker:hover, .vrx-marker:active { translate: 0 0; scale: 1; }
    .vrx-marker--pulse::after { animation: none; }
}
@media (prefers-contrast: more) {
    .vrx-marker { border-width: 2px; background: rgba(10, 20, 44, .82); }
}