/* =================================================================
   核心优化：全局硬件加速辅助类 (GPU Acceleration)
   ================================================================= */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform, opacity;
}

/* 通用容器基础设置 */
.poster-visual {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    /* 强制独立图层，减少重绘 */
    isolation: isolate; 
}

/* =========================================
   1. Mines 扫雷 (优化版)
   ========================================= */
.theme-mines-final .poster-visual {
    background: radial-gradient(circle at center, #1e293b 0%, #0a0f1a 100%);
}

.code-grid-bg-final {
    position: absolute;
    width: 200%; height: 200%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 35px 35px;
    pointer-events: none;
    will-change: transform; /* 优化 */
}

.mines-icon-group-final {
    position: relative;
    width: 180px; height: 160px;
    z-index: 10;
}

.icon-bomb-final {
    width: 68px; height: 18px;
    position: absolute;
    top: 1px; left: 28px;
    z-index: 2;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.6)); /* 阴影半径减小以提升性能 */
    animation: float-bomb-final 3s ease-in-out infinite alternate;
    will-change: transform;
}

.icon-diamond-final {
    width: 78px; height: 74px;
    position: absolute;
    bottom: 25px; right: 25px;
    z-index: 1;
    filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.5)); /* 阴影半径减小 */
    animation: float-gem-final 4s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes float-bomb-final {
    0% { transform: translateY(0) rotate(-5deg); }
    100% { transform: translateY(-6px) rotate(5deg); }
}
@keyframes float-gem-final {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-6px) scale(1.03); }
}

.sparkle-final {
    animation: sparkle-flash 2s ease-in-out infinite;
    transform-origin: center;
    will-change: opacity, transform;
}
@keyframes sparkle-flash {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* =========================================
   2. Blackjack Pro (优化流光性能)
   ========================================= */
.theme-blackjack-pro .poster-visual {
    background: radial-gradient(circle at 50% 0%, #2c3e50 0%, #0b1015 80%);
}

.bj-cards-wrapper {
    position: absolute;
    top: 45%; left: 50%;
    transform: translate(-50%, -50%);
    width: 120px; height: 160px;
    z-index: 5;
}

.bj-poker-card {
    position: absolute;
    width: 90px; height: 126px;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); /* 简化阴影 */
    transition: transform 0.3s ease;
    will-change: transform;
}

.bj-card-back {
    top: 0; left: 0;
    transform: rotate(-12deg);
    background: #1a232e;
    border: 1px solid #2f3b4b;
    z-index: 1;
    overflow: hidden;
}
.bj-pattern-grid {
    width: 100%; height: 100%; opacity: 0.15;
    background-image: 
        linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000),
        linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000);
    background-size: 8px 8px;
}

.bj-card-face {
    top: 10px; left: 30px;
    transform: rotate(8deg);
    z-index: 2;
    background: linear-gradient(160deg, #2b2b2b 0%, #0f0f0f 100%);
    border: 1px solid #444;
    animation: float-card-gold 4s ease-in-out infinite alternate;
    overflow: hidden; /* 限制流光溢出 */
}

.bj-card-content {
    width: 100%; height: 100%;
    position: relative;
    padding: 6px;
    box-sizing: border-box;
}

.gold-text {
    background: linear-gradient(to bottom, #fceabb 0%, #f8b500 40%, #fceabb 50%, #fbdf93 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.card-corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.corner-tl { top: 6px; left: 6px; }
.corner-br { bottom: 6px; right: 6px; transform: rotate(180deg); }
.corner-rank { font-family: "Times New Roman", serif; font-weight: bold; font-size: 16px; margin-bottom: 2px; }
.corner-suit { font-size: 14px; }
.center-suit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 42px; }

/* 核心性能修复：流光改用 Transform */
.bj-shine-effect {
    position: absolute; top: 0; left: -150%; 
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: skewX(-20deg);
    animation: cardShineNew 4s infinite linear;
    pointer-events: none;
    will-change: transform;
}
@keyframes cardShineNew { 
    0% { transform: translateX(0) skewX(-20deg); } 
    100% { transform: translateX(350%) skewX(-20deg); } 
}
@keyframes float-card-gold { 
    0% { transform: rotate(8deg) translateY(0); } 
    100% { transform: rotate(8deg) translateY(-6px); } 
}

/* =========================================
   3. Limbo (简化滤镜)
   ========================================= */
.theme-limbo-multiplier .poster-visual {
    background: radial-gradient(circle at 50% 50%, #1e1b4b 0%, #0f172a 60%, #020617 100%);
}

.limbo-bg-radiance {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; opacity: 0.3;
    animation: radiancePulse 4s ease-in-out infinite alternate;
    will-change: opacity, transform;
}
@keyframes radiancePulse {
    0% { opacity: 0.2; transform: scale(1); }
    100% { opacity: 0.4; transform: scale(1.05); }
}

.limbo-multiplier-group {
    position: relative; width: 100%; height: 100%; z-index: 10;
    display: flex; justify-content: center; align-items: center;
    transform: translateY(-15px);
}

.multiplier-text {
    font-family: 'Montserrat', 'Arial Black', sans-serif;
    font-weight: 900; font-size: 48px;
    fill: #fff; /* 简化填充 */
    /* 移除复杂的 url(#glow) 滤镜，改用 text-shadow */
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 30px rgba(56, 189, 248, 0.4);
    animation: textPulse 2s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes textPulse {
    0% { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(1.05); filter: brightness(1.2); }
}

/* =========================================
   4. Dice (优化 3D 渲染)
   ========================================= */
.theme-dice-holo-no-dice .poster-visual {
    background: radial-gradient(circle at 50% 0%, #2e1065 0%, #0f0720 80%, #000000 100%);
    perspective: 800px;
}

.holo-grid-floor {
    position: absolute;
    bottom: -50%; left: -50%; width: 200%; height: 100%;
    background: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    transform: rotateX(60deg);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 60%);
    z-index: 1;
    animation: gridScroll 20s linear infinite;
    will-change: background-position; /* 提示浏览器 */
}
@keyframes gridScroll { 0% { background-position: 0 0; } 100% { background-position: 0 40px; } }

.dice-holo-group {
    position: relative; width: 200px; height: 160px; z-index: 10;
    transform-style: preserve-3d;
    transform: translateY(15px);
}

.beam-pulse-strong {
    animation: beamFlickerStrong 0.2s infinite alternate;
    transform-origin: bottom center;
}
@keyframes beamFlickerStrong {
    0% { opacity: 0.5; transform: scaleY(1); }
    100% { opacity: 0.8; transform: scaleY(1.05); }
}

.holo-particle { animation: particleRise 2s linear infinite; opacity: 0; }
.p1 { animation-delay: 0s; } .p2 { animation-delay: 0.5s; } .p3 { animation-delay: 1s; } .p4 { animation-delay: 1.5s; }
@keyframes particleRise {
    0% { transform: translateY(0) scale(1); opacity: 0.8; }
    100% { transform: translateY(-100px) scale(0.5); opacity: 0; }
}

.glitch-text-bold {
    font-family: 'Arial Black', sans-serif; font-weight: 900; fill: #fff;
    filter: drop-shadow(0 0 4px #22d3ee); /* 减小半径 */
    animation: glitchSkew 3s infinite;
}
@keyframes glitchSkew {
    0%, 95%, 98% { transform: skew(0deg); }
    96% { transform: skew(-5deg); }
    97% { transform: skew(5deg); }
}

/* =========================================
   5. Keno (终端悬浮)
   ========================================= */
.theme-keno-terminal .poster-visual {
    background: radial-gradient(circle at 50% 60%, #1e1b4b 0%, #0f0720 70%, #000000 100%);
    perspective: 800px;
    box-shadow: inset 0 0 30px rgba(99, 102, 241, 0.15);
}

.terminal-circuit-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    pointer-events: none;
}

.keno-terminal-group {
    position: relative; width: 220px; height: 180px; z-index: 10;
    transform-style: preserve-3d;
    animation: terminalHover 6s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes terminalHover {
    0% { transform: translateY(5px) rotateX(10deg); }
    100% { transform: translateY(-5px) rotateX(15deg); }
}

.hit-cell-pulse { animation: cellEnergySurge 2s ease-in-out infinite alternate; will-change: transform; }
@keyframes cellEnergySurge {
    0% { filter: brightness(1); transform: translateZ(5px); }
    100% { filter: brightness(1.3); transform: translateZ(15px); }
}

.picked-cell-breath { animation: pickedBreath 3s ease-in-out infinite alternate; }
@keyframes pickedBreath {
    0% { stroke-opacity: 0.5; }
    100% { stroke-opacity: 1; }
}

/* =========================================
   6. Snake (赛博网格)
   ========================================= */
.theme-snake-cyber .poster-visual {
    background: radial-gradient(circle at 50% 30%, #064e3b 0%, #022c22 60%, #000000 100%);
    perspective: 600px;
}

.snake-grid-floor {
    position: absolute; bottom: -30%; left: -50%; width: 200%; height: 150%;
    background-image: linear-gradient(rgba(34, 197, 94, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 197, 94, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    transform: rotateX(50deg);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 80%);
    z-index: 1;
    animation: gridCrawl 20s linear infinite;
    will-change: background-position;
}
@keyframes gridCrawl { 0% { background-position: 0 0; } 100% { background-position: 0 40px; } }

.snake-hero-group {
    position: relative; width: 200px; height: 160px; z-index: 10;
    animation: snakeFloat 4s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes snakeFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }

.snake-body-flow { stroke-dasharray: 10 5; animation: bodyFlow 1s linear infinite; }
@keyframes bodyFlow { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -15; } }

.food-pulse-anim { animation: foodPulse 1s ease-in-out infinite alternate; transform-origin: center; }
@keyframes foodPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 3px #ef4444); }
    100% { transform: scale(1.15); filter: drop-shadow(0 0 10px #ef4444); }
}

/* =========================================
   7. Roulette (旋转性能大优化)
   ========================================= */
.theme-roulette-velocity .poster-visual {
    background: radial-gradient(circle at 50% 40%, #065f46 0%, #022c22 60%, #000000 100%);
}

.roulette-spin-bg {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    /* Conic Gradient 是性能杀手，手机端将通过 Media Query 禁用 */
    background: conic-gradient(from 0deg, transparent 0deg, rgba(251, 191, 36, 0.05) 20deg, transparent 40deg, rgba(6, 95, 70, 0.1) 180deg, transparent 360deg);
    animation: bgSpinSlow 10s linear infinite;
    z-index: 1; pointer-events: none;
    will-change: transform;
}
@keyframes bgSpinSlow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.roulette-wheel-group {
    position: relative; width: 140px; height: 140px; z-index: 10;
    transform: rotateX(20deg) translateY(-25px);
    transform-style: preserve-3d;
}

.wheel-spin-anim { animation: wheelRotate 8s linear infinite; transform-origin: center; will-change: transform; }
@keyframes wheelRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.ball-orbit-anim { animation: ballOrbit 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: center; will-change: transform; }
@keyframes ballOrbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }

.ball-trail-effect { filter: blur(2px); opacity: 0.7; } /* 减少 blur 半径 */
.gold-glow-filter { filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.6)); }

/* =========================================
   8. Crash (优化位移)
   ========================================= */
.theme-crash-solar .poster-visual {
    background: radial-gradient(circle at 50% 80%, #9f1239 0%, #4c0519 50%, #000000 100%);
    perspective: 600px;
}

.crash-grid-floor {
    position: absolute; bottom: -50%; left: -50%; width: 200%; height: 100%;
    background: linear-gradient(rgba(251, 113, 133, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(251, 113, 133, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    transform: rotateX(70deg);
    mask-image: linear-gradient(to top, black 0%, transparent 80%);
    z-index: 1;
    animation: gridRush 1s linear infinite;
    will-change: background-position;
}
@keyframes gridRush { 0% { background-position: 0 0; } 100% { background-position: 0 40px; } }

.crash-hero-group {
    position: relative; width: 200px; height: 160px; z-index: 10;
    animation: shipShake 0.1s linear infinite;
    will-change: transform;
}
@keyframes shipShake {
    0% { transform: translate(0, 0); }
    25% { transform: translate(0.5px, 0.5px); }
    50% { transform: translate(0, -0.5px); }
    75% { transform: translate(-0.5px, 0); }
    100% { transform: translate(0, 0); }
}

.thruster-burn { transform-origin: top center; animation: burnFlicker 0.1s ease-in-out infinite alternate; }
@keyframes burnFlicker {
    0% { transform: scaleY(1); opacity: 0.8; }
    100% { transform: scaleY(1.3); opacity: 1; filter: drop-shadow(0 0 5px #fbbf24); }
}

.curve-draw {
    stroke-dasharray: 200; stroke-dashoffset: 200;
    animation: curveProgress 3s ease-out infinite;
}
@keyframes curveProgress {
    0% { stroke-dashoffset: 200; opacity: 0; }
    20% { opacity: 1; }
    80% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

.multiplier-hud {
    font-family: 'Arial', sans-serif; font-weight: 800; fill: #fff;
    text-shadow: 0 0 5px #f43f5e; /* 用 text-shadow 代替 filter */
    animation: hudPulse 0.5s linear infinite alternate;
}
@keyframes hudPulse { 0% { opacity: 0.8; } 100% { opacity: 1; } }

/* =========================================
   9. Tower (优化云层)
   ========================================= */
.theme-tower-spire .poster-visual {
    background: linear-gradient(to bottom, #0f172a 0%, #1e293b 50%, #020617 100%);
    perspective: 800px;
}

.tower-fog-bg {
    position: absolute; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 60%);
    top: -50%;
    animation: fogPulse 4s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
@keyframes fogPulse { 0% { opacity: 0.3; transform: scale(1); } 100% { opacity: 0.6; transform: scale(1.1); } }

.tower-structure-group {
    position: relative; width: 200px; height: 195px; z-index: 10;
    animation: towerHover 3s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes towerHover { 0% { transform: translateY(5px); } 100% { transform: translateY(-5px); } }

.tower-scan-effect { stroke-dasharray: 20 10; animation: climbScroll 1s linear infinite; }
@keyframes climbScroll { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 30; } }

.win-block-pulse { animation: winGlow 1.5s ease-in-out infinite alternate; }
@keyframes winGlow {
    0% { fill-opacity: 0.8; filter: drop-shadow(0 0 2px #fcd34d); }
    100% { fill-opacity: 1; filter: drop-shadow(0 0 5px #fcd34d); }
}

/* 文字部分通用样式 */
.game-name { position: relative; z-index: 10; font-size: 1rem; font-weight: 800; margin-bottom: 4px; color: #fff; }
.game-provider { position: relative; z-index: 10; font-weight: 500; }
.theme-blackjack-pro .game-provider { color: #9ca3af; }
.theme-limbo-multiplier .game-provider { color: #38bdf8; }
.theme-dice-holo-no-dice .game-provider { color: #67e8f9; }
.theme-keno-terminal .game-provider { color: #a5b4fc; }
.theme-snake-cyber .game-provider { color: #86efac; }
.theme-roulette-velocity .game-provider { color: #fcd34d; }
.theme-crash-solar .game-provider { color: #fda4af; }
.theme-tower-spire .game-provider { color: #7dd3fc; }


/* =================================================================
   核心补丁：移动端极致性能降级 (Mobile Optimization)
   当屏幕宽度小于 768px 时，强制关闭复杂特效
   ================================================================= */
@media (max-width: 768px) {
    /* 1. 禁用大面积背景动画 (卡顿源头) */
    .roulette-spin-bg,
    .holo-grid-floor,
    .snake-grid-floor,
    .crash-grid-floor,
    .tower-fog-bg,
    .code-grid-bg-final {
        animation: none !important;
        opacity: 0.15 !important; /* 保持静止可见 */
        background-image: none !important; /* 甚至可以移除网格，只留纯色 */
    }

    /* 2. 暴力移除所有复杂滤镜 (Filter 是手机杀手) */
    * {
        filter: none !important; 
        box-shadow: none !important;
    }

    /* 3. 为关键元素手动加回一点点阴影 (用 text-shadow/drop-shadow 代替复杂 box-shadow) */
    .multiplier-text, .game-name {
        text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
    }
    
    .icon-bomb-final, .icon-diamond-final, .bj-poker-card, .keno-terminal-group {
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
    }

    /* 4. 减弱浮动动画幅度 */
    @keyframes float-bomb-final { 0% { transform: translateY(0); } 100% { transform: translateY(-3px); } }
    @keyframes float-gem-final { 0% { transform: translateY(0); } 100% { transform: translateY(-3px); } }
    
    /* 5. 确保容器自身圆角保留 */
    .poster-visual {
        border-radius: 12px !important;
        box-shadow: none !important;
    }
}