/**
 * 启动广告 — 底图 + 热区（桌面）与手机竖版
 * 热区百分比请对照 images/ 下的底图在浏览器里微调。
 */

.ref-promo-map {
    position: relative;
    width: 100%;
    overflow: visible;
    line-height: 0;
}

/* 仅裁剪底图圆角；外层 visible 以便下载按钮悬在角外；桌面端作浮层定位参照 */
.ref-promo-map__clip {
    border-radius: 5px;
    overflow: hidden;
    line-height: 0;
}

.ref-promo-map--desktop .ref-promo-map__clip {
    position: relative;
    /* 勿 hidden：悬停 scale(2) 与换图会被裁掉，看起来像「没显示」 */
    overflow: visible;
}

.ref-promo-map--desktop .ref-promo-map__base {
    border-radius: 5px;
}

.ref-promo-map--mobile {
    position: relative;
}

.ref-promo-map--mobile .ref-promo-map__clip {
    border-radius: 5px;
    background: #1a0a14;
}

.ref-promo-map__base {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* 电脑端：底图撑开尺寸；四块绝对定位叠在上方（不占流），热区在浮层之下 */
.ref-promo-map--desktop .ref-promo-tiles-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    /* auto：整块可命中四块浮层；勿用 none，部分浏览器下子项悬停异常 */
    pointer-events: auto;
}

.ref-promo-map--desktop .ref-promo-tile-float {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: auto;
    transform: translateZ(0) scale3d(1, 1, 1);
    transform-origin: center center;
    transition: none;
    will-change: auto;
}

.ref-promo-map--desktop .ref-promo-tile-float:hover,
.ref-promo-map--desktop .ref-promo-tile-float.ref-promo-tile-float--hover {
    overflow: visible;
    z-index: 30;
}

/* 四块 left/top/width/height 由内联 style 输出（见 ref-popup-html-desktop.php 数组） */

.ref-promo-map--desktop .ref-promo-tile-float .ref-promo-tile-zoom {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    line-height: 0;
    /* 缩放整块 .ref-promo-tile-float，避免内层 transform 被父级 overflow 裁切导致「看不出放大」 */
    transform: none;
    transition: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.ref-promo-map--desktop .ref-promo-tile-float .ref-promo-tile-zoom__small {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.2s ease-out;
}

.ref-promo-map--desktop .ref-promo-tile-float .ref-promo-tile-zoom__large {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
}

/* 整块浮层悬停（:hover + JS 类，避免叠层/指针事件下无响应） */
.ref-promo-map--desktop .ref-promo-tile-float:hover .ref-promo-tile-zoom__small,
.ref-promo-map--desktop .ref-promo-tile-float.ref-promo-tile-float--hover .ref-promo-tile-zoom__small {
    opacity: 0;
}

.ref-promo-map--desktop .ref-promo-tile-float:hover .ref-promo-tile-zoom__large,
.ref-promo-map--desktop .ref-promo-tile-float.ref-promo-tile-float--hover .ref-promo-tile-zoom__large {
    opacity: 1;
}

/* 放大：由 ref-popup-html.js 给整块 .ref-promo-tile-float 写 transform（避免内层被 overflow 裁掉） */
.ref-promo-map--desktop .ref-promo-tile-float:hover .ref-promo-tile-zoom,
.ref-promo-map--desktop .ref-promo-tile-float.ref-promo-tile-float--hover .ref-promo-tile-zoom {
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .ref-promo-map--desktop .ref-promo-tile-float .ref-promo-tile-zoom__small,
    .ref-promo-map--desktop .ref-promo-tile-float .ref-promo-tile-zoom__large {
        transition: none;
    }

    .ref-promo-map--desktop .ref-promo-tile-float:hover .ref-promo-tile-zoom__small,
    .ref-promo-map--desktop .ref-promo-tile-float.ref-promo-tile-float--hover .ref-promo-tile-zoom__small {
        opacity: 1;
    }

    .ref-promo-map--desktop .ref-promo-tile-float:hover .ref-promo-tile-zoom__large,
    .ref-promo-map--desktop .ref-promo-tile-float.ref-promo-tile-float--hover .ref-promo-tile-zoom__large {
        opacity: 0;
    }

    .ref-promo-map--desktop .ref-promo-tile-float,
    .ref-promo-map--desktop .ref-promo-tile-float:hover,
    .ref-promo-map--desktop .ref-promo-tile-float.ref-promo-tile-float--hover {
        transform: translateZ(0) scale3d(1, 1, 1);
    }

    .ref-promo-map--desktop .ref-promo-tile-float .ref-promo-tile-zoom,
    .ref-promo-map--desktop .ref-promo-tile-float:hover .ref-promo-tile-zoom,
    .ref-promo-map--desktop .ref-promo-tile-float.ref-promo-tile-float--hover .ref-promo-tile-zoom {
        transform: none;
        transition: none;
        overflow: hidden;
    }

    .ref-promo-map--desktop .ref-promo-tile-float:hover,
    .ref-promo-map--desktop .ref-promo-tile-float.ref-promo-tile-float--hover {
        overflow: hidden;
        z-index: auto;
    }
}

/* 右下角 App 下载（相对底图下沿、右沿外扩，勿用 top 否则会跑到右上） */
.ref-promo-map--desktop .ref-promo-download {
    position: absolute;
    right: -40px;
    bottom: -40px;
    z-index: 9999;
    padding: 5px;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    text-decoration: none;
    outline: none;
}

.ref-promo-map--desktop .ref-promo-download img {
    display: block;
    width: 130px;
    height: 130px;
    object-fit: contain;
    cursor: pointer;
}

.ref-promo-map--desktop .ref-promo-download[data-ref-download-placeholder="1"] {
    cursor: pointer;
}

/* 透明热区：桌面（须低于四块浮层 overlay，否则抢指针） */
.ref-promo-map--desktop .ref-hot {
    position: absolute;
    z-index: 1;
    display: block;
    box-sizing: border-box;
    border-radius: 8px;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.ref-promo-map--desktop .ref-hot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ref-promo-map--desktop .ref-hot:hover {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
    background-color: rgba(255, 255, 255, 0.06);
}

/* 以下为按版图大致位置估算，请按需修改 */
.ref-promo-map--desktop .ref-hot--game {
    left: 58%;
    top: 8%;
    width: 32%;
    height: 26%;
}

.ref-promo-map--desktop .ref-hot--video {
    left: 44%;
    top: 36%;
    width: 38%;
    height: 22%;
}

.ref-promo-map--desktop .ref-hot--photo {
    left: 50%;
    top: 58%;
    width: 22%;
    height: 14%;
}

.ref-promo-map--desktop .ref-hot--manga {
    left: 68%;
    top: 66%;
    width: 26%;
    height: 24%;
}

/* 手机：竖版海报 + 叠放 APP 下载条 */
.ref-promo-map--mobile .ref-promo-download {
    position: absolute;
    right: 15px;
    bottom: 10px;
    z-index: 8;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    text-decoration: none;
    outline: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

.ref-promo-map--mobile .ref-promo-download img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(88vw, 320px);
    max-height: 72px;
    object-fit: contain;
    cursor: pointer;
}

.ref-promo-map--mobile .ref-promo-download[data-ref-download-placeholder="1"] {
    cursor: pointer;
}