/**
 * Slots Demo Gateway - Frontend CSS
 * 使用主题已有的 class（如 .bs-btn, .bs-text-muted 等），只添加必要的状态 class
 * 插件不负责整体样式，只提供必要的功能样式
 */

/* Meta 信息区域 */
.sdg-meta-info {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.sdg-plays-left {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.sdg-plays-left strong {
    color: #333;
}

#sdg-plays-count {
    color: #007bff;
    font-weight: 700;
    font-size: 18px;
}

.sdg-total-plays {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* 底部说明 */
.sdg-footer-info {
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

/* 合作方卡片 */
.sdg-partner-card {
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
}

.sdg-partner-card h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.sdg-partner-card p {
    margin: 0 0 15px 0;
    color: #666;
}

/* CTA 面板隐藏样式 */
#slots-game-cta-panel.slots-cta-hidden {
    display: none !important;
}

/* 弹窗样式 - BitStarz 风格 */
#slots-modal-root {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99998 !important;
    pointer-events: none !important; /* 默认不拦截点击，由 Modal 自己控制 */
}

/* 确保 slots-modal-root 内的 Modal 可以正常显示 */
#slots-modal-root .slots-auth-modal {
    pointer-events: auto !important;
}

.slots-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slots-modal-box {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 40px;
    border-radius: 16px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slots-modal-title {
    margin: 0 0 16px 0;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.slots-modal-text {
    margin: 0 0 32px 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
}

.slots-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* 按钮样式 - BitStarz 风格 */
.bs-btn {
    display: inline-block !important;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer !important;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.5;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-width: 120px;
}

.bs-btn--primary {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4),
                0 0 0 0 rgba(0, 212, 255, 0.5);
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.bs-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.6),
                0 0 0 4px rgba(0, 212, 255, 0.2);
}

.bs-btn--ghost {
    background: rgba(0, 212, 255, 0.1) !important;
    color: #00d4ff !important;
    border: 2px solid #00d4ff;
    box-shadow: 
        0 0 0 0 rgba(0, 212, 255, 0),
        0 0 20px rgba(0, 212, 255, 0.3),
        inset 0 0 20px rgba(0, 212, 255, 0.1);
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    filter: brightness(1.05) drop-shadow(0 0 8px rgba(0, 212, 255, 0.4));
}

.bs-btn--ghost:hover {
    background: rgba(0, 212, 255, 0.15) !important;
    box-shadow: 
        0 4px 20px rgba(0, 212, 255, 0.5),
        0 0 0 2px rgba(0, 212, 255, 0.4),
        inset 0 0 30px rgba(0, 212, 255, 0.2);
    transform: translateY(-2px) scale(1.02);
    border-color: #00d4ff;
}

.bs-btn--text {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: none;
    padding: 8px 16px;
}

.bs-btn--text:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
}

/* Toast 提示 */
#slots-global-toast-slot {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
}

.sdg-toast {
    padding: 12px 20px;
    margin-bottom: 10px;
    background: #333;
    color: #fff;
    border-radius: 4px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.sdg-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.sdg-toast-error {
    background: #dc3545;
}

.sdg-toast-success {
    background: #28a745;
}

/* 按钮状态 - 使用主题已有的 class，只添加必要的状态 */
.is-loading {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}

.is-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: sdg-spin 0.6s linear infinite;
}

@keyframes sdg-spin {
    to { transform: rotate(360deg); }
}

.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   游戏容器 - 移动端 9:16 首屏大卡片（参考 JILI）
   ======================================== */

/* 游戏容器基础样式（全局，不设置高度） */
#slots-demo-root,
.slots-demo-root {
    position: relative;
    width: 100%;
    /* 高度完全由主题 CSS 控制，插件不设置任何高度限制 */
    /* 桌面端：主题使用 aspect-ratio: 16/9 和 min-height: 500px */
    /* 移动端：主题使用 calc(100vh - 120px) 实现 9:16 首屏大卡片 */
    /* 插件不设置 min-height、max-height、height，避免与主题冲突 */
    background: linear-gradient(
        135deg,
        #0a0a0f 0%,
        #1a1a2e 50%,
        #0a0a0f 100%
    );
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 212, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ===== 移动端（≤768px）：强制 9:16 首屏大卡片（最高优先级） ===== */
@media (max-width: 768px) {
    /* 强制移除所有父容器的限制，确保游戏容器可以撑满屏幕 */
    .bs-game-main {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: visible !important;
    }
    
    .bs-game-main .bs-container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    .bs-game-main__grid {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        display: block !important;
    }
    
    .bs-game-main__left {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    .bs-game-main__left .bs-card {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
    }
    
    .bs-game-main__left .bs-card__body {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: visible !important;
    }
    
    /* 移动端竖屏游戏：9:16 首屏大卡片（参考 JILI 效果） */
    /* JILI 效果：游戏容器占据首屏，9:16竖屏比例，宽度撑满，高度由宽度和比例决定 */
    /* 使用 .slots-game-page 标记确保只影响游戏详情页 */
    .slots-game-page .slots-game--portrait .bs-game-frame,
    .slots-game-page .slots-game--portrait#slots-demo-root,
    .slots-game-page .bs-game-main__left .bs-game-frame.slots-game--portrait,
    .slots-game-page .bs-game-main__left #slots-demo-root.slots-game--portrait,
    .slots-game-page .bs-game-main__left .slots-game--portrait.bs-game-frame,
    .slots-game-page #slots-demo-root.slots-game--portrait,
    .slots-game-page .bs-game-frame.slots-game--portrait {
        /* 位置和布局 */
        position: relative !important;
        display: block !important;
        flex: none !important;
        align-items: unset !important;
        justify-content: unset !important;
        
        /* 宽度：撑满屏幕（参考 JILI：游戏容器占满视口宽度） */
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important; /* 移除margin，确保贴边 */
        padding: 0 !important;
        
        /* 9:16 比例：宽度决定高度（参考 JILI：竖屏游戏容器，不是方形） */
        /* 9:16 意味着 height = width * 16/9 */
        /* 例如：390px 宽度 → 693px 高度（9:16比例） */
        aspect-ratio: 9 / 16 !important;
        
        /* 高度限制：确保不超过首屏可用空间 */
        /* 顶部导航高度 ≈ 120px（padding + 标题 + 返回按钮 + border） */
        /* 最大高度 = 视口高度 - 顶部导航，防止超出首屏 */
        max-height: calc(100vh - 120px) !important;
        min-height: 0 !important; /* 移除最小高度限制 */
        
        /* 如果计算出的高度超过最大高度，aspect-ratio 会自动调整宽度以保持比例 */
        /* 但这里我们希望宽度优先，所以使用 aspect-ratio 让高度跟随宽度 */
        
        /* 溢出控制 */
        overflow: hidden !important;
        
        /* 视觉效果：圆角和阴影（参考 JILI：圆角卡片效果） */
        border-radius: 16px !important;
        background: #000 !important;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4),
                    0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
        border: none !important;
    }
    
    /* iframe 容器和 iframe：完全填充父容器（参考 JILI：将 iframe 外的那一层作为"比例盒子"母容器） */
    .slots-game-page .slots-game--portrait .slots-iframe-container,
    .slots-game-page .slots-game--portrait .slots-game-iframe-wrapper,
    .slots-game-page .slots-game--portrait .bs-game-frame-inner,
    .slots-game-page .bs-game-main__left .slots-game--portrait .slots-iframe-container,
    .slots-game-page .bs-game-main__left .slots-game--portrait .slots-game-iframe-wrapper,
    .slots-game-page .bs-game-main__left .slots-game--portrait .bs-game-frame-inner {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }
    
    /* iframe：完全填充容器（参考 JILI：iframe 自身用 width: 100%; height: 100%; 填满容器） */
    .slots-game-page .slots-game--portrait .slots-game-iframe,
    .slots-game-page .slots-game--portrait iframe,
    .slots-game-page .slots-game--portrait .slots-iframe-container iframe,
    .slots-game-page .slots-game--portrait .slots-game-iframe-wrapper iframe,
    .slots-game-page .bs-game-main__left .slots-game--portrait .slots-game-iframe,
    .slots-game-page .bs-game-main__left .slots-game--portrait iframe,
    .slots-game-page .bs-game-main__left .slots-game--portrait .slots-iframe-container iframe,
    .slots-game-page .bs-game-main__left .slots-game--portrait .slots-game-iframe-wrapper iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        /* 高度跟父容器走，不写死 */
    }
    
    /* 默认样式（无方向class）：按竖屏处理（参考 JILI） */
    .slots-game-page .bs-game-main__left .bs-game-frame:not(.slots-game--landscape):not(.slots-game--portrait),
    .slots-game-page .bs-game-main__left #slots-demo-root:not(.slots-game--landscape):not(.slots-game--portrait) {
        width: calc(100vw - 0px) !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        display: block !important;
        aspect-ratio: 9 / 16 !important;
        max-height: calc(100vh - 120px) !important;
        min-height: 0 !important;
        height: auto !important; /* 让 aspect-ratio 控制高度 */
        overflow: hidden !important;
        border-radius: 16px !important;
        background: #000 !important;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4),
                    0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
        border: none !important;
    }
}

/* 错误消息样式 */
.slots-error-message {
    padding: 40px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.slots-error-message p {
    margin: 0;
    font-size: 16px;
}

#slots-demo-root.is-playing {
    /* 游戏进行中的样式，由主题定义 */
}

/* 封面层 - BitStarz 风格，增强视觉效果 */
.slots-cover-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* 最底层 */
    background: linear-gradient(
        135deg,
        #0a0a0f 0%,
        #1a1a2e 50%,
        #0a0a0f 100%
    );
    overflow: hidden;
    transition: opacity 0.5s ease;
}

/* 封面层作为按钮容器的定位上下文 */
.slots-demo-cover {
    position: relative; /* 关键：承载绝对定位按钮 */
    z-index: 0;
    pointer-events: auto; /* 允许点击穿透到按钮层 */
}

/* 封面层添加微妙的动画背景 */
.slots-cover-layer::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(0, 212, 255, 0.1) 0%,
        transparent 70%
    );
    animation: cover-pulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cover-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}

.slots-cover-layer.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.slots-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 玻璃层 - BitStarz 风格虚化效果 */
.bs-game-card__glass,
.slots-demo-blur-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* 必须低于按钮的 20 */
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    /* 添加微妙的渐变遮罩，增强视觉层次 */
}

/* 按钮容器 - 绝对定位居中偏下 */
.slots-demo-actions {
    position: absolute !important;
    left: 50% !important;
    top: 70% !important; /* PC端位置向下 */
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    z-index: 999 !important; /* 最高层级，确保在所有层之上 */
    pointer-events: auto !important; /* 确保可以点击 */
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 按钮容器内的按钮组 */
.slots-demo-actions__buttons {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    pointer-events: auto !important; /* 确保按钮组可以接收点击 */
}

/* 活动文案区域 */
.slots-demo-actions__promo {
    margin-top: 12px;
    text-align: center;
}

.slots-demo-actions__promo p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* 按钮基础样式 - 统一使用 slots-demo-btn */
.slots-demo-btn {
    padding: 10px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1000 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 真钱玩按钮 */
.slots-demo-btn--real {
    background: #21c7ff;
    color: #000;
    box-shadow: 0 0 16px rgba(33, 199, 255, 0.6);
}

.slots-demo-btn--real:hover {
    background: #00b8e6;
    box-shadow: 0 0 24px rgba(33, 199, 255, 0.8);
    transform: translateY(-2px);
}

/* Demo 试玩按钮 */
.slots-demo-btn--demo {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #21c7ff;
    color: #21c7ff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.slots-demo-btn--demo:hover {
    background: rgba(33, 199, 255, 0.1);
    box-shadow: 0 0 20px rgba(33, 199, 255, 0.4);
    transform: translateY(-2px);
}

/* 兼容旧版 class */
.play-real-btn,
.play-demo-btn {
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 999px;
    border: none;
    cursor: pointer !important;
    white-space: nowrap;
    transition: all 0.3s ease;
    pointer-events: auto !important;
}

.play-real-btn {
    background: #21c7ff;
    color: #000;
    box-shadow: 0 0 16px rgba(33, 199, 255, 0.6);
}

.play-real-btn:hover {
    background: #00b8e6;
    box-shadow: 0 0 24px rgba(33, 199, 255, 0.8);
    transform: translateY(-2px);
}

.play-demo-btn {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #21c7ff;
    color: #21c7ff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.play-demo-btn:hover {
    background: rgba(33, 199, 255, 0.1);
    box-shadow: 0 0 20px rgba(33, 199, 255, 0.4);
    transform: translateY(-2px);
}

/* 活动文案区域（旧版兼容，已迁移到 .slots-demo-actions__promo） */
.slots-demo-promo {
    margin-top: 12px;
    text-align: center;
}

.slots-demo-promo p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* 移动端样式修正（按钮自动换行 + 居中偏下） */
@media (max-width: 768px) {
    .slots-demo-actions {
        top: 68%; /* 再向下 */
        transform: translate(-50%, -40%);
        gap: 12px;
    }
    
    .slots-demo-actions__buttons {
        flex-direction: column; /* 按钮上下排列 */
        width: 100%;
    }

    .slots-demo-btn,
    .play-real-btn,
    .play-demo-btn {
        font-size: 14px;
        padding: 10px 18px;
        width: 100%;
        max-width: 280px;
    }
    
    .slots-demo-actions__promo {
        margin-top: 8px;
    }
    
    .slots-demo-actions__promo p {
        font-size: 13px;
    }
}

/* 保留旧的按钮层样式以兼容（如果主题仍在使用） */
.bs-game-controls {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: auto !important;
    gap: 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bs-game-controls__buttons {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: auto !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    /* 移动端可改为 flex-direction: column，由主题 CSS 控制 */
}

/* 真钱按钮专用样式 - BitStarz 风格强化，高亮显示 */
.bs-btn--real-money {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 50%, #0066ff 100%) !important;
    color: #fff !important;
    box-shadow: 
        0 4px 30px rgba(0, 212, 255, 0.8),
        0 0 0 0 rgba(0, 212, 255, 0.5),
        0 0 60px rgba(0, 212, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    position: relative;
    overflow: hidden;
    animation: pulse-glow 2s ease-in-out infinite;
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(0, 212, 255, 0.6));
    transform: scale(1);
    transition: all 0.3s ease;
}

.bs-btn--real-money::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 70%
    );
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

.bs-btn--real-money:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 
        0 8px 30px rgba(0, 212, 255, 0.7),
        0 0 0 4px rgba(0, 212, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    animation: none;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 
            0 4px 30px rgba(0, 212, 255, 0.8),
            0 0 0 0 rgba(0, 212, 255, 0.5),
            0 0 60px rgba(0, 212, 255, 0.4);
        filter: brightness(1.1) drop-shadow(0 0 10px rgba(0, 212, 255, 0.6));
    }
    50% {
        box-shadow: 
            0 4px 40px rgba(0, 212, 255, 1),
            0 0 0 4px rgba(0, 212, 255, 0.4),
            0 0 80px rgba(0, 212, 255, 0.6);
        filter: brightness(1.2) drop-shadow(0 0 15px rgba(0, 212, 255, 0.8));
    }
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* 促销推广文案 - BitStarz 风格，丰富视觉效果 */
.bs-game-controls__promo {
    margin: 0;
    padding: 16px 24px;
    text-align: center;
    line-height: 1.6;
    position: relative;
    max-width: 500px;
    width: 100%;
}

.bs-game-controls__promo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.1) 0%,
        rgba(0, 102, 255, 0.15) 50%,
        rgba(0, 212, 255, 0.1) 100%
    );
    border-radius: 12px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    box-shadow: 
        0 4px 15px rgba(0, 212, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: -1;
    animation: promo-glow 3s ease-in-out infinite;
}

.bs-game-controls__promo p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-shadow: 
        0 0 10px rgba(0, 212, 255, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

/* 促销文案中的关键词高亮 */
.bs-game-controls__promo p::first-line {
    background: linear-gradient(135deg, #00d4ff, #0066ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

@keyframes promo-glow {
    0%, 100% {
        box-shadow: 
            0 4px 15px rgba(0, 212, 255, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        border-color: rgba(0, 212, 255, 0.3);
    }
    50% {
        box-shadow: 
            0 4px 25px rgba(0, 212, 255, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
        border-color: rgba(0, 212, 255, 0.5);
    }
}

/* 促销文案增强版 - 添加图标和装饰 */
.bs-game-controls__promo::after {
    content: '✨';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 20px;
    animation: sparkle 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.8));
}

@keyframes sparkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
    }
}

/* 表单层 - BitStarz 风格（使用主题 class） */
.slots-auth-layer {
    display: none !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    pointer-events: none !important; /* 隐藏时不接收点击事件 */
}

/* 表单层显示时 */
.slots-auth-layer[style*="display: flex"],
.slots-auth-layer[style*="display:block"] {
    pointer-events: auto !important;
}

/* ========== 注册/登录 Modal ========== */
.slots-auth-modal {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 99999 !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* 打开状态 */
.slots-auth-modal.is-open,
.slots-auth-modal.is-open[aria-hidden="false"],
.slots-auth-modal[aria-hidden="false"].is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
}

/* 确保关闭状态 */
.slots-auth-modal[aria-hidden="true"]:not(.is-open) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 背景蒙层 */
.slots-auth-modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: 
        radial-gradient(circle at top, rgba(33, 199, 255, 0.25), transparent 55%),
        rgba(0, 0, 0, 0.76) !important;
    backdrop-filter: blur(4px) !important;
    cursor: pointer !important;
    z-index: 1 !important;
}

/* 对话框卡片 */
.slots-auth-modal__dialog {
    position: relative !important;
    z-index: 2 !important;
    min-width: 320px !important;
    max-width: 420px !important;
    width: 90% !important;
    padding: 24px 24px 20px !important;
    border-radius: 18px !important;
    background: 
        radial-gradient(circle at top, rgba(33, 199, 255, 0.12), transparent 60%),
        rgba(9, 11, 24, 0.96) !important;
    border: 1px solid rgba(33, 199, 255, 0.5) !important;
    box-shadow:
        0 0 30px rgba(0, 0, 0, 0.8),
        0 0 24px rgba(33, 199, 255, 0.35) !important;
    color: #fff !important;
    overflow-y: auto !important;
    max-height: 90vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.slots-auth-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.slots-auth-modal__close:hover {
    opacity: 1;
}

/* Tab 区 */
.slots-auth-modal__tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 18px;
}

.slots-auth-modal__tabs button {
    background: transparent;
    border: none;
    padding: 6px 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}

.slots-auth-modal__tabs button:hover {
    color: rgba(255, 255, 255, 0.9);
}

.slots-auth-modal__tabs button.is-active {
    color: #fff;
}

.slots-auth-modal__tabs button.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #21c7ff, #7b5cff);
}

.slots-auth-modal__body {
    position: relative;
}

/* 确保 hidden 属性生效，一次只显示一个表单 */
.slots-auth-form[hidden],
.slots-auth-form[data-auth-form][hidden] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.slots-auth-form:not([hidden]) {
    display: block !important;
}

/* 表单样式 */
.slots-auth-form {
    display: block;
}

/* 表单字段 */
.slots-auth-form__field {
    margin-bottom: 14px;
}

.slots-auth-form__field label {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
}

.slots-auth-form__input {
    width: 100%;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(6, 7, 18, 0.9);
    padding: 8px 14px;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.slots-auth-form__input:focus {
    outline: none;
    border-color: #21c7ff;
    box-shadow: 0 0 0 1px rgba(33, 199, 255, 0.4);
}

.slots-auth-form__input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* 验证码占位 */
.slots-auth-form__captcha {
    margin: 10px 0 4px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    min-height: 60px; /* 给 Cloudflare 插槽留空间 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.slots-auth-form__captcha[data-captcha-slot="cloudflare"]:empty::before {
    content: 'Cloudflare 验证码插槽（待接入）';
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    font-style: italic;
}

/* 提交按钮 - BitStarz 主按钮风格 */
.slots-auth-form__submit {
    width: 100%;
    margin-top: 8px;
    border-radius: 999px;
    border: none;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #21c7ff, #00f0ff);
    color: #081019;
    box-shadow: 0 0 18px rgba(33, 199, 255, 0.7);
    transition: all 0.2s ease;
}

.slots-auth-form__submit:hover {
    box-shadow: 0 0 24px rgba(33, 199, 255, 0.9);
    transform: translateY(-1px);
}

.slots-auth-form__submit:active {
    transform: translateY(0);
}

/* 错误消息 */
.slots-auth-form__error {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: #ff6b6b;
    text-align: center;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .slots-auth-modal__dialog {
        max-width: 360px;
        width: calc(100% - 32px);
        padding: 20px 18px 16px;
    }
}

.slots-auth-card {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 40px;
    border-radius: 16px;
    min-width: 400px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slots-auth-title {
    margin: 0 0 24px 0;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.slots-auth-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    justify-content: center;
}

.slots-auth-field {
    margin-bottom: 16px;
}

.slots-auth-field label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
}

.slots-auth-field input {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.slots-auth-field input:focus {
    outline: none;
    border-color: #00d4ff;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.slots-auth-field input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.slots-auth-error {
    display: none;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    border-radius: 8px;
    color: #ff6b6b;
    font-size: 14px;
    text-align: center;
}

/* iframe 容器 - 简化结构，只使用一个容器 */
/* 容器只提供 class，不设置固定高度，完全由主题 CSS 控制 */
.slots-iframe-wrap {
    width: 100%;
    height: 100%;
    /* 高度完全由父容器和主题 CSS 控制，插件不设置固定高度 */
    /* 移动端：由主题 CSS 控制为 9:16 首屏大卡片 */
}

/* 兼容旧的 class 名称 */
.slots-iframe-container {
    width: 100%;
    height: 100%;
    /* 高度完全由父容器和主题 CSS 控制 */
}

.slots-game-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    /* 尺寸完全由父容器控制，不在 JS 中写死 */
    /* 移动端：跟随父容器高度，实现 9:16 首屏大卡片效果 */
}

.sdg-no-game {
    padding: 40px;
    text-align: center;
    color: #666;
}

/* 注册表单样式 */
.sdg-form-group {
    margin-bottom: 15px;
}

.sdg-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.sdg-form-group input[type="text"],
.sdg-form-group input[type="email"],
.sdg-form-group input[type="password"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.sdg-form-group input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.sdg-form-group small {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 12px;
}

.sdg-form-errors {
    margin-bottom: 15px;
}

.sdg-error {
    color: #dc3545;
    font-size: 14px;
    margin: 0;
    padding: 8px;
    background: #f8d7da;
    border-radius: 4px;
}

/* 错误提示框 - BitStarz 风格 */
.slots-error-box {
    padding: 40px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

.slots-error-box p {
    margin: 0;
    font-size: 16px;
}

/* Loading 状态 - BitStarz 风格 */
.slots-loading {
    width: 100%;
    height: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

.slots-loading-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(0, 212, 255, 0.2);
    border-top-color: #00d4ff;
    animation: slots-spin 0.8s linear infinite;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

@keyframes slots-spin {
    to { transform: rotate(360deg); }
}

/* 确保插件内容不会影响其他页面 */
#slots-demo-activated {
    display: none !important;
}

/* 游戏详细信息区域 */
.slots-extra-info {
    padding: 30px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.slots-info-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 24px;
}

.slots-field {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
}

.slots-field-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.slots-field-value {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
}

.slots-tags {
    margin-top: 24px;
}

.slots-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.slots-tag-chip {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 999px;
    color: #00d4ff;
    font-size: 14px;
    font-weight: 500;
}

/* Stats 面板样式 */
.bs-game-stats [data-slot] {
    color: rgba(255, 255, 255, 0.9);
}

.bs-game-stats [data-slot="features"] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slots-feature-item {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.6;
}

/* 语言标签 */
.slots-lang-tag {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 4px;
    color: #00d4ff;
    font-size: 12px;
    font-weight: 600;
    margin-right: 6px;
    margin-bottom: 6px;
}

/* 截图区域 */
[data-slot="shot-loading"],
[data-slot="shot-feature"],
[data-slot="shot-bigwin"] {
    width: 100%;
    min-height: 200px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

[data-slot="shot-loading"] img,
[data-slot="shot-feature"] img,
[data-slot="shot-bigwin"] img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

[data-slot="shot-loading"]:hover img,
[data-slot="shot-feature"]:hover img,
[data-slot="shot-bigwin"]:hover img {
    transform: scale(1.05);
}

/* 响应式支持 */
@media (max-width: 768px) {
    .sdg-modal-content {
        padding: 20px;
        max-width: 90%;
    }
    
    .sdg-partner-card {
        padding: 15px;
    }
    
    #slots-global-toast-slot {
        top: 10px;
        right: 10px;
        left: 10px;
    }
    
    .sdg-toast {
        width: 100%;
        max-width: 100%;
    }
    
    /* 移动端按钮布局 - BitStarz 风格优化 */
    .bs-game-controls__buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    
    .bs-game-controls__buttons .bs-btn {
        width: 100%;
        max-width: 280px;
    }
    
    /* 移动端促销文案优化 */
    .bs-game-controls__promo {
        padding: 12px 16px;
        max-width: 100%;
    }
    
    .bs-game-controls__promo p {
        font-size: 13px;
    }
    
    /* 移动端玻璃层虚化效果调整 */
    .bs-game-card__glass {
        backdrop-filter: blur(6px) saturate(110%);
        -webkit-backdrop-filter: blur(6px) saturate(110%);
    }
    
    .slots-info-list {
        flex-direction: column;
        gap: 16px;
    }
}