@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,700,900"); @font-face {
    font-family: Cinzel;
    src: url("../webfonts/Cinzel-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Cinzel;
    src: url("../webfonts/Cinzel-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Cinzel;
    src: url("../webfonts/Cinzel-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Cinzel;
    src: url("../webfonts/Cinzel-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Cinzel;
    src: url("../webfonts/Cinzel-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: Montserrat, sans-serif;
    line-height: 1.6;
    font-size: 16.2px;
    margin: 0px auto;
    color: rgb(25, 25, 25);
}

.brand-title, .promo-modal-title, .vip_head_title, .vip_cur_level span, .vip_panel_head h3, .vip_tier_name, .vip_benefit_head span, .slots_game_title h2, .slots_providers_title h3, .shop_cat span, .shop_card_name {
    font-family: Cinzel, serif;
}

a {
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s;
}

a:hover, a:focus {
    text-decoration: none;
}

img {
    max-width: 100%;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], textarea, select {
    color: rgb(102, 102, 102);
    width: 100%;
}

* {
    box-sizing: border-box;
    user-select: none;
    scrollbar-width: none;
}

::-webkit-scrollbar {
    display: none;
}

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgb(3 40 75) 0%,  rgb(3 40 75) 100%);
    font-family: Montserrat, sans-serif;
    position: fixed;
    inset: 0px;
    overscroll-behavior: none;
    touch-action: none;
    overflow: hidden !important;
}

.gold-text {
    background: linear-gradient(135deg, rgb(255, 224, 102) 0%, rgb(245, 176, 65) 50%, rgb(255, 215, 0) 100%) text;
    -webkit-text-fill-color: transparent;
    font-family: Cinzel, serif;
}

/* 载入时先用深色底铺满，避免 JS(autoFitScreen/Swiper) 跑完前露出白底/半成品布局 */
html {
    background: #0d021a;
}

.lobby-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    background: radial-gradient(circle, rgb(36, 13, 71) 0%, rgb(13, 2, 26) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0px;
    z-index: 10;
    overflow: hidden !important;
    /* 缩放/轮播初始化完成前先隐藏，避免 footer 先出现、内容再跳入的闪烁 */
    opacity: 0;
    transition: opacity 0.25s ease;
}

#game-stage.is-ready {
    opacity: 1;
}

.ray-bg {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.024) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.lobby-header {
    position: relative;
    z-index: 10;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 3%;
    margin-top: 1%;
}

.user-info-group {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    width: auto;
    justify-content: left;
}

/* 登录后首页：用户名区 + 登出按钮 */
.user-info-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logout-btn {
    display: inline-flex;
    flex: none;
    transition: transform 0.12s, filter 0.12s;
}

.logout-btn img {
    height: 44px;
    width: auto;
    display: block;
}

.logout-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.logout-btn:active {
    transform: scale(0.94);
}

/* 未登录首页：注册 / 登录 图片按钮（替换原用户名区） */
.auth-btn-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* header 左侧：logo + 用户信息组，靠在一起（去掉 space-between 的大间距） */
.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.header-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.header-logo img {
    max-height: 29px;
    width: auto;
    display: block;
}

.auth-btn {
    display: inline-flex;
    transition: transform 0.12s, filter 0.12s;
}

.auth-btn img {
    max-height: 38px;
    width: auto;
    display: block;
}

.auth-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.auth-btn:active {
    transform: scale(0.96);
}

.avatar-frame {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgb(255, 215, 0);
    padding: 2px;
    background: linear-gradient(rgb(255, 224, 102), rgb(179, 134, 0));
    overflow: hidden;
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.vip-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    background: linear-gradient(to right, rgb(220, 38, 38), rgb(245, 158, 11));
    color: rgb(255, 255, 255);
    font-size: 8.64px;
    font-weight: 900;
    padding: 0.5px 4px;
    border-radius: 9999px;
    border: 1px solid rgb(255, 215, 0);
    line-height: 1;
}

.user-text-meta {
    margin-left: 12px;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
}

.user-name {
    color: rgb(255, 255, 255);
    font-size: 15.12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1;
    margin: 0px;
}

.user-sub {
    color: rgb(251, 191, 36);
    font-size: 14.04px;
    font-weight: 800;
    filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px) drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 3px);
    background-image: linear-gradient(rgb(255, 246, 206) 0%, rgb(255, 215, 94) 48%, rgb(223, 156, 34) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: normal;
}

.wallet-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wallet-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px;
    text-align: center;
    margin: auto;
    background: url("../images/header/frame.webp") center center / 100% 100% no-repeat;
}

.wallet-pill-short {
    background: url("../images/header/home-frame-short.webp") center center / 100% 100% no-repeat;
    min-width: 160px;
}

.wallet-label {
    font-size: 18.36px;
    font-weight: 800;
    margin-right: 8px;
    filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px) drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 3px);
    background-image: linear-gradient(rgb(255, 246, 206) 0%, rgb(255, 215, 94) 48%, rgb(223, 156, 34) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.wallet-value {
    color: rgb(255, 255, 255);
    font-size: 14.04px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.wallet-add-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    color: rgb(255, 255, 255);
    font-weight: 900;
    font-size: 15.12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    outline: none;
    cursor: pointer;
    margin-left: 10px;
}

.wallet-add-btn:active {
    transform: scale(0.9);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-circle-btn {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    outline: none;
    cursor: pointer;
    padding: 0px;
    max-width: 55px;
}

.action-circle-btn:hover {
    background: transparent;
    color: rgb(26, 0, 51);
}

.lobby-content {
    position: relative;
    z-index: 10;
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 5px 0 12px 0px;
    overflow: visible;
}

.brand-banner {
    text-align: center;
    flex: 2 1 0px;
    min-height: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-swiper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    max-width: 1000px;
}

.banner-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-banner-img {
    height: 100%;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

.banner-swiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.banner-swiper .swiper-pagination-bullet-active {
    background: rgb(255, 215, 0);
}

.banner-swiper .swiper-button-prev, .banner-swiper .swiper-button-next {
    width: 60px;
    height: 60px;
    background: transparent;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    border-radius: 0px;
}

.banner-swiper .swiper-button-prev::after, .banner-swiper .swiper-button-next::after {
    content: "";
    display: none;
}

.banner-swiper .swiper-button-prev-img, .banner-swiper .swiper-button-next-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-title {
    font-size: 34.56px;
    font-weight: 900;
    letter-spacing: 4px;
    text-shadow: rgba(0, 0, 0, 0.95) 0px 4px 10px;
}

.brand-subtitle {
    color: rgb(209, 213, 219);
    font-size: 10.8px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 1px;
}

.static-photos {
    display: flex;
    gap: 16px;
    padding: 12px 2px;
    width: 100%;
    justify-content: center;
}

.static-photo {
    flex: 1 1 0px;
    min-width: 0px;
    aspect-ratio: 400 / 600;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

/* 外层容器：负责外框尺寸/居中/占位，不裁切 —— 让往外移的箭头能完整显示 */
.game-swiper-wrap {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0px auto;
    flex: 2 1 0px;
    min-height: 0px;
    display: flex;
    flex-direction: column;
}

/* 内层 Swiper：负责裁切滑动内容（只显示 5 张，第 6 张滑动才出来） */
.game-swiper {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0px;
    padding: 12px 2px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.game-swiper .swiper-wrapper {
    align-items: center;
}

/* 防止 Swiper 初始化前的布局跳动（FOUC）：
   Swiper 默认未初始化时 .swiper-slide 为 width:100%（满宽只见 1 张），
   初始化后才变成每屏 5 张 → 每次 refresh 都会「闪一下重排」。
   这里预先按 slidesPerView:5 + spaceBetween:2 的公式排好，让首帧就正确，Swiper 接手不跳。 */
.game-swiper .swiper-slide {
    width: calc((100% - 8px) / 5);
    flex-shrink: 0;
    min-width: 0;
}

.game-card {
    border-radius: 16px;
    height: auto;
    aspect-ratio: 1 / 1;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-sizing: border-box;
}

.card-title {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 10px;
    text-align: center;
    color: rgb(255, 215, 0);
    font-size: 16.2px;
    font-weight: 900;
    letter-spacing: 1px;
    text-shadow: rgba(0, 0, 0, 0.9) 0px 2px 6px, rgba(0, 0, 0, 0.9) 0px 0px 4px;
    pointer-events: none;
    z-index: 2;
}

/* 箭头样式与 banner-swiper 保持一致：60×60 透明按钮 + 自订图片，隐藏默认字体箭头。
   箭头现在挂在 .game-swiper-wrap（不裁切层），所以选择器改成 .game-swiper-wrap */
.game-swiper-wrap .swiper-button-prev, .game-swiper-wrap .swiper-button-next {
    width: 60px;
    height: 60px;
    background: transparent;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    border-radius: 0px;
}

.game-swiper-wrap .swiper-button-prev::after, .game-swiper-wrap .swiper-button-next::after {
    content: "";
    display: none;
}

.game-swiper-wrap .swiper-button-prev-img, .game-swiper-wrap .swiper-button-next-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 左右箭头往外移到 wrap 边缘外；wrap 不裁切，箭头能完整显示，而内层 game-swiper 仍裁切第 6 张 */
.game-swiper-wrap .swiper-button-prev {
    left: -20px;
    right: auto;
}

.game-swiper-wrap .swiper-button-next {
    right: -20px;
    left: auto;
}

.game-swiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.game-swiper .swiper-pagination-bullet-active {
    background: rgb(255, 215, 0);
}

.card-bg-img-only {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.announcement-bar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    width: 100%;
    padding: 0px 14px;
    background: linear-gradient(rgb(80, 136, 185), rgb(42, 100, 153));
    border: 2px solid rgb(187, 150, 46);
    border-radius: 25px;
    box-sizing: border-box;
    max-width: 1000px;
    margin: auto auto 15px;
}

.ann-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 52px;
    margin-top: -20px;
}

.ann-badge-icon {
    font-size: 16.2px;
}

/* 公告喇叭：抖一下再停一下循环，前 ~0.6s 摇摆吸睛，之后停顿 */
.ann-badge-icon-img {
    transform-origin: center center;
    animation: ann-shake 2.2s ease-in-out infinite;
    will-change: transform;
}

@keyframes ann-shake {
    0% {
        transform: rotate(0deg);
    }
    4% {
        transform: rotate(-14deg);
    }
    8% {
        transform: rotate(12deg);
    }
    12% {
        transform: rotate(-10deg);
    }
    16% {
        transform: rotate(8deg);
    }
    20% {
        transform: rotate(-6deg);
    }
    24% {
        transform: rotate(4deg);
    }
    28%,
    100% {
        transform: rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ann-badge-icon-img {
        animation: none;
    }
}

.ann-badge-text {
    color: rgb(255, 215, 0);
    font-size: 10.8px;
    font-weight: 900;
    letter-spacing: 1px;
    white-space: nowrap;
}

.ann-marquee {
    flex: 1 1 0%;
    overflow: hidden;
    white-space: nowrap;
}

.ann-marquee-text {
    display: inline-block;
    color: rgb(229, 231, 235);
    font-size: 12.96px;
    font-weight: 600;
    padding-left: 100%;
    animation: 18s linear 0s infinite normal none running ann-scroll;
}

@keyframes ann-scroll {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(-100%);
    }
}

.ann-more {
    flex-shrink: 0;
    color: rgb(255, 215, 0);
    font-size: 23.76px;
    font-weight: 900;
    cursor: pointer;
    line-height: 1;
}

.mega-jackpot-dock {
    background: linear-gradient(to right, rgb(46, 8, 84), rgb(76, 5, 53));
    border: 2px solid rgb(255, 215, 0);
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 4px 18px;
    box-shadow: rgba(239, 68, 68, 0.2) 0px 0px 15px;
}

.mega-jackpot-text-group {
    margin-right: 14px;
    text-align: right;
}

.mega-jackpot-title {
    color: rgb(251, 191, 36);
    font-size: 10.8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.mega-jackpot-sub {
    color: rgb(248, 113, 113);
    font-size: 8.64px;
    font-weight: 700;
}

.mega-jackpot-digits {
    color: rgb(255, 255, 255);
    font-size: 21.6px;
    font-weight: 900;
    font-family: monospace;
    letter-spacing: 1px;
}

.lobby-footer {
    position: relative;
    z-index: 10;
    width: 100%;
    background: url("../images/footer/footer-bg.webp") center top / 100% 100% no-repeat;
    padding: 10px 5px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    text-align: center;
}

.footer-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgb(156, 163, 175);
    cursor: pointer;
    transition: color 0.2s;
}

.footer-nav-btn:hover, .footer-nav-btn.active {
    color: rgb(255, 215, 0);
}

.footer-icon {
    font-size: 21.6px;
}

.footer-icon img {
    max-width: 64px;
}

.footer-text {
    font-size: 12.96px;
    font-weight: 700;
    margin-top: 1px;
    letter-spacing: 0.5px;
    background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(201, 214, 229) 52%, rgb(147, 163, 182) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px) drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 3px);
}

.footer-nav-btn:hover .footer-text, .footer-nav-btn.active .footer-text {
    background-image: linear-gradient(rgb(255, 246, 206) 0%, rgb(255, 215, 94) 48%, rgb(223, 156, 34) 100%);
}

.deposit-trigger-box {
    position: relative;
    display: flex;
    justify-content: center;
}

.deposit-circle-anchor {
    position: absolute;
    top: -73px;
    max-width: 120px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.deposit-circle-anchor:active {
    transform: scale(0.9);
}

.deposit-icon {
    font-size: 17.28px;
}

.deposit-text {
    font-size: 12.96px;
    font-weight: 700;
    color: rgb(255, 255, 255);
    position: absolute;
    bottom: 26px;
    /* 文字不能用 gif，这里用 CSS 让它跟着 icon 一起动：轻微脉动 + 金光呼吸 */
    transform-origin: center center;
    animation: deposit-text-pulse 1.6s ease-in-out infinite;
    will-change: transform, text-shadow;
}

@keyframes deposit-text-pulse {
    0%,
    100% {
        transform: scale(1);
        text-shadow:
            0 0 4px rgba(255, 215, 0, 0.55),
            0 1px 2px rgba(0, 0, 0, 0.5);
    }
    50% {
        transform: scale(1.12);
        text-shadow:
            0 0 10px rgba(255, 225, 90, 0.95),
            0 0 4px rgba(255, 215, 0, 0.85),
            0 1px 2px rgba(0, 0, 0, 0.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .deposit-text {
        animation: none;
    }
}

#portrait-mask {
    display: none;
    position: fixed;
    inset: 0px;
    background: radial-gradient(circle, rgb(3 40 75) 0%,  rgb(3 40 75) 100%);
    /* 必须高于所有弹窗（promo 100000 / 钱包层 100100 / OTP·成功层等），
       否则竖屏时弹窗会盖在旋转引导之上 —— 见 OTP 弹窗竖屏可见问题 */
    z-index: 2000000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgb(255, 215, 0);
    text-align: center;
    padding: 20px;
}

.portrait-icon {
    font-size: 69.12px;
    margin-bottom: 24px;
    animation: 2s ease 0s infinite normal none running bounce;
}

.portrait-title {
    font-size: 25.92px;
    font-weight: bold;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.portrait-desc {
    color: rgb(156, 163, 175);
    font-size: 15.12px;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.promo-modal {
    display: none;
    position: fixed;
    inset: 0px;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.promo-modal.show {
    display: flex;
}

.promo-modal-box {
    position: relative;
    width: 100%;
    max-width: 1000px;
    max-height: 85vh;
    overflow-y: auto;
    touch-action: pan-y;
    background: radial-gradient(circle at center top, rgb(46, 8, 84) 0%, rgb(22, 6, 46) 100%);
    border: 2px solid rgb(255, 215, 0);
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 50px, rgba(255, 215, 0, 0.25) 0px 0px 25px;
    padding: 26px 26px 30px;
}

.promo-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: rgb(255, 215, 0);
    font-size: 21.6px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.promo-close:hover {
    background: rgb(255, 215, 0);
    color: rgb(26, 0, 51);
}

.promo-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.promo-modal-icon {
    font-size: 28.08px;
}

.promo-modal-title {
    color: rgb(255, 215, 0);
    font-size: 23.76px;
    font-weight: 900;
    letter-spacing: 2px;
    margin: 0px;
}

.promo-modal-body {
    color: rgb(229, 231, 235);
    font-size: 15.12px;
    line-height: 1.7;
    text-align: left;
}

.promo-modal-body p {
    margin: 0px 0px 10px;
}

.promo-modal-body strong {
    color: rgb(251, 191, 36);
}

.promo-modal-note {
    margin-top: 16px;
    color: rgb(156, 163, 175);
    font-size: 11.88px;
    text-align: center;
}

/* ===== 语言切换弹窗 (Language Modal) ===== */
.lang-modal {
    display: none;
    position: fixed;
    inset: 0px;
    z-index: 100001;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.lang-modal.show {
    display: flex;
}

.lang-modal-box {
    position: relative;
    width: min(435px, 88%);
    aspect-ratio: 954 / 500;
    background: url("../images/promo-page/tnc-frame.webp") center center / 100% 100% no-repeat;
    display: flex;
    flex-direction: column;
    padding: 28px 30px 26px;
    box-sizing: border-box;
}

.lang-close {
    position: absolute;
    top: 6%;
    right: 6%;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: rgb(246, 234, 208);
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.12s, color 0.12s;
}

.lang-close:hover {
    color: rgb(255, 210, 74);
    transform: scale(1.1);
}

.lang-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2px;
}

.lang-modal-icon {
    font-size: 19px;
}

.lang-modal-title {
    color: rgb(255, 215, 0);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.5px;
    margin: 0px;
}

.lang-modal-sub {
    color: rgb(156, 163, 175);
    font-size: 10.5px;
    text-align: center;
    margin: 0 0 12px;
}

.lang-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    touch-action: pan-y;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgb(229, 231, 235);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.lang-option:hover {
    border-color: rgba(255, 215, 0, 0.7);
    background: rgba(255, 215, 0, 0.08);
}

.lang-option.active {
    border-color: rgb(255, 215, 0);
    background: rgba(255, 215, 0, 0.14);
}

.lang-flag {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.25);
}

.lang-name {
    flex: 1 1 auto;
    text-align: left;
}

.lang-check {
    color: rgb(255, 215, 0);
    font-weight: 900;
    font-size: 15px;
    opacity: 0;
    transition: 0.2s;
}

.lang-option.active .lang-check {
    opacity: 1;
}

/* ===== Redeem 弹窗（使用 promo 详情弹窗同款框图 tnc-frame.webp） ===== */
.redeem-modal {
    display: none;
    position: fixed;
    inset: 0px;
    z-index: 100000;
    background: rgba(2, 12, 30, 0.72);
    backdrop-filter: blur(3px);
    justify-content: center;
    align-items: center;
    padding: 3% 4%;
}

.redeem-modal.show {
    display: flex;
}

/* 框图：与 promo 详情弹窗一致；用高度驱动 + aspect-ratio 保持框不变形 */
.redeem-box {
    position: relative;
    box-sizing: border-box;
    height: min(88vh, 500px);
    aspect-ratio: 899 / 707;
    max-width: 94vw;
    background: url("../images/promo-page/tnc-frame.webp") center center / 100% 100% no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5% 5% 6%;
    overflow: hidden;
}

.redeem-close {
    position: absolute;
    top: 7%;
    right: 7%;
    width: 34px;
    height: 34px;
    border: 0px;
    background: transparent;
    color: rgb(246, 234, 208);
    font-size: 30.24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.12s, color 0.12s;
}

.redeem-close:hover {
    color: rgb(255, 210, 74);
    transform: scale(1.1);
}

.redeem-view {
    width: 100%;
    height: 100%;
}

/* 确认视图：竖排 —— 大图在上，信息居中在下。
   图片高度用视口单位 min(38vh,220px) 封顶（永远能解析，且给信息留空间），
   任何比例的图都被框在里面不溢出；配合 .redeem-box 的 overflow:hidden 双保险 */
.redeem-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.redeem-media {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.redeem-media img {
    max-width: 100%;
    max-height: min(34vh, 200px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.redeem-info {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
}

.redeem-name {
    color: rgb(255, 210, 74);
    font-size: clamp(17.28px, 2.38vw, 23.76px);
    font-weight: 900;
    letter-spacing: 1px;
    margin: 0px 0px 8px;
    text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px;
}

.redeem-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0px 0px 10px;
    color: rgb(255, 255, 255);
    font-size: clamp(15.12px, 1.94vw, 19.44px);
    font-weight: 800;
}

.redeem-price img {
    width: 20px;
    height: 20px;
}

.redeem-desc {
    color: rgb(219, 228, 244);
    font-size: clamp(11.88px, 1.46vw, 15.12px);
    line-height: 1.5;
    margin: 0px auto 14px;
    max-width: 360px;
}

.redeem-btn {
    display: inline-block;
    min-width: 150px;
    padding: 11px 26px;
    border: none;
    border-radius: 30px;
    background: linear-gradient(180deg, rgb(255, 226, 122), rgb(240, 185, 11));
    color: rgb(58, 38, 0);
    font-size: 16.2px;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: rgba(240, 185, 11, 0.4) 0px 6px 16px;
}

.redeem-btn:hover {
    filter: brightness(1.06);
}

/* 两个视图切换：默认确认视图；加 .is-success 切成功视图 */
.redeem-modal .redeem-success {
    display: none;
}

.redeem-modal.is-success .redeem-confirm {
    display: none;
}

.redeem-modal.is-success .redeem-success {
    display: block;
    text-align: center;
}

.redeem-success-icon {
    width: 64px;
    height: 64px;
    margin: 0px auto 14px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgb(255, 226, 122), rgb(240, 185, 11));
    color: rgb(26, 0, 51);
    font-size: 38.88px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(255, 215, 0, 0.5) 0px 0px 20px;
}

.redeem-success-title {
    color: rgb(255, 210, 74);
    font-size: clamp(18.36px, 2.38vw, 23.76px);
    font-weight: 900;
    letter-spacing: 1px;
    margin: 0px 0px 12px;
}

.redeem-success-text {
    color: rgb(219, 228, 244);
    font-size: clamp(12.96px, 1.62vw, 15.12px);
    line-height: 1.6;
    margin: 0px auto 20px;
    max-width: 340px;
}

.redeem-success-text strong {
    color: rgb(251, 191, 36);
}

/* Mobile / 矮屏（横屏手机）：不改框大小，只收紧图片与文字间距，避免内容 over 出框 */
@media (max-height: 460px) {
    .redeem-media img { max-height: 28vh; }
    .redeem-confirm { gap: 5px; }
    .redeem-name { font-size: 17.28px; margin-bottom: 4px; }
    .redeem-price { font-size: 16.2px; margin-bottom: 6px; }
    .redeem-desc { font-size: 11.88px; line-height: 1.35; margin-bottom: 9px; }
    .redeem-btn { padding: 8px 20px; min-width: 120px; font-size: 14.04px; }
    .redeem-success-icon { width: 50px; height: 50px; font-size: 30.24px; margin-bottom: 10px; }
    .redeem-success-title { font-size: 18.36px; margin-bottom: 8px; }
    .redeem-success-text { font-size: 12.96px; margin-bottom: 14px; }
}

.wallet-circle-btn-img {
    max-width: 30px;
    object-fit: contain;
}

/* 头部三个资产 icon 的动效：按 src 精确命中，避免波及 + 按钮等同类 img。
   金币：3D 翻转一圈后停顿再转；钻石：轻微呼吸放大；现金：柔和漂浮微摆。 */
.wallet-circle-btn-img[src$="coins.webp"] {
    animation: coin-spin-3d 2.6s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
}

.wallet-circle-btn-img[src$="diamonds.webp"] {
    animation: diamond-pulse 1.8s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
}

.wallet-circle-btn-img[src$="cash.webp"] {
    animation: cash-float 3s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
}

@keyframes coin-spin-3d {
    0% {
        transform: perspective(220px) rotateY(0deg);
    }
    /* 前 ~1s 转满一圈 */
    38% {
        transform: perspective(220px) rotateY(360deg);
    }
    /* 余下时间停一下，再进入下一轮 */
    100% {
        transform: perspective(220px) rotateY(360deg);
    }
}

@keyframes diamond-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.14);
    }
}

@keyframes cash-float {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-3px) rotate(4deg);
    }
}

/* 尊重系统“减少动态效果”偏好 */
@media (prefers-reduced-motion: reduce) {
    .wallet-circle-btn-img[src$="coins.webp"],
    .wallet-circle-btn-img[src$="diamonds.webp"],
    .wallet-circle-btn-img[src$="cash.webp"] {
        animation: none;
    }
}

.profile-btn-img {
    max-width: 216px;
}

.user-info-group-inner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    width: 100%;
}

.sports-stage {
    flex: 1 1 0px;
    min-height: 0px;
    display: flex;
    flex-direction: column;
    background-image: var(--stage-bg);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

.product-card-select img {
    max-width: 80%;
    max-height: 100%;
    object-fit: contain;
}

.product-card-select {
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    /* opacity: 0.7; */
    flex: 0 0 20%;
    min-height: 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.product-card-select.active {
    opacity: 1;
    transform: translateX(40px);
    filter: drop-shadow(rgba(255, 215, 0, 1) 0px 0px 6px);
}

.product-card-select:hover {
    opacity: 1;
}

.products_container {
    display: flex;
    justify-content: space-between;
    padding: 0px 15px;
    height: 100%;
    min-height: 0px;
}

.sports-stage .lobby-content, .slots-stage .lobby-content {
    min-height: 0px;
}

.product-btn img {
    max-width: 50%;
}

.product-btn {
    display: flex;
    justify-content: right;
    align-items: end;
    height: 100%;
    margin-right: 0px;
}

.product-play-btn {
    margin-left: auto;
    text-align: center;
}

.product-card-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    max-height: 100%;
    min-height: 0px;
    overflow-y: auto;
    touch-action: pan-y;
}

.slots-stage {
    background: url("../images/product/slots/pp-bg.webp") center top / cover no-repeat;
    flex: 1 1 0px;
    min-height: 0px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 供应商切换背景：两层图叠加做交叉淡入淡出，避免硬切换闪一下 */
.slots-stage-bg {
    position: absolute;
    inset: 0;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    pointer-events: none;
}

.slots-stage-bg.is-active {
    opacity: 1;
}

/* 内容抬到背景图层之上 */
.slots-stage > *:not(.slots-stage-bg) {
    position: relative;
    z-index: 1;
}

.slots_products_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2.5%;
    padding: 2% 3%;
    height: 100%;
    min-height: 0px;
    width: 100%;
    box-sizing: border-box;
}

.slots_product_game_frame {
    max-width: 80%;
}

.slots_game_panel {
    position: relative;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
}

.slots_game_panel_img {
    display: block;
    height: 100%;
    max-height: 100%;
    width: auto;
    max-width: 100%;
}

.slots_game_inner {
    position: absolute;
    inset: 0px;
    padding: 4.5% 6% 3.5%;
    display: flex;
    flex-direction: column;
    min-height: 0px;
}

.slots_game_title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5%;
    flex: 0 0 auto;
}

.slots_game_title h2 {
    margin: 0px;
    color: rgb(255, 210, 74);
    font-size: clamp(14.04px, 2.81vw, 32.4px);
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: rgba(0, 0, 0, 0.55) 0px 2px 6px;
    white-space: nowrap;
}

.slots_game_title_star {
    width: clamp(14px, 2.4vw, 26px);
    height: auto;
}

.slots_game_title_deco {
    display: block;
    width: 70%;
    max-width: 320px;
    height: auto;
    margin: 0.5% auto 0px;
    flex: 0 0 auto;
}

.slots_game_controls {
    display: flex;
    align-items: stretch;
    gap: 2%;
    height: 8%;
    margin-top: 3.5%;
    flex: 0 0 auto;
}

.slots_search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0px;
    height: 100%;
    background: url("../images/product/slots/search.webp") center center / 100% 100% no-repeat;
    display: flex;
    align-items: center;
    padding: 0px 3%;
}

.slots_search img {
    height: 55%;
    width: auto;
    object-fit: contain;
    margin-right: 2.5%;
}

.slots_search input {
    flex: 1 1 auto;
    min-width: 0px;
    background: transparent;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    outline: none;
    color: rgb(207, 224, 255);
    font-size: clamp(9.72px, 1.4vw, 15.12px);
}

.slots_search input::placeholder {
    color: rgb(169, 188, 221);
}

.slots_sort {
    position: relative;
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 230 / 50;
    background: url("../images/product/slots/sort-by.webp") center center / 100% 100% no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgb(255, 210, 74);
    font-size: clamp(8.64px, 1.23vw, 12.96px);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.slots_sort_value {
    font-weight: 600;
}

.slots_sort_caret {
    transition: transform 0.2s;
    font-size: 0.9em;
}

.slots_sort.open .slots_sort_caret {
    transform: rotate(180deg);
}

.slots_sort_menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0px;
    left: 0px;
    margin: 0px;
    padding: 4px;
    list-style: none;
    background: linear-gradient(rgb(26, 58, 107) 0%, rgb(13, 31, 61) 100%);
    border: 1px solid rgba(255, 215, 0, 0.6);
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 20px;
    z-index: 60;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
}

.slots_sort.open .slots_sort_menu {
    opacity: 1;
    transform: translateY(0px);
    pointer-events: auto;
}

.slots_sort_menu li {
    padding: 6px 8px;
    border-radius: 5px;
    color: rgb(207, 224, 255);
    font-size: clamp(8.64px, 1.08vw, 12.96px);
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.slots_sort_menu li:hover {
    background: rgba(255, 215, 0, 0.15);
    color: rgb(255, 210, 74);
}

.slots_sort_menu li.active {
    background: rgba(255, 215, 0, 0.22);
    color: rgb(255, 210, 74);
}

.slots_game_grid {
    flex: 1 1 auto;
    min-height: 0px;
    margin-top: 3.5%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: min-content;
    gap: 4% 3%;
    place-content: center stretch;
    overflow-y: auto;
    touch-action: pan-y;
}

.slots_game_tile {
    position: relative;
    aspect-ratio: 1 / 1;
    min-width: 0px;
    display: block;
    cursor: pointer;
    transition: transform 0.15s;
}

.slots_game_tile:hover {
    transform: translateY(-3px);
}

.slots_game_tile_img {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6%;
}

.slots_game_tile_frame {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.slots_game_pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4%;
    margin-top: 2.5%;
    flex: 0 0 auto;
}

.slots_game_pager_arrow {
    width: clamp(20px, 3vw, 24px);
    height: auto;
    cursor: pointer;
}

.slots_game_pager_text {
    color: rgb(255, 210, 74);
    font-weight: 700;
    font-size: clamp(11.88px, 1.73vw, 19.44px);
    letter-spacing: 1px;
}

.slots_product_providers_img {
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    object-fit: fill;
    display: block;
}

.slots_product_providers {
    position: relative;
    flex: 0 0 auto;
    height: 100%;
    max-height: 100%;
    min-height: 0px;
    /* 比原图(700/1790)加宽约 15%，给 provider 名字留一行的空间；
       背景框图用 object-fit:fill 填满，只横向轻微撑开、不变高、不溢出 */
    aspect-ratio: 805 / 1790;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slots_product_game {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    height: 100%;
    flex: 0 0 auto;
    max-width: 50%;
    min-height: 0px;
}

.slots_product_providers_inner {
    position: absolute;
    inset: 0px;
    padding: 10% 4% 3%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0px;
}

.slots_providers_title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
}

.slots_providers_title h3 {
    margin: 0px;
    color: rgb(255, 210, 74);
    font-weight: 800;
    font-size: clamp(11.88px, 1.62vw, 14.04px);
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px;
}

.slots_providers_title_star {
    width: clamp(9px, 1.3vw, 15px);
    height: auto;
}

.slots_providers_title_deco {
    display: block;
    width: 85%;
    max-width: 190px;
    height: auto;
    margin: 0.5% auto 0px;
    flex: 0 0 auto;
}

.slots_product_providers_list {
    position: relative;
    flex: 1 1 auto;
    min-height: 0px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 3% 2%;
    overflow-y: auto;
    touch-action: pan-y;
}

.slots_providers_more {
    flex: 0 0 auto;
    text-align: center;
    margin-top: 1.5%;
}

.slots_providers_more i {
    color: rgb(255, 210, 74);
    font-size: clamp(15.12px, 2.16vw, 23.76px);
    animation: 1.4s ease-in-out 0s infinite normal none running providersMoreBounce;
}

@keyframes providersMoreBounce {
    0%, 100% {
        transform: translateY(0px);
        opacity: 0.65;
    }

    50% {
        transform: translateY(3px);
        opacity: 1;
    }
}

.slots_product_providers_list_item {
    background: url("../images/product/slots/btn.webp") center center / 100% 100% no-repeat;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 929 / 254;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5% 4% 5% 8%;
    cursor: pointer;
}

.slots_product_providers_list_item {
    opacity: 0.85;
    transition: opacity 0.2s, filter 0.2s;
}

.slots_product_providers_list_item.active {
    opacity: 1;
    /* filter: drop-shadow(rgba(255, 215, 0, 0.7) 0px 0px 6px); */
    background: url(../images/product/slots/Button-Glow.gif) center center / 100% 100% no-repeat;
}

.slots_product_providers_list_item:hover {
    opacity: 1;
}

.slots_product_providers_list_item img {
    max-width: 25px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.slots_product_providers_list_item_text {
    color: rgb(255, 255, 255);
    font-size: 10.8px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0px;
    flex: 1 1 auto;
    min-width: 0px;
    text-align: left;
    margin-left: 6px;
    white-space: nowrap;
}

.slots_product_providers_list_item_icon {
    color: rgb(255, 215, 0);
    min-width: 20px;
    text-align: center;
}

.index-stage {
    background: url("../images/index/bg.webp") center top / cover no-repeat;
    flex: 1 1 0px;
    min-height: 0px;
    display: flex;
    flex-direction: column;
}

.shop-stage {
    background: url("../images/pointshop-page/bg.webp") center center / cover no-repeat;
    flex: 1 1 0px;
    min-height: 0px;
    display: flex;
    flex-direction: column;
}

.shop-stage .lobby-content {
    min-height: 0px;
}

.shop_container {
    display: flex;
    flex-direction: column;
    padding: 0px 2%;
    height: 100%;
    min-height: 0px;
    width: 100%;
    box-sizing: border-box;
    max-width: 95%;
    margin: auto;
}

.shop_body {
    flex: 1 1 auto;
    min-height: 0px;
    display: flex;
    align-items: stretch;
    gap: 2%;
}

.shop_categories {
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0px;
    padding: 1% 0px 3%;
    gap: 2%;
}

.shop_cat {
    position: relative;
    width: 100%;
    aspect-ratio: 446 / 109;
    background: url("../images/pointshop-page/frame.webp") center center / 100% 100% no-repeat;
    border: 0px;
    outline: 0px;
    display: flex;
    align-items: center;
    gap: 6%;
    padding: 0px 9%;
    cursor: pointer;
    color: rgb(246, 234, 208);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: clamp(10.8px, 2.16vw, 16.12px);
    white-space: nowrap;
    /* opacity: 0.82; */
    transition: opacity 0.2s, filter 0.2s, transform 0.2s;
    text-shadow: rgba(0, 0, 0, 0.45) 0px 2px 4px;
}

.shop_cat_icon {
    width: 20%;
    max-width: 42px;
    height: auto;
    flex: 0 0 auto;
}

.shop_cat:hover {
    opacity: 1;
}

.shop_cat.active {
    opacity: 1;
    filter: brightness(1.12) drop-shadow(rgba(255, 215, 0, 0.55) 0px 0px 6px);
    transform: translateX(12px);
}

.shop_grid {
    flex: 1 1 auto;
    min-width: 0px;
    min-height: 0px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 6% 2%;
    padding: 1% 0.5% 3%;
    align-content: stretch;
    overflow: visible;
}

.shop_pager {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3%;
    margin-bottom: 1%;
}

.shop_pager_arrow {
    width: clamp(24px, 3vw, 28px);
    height: auto;
    cursor: pointer;
}

.shop_pager_text {
    font-weight: 800;
    font-size: clamp(12.96px, 1.73vw, 21.6px);
    letter-spacing: 1px;
    filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px) drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 3px);
    background-image: linear-gradient(rgb(255, 246, 206) 0%, rgb(255, 215, 94) 48%, rgb(223, 156, 34) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.shop_card {
    position: relative;
    min-width: 0px;
    min-height: 0px;
    background: url("../images/pointshop-page/frame-bg.webp") center center / 100% 100% no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6% 8% 16%;
    box-sizing: border-box;
}

.shop_card_media {
    flex: 1 1 auto;
    min-height: 0px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4% 0px;
}

.shop_card_media img {
    max-height: 100%;
    max-width: 80%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(rgba(0, 0, 0, 0.35) 0px 4px 8px);
}

.shop_card_price {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 800;
    font-size: clamp(11.88px, 2.05vw, 17.28px);
    letter-spacing: 0.5px;
    line-height: 1;
    filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px) drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 3px);
    background-image: linear-gradient(rgb(255, 246, 206) 0%, rgb(255, 215, 94) 48%, rgb(223, 156, 34) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.shop_card_price img {
    width: 1.05em;
    height: 1.05em;
    object-fit: contain;
}

.shop_card_name {
    flex: 0 0 auto;
    margin: 3% 0px 0px;
    color: rgb(255, 255, 255);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.15;
    font-size: clamp(8.64px, 1.84vw, 11.88px);
    letter-spacing: 0.5px;
}

.shop_redeem {
    position: absolute;
    left: 50%;
    bottom: -5%;
    transform: translateX(-50%);
    width: 62%;
    cursor: pointer;
    transition: transform 0.12s;
    line-height: 0;
}

.shop_redeem img {
    width: 100%;
    display: block;
}

.shop_redeem span {
    position: absolute;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(90, 52, 16);
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: clamp(8.64px, 1.08vw, 16.2px);
    padding-bottom: 6%;
    pointer-events: none;
    text-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px;
}

.shop_redeem:hover {
    transform: translateX(-50%) translateY(-2px);
}

.shop_redeem:active {
    transform: translateX(-50%) scale(0.96);
}

.shop_card.is-hidden {
    display: none;
}

.promo-stage {
    background: url("../images/promo-page/bg.webp") center center / cover no-repeat;
    flex: 1 1 0px;
    min-height: 0px;
    display: flex;
    flex-direction: column;
}

.promo-stage .lobby-content {
    min-height: 0px;
}

.promo_container {
    display: flex;
    flex-direction: column;
    padding: 0px 2%;
    height: 100%;
    min-height: 0px;
    width: 100%;
    box-sizing: border-box;
}

.promo_body {
    flex: 1 1 auto;
    min-height: 0px;
    display: flex;
    align-items: stretch;
    gap: 2.5%;
}

.promo_categories {
    flex: 0 0 17%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0px;
    padding: 1% 0px 2%;
    gap: 3%;
}

.promo_cat {
    position: relative;
    width: 100%;
    aspect-ratio: 446 / 109;
    max-height: 15.5%;
    background: url("../images/promo-page/frame.webp") center center / 100% 100% no-repeat;
    border: 0px;
    outline: 0px;
    display: flex;
    align-items: center;
    gap: 6%;
    padding: 0px 9%;
    cursor: pointer;
    color: rgb(246, 234, 208);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: clamp(10.8px, 1.72vw, 17.28px);
    white-space: nowrap;
    opacity: 0.82;
    transition: opacity 0.2s, filter 0.2s, transform 0.2s;
    text-shadow: rgba(0, 0, 0, 0.45) 0px 2px 4px;
}

.promo_cat_icon {
    width: 20%;
    max-width: 42px;
    height: auto;
    flex: 0 0 auto;
}

.promo_cat:hover {
    opacity: 1;
}

.promo_cat.active {
    opacity: 1;
    filter: brightness(1.12) drop-shadow(rgba(255, 215, 0, 0.55) 0px 0px 6px);
    transform: translateX(13px);
}

.promo_grid {
    flex: 1 1 auto;
    min-width: 0px;
    min-height: 0px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4% 3%;
    padding: 1% 0.5% 2%;
    align-content: start;
    overflow: visible;
}

.promo_card {
    position: relative;
    min-width: 0px;
    min-height: 0px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
    transition: transform 0.18s, box-shadow 0.18s;
}

.promo_card img {
    width: 100%;
}

.promo_card:hover {
    transform: translateY(-3px);
    box-shadow: rgba(6, 34, 74, 0.55) 0px 10px 20px, rgba(255, 215, 0, 0.7) 0px 0px 0px 2px inset;
}

.promo_card:active {
    transform: translateY(-1px) scale(0.99);
}

.promo_pager {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3%;
    margin-bottom: 1%;
}

.promo_pager_arrow {
    width: clamp(24px, 3vw, 28px);
    height: auto;
    cursor: pointer;
}

.promo_pager_text {
    color: rgb(225, 185, 61);
    font-weight: 800;
    font-size: clamp(12.96px, 1.73vw, 21.6px);
    letter-spacing: 1px;
    filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px) drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 3px);
    background-image: linear-gradient(rgb(255, 246, 206) 0%, rgb(255, 215, 94) 48%, rgb(223, 156, 34) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


.promo_card.is-hidden {
    display: none;
}

.promo-tnc-modal {
    display: none;
    position: fixed;
    inset: 0px;
    z-index: 3000;
    background: rgba(2, 12, 30, 0.72);
    align-items: center;
    justify-content: center;
    padding: 1% 4%;
}

.promo-tnc-modal.open {
    display: flex;
}

.promo-tnc-box {
    position: relative;
    width: min(1180px, 94%);
    height: 92%;
    max-height: 92%;
    background: url("../images/promo-page/tnc-frame.webp") center center / 100% 100% no-repeat;
    display: flex;
    padding: 3% 0px;
}

.promo-tnc-close {
    position: absolute;
    top: 6%;
    right: 3%;
    width: 38px;
    height: 38px;
    border: 0px;
    background: transparent;
    color: rgb(246, 234, 208);
    font-size: 32.4px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.12s, color 0.12s;
}

.promo-tnc-close:hover {
    color: rgb(255, 210, 74);
    transform: scale(1.1);
}

.promo-tnc-inner {
    flex: 1 1 auto;
    min-height: 0px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 4.5% 4% 4% 4.5%;
    overflow-y: auto;
    touch-action: pan-y;
    color: rgb(219, 228, 244);
    font-size: clamp(11.88px, 1.46vw, 16.2px);
    line-height: 1.55;
}

.promo-tnc-inner::-webkit-scrollbar {
    width: 8px;
}

.promo-tnc-inner::-webkit-scrollbar-thumb {
    background: rgba(226, 168, 40, 0.7);
    border-radius: 6px;
}

.promo-tnc-inner::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

.promo-tnc-q {
    margin: 0px 0px 3%;
    color: rgb(255, 255, 255);
    font-weight: 700;
    font-size: clamp(14.04px, 1.84vw, 19.44px);
}

.promo-tnc-inner p {
    margin: 0px 0px 2%;
}

.promo-tnc-sub {
    color: rgb(255, 210, 74);
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 2.5% 0px 1.2%;
    font-size: clamp(14.04px, 1.84vw, 19.44px);
}

.promo-tnc-list {
    margin: 0px;
    padding-left: 4%;
}

.promo-tnc-list li {
    margin-bottom: 1.6%;
    padding-left: 0.5%;
}

.checkin-stage {
    background: url("../images/check-in-page/bg.webp") center center / cover no-repeat;
    flex: 1 1 0px;
    min-height: 0px;
    display: flex;
    flex-direction: column;
}

.checkin-stage .lobby-content {
    min-height: 0px;
}

.checkin_container {
    height: 100%;
    min-height: 0px;
    width: 100%;
    padding: 2%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.checkin_row {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transform-origin: center center;
}

.checkin_card {
    position: relative;
    flex: 0 0 auto;
    height: 94%;
    aspect-ratio: 201 / 630;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: drop-shadow(rgba(4, 20, 48, 0.45) 0px 6px 12px);
    filter: brightness(0.5);
}

.checkin_card.is-grand {
    height: 108%;
    aspect-ratio: 327 / 775;
    z-index: 2;
}

.checkin_amount {
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translateX(-50%);
    width: 74%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6%;
    padding: 3% 6%;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 5px, rgba(255, 255, 255, 0.15) 0px 1px 0px inset;
    color: rgb(255, 255, 255);
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: clamp(11.88px, 1.46vw, 18.36px);
    line-height: 1;
    white-space: nowrap;
    background: rgb(19, 66, 110);
}

.checkin_coin {
    width: 1.35em;
    height: 1.35em;
    object-fit: contain;
    flex: 0 0 auto;
}

.checkin_card.is-grand .checkin_amount {
    bottom: 16%;
    width: 66%;
    font-size: clamp(14.04px, 1.84vw, 22.68px);
}

.checkin_action {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.checkin_claimed {
    width: clamp(26px, 3.2vw, 45px);
    height: auto;
    display: block;
}

.checkin_claim {
    width: 100%;
    max-width: 180px;
    cursor: pointer;
    line-height: 0;
    transition: transform 0.12s, filter 0.12s;
    animation: 1.4s ease-in-out 0s infinite normal none running checkinPulse;
}

.checkin_claim img {
    width: 100%;
    display: block;
}

.checkin_claim:hover {
    filter: brightness(1.08);
}

.checkin_claim:active {
    transform: scale(0.95);
}

@keyframes checkinPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

.checkin_card.is-today {
    filter: drop-shadow(rgba(255, 214, 120, 0.7) 0px 0px 10px) drop-shadow(rgba(4, 20, 48, 0.45) 0px 6px 12px);
    transition: transform 0.12s, filter 0.12s;
    animation: 2.4s ease-in-out 0s infinite normal none running checkinPulse;
}

.checkin_card.is-locked {
}

.vip-stage {
    background: url("../images/vip-page/bg.webp") center center / cover no-repeat;
    flex: 1 1 0px;
    min-height: 0px;
    display: flex;
    flex-direction: column;
}

.vip-stage .lobby-content {
    min-height: 0px;
}

.vip_layout {
    height: 100%;
    min-height: 0px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 1.5%;
    display: flex;
    gap: 1.5%;
    max-width: 93%;
    margin: auto;
}

.vip_left {
    position: relative;
    flex: 0 0 26%;
    min-width: 0px;
    background: url("../images/vip-page/privileges-frame.webp") center center / 100% 100% no-repeat;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 4% 3% 2%;
}

.vip_head {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
}

.vip_head_title {
    margin: 0px;
    color: rgb(247, 209, 108);
    font-weight: 900;
    letter-spacing: 1px;
    font-size: 24.84px;
    text-shadow: rgba(0, 0, 0, 0.55) 0px 2px 5px;
}

.vip_head_sub {
    margin: 4% 0px 0px;
    color: rgb(197, 214, 240);
    font-size: 12.96px;
    letter-spacing: 0.3px;
}

.vip_shield {
    flex: 1 1 0px;
    min-height: 0px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2% 0px 3%;
}

.vip_shield img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 6px 14px);
}

.vip_current {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    background: url("../images/vip-page/privileges-frame-2.webp") center center / 100% 100% no-repeat;
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.vip_cur_label {
    color: rgb(197, 214, 240);
    font-size: 12.96px;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.vip_cur_level {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 1% 0px;
}

.vip_cur_level span {
    color: rgb(247, 209, 108);
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 22.68px;
    text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px;
}

.vip_deco {
    width: clamp(34px, 5vw, 60px);
    height: auto;
    object-fit: contain;
}

.vip_cur_points {
    color: rgb(255, 255, 255);
    font-weight: 900;
    font-size: clamp(17.28px, 2.48vw, 29.16px);
    line-height: 1;
    margin: 1% 0px 2%;
    text-shadow: rgba(70, 130, 220, 0.6) 0px 0px 10px;
}

.vip_cur_bar {
    width: 100%;
    height: clamp(8px, 1vw, 12px);
    border-radius: 999px;
    background: rgba(4, 16, 40, 0.75);
    border: 1px solid rgba(120, 150, 210, 0.4);
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 1px 3px inset;
}

.vip_cur_bar_fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(30, 144, 255) 0%, rgb(103, 212, 255) 100%);
    box-shadow: rgba(103, 212, 255, 0.75) 0px 0px 8px;
}

.vip_cur_range {
    margin-top: 3%;
    color: rgb(197, 214, 240);
    font-size: 15.12px;
    letter-spacing: 0.5px;
}

.vip_right {
    flex: 1 1 auto;
    min-width: 0px;
    display: flex;
    flex-direction: column;
    gap: 2%;
}

.vip_panel {
    position: relative;
    box-sizing: border-box;
    min-height: 0px;
    padding: 1.8% 2.6% 2%;
    display: flex;
    flex-direction: column;
}

.vip_levels {
    flex: 1 1 0px;
    background: url("../images/vip-page/vip-frame.webp") center center / 100% 100% no-repeat;
}

.vip_benefits {
    flex: 1.15 1 0px;
    background: url("../images/vip-page/vip-frame.webp") center center / 100% 100% no-repeat;
}

.vip_panel_head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 1%;
    margin-bottom: 1.3%;
}

.vip_panel_icon {
    height: clamp(18px, 2.3vw, 22px);
    width: auto;
    object-fit: contain;
}

.vip_panel_head h3 {
    margin: 0px;
    color: rgb(247, 209, 108);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: clamp(12.96px, 1.84vw, 16.2px);
    text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px;
}

.vip_tiers {
    flex: 1 1 auto;
    min-height: 0px;
    display: flex;
    gap: 1.2%;
}

.vip_tier {
    flex: 1 1 0px;
    min-width: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3%;
    padding: 1%;
    border-radius: 10px;
    background: rgba(9, 26, 60, 0.55);
    border: 1px solid rgba(255, 216, 110, 0.4);
    box-sizing: border-box;
}

.vip_tier.is-active {
    background: rgba(70, 54, 14, 0.5);
    border-color: rgb(255, 216, 110);
    box-shadow: rgba(255, 205, 90, 0.7) 0px 0px 20px, rgba(255, 205, 90, 0.4) 0px 0px 0px 1px inset;
}

.vip_tier_crown {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.vip_tier_crown img {
    filter: drop-shadow(rgba(0, 0, 0, 0.35) 0px 3px 5px);
    width: 75px;
}

.vip_tier_name {
    flex: 0 0 auto;
    color: rgb(247, 209, 108);
    font-weight: 800;
    letter-spacing: 0.8px;
    font-size: clamp(9.72px, 2.43vw, 16.2px);
    line-height: 1;
    text-align: center;
}

.vip_tiers .vip_tier:nth-of-type(1) .vip_tier_name, .vip_tiers .vip_tier:nth-of-type(2) .vip_tier_name, .vip_tiers .vip_tier:nth-of-type(3) .vip_tier_name, .vip_tiers .vip_tier:nth-of-type(4) .vip_tier_name, .vip_tiers .vip_tier:nth-of-type(5) .vip_tier_name, .vip_tiers .vip_tier:nth-of-type(6) .vip_tier_name {
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.vip_tiers .vip_tier:nth-of-type(1) .vip_tier_name {
    background-image: linear-gradient(rgb(244, 183, 106) 0%, rgb(198, 122, 52) 55%, rgb(138, 78, 30) 100%);
}

.vip_tiers .vip_tier:nth-of-type(2) .vip_tier_name {
    background-image: linear-gradient(rgb(245, 249, 255) 0%, rgb(195, 207, 221) 55%, rgb(138, 152, 169) 100%);
}

.vip_tiers .vip_tier:nth-of-type(3) .vip_tier_name {
    background-image: linear-gradient(rgb(255, 233, 168) 0%, rgb(240, 194, 78) 55%, rgb(185, 130, 42) 100%);
}

.vip_tiers .vip_tier:nth-of-type(4) .vip_tier_name {
    background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(221, 230, 240) 55%, rgb(175, 190, 206) 100%);
}

.vip_tiers .vip_tier:nth-of-type(5) .vip_tier_name {
    background-image: linear-gradient(rgb(205, 233, 255) 0%, rgb(127, 180, 255) 50%, rgb(62, 123, 214) 100%);
}

.vip_tiers .vip_tier:nth-of-type(6) .vip_tier_name {
    background-image: linear-gradient(rgb(255, 201, 120) 0%, rgb(242, 148, 47) 50%, rgb(210, 104, 26) 100%);
}

.vip_tier_pts {
    flex: 0 0 auto;
    color: rgb(197, 214, 240);
    font-size: clamp(9.72px, 2.43vw, 11.88px);
    letter-spacing: 0.3px;
    line-height: 1.1;
    text-align: center;
}

.vip_track {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-top: 1.6%;
}

.vip_track::before {
    content: "";
    position: absolute;
    left: 0%;
    right: 0%;
    top: 50%;
    transform: translateY(-50%);
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(247, 209, 108, 0.9) 0%, rgba(247, 209, 108, 0.9) 42%, rgba(120, 150, 210, 0.35) 42%, rgba(120, 150, 210, 0.35) 100%);
}

.vip_track_cell {
    position: relative;
    flex: 1 1 0px;
    display: flex;
    justify-content: center;
}

.vip_node {
    width: clamp(14px, 1.9vw, 24px);
    height: auto;
    object-fit: contain;
}

.vip_track_cell .vip_node[src*="current"] {
    width: clamp(18px, 2.4vw, 30px);
    filter: drop-shadow(rgba(255, 205, 90, 0.8) 0px 0px 8px);
}

.vip_benefit_cards {
    flex: 1 1 auto;
    min-height: 0px;
    display: flex;
    gap: 1.5%;
}

.vip_benefit {
    flex: 1 1 0px;
    min-width: 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 2.2% 2.1%;
    border-radius: 10px;
    background: rgba(8, 24, 56, 0.55);
    border: 1px solid rgb(181, 136, 0);
}

.vip_benefit_head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 4.5%;
    margin-bottom: 5.5%;
    border-bottom: 1px solid rgba(120, 150, 210, 0.28);
}

.vip_benefit_head img {
    width: clamp(20px, 2.6vw, 34px);
    height: auto;
    object-fit: contain;
    flex: 0 0 auto;
}

.vip_benefit_head span {
    color: rgb(255, 255, 255);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.15;
    font-size: 16.2px;
}

.vip_benefit_body {
    flex: 1 1 auto;
    min-height: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8%;
}

.vip_row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 3%;
    color: rgb(197, 214, 240);
    font-size: 12.96px;
    letter-spacing: 0px;
    line-height: 1.3;
}

.vip_row span {
    min-width: 0px;
    flex: 1 1 auto;
}

.vip_row b {
    color: rgb(255, 255, 255);
    font-weight: 800;
    white-space: nowrap;
}

.vip_benefit_hero {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12%;
}

.vip_benefit_hero_label {
    color: rgb(255, 255, 255);
    font-size: 12.96px;
    line-height: 1.3;
}

.vip_benefit_hero_val {
    padding: 6% 12%;
    border-radius: 8px;
    border: 1px solid rgba(247, 209, 108, 0.7);
    background: rgba(4, 16, 40, 0.55);
    color: rgb(255, 255, 255);
    font-weight: 900;
    letter-spacing: 1px;
    font-size: clamp(17.28px, 2.59vw, 32.4px);
    line-height: 1;
    text-shadow: rgba(255, 205, 90, 0.5) 0px 0px 8px;
}

.fw-stage {
    background: url("../images/fortune-wheel-page/bg.webp") center center / cover no-repeat;
    flex: 1 1 0px;
    min-height: 0px;
    display: flex;
    flex-direction: column;
}

.fw-stage .lobby-content {
    min-height: 0px;
}

.fw_layout {
    height: 100%;
    min-height: 0px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 2%;
    display: flex;
    align-items: center;
    gap: 2%;
    max-width: 1000px;
    margin: auto;
}

.fw_left {
    flex: 0 0 44%;
    min-width: 0px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5%;
    padding: 0.5% 0px;
    box-sizing: border-box;
}

.fw_wheel {
    position: relative;
    flex: 1 1 auto;
    min-height: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fw_wheel_img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 4s cubic-bezier(0.15, 0.62, 0.2, 1);
    will-change: transform;
}

.fw_wheel_pointer {
    position: absolute;
    top: -2%;
    left: 50%;
    transform: translateX(-50%);
    height: 15%;
    width: auto;
    z-index: 3;
    filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 3px 5px);
}

.fw_token {
    position: relative;
    flex: 0 0 auto;
    width: 39%;
    max-width: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fw_token_bar {
    width: 100%;
    height: auto;
    display: block;
}

.fw_token_text {
    position: absolute;
    color: rgb(255, 255, 255);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: clamp(12.96px, 1.84vw, 23.76px);
    text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px;
}

.fw_token_text b {
    color: rgb(255, 210, 74);
    font-weight: 900;
}

.fw_right {
    flex: 1 1 auto;
    min-width: 0px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1%;
    padding: 0.5% 0px;
    box-sizing: border-box;
}

.fw_pool {
    position: relative;
    flex: 0 1 auto;
    width: 100%;
    max-width: 860px;
    aspect-ratio: 822 / 626;
    max-height: 80%;
}

.fw_pool_frame {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.fw_pool_body {
    position: absolute;
    inset: 0px;
    padding: 11.5% 8.5% 6.5%;
    display: flex;
    gap: 4%;
    box-sizing: border-box;
}

.fw_hero {
    flex: 0 0 46%;
    min-width: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fw_hero_img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.fw_pool_right {
    flex: 1 1 auto;
    min-width: 0px;
    display: flex;
    flex-direction: column;
    gap: 4%;
}

.fw_grid {
    flex: 1 1 auto;
    min-height: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6%;
}

.fw_prize {
    position: relative;
    min-width: 0px;
    min-height: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fw_prize_img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.fw_prize_val {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 42%;
    text-align: center;
    padding: 1% 8%;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid rgba(224, 190, 110, 0.45);
    color: rgb(255, 255, 255);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.5px;
    font-size: clamp(9.72px, 1.3vw, 17.28px);
    z-index: 2;
    pointer-events: none;
    box-sizing: border-box;
}

.fw_more {
    flex: 0 0 auto;
    position: relative;
    align-self: flex-end;
    width: 50%;
    max-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: auto;
}

.fw_more img {
    width: 100%;
    height: auto;
    display: block;
}

.fw_more span {
    position: absolute;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 210, 74);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: clamp(8.64px, 1.08vw, 14.04px);
    pointer-events: none;
    padding-bottom: 4%;
}

.fw_spin {
    position: relative;
    flex: 0 0 auto;
    width: 43%;
    max-width: 420px;
    aspect-ratio: 433 / 141;
    border: 0px;
    background: transparent;
    padding: 0px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s;
}

.fw_spin img {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fw_spin span {
    position: relative;
    color: rgb(90, 52, 16);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: clamp(15.12px, 2.27vw, 32.4px);
    padding-bottom: 3%;
    font-family: Cinzel, serif;
}

.fw_spin:hover {
    transform: translateY(-2px);
}

.fw_spin:active {
    transform: scale(0.97);
}

.fw_bottom {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4%;
    width: 100%;
    padding: 0px 2%;
    box-sizing: border-box;
}
.shop_cat.active span{
    filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px) drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 3px);
    background-image: linear-gradient(rgb(255, 246, 206) 0%, rgb(255, 215, 94) 48%, rgb(223, 156, 34) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.promo_cat.active span {
    filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px) drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 3px);
    background-image: linear-gradient(rgb(255, 246, 206) 0%, rgb(255, 215, 94) 48%, rgb(223, 156, 34) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}







/* ============================================================
   LOGIN 页（login.html）
   面板锁死 popout-base.png 原图比例 1142:787，内部用容器查询单位
   cqw/cqh 等比缩放；字体沿用本文件已定义的 Cinzel / Montserrat。
   ============================================================ */
.login-page,
.login-page *,
.login-page *::before,
.login-page *::after {
    box-sizing: border-box;
}

.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-family: Montserrat, sans-serif;
    background: #0b1c33;
}

/* ---------- 全屏背景 ---------- */
.login-bg {
    position: fixed;
    inset: 0;
    background: url(../images/login/bg.jpg) center center / cover no-repeat;
    z-index: 0;
}

/* ---------- 弹窗面板 ---------- */
.login-panel {
    position: relative;
    z-index: 1;
    width: min(1040px, 88vw, calc(88vh * 900 / 787));
    aspect-ratio: 800 / 787;
    max-height: 88vh;
    background: url(../images/login/popout-base.png) center top / 100% 100% no-repeat;
    container-type: size;
    padding: 8.5cqh 3cqw 2cqh;
}

/* ---------- 关闭 ---------- */
.login-close {
    position: absolute;
    top: 10cqh;
    right: 5cqw;
    width: 6cqh;
    height: 6cqh;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 4.54cqh;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}

.login-close:hover {
    transform: scale(1.12);
    opacity: 0.85;
}

/* ---------- 标题 ---------- */
.login-title {
    margin: 0 0 3.4cqh;
    text-align: center;
    font-family: Cinzel, serif;
    font-weight: 900;
    font-size: 7.56cqw;
    letter-spacing: 0.06em;
    color: #fff;
    text-shadow:
        0 0.3cqh 0 rgba(6, 30, 66, 0.55),
        0 0.8cqh 1.4cqh rgba(3, 20, 48, 0.5);
}

/* ---------- 表单 ---------- */
.login-form {
    display: flex;
    flex-direction: column;
}

.login-field {
    position: relative;
    display: flex;
    align-items: center;
    height: 8.7cqh;
    margin-bottom: 2.6cqh;
    padding: 0 2.6cqw;
    border-radius: 1.8cqh;
    /* 跟 register 一致：白底 + 蓝图标 + 蓝金细边 */
    background: #ffffff;
    box-shadow:
        inset 0 0 0 0.15cqh rgba(30, 79, 160, 0.18),
        0 0.3cqh 0.6cqh rgba(20, 58, 134, 0.12);
}

.login-field-icon {
    flex: none;
    width: 5cqw;
    display: grid;
    place-items: center;
    color: #1c4fa0;
    font-size: 3.13cqw;
}

.login-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: #1c2637;
    font-family: inherit;
    font-size: 3.02cqw;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.login-input::placeholder {
    color: #9aa6ba;
    font-weight: 600;
}

.login-input:focus {
    outline: none;
}

.login-field:focus-within {
    box-shadow:
        inset 0 0 0 0.2cqh rgba(30, 79, 160, 0.5),
        0 0.3cqh 0.8cqh rgba(20, 58, 134, 0.2);
}

.login-eye {
    flex: none;
    border: 0;
    background: transparent;
    color: #7a8aa3;
    font-size: 2.81cqw;
    cursor: pointer;
    padding: 0 0.5cqw;
}

.login-eye:hover {
    color: #1c4fa0;
}

.login-captcha {
    flex: none;
    border: 0;
    cursor: pointer;
    padding: 0.7cqh 1.6cqw;
    border-radius: 0.6cqh;
    font-family: "Courier New", monospace;
    font-weight: 700;
    font-size: 3.24cqw;
    font-style: italic;
    letter-spacing: 0.12em;
    color: #1c2330;
    text-shadow: 0.15cqw 0.15cqw 0 rgba(0, 0, 0, 0.15);
    background:
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 4px),
        linear-gradient(180deg, #f3f3ef 0%, #d9d9d2 100%);
}

/* ---------- 链接行 ---------- */
.login-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.4cqh 0.4cqw 0;
    font-size: 2.7cqw;
    color: #fff;
}

.login-link {
    color: #ffcf5a;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.login-link:hover {
    color: #ffe08a;
}

.login-register {
    color: #ffffff;
    font-weight: 600;
}

/* ---------- 登录按钮（btn-login.png 图上已带文字） ---------- */
.login-submit {
    align-self: center;
    width: 34cqw;
    aspect-ratio: 395 / 91;
    margin: 3.4cqh 0 0;
    border: 0;
    background: url(../images/login/btn-login.png) center / 100% 100% no-repeat;
    cursor: pointer;
    transition: transform 0.12s, filter 0.12s;
}

.login-submit:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.login-submit:active {
    transform: scale(0.97);
}

/* ---------- 分割线 ---------- */
.login-divider {
    display: flex;
    align-items: center;
    gap: 2cqw;
    margin: 3cqh 0 2.4cqh;
    color: #eaf2ff;
    font-size: 2.7cqw;
    font-weight: 600;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 0.2cqh;
    background: rgba(4, 20, 45, 0.85);
}

/* ---------- 第三方登录 ---------- */
.login-socials {
    display: flex;
    justify-content: center;
    gap: 2.4cqw;
}

.login-social {
    flex: 1 1 0;
    max-width: 28cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4cqw;
    height: 8cqh;
    border: 0;
    border-radius: 1.4cqh;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 2.92cqw;
    transition: transform 0.12s, filter 0.12s;
}

.login-social i {
    font-size: 3.46cqw;
}

.login-social span {
    white-space: nowrap;
}

.login-social:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.login-social:active {
    transform: scale(0.97);
}

/* 跟 register 一致：Telegram 蓝底白字，Google / Whatsapp 白底 */
.login-social-telegram {
    background: #2f74c0;
    color: #fff;
}

.login-social-google {
    background: #fff;
    color: #1f2a44;
    box-shadow: inset 0 0 0 0.15cqh rgba(30, 79, 160, 0.25);
}

.login-social-whatsapp {
    background: #fff;
    color: #1f2a44;
    box-shadow: inset 0 0 0 0.15cqh rgba(30, 79, 160, 0.25);
}

.login-social-whatsapp i {
    color: #25d366;
}

/* ============================================================
   REGISTER 页（register.html）——沿用 login 的容器查询布局，浅色主题
   面板锁死 register/popout-base.png 比例 1142:947
   ============================================================ */
.register-page,
.register-page *,
.register-page *::before,
.register-page *::after {
    box-sizing: border-box;
}

.register-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-family: Montserrat, sans-serif;
    background: #0b1c33;
}

.register-bg {
    position: fixed;
    inset: 0;
    background: url(../images/register/bg.jpg) center center / cover no-repeat;
    z-index: 0;
}

.register-panel {
    position: relative;
    z-index: 1;
    width: min(1040px, 88vw, calc(94vh * 1142 / 947));
    aspect-ratio: 1142 / 947;
    max-height: 94vh;
    background: url(../images/register/popout-base.png) center top / 100% 100% no-repeat;
    container-type: size;
    padding: 8cqh 4cqw 4cqh;
}

.register-close {
    position: absolute;
    top: 7.6cqh;
    right: 4cqw;
    width: 5cqh;
    height: 5cqh;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1c4fa0;
    font-size: 3.67cqh;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}

.register-close:hover {
    transform: scale(1.12);
    opacity: 0.8;
}

.register-title {
    margin: 0 0 2.6cqh;
    text-align: center;
    font-family: Cinzel, serif;
    font-weight: 900;
    font-size: 6.05cqw;
    letter-spacing: 0.05em;
    color: #123a86;
    text-shadow: 0 0.2cqh 0.2cqh rgba(255, 255, 255, 0.8);
}

.register-form {
    display: flex;
    flex-direction: column;
}

/* 浅色输入框：白底 + 蓝图标 */
.register-field {
    position: relative;
    display: flex;
    align-items: center;
    height: 7cqh;
    margin-bottom: 1.8cqh;
    padding: 0 2.4cqw;
    border-radius: 1.4cqh;
    background: #ffffff;
    box-shadow:
        inset 0 0 0 0.15cqh rgba(30, 79, 160, 0.18),
        0 0.3cqh 0.6cqh rgba(20, 58, 134, 0.12);
}

.register-field-icon {
    flex: none;
    width: 4.4cqw;
    display: grid;
    place-items: center;
    color: #1c4fa0;
    font-size: 2.81cqw;
}

.register-prefix {
    flex: none;
    padding-right: 1.4cqw;
    margin-right: 1.4cqw;
    border-right: 0.15cqh solid rgba(30, 79, 160, 0.25);
    color: #4a5b76;
    font-size: 2.48cqw;
    font-weight: 700;
}

.register-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: #1c2637;
    font-family: inherit;
    font-size: 2.7cqw;
    font-weight: 600;
}

.register-input::placeholder {
    color: #9aa6ba;
    font-weight: 600;
}

.register-input:focus {
    outline: none;
}

.register-field:focus-within {
    box-shadow:
        inset 0 0 0 0.2cqh rgba(30, 79, 160, 0.5),
        0 0.3cqh 0.8cqh rgba(20, 58, 134, 0.2);
}

/* 同意条款 */
.register-agree {
    display: flex;
    align-items: center;
    gap: 1.4cqw;
    margin: 0.6cqh 0.4cqw 0;
    color: #1c2637;
    font-size: 2.59cqw;
    font-weight: 600;
    cursor: pointer;
}

.register-agree input {
    flex: none;
    width: 2.4cqw;
    height: 2.4cqw;
    accent-color: #1c4fa0;
    cursor: pointer;
}

.register-link {
    color: #2b6fd6;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* 注册按钮 */
.register-submit {
    align-self: center;
    width: 32cqw;
    aspect-ratio: 395 / 91;
    margin: 2.6cqh 0 0;
    border: 0;
    background: url(../images/register/btn-register.png) center / 100% 100% no-repeat;
    cursor: pointer;
    transition: transform 0.12s, filter 0.12s;
}

.register-submit:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.register-submit:active {
    transform: scale(0.97);
}

.register-divider {
    display: flex;
    align-items: center;
    gap: 2cqw;
    margin: 2.2cqh 0 1.8cqh;
    color: #1c2637;
    font-size: 2.7cqw;
    font-weight: 700;
}

.register-divider::before,
.register-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 0.15cqh;
    background: rgba(20, 40, 80, 0.55);
}

.register-socials {
    display: flex;
    justify-content: center;
    gap: 2.2cqw;
}

.register-social {
    flex: 1 1 0;
    max-width: 26cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2cqw;
    height: 6.6cqh;
    border: 0;
    border-radius: 1.2cqh;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 2.7cqw;
    transition: transform 0.12s, filter 0.12s;
}

.register-social i {
    font-size: 3.13cqw;
}

.register-social:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.register-social:active {
    transform: scale(0.97);
}

.register-social-telegram {
    background: #2f74c0;
    color: #fff;
}

.register-social-google {
    background: #fff;
    color: #1f2a44;
    box-shadow: inset 0 0 0 0.15cqh rgba(30, 79, 160, 0.25);
}

.register-social-whatsapp {
    background: #fff;
    color: #1f2a44;
    box-shadow: inset 0 0 0 0.15cqh rgba(30, 79, 160, 0.25);
}

.register-social-whatsapp i {
    color: #25d366;
}

/* ============================================================
   OTP / 成功 弹窗 —— 直接复用 promo 的弹窗外框（紫底金边），
   这里只补内部控件样式，配色走金/紫，不用红色。
   OTP、成功框比 promo 窄，单独收窄 max-width。
   ============================================================ */
/* 用 promotion 页那张 tnc 相框（深蓝底 + 金边 + 顶部宝石），随内容拉伸 */
.tnc-mini-box {
    position: relative;
    width: min(500px, 92vw);
    padding: 54px 42px 40px;
    text-align: center;
    color: #fff;
    background: url(../images/promo-page/tnc-frame.webp) center center / 100% 100% no-repeat;
}

.tnc-mini-close {
    position: absolute;
    top: 16px;
    right: 22px;
    border: 0;
    background: transparent;
    color: #f6ead0;
    font-size: 28.08px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.12s, color 0.12s;
}

.tnc-mini-close:hover {
    color: #ffd24a;
    transform: scale(1.1);
}

.modal-panel-title {
    margin: 0 0 20px;
    color: rgb(255, 210, 74);
    font-size: 21.6px;
    font-weight: 900;
    letter-spacing: 1px;
    text-align: left;
}

/* 弹窗内的说明文字与输入框（忘记密码等） */
.modal-hint {
    margin: -8px 0 16px;
    color: #cdd6e6;
    font-size: 14.04px;
    line-height: 1.5;
    text-align: left;
}

.modal-field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    margin: 0 0 22px;
    padding: 0 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 215, 0, 0.5);
}

.modal-field-icon {
    flex: none;
    color: rgb(255, 210, 74);
    font-size: 19.44px;
}

.modal-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 16.2px;
    font-weight: 600;
}

.modal-input::placeholder {
    color: #9aa6ba;
    font-weight: 600;
}

.modal-input:focus {
    outline: none;
}

.modal-field:focus-within {
    border-color: rgb(255, 215, 0);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.25);
}

/* OTP 六格：金边 + 深底 */
.otp-inputs {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 26px;
}

.otp-inputs input {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border: 2px solid rgba(255, 215, 0, 0.6);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    text-align: center;
    font-size: 25.92px;
    font-weight: 700;
}

.otp-inputs input:focus {
    outline: none;
    border-color: rgb(255, 215, 0);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
}

/* 通用金色 CTA（Submit / Deposit） */
/* 弹窗按钮统一用 submit.webp 图片按钮（OTP Submit / 成功 Deposit / 忘记密码 Submit·OK），
   文字压在图上，保持图片原始比例 318:90 不拉伸 */
.modal-cta {
    display: block;
    width: min(200px, 82%);
    aspect-ratio: 318 / 90;
    margin: 4px auto 0;
    border: 0;
    cursor: pointer;
    color: #123a86;
    font-family: inherit;
    font-size: 21.6px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    background: url(../images/register/submit.webp) center center / 100% 100% no-repeat;
    transition: filter 0.12s, transform 0.12s;
}

.modal-cta:hover {
    filter: brightness(1.05);
}

.modal-cta:active {
    transform: scale(0.98);
}

/* 成功勾：金圈 */
.modal-check {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    margin: 6px auto 18px;
    border-radius: 50%;
    color: #2a1500;
    font-size: 43.2px;
    background: linear-gradient(180deg, #ffe08a 0%, #f2b840 45%, #d99420 100%);
    box-shadow: 0 8px 22px rgba(180, 130, 20, 0.45);
}

.modal-success-text {
    margin: 0 0 24px;
    color: #f3e9ff;
    font-size: 18.36px;
    font-weight: 700;
}

/* ============================================================
   进站弹窗（index.html）—— swiper 轮播促销图
   ============================================================ */
.entry-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100050;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(3px);
}

.entry-popup.show {
    display: flex;
}

.entry-popup-box {
    position: relative;
    /* 同时按视口宽/高封顶：为下方关闭按钮预留 ~130px（图片比例 500:450），
       矮屏（手机横屏）时整体缩小，关闭按钮不会被挤出屏幕 */
    width: min(500px, 92vw, calc((100vh - 130px) * 500 / 450));
    width: min(500px, 92vw, calc((100dvh - 130px) * 500 / 450));
}

.entry-swiper {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.entry-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 500 / 450;
    object-fit: cover;
}

/* 关闭按钮：移到弹窗下方居中 */
.entry-popup-close {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 2px solid rgb(255, 215, 0);
    border-radius: 50%;
    background: #000000;
    color: rgb(255, 215, 0);
    font-size: 25.92px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    z-index: 7;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.12s, background 0.12s, color 0.12s;
}

.entry-popup-close:hover {
    background: rgb(255, 215, 0);
    color: #1a0033;
    transform: translateX(-50%) scale(1.1);
}

/* 左右箭头 */
.entry-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    z-index: 6;
    cursor: pointer;
    transition: transform 0.12s, filter 0.12s;
}

.entry-arrow img {
    display: block;
    width: 100%;
    height: auto;
}

.entry-arrow-prev {
    left: 8px;
}

.entry-arrow-next {
    right: 8px;
}

.entry-arrow:hover {
    filter: brightness(1.12);
}

.entry-arrow-prev:hover {
    transform: translateY(-50%) scale(1.1);
}

.entry-arrow-next:hover {
    transform: translateY(-50%) scale(1.1);
}

/* swiper 隐藏禁用态时的按钮（loop 下一般都可用） */
.entry-arrow.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}

.entry-swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.55;
}

.entry-swiper .swiper-pagination-bullet-active {
    background: rgb(255, 215, 0);
    opacity: 1;
}


/* 竖屏强制横看：不再显示“请旋转设备”，而是把整个 <body> 旋转 90° 当横屏用。
   body 尺寸取对调值（宽=100vh、高=100vw），旋转后正好铺满竖屏；main.js 的
   autoFitScreen 会检测 orientation:portrait 并对调缩放用的宽高，让舞台铺满旋转框。
   想反方向（内容顶部朝右）改成：transform: translateY(100vh) rotate(-90deg); */
@media screen and (orientation: portrait) {
    #portrait-mask {
        display: none !important;
    }
    html {
        overflow: hidden;
    }
    body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vh;
        height: 100vw;
        overflow: hidden;
        transform-origin: top left;
        transform: translateX(100vw) rotate(90deg);
    }
}

@media screen and (max-width: 999px) {
    .products_container {
        padding-left: 5%;
    }
    .wallet-value {
        font-size: 19.44px;
        margin-right: 10px;
    }

    .user-name {
        font-size: 16.2px;
    }

    .user-sub {
        font-size: 15.12px;
    }

    .action-circle-btn {
        width: 50px;
        height: 50px;
        font-size: 29.16px;
    }

    .footer-text {
        font-size: 1.2em;
    }

    .ann-marquee-text {
        font-size: 17.28px;
    }

    .footer-icon {
        font-size: 2em;
    }

    .deposit-circle-anchor {
        top: -65px;
    }

    .deposit-text {
        font-size: 0.8em;
        bottom: 25px;
    }

    .deposit-icon {
        font-size: 2.2em;
    }

    .slots_products_container {
        padding-left: 10%;
        padding-top: 0.6%;
        padding-bottom: 0.6%;
    }

    .sports-stage {
        background-position: center top 10%;
    }

    .vip_layout {
        max-width: 85%;
    }

    .vip_row {
        font-size: 15.12px;
    }

    .promo_container {
        max-width: 85%;
        margin: auto;
    }

    .shop_container {
        max-width: 85%;
        margin: auto;
    }
    .entry-popup-close{
        bottom: -42px;
        font-size: 22.68px;
        width: 30px;
        height: 30px;

    }

}

/* ===== 仅 iPad / 平板：缩小 header 元素让所有内容排得下（不影响 mobile / desktop） ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .header-logo img { max-height: 25px; }
    .header-left { gap: 8px; }

    .user-text-meta { margin-left: 9px; }
    .user-name { font-size: 13px; }
    .user-sub { font-size: 12px; }
    .profile-btn-img { max-width: 180px; }

    .wallet-group { gap: 8px; }
    .wallet-pill {/* padding: 4px 11px; */}
    .wallet-pill-short {min-width: 104px;}
    .wallet-label {/* font-size: 14.5px; */margin-right: 6px;}
    .wallet-value {/* font-size: 13px; *//* margin-right: 6px; */}
    .wallet-add-btn { width: 24px; height: 24px; margin-left: 6px; }
    .wallet-circle-btn-img {/* max-width: 24px; */}

    .header-actions { gap: 6px; }
    .action-circle-btn {/* width: 37px; *//* height: 37px; *//* font-size: 22px; */}
}