* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: auto;
    /* 防止输入法弹出时页面缩放 */
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* pc */
@media screen and (min-width: 750px) {
    /* 外层整体盒子 */
    .wk-box {
        position: relative;
        width: 100%;
        max-width: 750px;
        aspect-ratio: 1 / 1.8;
        margin: 0 auto;
        background-image: url(../image/bg.jpg);
        background-size: 100% 100%;
    }
}

/* 手机端 */
@media screen and (max-width: 750px) {

    /* 外层整体盒子 */
    .wk-box {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background-image: url(../image/bg.jpg);
        background-size: 100% 100%;
    }
}


/* ............................................................ */

/* 顶部收藏 */
.collect {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2%;
}

/* 左侧收藏 */
.collect-img {
    width: 50%;
    padding-left: 5%;
}

/* 右侧添加桌面 */
#addDesktop {
    width: 26%;
    padding-right: 3%;
}

/* ............................................................ */

/* 域名 */
#domainName {
    display: none;
    position: relative;
    width: 100%;
    margin-top: 5%;
    text-align: center;
}

/* 域名背景图片 */
.nameBg {
    width: 90%;
}

/* 域名gif图片 */
.name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    width: 40%;
}

/* ............................................................ */

/* 邀请码 */
#inviteCode {
    display: none;
    position: relative;
    width: 100%;
    margin-top: 4%;
    text-align: center;
    line-height: 0;
    font-size: 0;
}

/* 邀请码背景图片 */
.inviteBg {
    width: 90%;
}

/* 邀请码内容 */
.copy-content {
    position: absolute;
    width: 40%;
    height: 80%;
    top: 50%;
    left: 66%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* 8位邀请码数值 */
#codetext {
    font-size: clamp(24px, 6vw, 45px);
    font-weight: 500;
    color: #EDB98A !important;
}

/* 防止Firefox移动端将codetext识别为链接 */
#codetext *{
    color: #EDB98A !important;
    text-decoration: none !important;
}

/* 邀请码复制按钮 */
#copyBtn {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 邀请码复制按钮图片 */
#copyBtn img {
    padding-top: 5px;
    width: 70%;
    height: 70%;
}

/* 复制成功弹窗 */
#clip-board {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    transition: all 800ms;
    pointer-events: none;
}

#clip-board img {
    width: 100%;
}

/* ............................................................ */

/* 手机图 */
.phone {
    width: 80%;
    margin: 0 auto;
}

.phone img {
    width: 100%;
}

/* ............................................................ */

/* 底部 */
.footer {
    position: absolute;
    width: 92%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* 每一个模块 */
.footer-item {
    position: relative;
    margin-bottom: 1.2%;
}

/* 每个模块背景图 */
.item-img {
    width: 100%;
}

/* 模块1中的app域名 */
.nameApp {
    position: absolute;
    width: 23%;
    top: 46%;
    left: 16%;
}

/* 模块1中的bet域名 */
.nameBet {
    position: absolute;
    width: 23%;
    top: 83%;
    left: 16%;
}

/* 模块1中的app按钮 */
.one-app-btn {
    position: absolute;
    width: 50%;
    top: 34%;
    right: 3%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 模块1中的app按钮图片 */
.one-app-btn img {
    width: 36%;
    padding: 0 2.5%;
}

/* 模块1中的bet按钮 */
.one-bet-btn {
    position: absolute;
    width: 50%;
    top: 68.8%;
    right: 3%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 模块1中的bet按钮图片 */
.one-bet-btn img {
    width: 36%;
    padding: 0 2.5%;
}

/* 模块2中的复制id按钮 */
.two-id-btn {
    position: absolute;
    width: 12%;
    bottom: 9%;
    right: 36%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 模块2中的复制id按钮图片 */
.two-id-btn img {
    width: 100%;
}

/* 模块2中的咨询按钮 */
.two-kefu-btn {
    position: absolute;
    width: 18%;
    top: 32%;
    right: 4%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 模块2中的咨询按钮图片 */
.two-kefu-btn img {
    width: 100%;
}

/* 模块2中的下载按钮 */
.two-download-btn {
    position: absolute;
    width: 18%;
    top: 68%;
    right: 4%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 模块2中的下载按钮图片 */
.two-download-btn img {
    width: 100%;
}

/* 模块3中的浏览器下载按钮 */
.three-browser-btn {
    position: absolute;
    width: 100%;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 模块3中的浏览器下载按钮图片 */
.three-browser-btn img {
    width: 14%;
    padding: 0 2.5%;
}

/* ............................................................ */

/* 浏览器引导弹窗 */
/* 遮罩层 */
#guide {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

/* 弹窗内容 */
.guide-content {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
}

/* 弹窗图片 */
.guideImg {
    width: 100%;
}

/* 关闭按钮 */
#closeGuide {
    position: absolute;
    width: 8%;
    top: 5%;
    right: 5%;
    z-index: 1002;
}

/* 复制链接按钮 */
#copyLink {
    position: absolute;
    width: 90%;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
}

/* ............................................................ */

/* 点击添加到主屏幕弹窗 */
/* 遮罩层 */
#addDesktopModel {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* 弹窗内容 */
.addDesktopContent {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
}

/* 弹窗图片 */
#addDesktopImg {
    width: 100%;
}

/* 关闭按钮 */
#closeDesktop {
    position: absolute;
    width: 8%;
    top: 5%;
    right: 5%;
    z-index: 1002;
}

/* ............................................................ */

/* 点击下载按钮打开弹窗 */
/* 遮罩层 */
#downloadModal {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* 弹窗内容 */
#downloadContent {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
}

/* 弹窗图片 */
#downloadModleImg {
    width: 100%;
}

/* 关闭按钮 */
#closeDownload {
    position: absolute;
    width: 8%;
    top: 4%;
    right: 5%;
}

/* 保存图片按钮 */
#saveImg {
    position: absolute;
    width: 18%;
    right: 10%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 主域名 */
#mainDomain {
    position: absolute;
    width: 58%;
    right: 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 主域名文本 */
.mainDomainText {
    font-size: clamp(24px, 6vw, 45px);
    font-weight: 500;
    color: #EDB98A;
}

/* 主域名复制按钮 */
#mainCopyBtn {
    padding-top: 4%;
    width: 30.5%;
}

/* 副域名1 */
#oneDomain {
    position: absolute;
    width: 60%;
    right: 12%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 副域名1文本 */
.oneDomainText {
    font-size: clamp(16px, 4.2vw, 35px);
    font-weight: 400;
    color: #fff;
    letter-spacing: 1px;
    padding-bottom: 3px;
}

/* 副域名1复制按钮 */
#oneCopyBtn {
    padding-bottom: 0.5%;
    width: 27%;
}

/* 副域名2 */
#twoDomain {
    position: absolute;
    width: 60%;
    right: 12%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 副域名2文本 */
.twoDomainText {
    font-size: clamp(16px, 4.2vw, 35px);
    font-weight: 400;
    color: #fff;
    letter-spacing: 1px;
}

/* 副域名2复制按钮 */
#twoCopyBtn {
    padding-top: 1.5%;
    width: 27%;
}

/* 副域名3 */
#threeDomain {
    position: absolute;
    width: 60%;
    right: 12%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 副域名3文本 */
.threeDomainText {
    font-size: clamp(16px, 4.2vw, 35px);
    font-weight: 400;
    color: #fff;
    letter-spacing: 1px;
}

/* 副域名3复制按钮 */
#threeCopyBtn {
    padding-top: 1.5%;
    width: 27%;
}

/* 下载按钮 */
.downloadBox {
    position: absolute;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* ios下载按钮图片 */
#iosDownloadBox img {
    width: 31.5%;
    padding: 2% 0;
}

/* 安卓下载按钮图片 */
#anDownloadBox img {
    width: 31.5%;
    padding: 2% 0;
}

/* 去信任弹窗 */
/* 遮罩层 */
#trustModal{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* 弹窗内容 */
.trustContent {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
}

.trustImg{
    width: 100%;
    filter: drop-shadow(0 0 10px rgba(63, 63, 63, 0.5));
}

#goTrust {
    position: absolute;
    bottom: 22%;
    right: 5%;
    width: 14%;
}

/* 查看教程按钮 */
#tutorial {
    position: absolute;
    width: 34%;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
}

/* 点击教程按钮打开弹窗 - 遮罩层 */
#tutorialModal {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* 弹窗内容 */
#tutorialContent {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    transition: transform 0.5s ease-in-out;
    z-index: 1001;
}

/* 弹窗图片 */
#iosTutorial {
    width: 100%;
}

/* 关闭按钮 */
#closeTutorial {
    position: absolute;
    width: 5%;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1002;
    cursor: pointer;
}

/* 端教程标题 */
#tutorialTitle {
    position: absolute;
    width: 94%;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}

/* 弹窗tab */
.tab {
    position: absolute;
    width: 92%;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1002;
}

/* 弹窗标签图片 */
.tab img {
    width: 48%;
}


/* ............................................................ */

/* 咨询客服弹窗 - 遮罩层 */
#kefuModal {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* 弹窗内容 */
#kefuModalContent {
    position: absolute;
    width: 100%;
    height: 78%;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
    z-index: 1001;
    /* 防止输入法弹出时缩放 */
    touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
}

/* 客服iframe */
#kefuIframe {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    /* 防止iframe内输入法弹出时影响外层页面 */
    touch-action: manipulation;
}

/* 关闭按钮 */
#closeKefu {
    position: absolute;
    width: 6%;
    aspect-ratio: 1 / 1;
    top: 0;
    right: 0;
    z-index: 1002;
}


/* ............................................................ */
/* 世界杯活动入口（顶部右侧悬浮按钮 + 倒计时） */
.world-cup-entry {
    position: absolute;
    top: 7%;
    right: 3%;
    width: 25%;
    /* 与图片自身比例 131:118 一致，便于内部按百分比定位倒计时文字 */
    aspect-ratio: 131 / 118;
    z-index: 999;
    cursor: pointer;
    user-select: none;
    line-height: 0;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
    /* 跨平台中文字体回退 */
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Microsoft YaHei UI", "Source Han Sans SC", "Noto Sans CJK SC", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

.world-cup-entry__icon {
    width: 100%;
    height: 100%;
    transform: scale(1.2);
    display: block;
    pointer-events: none;
}

/* 倒计时文字叠加在图片底部黑色横幅区域内 */
.world-cup-entry__countdown {
    /* display: none; */
    position: absolute;
    left: 17%;
    right: 6%;
    bottom: 3.5%;
    text-align: center;
    color: #FFF0C9;
    font-size: clamp(12px, 2.4vw, 16px);
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.world-cup-entry__days {
    display: inline-block;
    margin: 0 2px;
    color: #FFDF8C;
    font-size: clamp(12px, 2.4vw, 16px);
    font-weight: 700;
    position: relative;
}

/* 进行中阶段（2026-06-11 ~ 2026-07-19）：切换为 entry.gif，隐藏倒计时文字，
   并取消倒计时阶段为对齐数字而设的放大缩放 */
.world-cup-entry--ongoing .world-cup-entry__icon {
    /* transform: none; */
}

.world-cup-entry--ongoing .world-cup-entry__countdown {
    display: none;
}

@media screen and (min-width: 750px) {
    .world-cup-entry {
        width: 18%;
    }
}


/* ............................................................ */
/* 世界杯活动弹框（p1 / p2） */
.sjb_modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.92);
    z-index: 1100;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.sjb_modal__scroll {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.sjb_modal__content {
    position: relative;
    width: 100%;
    margin: auto 0;
    flex-shrink: 0;
}

.sjb_modal__image {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    /* 整张图不响应点击，由按钮遮罩响应 */
    pointer-events: none;
}

.sjb_modal__btn {
    position: absolute;
    cursor: pointer;
    background-color: transparent;
    /* 调试时取消注释可看到遮罩按钮位置 */
    /* background-color: rgba(255, 0, 0, 0.35); */
}

.sjb_modal__logo {
    position: fixed;
    top: 14px;
    left: max(12px, calc((100vw - 750px) / 2 + 12px));
    width: 80px;
    height: auto;
    z-index: 1101;
    cursor: pointer;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.sjb_modal__close {
    position: fixed;
    top: 18px;
    right: max(12px, calc((100vw - 750px) / 2 + 12px));
    width: 36px;
    height: 36px;
    /* 高于 sjbModal2 的 z-index(1110)，保证两层弹框都能点关闭 */
    z-index: 1120;
    cursor: pointer;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

/* 邀请码模块（基于 p1.png 自然尺寸的百分比定位） */
.sjb_modal__invite {
    display: none;
    position: absolute;
    left: 17%;
    right: 17%;
    top: 71.5%;
}

.sjb_modal__invite_bg {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.sjb_modal__invite_code {
    position: absolute;
    /* 左侧从 0 起，右侧避开复制按钮区域，剩余范围内左右居中 */
    left: 0;
    right: 22%;
    top: 64%;
    transform: translateY(-50%);
    text-align: center;
    color: #FFEB36;
    font-weight: 700;
    font-size: min(4.5vw, 34px);
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    text-shadow:
        2px 2px 0 #342314,
        -2px -2px 0 #342314,
        2px -2px 0 #342314,
        -2px 2px 0 #342314,
        0 2px 0 #342314,
        0 -2px 0 #342314,
        2px 0 0 #342314,
        -2px 0 0 #342314;
}

.sjb_modal__invite_copy {
    /* 右侧"复制"按钮的不可见遮罩 */
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 22%;
    cursor: pointer;
}

/* p1.png 按钮位置（基于图片自然尺寸 750 × 1381 的百分比） */
#sjbModal1 .sjb_modal__btn--p1-download {
    /* 橙色"下载游戏"按钮，水平居中 */
    left: 17%;
    right: 17%;
    top: 60.5%;
    height: 9%;
}

#sjbModal1 .sjb_modal__btn--p1-kefu {
    /* 绿色"在线客服"按钮，水平居中 */
    left: 38%;
    right: 36%;
    top: 87.8%;
    height: 4.8%;
}

/* p2.png 按钮位置（基于图片自然尺寸 750 × 1407 的百分比） */
#sjbModal2 {
    /* 在 sjbModal1 与其 logo 之上 */
    z-index: 1110;
}

#sjbModal2 .sjb_modal__btn--p2-download {
    /* 橙色"下载"按钮 */
    right: 13%;
    width: 16%;
    top: 53.6%;
    height: 4.2%;
}

#sjbModal2 .sjb_modal__btn--p2-copy {
    /* 紫色"复制"按钮 */
    right: 13%;
    width: 16%;
    top: 59%;
    height: 4.2%;
}

@media (max-width: 480px) {
    .sjb_modal__logo {
        width: 95px;
    }
    .sjb_modal__close {
        width: 30px;
        height: 30px;
        top: 14px;
    }
}