/* 进入机台后的html(显示机台iframe和顶部ui)布局css */

/* 进入机台后显示的根元素，有两个子元素slot-iframe和slot-top-ui */
.slot-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-slot-iframe);
    display: none;
    background-color: transparent;
    overflow: hidden;
}

.slot-container.show {
    display: block;
}

@media (orientation: portrait) {
    .slot-container.show {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 机台iframe：铺满 .slot-layer，直接接收触摸 */
.slot-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    pointer-events: auto;
    /* 明确置于最底层, 并提升为独立合成层, 配合 cocos 的合成层设置,
       修复 Safari(M1) 上 iframe 合成层错误盖住 cocos canvas 的问题。 */
    z-index: var(--z-slot-iframe);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

@media (orientation: portrait) {
    .slot-iframe {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 100%;
        /* 竖屏下限制最大高度为 16:9 比例 (100vw * 16 / 9)
           防止全面屏(如 iPhone 17 19.5:9 比例)在 PWA 独立全屏下因高度过大触发机台按高度 Cover 等比放大导致左右内容被裁切 */
        max-height: calc(100vw * 16 / 9);
        height: 100%;
        margin: auto;
    }
}


/* 机台iframe上层的顶部ui
 * 设计: 元素长宽比固定 1478 : 94, 显示于设计分辨率 1624 : 750。
 * 缩放系数由 slot.js 的 layoutSlotTopUI() 计算并写入 --slot-top-ui-scale。
 * transform-origin 设为顶部水平居中, 保证缩放后仍贴顶且水平居中。
 */
.slot-top-ui {
    --slot-top-ui-scale: 1;
    position: absolute;
    left: 50%;
    top: 0;
    width: 1478px;   /* 设计宽度 */
    height: 94px;    /* 设计高度, 与宽度构成 1478:94 固定比例 */
    z-index: 2;
    background-color: transparent;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    transform-origin: top center;
    transform: translateX(-50%) scale(var(--slot-top-ui-scale));
    display: block;
}

/* 机台竖屏顶部 UI（默认横屏隐藏） */
.slot-top-ui-portrait {
    display: none;
}

/* 竖屏下：隐藏横屏 UI，显示竖屏 UI (宽度铺满屏幕，高度 150px) */
@media (orientation: portrait) {
    .slot-top-ui {
        display: none !important;
    }

    .slot-top-ui-portrait {
        display: block !important;        
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: min(100px, calc(60px + env(safe-area-inset-top, 0px)));
        z-index: 2;
        background-color: transparent;
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none;
        overflow: hidden;
    }
}

/* 竖屏顶部 UI 背景：从顶部 rgba(0,0,0,0.3) 到底部 rgba(0,0,0,0.7) */
.slot-top-ui-portrait .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
}

/* 退出按钮：靠右靠下 10px，图片 images/return.png */
.slot-top-ui-portrait .exit {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: url('../images/return.png') no-repeat center center;
    background-size: contain;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    z-index: 3;
}

.slot-top-ui-portrait .exit:active {
    filter: brightness(0.9);
}

/* 购买按钮：在 exit 按钮左侧，图片 images/buy_portrait.png */
.slot-top-ui-portrait .buy {
    position: absolute;
    right: 52px;
    bottom: 10px;
    width: 89px;
    height: 36px;
    padding: 0;
    border: 0;
    background: url('../images/buy_portrait.png') no-repeat center center;
    background-size: contain;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    z-index: 3;
}

.slot-top-ui-portrait .buy:active {
    filter: brightness(0.9);
}

/* jackpot 点击热区 */
.slot-top-ui-portrait .jackpot-btn {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 190px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    z-index: 3;
}

/* jackpot 类型 icon：靠左靠下 10px */
.slot-top-ui-portrait .jackpot-icon {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 73px;
    height: 36px;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    display: none;
    z-index: 2;
}

.slot-top-ui-portrait .jackpot-icon.active {
    display: block;
}

/* jackpot 信息背景图：在 jackpot-icon 右侧 */
.slot-top-ui-portrait .jackpot-info-bg {
    position: absolute;
    left: 86px;
    bottom: 10px;
    width: 114px;
    height: 36px;
    object-fit: fill;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.slot-top-ui-portrait .jackpot-joined {
    position: absolute;
    left: 180px;
    bottom: 18px;
    width: 21px;
    height: 27px;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* jackpot 奖励金额文本 */
.slot-top-ui-portrait .jackpot-reward {
    position: absolute;
    left: 143px;
    transform: translateX(-50%);
    bottom: 27px;
    font-family: "Montserrat", "SF Pro Display", "Helvetica Neue", "PingFang SC", Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-align: center;
    color: #00ff00;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    z-index: 2;
}

/* jackpot 状态文本 */
.slot-top-ui-portrait .jackpot-status {
    position: absolute;
    left: 143px;
    transform: translateX(-50%);
    bottom: 14px;
    font-family: "Montserrat", "SF Pro Display", "Helvetica Neue", "PingFang SC", Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-align: center;
    color: #00ff00;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    z-index: 2;
}

/* 两个面板容器同样不拦截触摸, 只有内部交互元素接收点击 */
.slot-top-ui .show-detail,
.slot-top-ui .show-short {
    pointer-events: none;
}

/* 顶部按钮通用样式 */
.slot-top-ui .slot-top-btn {
    height: 56px;
    min-width: 88px;
    padding: 0 16px;
    border: 0;
    border-radius: 28px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.slot-top-ui .slot-top-btn.recharge {
    background: linear-gradient(180deg, #ffb347 0%, #ff7e00 100%);
}

.slot-top-ui .slot-top-btn.withdraw {
    background: linear-gradient(180deg, #4fd1a5 0%, #009e73 100%);
}

.slot-top-ui .slot-top-btn:active {
    filter: brightness(0.9);
}

/* 切换动画：面板滑入/滑出（0.3s，ease-in-out 先慢中快后慢，进出更自然）
 * .slot-anim   : 开启过渡
 * .slot-hide-up: 向上滑出屏幕上方并淡出
 */
.slot-top-ui .show-detail,
.slot-top-ui .show-short {
    will-change: transform, opacity;
}
.slot-top-ui .slot-anim {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.slot-top-ui .slot-hide-up {
    transform: translate(-50%, -120%) !important;
    opacity: 0;
}

/* 顶部ui显示detail：在 .slot-top-ui 内水平居中 */
.slot-top-ui .show-detail {
    position: absolute;

    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    width: 197.06rem;
    height: 12.53rem;
    background-color: transparent;
    border: 0;
    padding: 0;
    display: none;
}

/* 顶部ui背景图：与元素同尺寸 */
.slot-top-ui .bg {
    position: absolute;
    top: 0%;
    left: 50%;
    border: 0;
    padding: 0;
    transform: translateX(-50%);
    width: 197rem;
    height: 12.53rem;
    background: url('../images/top_ui_bg.png') no-repeat center center;
    background-size: 100% 100%;
    pointer-events: auto;
}

.slot-top-ui .buy {
    position: absolute;
    left: 37.6%;
    top: 50%;
    transform: translateY(-50%);
    width: 24.26rem;
    height: 11.22rem;
    padding: 0;
    border: 0;
    background: url('../images/buy.png') no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.slot-top-ui .redeem {
    position: absolute;
    left: 49.9%;
    top: 50%;
    transform: translateY(-50%);
    width: 24.26rem;
    height: 11.22rem;
    padding: 0;
    border: 0;
    background: url('../images/redeem.png') no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.slot-top-ui .challenge {
    position: absolute;
    left: 128rem;
    top: 50%;
    transform: translateY(-50%);
    width: 9.3rem;
    height: 8.7rem;
    padding: 0;
    border: 0;
    background: url('../images/challenge.png') no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

/* 退出按钮：使用 return.png 图片，尺寸用 rem 适配（基于 750 设计高度：52/750*100 = 6.9333rem） */
.slot-top-ui .exit {
    position: absolute;
    right: 8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 7.6rem;
    height: 7.6rem;
    padding: 0;
    border: 0;
    background: url('../images/return.png') no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

/* 显示短小的top ui */
.slot-top-ui .switch-to-short {
    position: absolute;
    left: 5rem;
    top: 50%;
    transform: translateY(-50%) scaleY(-1);
    width: 7.6rem;

    height: 7.6rem;
    padding: 0;
    border: 0;
    background: url('../images/down.png') no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

/* jackpot 类型icon 图片 (预加载所有类型, 通过 .active 控制显隐，避免频繁网络请求) */
.slot-top-ui .jackpot-icon {
    position: absolute;
    left: 15rem;
    top: 50%;
    transform: translateY(-50%);
    width: 19rem;
    height: 9.5rem;
    object-fit: contain;   /* 保持图片比例，避免拉伸变形 */
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    display: none;
}

.slot-top-ui .jackpot-icon.active {
    display: block;
}

.slot-top-ui .jackpot-joined {
    position: absolute;
    left: 60rem;
    top: 1rem;
    width: 7.2rem;
    height: 9.2rem;
    object-fit: contain;   /* 保持图片比例，避免拉伸变形 */
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.slot-top-ui .jackpot-info-bg {
    position: absolute;
    left: 35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 32.27rem;
    height: 10.13rem;
    object-fit: contain;   /* 保持图片比例，避免拉伸变形 */
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 该种类型的jackpot对应的奖励文本（金额，内容后续 JS 动态修改）*/
.slot-top-ui .jackpot-reward {
    position: absolute;
    left: 51rem; 
    transform: translateX(-50%);
    top: 2.2rem;
    font-family: "Montserrat", "SF Pro Display", "Helvetica Neue", "PingFang SC", Arial, sans-serif;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1rem;
    white-space: nowrap;
    text-align: center;
    color: #00ff00;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.slot-top-ui .jackpot-status {
    position: absolute;
    left: 51rem; 
    transform: translateX(-50%);
    top: 7.5rem;
    font-family: "Montserrat", "SF Pro Display", "Helvetica Neue", "PingFang SC", Arial, sans-serif;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1rem;
    white-space: nowrap;
    text-align: center;
    color: #00ff00;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 顶部ui显示short简短 */
.slot-top-ui .show-short {
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 0;
    padding: 0;
}

/* 切换显示short和detail */
.slot-top-ui .switch {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 7.6rem;
    height: 7.6rem;
    padding: 0;
    border: 0;
    background: url('../images/down.png') no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.slot-top-ui .jackpot-btn {
    position: absolute;
    left: 15rem;
    top: 0rem;
    width: 55rem;
    height: 95%;
    padding: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}


.slot-top-ui .jackpot-icon-big {
    position: absolute;
    left: 10rem;
    top: 0rem;
    width: 23.46rem;
    height: 20rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.slot-top-ui .jackpot-joined-big {
    position: absolute;
    left: 18rem;
    top: 0rem;
    width: 10.26rem;
    height: 5.33rem;
    object-fit: contain;   /* 保持图片比例，避免拉伸变形 */
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* jackpot-tip 容器：放在 jackpot-icon-big 右边缘 (10rem + 23.46rem) 再 + 100px(13.33rem) = 46.79rem，y轴一致 (top: 0rem) */
.slot-top-ui .jackpot-tip-wrap {
    position: absolute;
    left: 33.2rem;
    top: 0.5rem;
    width: 51.07rem;
    height: 15.2rem;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    display: none;
}

.slot-top-ui .jackpot-tip-wrap .jackpot-tip {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.slot-top-ui .jackpot-bet {
    position: absolute;
    left: 38.5rem;
    top: 8.5rem;
    transform: translateY(-50%);
    font-family: "Montserrat", "SF Pro Display", "Helvetica Neue", "PingFang SC", Arial, sans-serif;
    font-size: 2.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1rem;
    white-space: nowrap;
    text-align: center;
    color: #00ff00;
    -webkit-text-stroke: 1px #000000;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* tip 关闭按钮：位于 img 右上方 top=0, right=0 */
.slot-top-ui .jackpot-tip-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 6.13rem;
    height: 6.13rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slot-top-ui .jackpot-tip-close img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.slot-top-ui .jackpot-tip-close:active {
    filter: brightness(0.9);
}

/* 内嵌 img 承载 jackpot 图标，预加载所有类型, 通过 .active 控制显隐 */
.slot-top-ui .jackpot-icon-big .jackpot-icon-big-img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* 保持图片比例，避免拉伸变形 */
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    display: none;
}

.slot-top-ui .jackpot-icon-big .jackpot-icon-big-img.active {
    display: block;
}

/* 该种类型的jackpot对应的奖励文本（金额，内容后续 JS 动态修改）*/
.slot-top-ui .jackpot-reward-big {
    position: absolute;
    left: 22rem; 
    transform: translate(-50%, -50%);
    top: 13.5rem;
    font-family: "Montserrat", "SF Pro Display", "Helvetica Neue", "PingFang SC", Arial, sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1rem;
    white-space: nowrap;
    text-align: center;
    color: #00ff00;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}


.slot-top-ui .jackpot-status-big {
    position: absolute;
    left: 22rem; 
    transform: translate(-50%, -50%);
    top: 17.6rem;
    font-family: "Montserrat", "SF Pro Display", "Helvetica Neue", "PingFang SC", Arial, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1rem;
    white-space: nowrap;
    text-align: center;
    color: #ffffff;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.slot-top-ui .exit:active {
    filter: brightness(0.9);
}

/* 全服跑马灯通知：屏幕水平居中，距顶部 14rem
 * 内部用 flex 让「文本 + catch 按钮」作为整体水平垂直居中(自动布局)，
 * 背景图独立绝对定位铺满，不参与 flex 排布。
 */
.detail-marquee {
    position: fixed;
    left: 50%;
    top: 14rem;
    width: 128rem;
    height: 8rem;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;

    /* 默认隐藏，调用 Slots.showMarquee 后显示，10 秒后自动隐藏 */
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}


/* 跑马灯背景图：铺满父节点(128rem x 8rem)，作为背景层不参与 flex 布局 */
.detail-marquee-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
}

/* 跑马灯文本：作为 flex 子项，内容由 slot.js 的 showMarquee 动态拼接 */
.detail-marquee-text {
    position: relative;
    font-family: "Montserrat", "SF Pro Display", "Helvetica Neue", "PingFang SC", Arial, sans-serif;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    color: #ffffff;
    -webkit-user-select: none;
    user-select: none;
}

.detail-marquee-catch {
    position: relative;
    flex: none;
    margin-left: 2rem;
    width: 21.86rem;
    height: 8rem;
    padding: 0 0 1rem 0;
    border: 0;

    background: url('../images/btn.png') no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;

    /* 文字样式 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", "SF Pro Display", "Helvetica Neue", "PingFang SC", Arial, sans-serif;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    color: #ffffff;
    /* 黑色描边: 优先 text-stroke，text-shadow 作为兼容兜底 */
    -webkit-text-stroke: 0.03rem #000000;
    text-shadow:
        -0.03rem -0.03rem 0 #000,
         0.03rem -0.03rem 0 #000,
        -0.03rem  0.03rem 0 #000,
         0.03rem  0.03rem 0 #000;
}

/* short 面板跑马灯通知：背景图与文本都在父节点水平垂直居中，文本内容同 detail-marquee-text 一起更新 */
.short-marquee {
    position: absolute;
    left: 35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 81.86rem;
    height: 12.8rem;
    z-index: 10;
    pointer-events: none;
    background-color: transparent;

    /* 默认隐藏，调用 Slots.showMarquee 后显示，10 秒后自动隐藏 */
    display: none;
}


/* short 跑马灯背景图：父节点正中，81.86rem x 12.8rem */
.short-marquee-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 81.86rem;
    height: 12.8rem;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
}

/* short 跑马灯文本：父节点正中，内容由 slot.js 的 showMarquee 动态拼接(同 detail-marquee-text) */
.short-marquee-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "Montserrat", "SF Pro Display", "Helvetica Neue", "PingFang SC", Arial, sans-serif;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    color: #ffffff;
    -webkit-user-select: none;
    user-select: none;
}