赛博塔罗

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Mystic Tarot - Offline Ultimate</title>
    <style>
        :root {
            --gold: #ffd700;
            --bg-deep: #000000;
        }

body { 
            margin: 0; 
            overflow: hidden; 
            background-color: #000;
            /* 采用 41 的背景渐变 */
            background-image: radial-gradient(circle at center, #1a1510 0%, #000 100%);
            font-family: 'Noto Sans SC', sans-serif; 
            color: white; 
        }
        
        #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }
        
        .hud { position: absolute; top: 30px; left: 30px; right: 30px; display: flex; justify-content: space-between; pointer-events: auto; }
        .btn-group { display: flex; gap: 15px; }

.badge { 
            background: rgba(20, 20, 20, 0.6); 
            border: 1px solid rgba(255, 255, 255, 0.2); 
            color: #ddd; 
            padding: 10px 22px; 
            border-radius: 50px; 
            backdrop-filter: blur(8px); 
            font-size: 13px; 
            display: flex; align-items: center; gap: 8px; 
            cursor: pointer; transition: 0.3s;
            pointer-events: auto;
        }
        .badge:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }

.status-dot { width: 8px; height: 8px; background: #555; border-radius: 50%; transition: 0.3s; }
        .status-dot.active { background: #00ffaa; box-shadow: 0 0 10px #00ffaa; }

.mystic-hint {
            color: rgba(255,255,255,0.5); 
            font-size: 12px; 
            letter-spacing: 6px; 
            text-transform: uppercase; 
            text-shadow: 0 0 10px rgba(0,0,0,0.8);
            pointer-events: none;
            transition: opacity 0.5s;
        }

#card-modal {
            position: absolute; 
            bottom: 30px; 
            left: 50%; 
            transform: translateX(-50%);
            width: auto;
            min-width: 300px;
            max-width: 600px; 
            text-align: center; 
            opacity: 0; pointer-events: none;
            transition: all 0.5s ease;
            z-index: 20;
            background: rgba(10, 10, 15, 0.85);
            padding: 20px 30px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }
        #card-modal.active { opacity: 1; pointer-events: auto; }
        
        #card-modal h2 { 
            margin: 0 0 5px 0; 
            color: var(--gold); 
            font-size: 24px; 
            letter-spacing: 4px; 
            font-weight: 400;
        }
        
        #card-modal .sub { 
            color: #888; 
            font-size: 11px; 
            letter-spacing: 2px; 
            margin-bottom: 12px; 
            text-transform: uppercase;
        }
        
        #card-modal p { 
            font-size: 14px; 
            line-height: 1.6; 
            color: #eee; 
            margin: 0; 
            font-weight: 300; 
        }
        
        #hint { 
            position: absolute; 
            top: 12%; 
            width: 100%; 
            text-align: center; 
            opacity: 1;
        }

#result-overlay {
            position: absolute; inset: 0;
            background: rgba(5,5,5,0.98);
            z-index: 60;
            display: none; flex-direction: column; 
            padding: 40px; overflow-y: auto;
            backdrop-filter: blur(20px);
            scrollbar-width: thin;
            scrollbar-color: #333 transparent;
        }
        #result-overlay.active { display: flex; animation: fadeIn 0.8s ease; }
        
        .result-header { text-align: center; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #222; max-width: 800px; margin-left: auto; margin-right: auto; width: 100%; }
        
        .cards-spread { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-bottom: 60px; }
        .mini-card { width: 120px; text-align: center; animation: slideUp 0.8s backwards; transition: 0.4s; }
        .mini-card:hover { transform: translateY(-10px); }
        .mini-card img { width: 100%; border-radius: 4px; border: 1px solid #333; margin-bottom: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
        .mini-card .pos-label { font-size: 10px; color: #666; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 1px; }
        .mini-card .name-label { font-size: 12px; color: #ccc; }

.interpretation-box { 
            max-width: 800px; margin: 0 auto 50px; 
            display: grid; gap: 50px;
        }

.interp-section { padding: 0 20px; }
        .interp-title { color: var(--gold); font-size: 16px; margin-bottom: 15px; letter-spacing: 2px; text-transform: uppercase; display: flex; align-items: center; gap: 10px;}
        .interp-title::before { content:''; display: block; width: 4px; height: 16px; background: var(--gold); }
        
        .interp-content { font-size: 15px; line-height: 2.0; color: #bbb; font-weight: 300; text-align: justify; }
        .interp-content strong { color: #fff; font-weight: 500; }

.deep-dive {
            background: rgba(255,255,255,0.03);
            padding: 40px; border-radius: 2px;
            border: 1px solid rgba(255,255,255,0.05);
        }

.restart-btn {
            display: block; margin: 20px auto 80px; padding: 14px 50px;
            background: transparent; border: 1px solid #444; color: #888;
            border-radius: 50px; cursor: pointer; transition: 0.3s;
            font-size: 13px; letter-spacing: 4px; text-transform: uppercase;
        }
        .restart-btn:hover { border-color: #fff; color: #fff; }

#video-container { position: absolute; top: 90px; right: 30px; width: 160px; height: 120px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); opacity: 0; transition: 0.6s; pointer-events: none; }
        #video-container.active { opacity: 0; } 
        video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

#loading { position: fixed; inset: 0; background: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100; transition: 0.8s; }
        .spinner { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.1); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    </style>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/EffectComposer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/RenderPass.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/ShaderPass.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/CopyShader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
    
    <script src="./card_assets.js"></script>
    <script src="./tarot_data.js"></script>
</head>
<body onload="startCamera()">

<div id="loading">
    <div class="spinner"></div>
    <p id="loading-txt" style="margin-top: 20px; letter-spacing: 6px; color: #666; font-size: 10px;">INITIALIZING...</p>
</div>

<div id="card-modal">
        <h2 id="c-name">Card Name</h2>
        <div class="sub" id="c-sub">Arcana</div>
        <p id="c-desc">解析内容...</p>
    </div>

<div id="hint" class="mystic-hint">👌一只手比OK捏住再后拉【选牌】→🖐张开手掌【把牌放下】→✊握拳【看解析】→🖐张开手掌【返回】</div>
</div>

<div class="result-header">
        <p id="result-mode-name" style="color:#666; font-size:12px; letter-spacing:3px; margin-top:10px;">DEEP INTERPRETATION</p>
    </div>
    
    <div class="cards-spread" id="result-cards"></div>
    
    <div class="interpretation-box">
        <div id="result-deep-content" style="width: 100%;"></div>
    </div>

const SATURN_COLORS = {
    deepBrown: [0.25, 0.094, 0.01],
    darkerBrown: [0.45, 0.174, 0.03],
    mediumBrown: [0.65, 0.45, 0.25],
    lightBrown: [0.8, 0.65, 0.45],
    veryLightBrown: [0.92, 0.82, 0.7],
    mediumBlue: [0.3, 0.5, 0.85],
    lightBlue: [0.6, 0.8, 1.0],
    veryLightBlue: [0.8, 0.9, 1.0],
};

const LAYER_SEQUENCE = [
    SATURN_COLORS.deepBrown, SATURN_COLORS.deepBrown, SATURN_COLORS.darkerBrown, SATURN_COLORS.darkerBrown, SATURN_COLORS.mediumBrown,
    SATURN_COLORS.mediumBrown, SATURN_COLORS.lightBrown, SATURN_COLORS.lightBrown, SATURN_COLORS.veryLightBrown, SATURN_COLORS.veryLightBrown,
    SATURN_COLORS.veryLightBlue, SATURN_COLORS.lightBlue, SATURN_COLORS.mediumBlue, SATURN_COLORS.lightBlue, SATURN_COLORS.veryLightBlue,
    SATURN_COLORS.veryLightBrown, SATURN_COLORS.lightBrown, SATURN_COLORS.mediumBrown, SATURN_COLORS.darkerBrown, SATURN_COLORS.deepBrown
];

// --- 42 数据层 ---
let TAROT_DB = {};

const DEFAULT_CARD_DATA = { 
    element: "风", 
    keywords: "未知", 
    essence: "连接中...", 
    full_meaning: "数据同步中...",
    upright: "保持觉察，顺应流动。",
    reversed: "内省自身，寻找平衡。"
};

// --- 42 配置 ---
const CONFIG = { 
    spacing: 7.0, 
    pullTriggerThreshold: 0.035, 
    scrollSensitivity: 2.0,      
    friction: 0.3,              
    deadZone: 0.15,              
    maxPullZ: 12,
    neonIntensity: 45.0
};

const MAJOR_ARCANA_FILES = [
    "愚者.jpg", "魔术师.jpg", "女祭司.jpg", "女皇.jpg", "皇帝.jpg", "教皇.jpg", 
    "恋人.jpg", "战车.jpg", "力量.jpg", "隐士.jpg", "命运之轮.jpg", "正义.jpg", 
    "倒吊人.jpg", "死神.jpg", "节制.jpg", "恶魔.jpg", "高塔.jpg", "星星.jpg", "月亮.jpg", 
    "太阳.jpg", "审判.jpg", "世界.jpg"
];
const MINOR_SUITS = ["权杖", "圣杯", "宝剑", "星币"];
const MINOR_RANKS = ["首牌", "二", "三", "四", "五", "六", "七", "八", "九", "十", "侍从", "骑士", "皇后", "国王"];

let scene, camera, renderer, raycaster, handCursor, deckGroup, clock, composer;
let galaxySystem, saturnGroup; // 41 的背景组件
let cards = [];
let mouse = new THREE.Vector2(-999, -999);
let targetMouse = new THREE.Vector2(0, 0);
let scrollVelocity = 0; 
let appState = 'IDLE'; 
let grabbedCard = null;
let particlesGroup = []; 
let grabStartHandSize = 0;
let isMediaPipeReady = false;
let drawnCardsList = []; 
let isFlowActive = true; 
let isHandReady = false;

function createCircleTexture() {
    const canvas = document.createElement('canvas');
    canvas.width = 64; canvas.height = 64;
    const ctx = canvas.getContext('2d');
    const grad = ctx.createRadialGradient(32, 32, 0, 32, 32, 32);
    grad.addColorStop(0, 'rgba(255, 255, 255, 1)');
    grad.addColorStop(1, 'rgba(255, 255, 255, 0)');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, 64, 64);
    return new THREE.CanvasTexture(canvas);
}

/**
 * 星环系统初始化
 * 已按要求将内环（Ring1）部分替换为 45 号文件的逻辑
 */
function initSaturnSystem() {
    saturnGroup = new THREE.Group();
    saturnGroup.position.set(0, 0, -15); 
    saturnGroup.scale.set(3.5, 3.5, 3.5); 
    saturnGroup.rotation.x = Math.PI / 5.5;
    saturnGroup.rotation.z = Math.PI / 10; 
    scene.add(saturnGroup);

const sphereCount = 60000;
    const ring1Count = 160000; 
    const total1 = sphereCount + ring1Count;
    const sGeo1 = new THREE.BufferGeometry();
    const sPos1 = new Float32Array(total1 * 3);
    const sCol1 = new Float32Array(total1 * 3);
    const sRand1 = new Float32Array(total1);
    const maxRadius = 2.6;

const ring1InnerRadius = 4.0;
    const ring1Width = 4;

for (let i = 0; i < total1; i++) {
        if (i < sphereCount) {
            const u = Math.random(), v = Math.random();
            const theta = 2 * Math.PI * u, phi = Math.acos(2 * v - 1);
            const r = maxRadius - (Math.random() * saturnConfig.thickness);
            sPos1[i*3] = r * Math.sin(phi) * Math.cos(theta);
            sPos1[i*3+1] = r * Math.sin(phi) * Math.sin(theta); 
            sPos1[i*3+2] = r * Math.cos(phi);
            const relY = sPos1[i*3+1] / maxRadius;
            let layerIdx = Math.floor(((1 - relY) / 2) * 20);
            layerIdx = Math.max(0, Math.min(19, layerIdx));
            const targetColor = LAYER_SEQUENCE[layerIdx];
            sCol1[i*3] = targetColor[0]; sCol1[i*3+1] = targetColor[1]; sCol1[i*3+2] = targetColor[2];
        } else {
            // --- 此处为替换自 45 号文件的内环（Ring1）逻辑 ---
            const idx = i - sphereCount; 
            const progress = idx / ring1Count;
            const r = ring1InnerRadius + progress * ring1Width + (Math.random()-0.5)*0.8;
            const angle = Math.random() * Math.PI * 2;
            sPos1[i*3] = Math.cos(angle) * r;
            sPos1[i*3+1] = (Math.random()-0.5) * 0.12; // 增加厚度，变厚实
            sPos1[i*3+2] = Math.sin(angle) * r;
            
            // 使用 LAYER_SEQUENCE 光谱渐变颜色
            let layerIdx = Math.floor(progress * 10);
            const targetColor = LAYER_SEQUENCE[Math.max(0, Math.min(19, layerIdx))];
            const ringTint = 0.8 + Math.random() * 0.2;
            sCol1[i*3] = targetColor[0] * ringTint; 
            sCol1[i*3+1] = targetColor[1] * ringTint; 
            sCol1[i*3+2] = targetColor[2] * ringTint;
            // ----------------------------------------------
        }
        sRand1[i] = Math.random();
    }
    sGeo1.setAttribute('position', new THREE.BufferAttribute(sPos1, 3));
    sGeo1.setAttribute('color', new THREE.BufferAttribute(sCol1, 3));
    sGeo1.setAttribute('rand', new THREE.BufferAttribute(sRand1, 1));
    const mainSystem = new THREE.Points(sGeo1, new THREE.PointsMaterial({ 
        size: 0.022, vertexColors: true, transparent: true, alphaTest: 0.001, 
        blending: THREE.AdditiveBlending, depthWrite: false 
    }));
    saturnGroup.add(mainSystem);

const ring2Count = 180000;
    const sGeo2 = new THREE.BufferGeometry();
    const sPos2 = new Float32Array(ring2Count * 3);
    const sCol2 = new Float32Array(ring2Count * 3);
    const sRand2 = new Float32Array(ring2Count);

const ring2InnerRadius = 12; 
    const ring2Width = 3.0;

for (let i = 0; i < ring2Count; i++) {
        const progress = i / ring2Count;
        const r = ring2InnerRadius + progress * ring2Width + (Math.random()-0.5)*5;
        const angle = Math.random() * Math.PI * 2;
        sPos2[i*3] = Math.cos(angle) * r;
        sPos2[i*3+1] = (Math.random()-0.5) * 0.06;
        sPos2[i*3+2] = Math.sin(angle) * r;
        // 维持 43 的外环颜色逻辑
        let targetColor = Math.random() < 0.7 ? SATURN_COLORS.mediumBlue : SATURN_COLORS.lightBrown;
        const brightnessTint = 0.85 + Math.random() * 0.15;
        sCol2[i*3] = targetColor[0] * brightnessTint;
        sCol2[i*3+1] = targetColor[1] * brightnessTint;
        sCol2[i*3+2] = targetColor[2] * brightnessTint;
        sRand2[i] = Math.random();
    }
    sGeo2.setAttribute('position', new THREE.BufferAttribute(sPos2, 3));
    sGeo2.setAttribute('color', new THREE.BufferAttribute(sCol2, 3));
    sGeo2.setAttribute('rand', new THREE.BufferAttribute(sRand2, 1));
    const outerRing = new THREE.Points(sGeo2, new THREE.PointsMaterial({ 
        size: 0.022, vertexColors: true, transparent: true, alphaTest: 0.001, 
        blending: THREE.AdditiveBlending, depthWrite: false 
    }));
    saturnGroup.add(outerRing);
}

function initScene() {
    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x000000, 0.015); 
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1500);
    camera.position.z = 28;
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.outputEncoding = THREE.sRGBEncoding;
    document.body.appendChild(renderer.domElement);
    
    const renderScene = new THREE.RenderPass(scene, camera);
    const bloomPass = new THREE.UnrealBloomPass(
        new THREE.Vector2(window.innerWidth, window.innerHeight), 
        1.8,  // strength
        0.4,  // threshold
        0.15  // radius
    );
    composer = new THREE.EffectComposer(renderer);
    composer.addPass(renderScene);
    composer.addPass(bloomPass);

scene.add(new THREE.AmbientLight(0xffffff, 0.4)); 
    const frontLight = new THREE.DirectionalLight(0xffffff, 0.6);
    frontLight.position.set(0, 10, 10);
    scene.add(frontLight);
    
    clock = new THREE.Clock();

const galaxyParticles = 6000;
    const gGeo = new THREE.BufferGeometry();
    const gPos = new Float32Array(galaxyParticles * 3);
    const gCol = new Float32Array(galaxyParticles * 3);
    for(let i=0; i<galaxyParticles; i++){
        const r = Math.random() * 70 + 5; 
        const angle = Math.random() * Math.PI * 2 + (r * 0.1);
        gPos[i*3] = Math.cos(angle) * r;
        gPos[i*3+1] = (Math.random()-0.5) * (r * 0.3);
        gPos[i*3+2] = Math.sin(angle) * r - 20;
        const brightness = 0.4 + Math.random() * 0.6;
        gCol[i*3] = brightness * 0.8; gCol[i*3+1] = brightness * 0.9; gCol[i*3+2] = brightness;
    }
    gGeo.setAttribute('position', new THREE.BufferAttribute(gPos, 3));
    gGeo.setAttribute('color', new THREE.BufferAttribute(gCol, 3));
    galaxySystem = new THREE.Points(gGeo, new THREE.PointsMaterial({ 
        size: 0.12, vertexColors: true, transparent: true, opacity: 0.5, 
        blending: THREE.AdditiveBlending, map: createCircleTexture(), depthWrite: false 
    }));
    scene.add(galaxySystem);

initSaturnSystem();

deckGroup = new THREE.Group();
    const texLoader = new THREE.TextureLoader();
    const cardGeo = new THREE.BoxGeometry(3.2, 4.8, 0.01); 
    for(let i=0; i<78; i++) {
        const edgeMat = new THREE.MeshStandardMaterial({
            color: 0x222222,
            emissive: 0xffffff,
            emissiveIntensity: 0.0 
        });

const backUrl = (typeof CARD_ASSETS !== 'undefined' && CARD_ASSETS['牌背.jpg']) ? CARD_ASSETS['牌背.jpg'] : null;
    if(backUrl) texLoader.load(backUrl, tex => {
        tex.encoding = THREE.sRGBEncoding;
        cards.forEach(c => { c.material[5].map = tex; c.material[5].needsUpdate = true; });
    });

handCursor = new THREE.Mesh(
        new THREE.RingGeometry(0.35, 0.45, 32),
        new THREE.MeshBasicMaterial({color: 0xffffff, transparent: true, opacity: 0.8, side: THREE.DoubleSide})
    );
    scene.add(handCursor);
    raycaster = new THREE.Raycaster();
    window.addEventListener('resize', onResize);
    animate();
    setTimeout(() => { 
        const loadingEl = document.getElementById('loading');
        if (loadingEl) {
            loadingEl.style.opacity = 0; 
            setTimeout(() => { loadingEl.style.display = 'none'; }, 1000); 
        }
    }, 1500);
}

function animate() {
    requestAnimationFrame(animate);
    const dt = clock.getDelta();
    const time = Date.now() * 0.002;

if (galaxySystem) galaxySystem.rotation.y += 0.0015;
    if (saturnGroup) {
        saturnGroup.rotation.y += 0.003;
        saturnGroup.children.forEach(child => {
            const posAttr = child.geometry.attributes.position;
            const sTime = Date.now() * 0.001 * saturnConfig.speed;
            const rands = child.geometry.attributes.rand.array;
            for (let i = 0; i < posAttr.count; i += 15) { 
                posAttr.array[i * 3 + 1] += Math.sin(sTime + rands[i] * 10) * saturnConfig.noiseAmplitude;
            }
            posAttr.needsUpdate = true;
        });
    }

mouse.lerp(targetMouse, 0.15);
    const vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
    const dir = vector.sub(camera.position).normalize();
    let targetCursorDist = 22; 
    if (appState === 'GRABBING') targetCursorDist = 18; 
    const smoothCursorDist = THREE.MathUtils.lerp(handCursor.position.distanceTo(camera.position), targetCursorDist, 0.15);
    handCursor.position.copy(camera.position.clone().add(dir.multiplyScalar(smoothCursorDist)));
    handCursor.lookAt(camera.position);

if (appState === 'IDLE') {
        if (Math.abs(targetMouse.x) > CONFIG.deadZone) {
            const speedFactor = (targetMouse.x > 0 ? targetMouse.x - CONFIG.deadZone : targetMouse.x + CONFIG.deadZone);
            scrollVelocity -= speedFactor * CONFIG.scrollSensitivity;
        }
        scrollVelocity *= CONFIG.friction;
        deckGroup.position.x += scrollVelocity;
        const bound = (78 * CONFIG.spacing) / 2;
        deckGroup.position.x = THREE.MathUtils.clamp(deckGroup.position.x, -bound, bound);
    }

raycaster.setFromCamera(mouse, camera);
    cards.forEach(card => {
        const jump = Math.sin(time + card.userData.index * 1.0) * 0.5;
        if (card.userData.isCollected) {
            card.position.lerp(card.userData.targetPos, 0.08);
            card.rotation.x = THREE.MathUtils.lerp(card.rotation.x, 0, 0.1);
            card.rotation.y = THREE.MathUtils.lerp(card.rotation.y, 0, 0.1); 
            const targetZ = (card.userData.data && card.userData.data.isRev) ? Math.PI : 0;
            card.rotation.z = THREE.MathUtils.lerp(card.rotation.z, targetZ, 0.1);
            card.scale.lerp(new THREE.Vector3(0.6, 0.6, 0.6), 0.1); 
            for(let j=0; j<4; j++) card.material[j].emissiveIntensity = THREE.MathUtils.lerp(card.material[j].emissiveIntensity, 0, 0.1);
            return; 
        }

if (card === grabbedCard) {
            if (appState === 'GRABBING') {
                for(let j=0; j<4; j++) card.material[j].emissiveIntensity = THREE.MathUtils.lerp(card.material[j].emissiveIntensity, CONFIG.neonIntensity, 0.1);
                const localTarget = deckGroup.worldToLocal(handCursor.position.clone());
                localTarget.z = card.userData.basePos.z + 4.0;
                card.position.lerp(localTarget, 0.2);
                card.rotation.y = THREE.MathUtils.lerp(card.rotation.y, Math.PI + mouse.x * 0.3, 0.1);
                card.scale.lerp(new THREE.Vector3(1.1, 1.1, 1.1), 0.1);
            } else if (appState === 'REVEALED') {
                for(let j=0; j<4; j++) card.material[j].emissiveIntensity = THREE.MathUtils.lerp(card.material[j].emissiveIntensity, 0, 0.1);
                const targetWorldPos = camera.position.clone().add(new THREE.Vector3(0, 0.6, -9.0)); 
                const targetLocalPos = deckGroup.worldToLocal(targetWorldPos.clone());
                card.position.lerp(targetLocalPos, 0.08);
                card.rotation.y = THREE.MathUtils.lerp(card.rotation.y, 0, 0.06); 
                const targetZ = (card.userData.data && card.userData.data.isRev) ? Math.PI : 0;
                card.rotation.z = THREE.MathUtils.lerp(card.rotation.z, targetZ, 0.08);
                card.scale.lerp(new THREE.Vector3(1.35, 1.35, 1.35), 0.08);
            }
        } else {
            card.position.lerp(card.userData.basePos, 0.1);
            card.rotation.y = THREE.MathUtils.lerp(card.rotation.y, Math.PI, 0.1);
            card.rotation.z = THREE.MathUtils.lerp(card.rotation.z, 0, 0.1);
            for(let j=0; j<4; j++) card.material[j].emissiveIntensity = THREE.MathUtils.lerp(card.material[j].emissiveIntensity, CONFIG.neonIntensity, 0.1);
            if (appState === 'IDLE' && isFlowActive) {
                const intersect = raycaster.intersectObject(card).length > 0;
                card.scale.lerp(new THREE.Vector3(1, intersect?1.25:1, 1), 0.1);
                card.position.y = THREE.MathUtils.lerp(card.position.y, (intersect?1.5:0) + jump, 0.1);
            } else {
                card.scale.lerp(new THREE.Vector3(0.6, 0.6, 0.6), 0.1);
                card.position.y = THREE.MathUtils.lerp(card.position.y, jump, 0.1);
            }
        }
    });

updateParticles(dt);
    composer.render();
}

function drawPlaceholder(card, text) {
    const canvas = document.createElement('canvas'); 
    canvas.width = 512; canvas.height = 768; 
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#080810'; ctx.fillRect(0,0,512,768);
    ctx.strokeStyle = '#fff'; ctx.lineWidth = 10; ctx.strokeRect(20,20,472,728);
    ctx.fillStyle = '#fff'; ctx.font = 'bold 60px "Noto Sans SC"'; 
    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
    ctx.fillText(text, 256, 384);
    card.material[4].map = new THREE.CanvasTexture(canvas);
    card.material[4].needsUpdate = true;
}

function showModal(data) {
    document.getElementById('c-name').innerText = data.zh;
    document.getElementById('c-sub').innerText = (data.isRev ? "逆位" : "正位") + " · " + data.type;
    const info = TAROT_DB[data.zh] || DEFAULT_CARD_DATA;
    document.getElementById('c-desc').innerText = `"${info.keywords || ""}"... 请继续抽取或【握拳】查看解析`;
    document.getElementById('card-modal').classList.add('active');
    document.getElementById('hint').style.opacity = 0;
}

async function startCamera() {
    const video = document.getElementById('webcam');
    const HandsClass = window.Hands || (window.mpHands ? window.mpHands.Hands : null) || (window.google ? window.google.mediapipe.hands.Hands : null);
    if (!HandsClass) { alert("AI引擎加载中..."); return; }
    const hands = new HandsClass({ locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}` });
    hands.setOptions({ maxNumHands: 1, modelComplexity: 1, minDetectionConfidence: 0.7, minTrackingConfidence: 0.7 });
    hands.onResults(onHandResults);
    const cameraHelper = new Camera(video, { onFrame: async () => { if (video.readyState >= 2) await hands.send({image: video}); }, width: 640, height: 480 });
    cameraHelper.start().then(() => {
        isMediaPipeReady = true; document.getElementById('video-container').classList.add('active');
        document.getElementById('btn-cam').innerText = "感知已开启";
    });
}

body { 
            margin: 0; 
            overflow: hidden; 
            background-color: var(--bg-deep);
            background-image: radial-gradient(circle at center, #111 0%, #000 100%);
            font-family: 'Noto Sans SC', sans-serif; 
            color: white; 
        }
        
        #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }
        
        .hud { position: absolute; top: 30px; left: 30px; right: 30px; display: flex; justify-content: space-between; pointer-events: auto; }
        .btn-group { display: flex; gap: 15px; }

.status-dot { width: 8px; height: 8px; background: #555; border-radius: 50%; transition: 0.3s; }
        .status-dot.active { background: #00ffaa; box-shadow: 0 0 10px #00ffaa; }

.interpretation-box { 
            max-width: 800px; margin: 0 auto 50px; 
            display: grid; gap: 50px;
        }

.deep-dive {
            background: rgba(255,255,255,0.03);
            padding: 40px; border-radius: 2px;
            border: 1px solid rgba(255,255,255,0.05);
        }

<div id="loading">
    <div class="spinner"></div>
    <p id="loading-txt" style="margin-top: 20px; letter-spacing: 6px; color: #666; font-size: 10px;">INITIALIZING...</p>
</div>

<div id="card-modal">
        <h2 id="c-name">Card Name</h2>
        <div class="sub" id="c-sub">Arcana</div>
        <p id="c-desc">解析内容...</p>
    </div>

<div id="hint" class="mystic-hint">👌一只手比OK捏住再后拉【选牌】→🖐张开手掌【把牌放下】→✊握拳【看解析】→🖐张开手掌【返回】</div>
</div>

// --- 数据层 ---
let TAROT_DB = {};

// --- 配置 ---
const CONFIG = { 
    spacing: 7.0, 
    pullTriggerThreshold: 0.035, 
    scrollSensitivity: 2.0,      
    friction: 0.3,              
    deadZone: 0.15,              
    maxPullZ: 12,
    neonIntensity: 45.0
};

let scene, camera, renderer, raycaster, handCursor, deckGroup, galaxySystem, clock, composer;
let cards = [];
let mouse = new THREE.Vector2(-999, -999);
let targetMouse = new THREE.Vector2(0, 0);
let scrollVelocity = 0; 
let appState = 'IDLE'; 
let grabbedCard = null;
let particlesGroup = []; 
let grabStartHandSize = 0;
let isMediaPipeReady = false;
let drawnCardsList = []; 
let isFlowActive = true; 
let isHandReady = false;

function initScene() {
    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x000000, 0.02); 
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 28;
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.outputEncoding = THREE.sRGBEncoding;
    document.body.appendChild(renderer.domElement);
    
    const renderScene = new THREE.RenderPass(scene, camera);
    const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
    bloomPass.threshold = 0;
    bloomPass.strength = 2.5; 
    bloomPass.radius = 1.0;
    composer = new THREE.EffectComposer(renderer);
    composer.addPass(renderScene);
    composer.addPass(bloomPass);

scene.add(new THREE.AmbientLight(0xffffff, 0.8)); 
    const frontLight = new THREE.DirectionalLight(0xffffff, 2.0);
    frontLight.position.set(0, 10, 10);
    scene.add(frontLight);
    createGalaxy();
    clock = new THREE.Clock();

function animate() {
    requestAnimationFrame(animate);
    const dt = clock.getDelta();
    const time = Date.now() * 0.002;

if (galaxySystem) galaxySystem.rotation.y += 0.0023; 
    mouse.lerp(targetMouse, 0.15);
    const vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
    const dir = vector.sub(camera.position).normalize();
    let targetCursorDist = 22; 
    if (appState === 'GRABBING') targetCursorDist = 18; 
    const smoothCursorDist = THREE.MathUtils.lerp(handCursor.position.distanceTo(camera.position), targetCursorDist, 0.15);
    handCursor.position.copy(camera.position.clone().add(dir.multiplyScalar(smoothCursorDist)));
    handCursor.lookAt(camera.position);

raycaster.setFromCamera(mouse, camera);
    cards.forEach(card => {
        const jump = Math.sin(time + card.userData.index * 1.0) * 0.5;

if (card.userData.isCollected) {
            card.position.lerp(card.userData.targetPos, 0.08);
            card.rotation.x = THREE.MathUtils.lerp(card.rotation.x, 0, 0.1);
            card.rotation.y = THREE.MathUtils.lerp(card.rotation.y, 0, 0.1); 
            const targetZ = (card.userData.data && card.userData.data.isRev) ? Math.PI : 0;
            card.rotation.z = THREE.MathUtils.lerp(card.rotation.z, targetZ, 0.1);
            card.scale.lerp(new THREE.Vector3(0.6, 0.6, 0.6), 0.1); 
            for(let j=0; j<4; j++) card.material[j].emissiveIntensity = THREE.MathUtils.lerp(card.material[j].emissiveIntensity, 0, 0.1);
            return; 
        }

for(let j=0; j<4; j++) card.material[j].emissiveIntensity = THREE.MathUtils.lerp(card.material[j].emissiveIntensity, CONFIG.neonIntensity, 0.1);

if (appState === 'IDLE' && isFlowActive) {
                const intersect = raycaster.intersectObject(card).length > 0;
                card.scale.lerp(new THREE.Vector3(1, intersect?1.25:1, 1), 0.1);
                card.position.y = THREE.MathUtils.lerp(card.position.y, (intersect?1.5:0) + jump, 0.1);
            } else {
                card.scale.lerp(new THREE.Vector3(0.6, 0.6, 0.6), 0.1);
                card.position.y = THREE.MathUtils.lerp(card.position.y, jump, 0.1);
            }
        }
    });

updateParticles(dt);
    composer.render();
}

for (let i = 0; i < pObj.velocities.length; i++) {
            const v = pObj.velocities[i];
            const d = pObj.drifts[i];
            positions[i * 3] += v.x + Math.sin(pObj.life * 5.0 + d * 10.0) * 0.02;
            positions[i * 3 + 1] += v.y;
            positions[i * 3 + 2] += v.z;
            v.y *= 0.94; v.x *= 0.96; v.z *= 0.99;
        }
        
        pObj.mesh.geometry.attributes.position.needsUpdate = true;
        const alpha = Math.min(1.0, pObj.life * 1.5);
        pObj.mesh.material.opacity = Math.pow(alpha, 2.0);

if (pObj.life <= 0) {
            scene.remove(pObj.mesh);
            pObj.mesh.geometry.dispose();
            pObj.mesh.material.dispose();
            particlesGroup.splice(pIdx, 1);
        }
    }
}

function triggerReveal(card) {
    if (!card || appState !== 'GRABBING') return;
    appState = 'REVEALED';
    for(let j=0; j<4; j++) card.material[j].emissiveIntensity = 0;

const availablePool = DECK_POOL.filter(p => !drawnCardsList.some(d => d.zh === p.zh));
    if (availablePool.length === 0) return;

const randomData = availablePool[Math.floor(Math.random() * availablePool.length)];

card.userData.data = { ...randomData, isRev: Math.random() < 0.5, drawIndex: drawnCardsList.length };
    card.material[4].color.setHex(0x111111); 
    drawPlaceholder(card, card.userData.data.zh); 
    
    const base64Str = (typeof CARD_ASSETS !== 'undefined') ? CARD_ASSETS[card.userData.data.file] : null;
    if (base64Str) {
        new THREE.TextureLoader().load(base64Str, (tex) => {
            tex.encoding = THREE.sRGBEncoding;
            card.material[4].map = tex;
            card.material[4].needsUpdate = true;
            showModal(card.userData.data);
        }, undefined, () => showModal(card.userData.data));
    } else {
        showModal(card.userData.data);
    }
}

function createSilverDissolve(mesh) {
    if (!mesh) return;
    appState = 'DISSOLVING';
    drawnCardsList.push(mesh.userData.data);

const particleCount = 18000;
    const geo = new THREE.BufferGeometry();
    const pos = new Float32Array(particleCount * 3);
    const vels = [];
    const drifts = [];
    const center = new THREE.Vector3();
    mesh.getWorldPosition(center);

for (let i = 0; i < particleCount; i++) {
        pos[i * 3] = center.x + (Math.random() - 0.5) * 3;
        pos[i * 3 + 1] = center.y + (Math.random() - 0.5) * 5;
        pos[i * 3 + 2] = center.z;
        vels.push({
            x: (Math.random() + 0.1) * 0.15,
            y: Math.random() * 0.2 + 0.05, 
            z: (Math.random() - 0.5) * 0.15
        });
        drifts.push(Math.random());
    }
    geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
    const mat = new THREE.PointsMaterial({
        color: 0xffffff, size: 0.04, map: createCircleTexture(), transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending, depthWrite: false 
    });
    const pMesh = new THREE.Points(geo, mat);
    scene.add(pMesh);
    particlesGroup.push({ mesh: pMesh, velocities: vels, drifts: drifts, life: 1.0 });

scene.attach(mesh);
    mesh.userData.isCollected = true;
    const spacing = 2.5; 
    const index = drawnCardsList.length - 1;
    const totalW = drawnCardsList.length * spacing;
    mesh.userData.targetPos = new THREE.Vector3((index * spacing) - (totalW / 2) + spacing/2, -5, 10);
    
    for(let i=0; i<drawnCardsList.length-1; i++) {
        const c = cards.find(card => card.userData.data === drawnCardsList[i]);
        if(c) c.userData.targetPos.x = (i * spacing) - (totalW / 2) + spacing/2;
    }

document.getElementById('card-modal').classList.remove('active');
    grabbedCard = null;

setTimeout(() => {
        if (appState === 'DISSOLVING') {
            appState = 'IDLE';
            document.getElementById('hint').style.opacity = 1;
            document.getElementById('gesture-txt').innerText = `已抽取 ${drawnCardsList.length} 张 | 握拳结算`;
        }
    }, 800);
}

if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
        dot.classList.add('active');
        const lm = results.multiHandLandmarks[0];
        targetMouse.x = (1 - lm[8].x) * 2 - 1; targetMouse.y = -(lm[8].y * 2 - 1);
        const currentHandSize = Math.hypot(lm[0].x - lm[9].x, lm[0].y - lm[9].y);
        
        const isPinching = Math.hypot(lm[4].x - lm[8].x, lm[4].y - lm[8].y) < 0.08;
        const isFist = Math.hypot(lm[8].x - lm[5].x, lm[8].y - lm[5].y) < 0.07;
        const isOpen = !isPinching && !isFist;

if (isOpen) isHandReady = true;

if (overlayActive) {
            if (isOpen && isHandReady) {
                resetApp(); return;
            }
        } 
        else {
            if (isFist && drawnCardsList.length > 0 && appState === 'IDLE') {
                showFinalResult(); return;
            }

if (appState === 'IDLE' && isPinching && isHandReady) {
                const intersect = raycaster.intersectObjects(cards);
                if (intersect.length > 0) { appState = 'GRABBING'; grabbedCard = intersect[0].object; grabStartHandSize = currentHandSize; }
            } else if (appState === 'GRABBING' && (grabStartHandSize - currentHandSize) > CONFIG.pullTriggerThreshold) {
                triggerReveal(grabbedCard);
            } else if (appState === 'REVEALED' && isOpen) {
                createSilverDissolve(grabbedCard);
            }
        }
        
        handCursor.material.color.setHex(isPinching ? 0x00ffff : 0xffffff);
        txt.innerText = isPinching ? "比OK中" : (isFist ? "握拳中" : "手势正常");
    } else { isHandReady = false; dot.classList.remove('active'); txt.innerText = "等待手势"; }
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Mystic Tarot - Hexagram Burst</title>
    <style>
        :root {
            --gold: #ffd700;
            --bg-deep: #050a1a;
        }

body { 
            margin: 0; 
            overflow: hidden; 
            background-color: var(--bg-deep);
            font-family: 'Noto Sans SC', sans-serif; 
            color: white; 
        }

#vignette {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 12% 92%, transparent 20%, rgba(0, 5, 15, 0.4) 100%);
            pointer-events: none;
            z-index: 5;
        }
        
        #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }
        .hud { position: absolute; top: 30px; left: 30px; right: 30px; display: flex; justify-content: space-between; pointer-events: auto; }
        .btn-group { display: flex; gap: 15px; }
        .badge { background: rgba(20, 20, 20, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); color: #ddd; padding: 10px 22px; border-radius: 50px; backdrop-filter: blur(8px); font-size: 13px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: 0.3s; pointer-events: auto; }
        .badge:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }
        .status-dot { width: 8px; height: 8px; background: #555; border-radius: 50%; transition: 0.3s; }
        .status-dot.active { background: #00ffaa; box-shadow: 0 0 10px #00ffaa; }
        .mystic-hint { color: rgba(255,255,255,0.5); font-size: 12px; letter-spacing: 6px; text-transform: uppercase; text-shadow: 0 0 10px rgba(0,0,0,0.8); pointer-events: none; transition: opacity 0.5s; }

#result-overlay { position: absolute; inset: 0; background: rgba(5,5,5,0.98); z-index: 80; display: none; flex-direction: column; padding: 40px; overflow-y: auto; backdrop-filter: blur(20px); }
        #result-overlay.active { display: flex; animation: fadeIn 0.8s ease; }
        .result-header { text-align: center; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #222; max-width: 800px; margin-left: auto; margin-right: auto; width: 100%; }
        .cards-spread { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-bottom: 60px; }
        .mini-card { width: 120px; text-align: center; animation: slideUp 0.8s backwards; transition: 0.4s; }
        .mini-card:hover { transform: translateY(-10px); }
        .mini-card img { width: 100%; border-radius: 4px; border: 1px solid #333; margin-bottom: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
        .mini-card .pos-label { font-size: 10px; color: #666; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 1px; }
        .mini-card .name-label { font-size: 12px; color: #ccc; }
        .interpretation-box { max-width: 800px; margin: 0 auto 50px; display: grid; gap: 50px; }
        .interp-section { padding: 0 20px; }
        .interp-title { color: var(--gold); font-size: 16px; margin-bottom: 15px; letter-spacing: 2px; text-transform: uppercase; display: flex; align-items: center; gap: 10px;}
        .interp-title::before { content:''; display: block; width: 4px; height: 16px; background: var(--gold); }
        .interp-content { font-size: 15px; line-height: 2.0; color: #bbb; font-weight: 300; text-align: justify; }
        .restart-btn { display: block; margin: 20px auto 80px; padding: 14px 50px; background: transparent; border: 1px solid #444; color: #888; border-radius: 50px; cursor: pointer; transition: 0.3s; font-size: 13px; letter-spacing: 4px; text-transform: uppercase; }
        .restart-btn:hover { border-color: #fff; color: #fff; }

<div id="loading">
    <div class="spinner"></div>
    <p id="loading-txt" style="margin-top: 20px; letter-spacing: 6px; color: #666; font-size: 10px;">INITIALIZING...</p>
</div>

<div id="ui-layer">
    <div class="hud">
        <div class="btn-group">
            <div class="badge" id="btn-full">⛶ 全屏</div>
        </div>
        <div class="badge">
            <div class="status-dot" id="hand-dot"></div>
            <span id="gesture-txt">等待接入...</span>
        </div>
    </div>
    <div id="card-modal">
        <h2 id="c-name">Card Name</h2>
        <div class="sub" id="c-sub">Arcana</div>
        <p id="c-desc">解析内容...</p>
    </div>
    <div id="hint" class="mystic-hint">👌一只手比OK捏住再后拉【选牌】→🖐张开手掌【把牌放下】→✊握拳【看解析】→🖐张开手掌【返回】</div>
</div>

<div id="result-overlay">
    <div style="position: sticky; top: 0; padding: 25px 0; background: linear-gradient(to bottom, rgba(5,5,5,1) 0%, rgba(5,5,5,0) 100%); z-index: 100; text-align: center; margin-bottom: -10px;" class="mystic-hint">
        张开手掌返回 (Open Palm to Return)
    </div>
    <div class="result-header">
        <p id="result-mode-name" style="color:#666; font-size:12px; letter-spacing:3px; margin-top:10px;">DEEP INTERPRETATION</p>
    </div>
    <div class="cards-spread" id="result-cards"></div>
    <div class="interpretation-box">
        <div id="result-deep-content" style="width: 100%;"></div>
    </div>
    <button class="restart-btn" onclick="resetApp()">再次提问</button>
</div>

// --- 数据层 ---
let TAROT_DB = {}; 
const DEFAULT_CARD_DATA = { element: "风", keywords: "未知", essence: "连接中...", full_meaning: "数据同步中...", upright: "保持觉察，顺应流动。", reversed: "内省自身，寻找平衡。" };

const BG_CONFIG = {
    STAR_GROUPS: 60000,
    POINTS_PER_TRAIL: 150,
    NEBULA_COUNT: 15000,
    BASE_SPEED: 0.0003,
    GROWTH_DURATION: 10.0,
    CENTER_X_RATIO: 0.12, 
    CENTER_Y_RATIO: 0.92  
};
const BG_COLORS = ['#FFFFFF', '#4FC3F7', '#039BE5', '#FFD54F', '#FBC02D'];

const CONFIG = { spacing: 7.0, pullTriggerThreshold: 0.035, scrollSensitivity: 4.0, friction: 0.25, deadZone: 0.15, maxPullZ: 12 };

const MAJOR_ARCANA_FILES = [ "愚者.jpg", "魔术师.jpg", "女祭司.jpg", "女皇.jpg", "皇帝.jpg", "教皇.jpg", "恋人.jpg", "战车.jpg", "力量.jpg", "隐士.jpg", "命运之轮.jpg", "正义.jpg", "倒吊人.jpg", "死神.jpg", "节制.jpg", "恶魔.jpg", "高塔.jpg", "星星.jpg", "月亮.jpg", "太阳.jpg", "审判.jpg", "世界.jpg" ];
const MINOR_SUITS = ["权杖", "圣杯", "宝剑", "星币"];
const MINOR_RANKS = ["首牌", "二", "三", "四", "五", "六", "七", "八", "九", "十", "侍从", "骑士", "皇后", "国王"];

let scene, camera, renderer, raycaster, handCursor, deckGroup, clock;
let skyPlane, starPoints, nebulaPoints, mountains = [];
let cards = [];
let mouse = new THREE.Vector2(-999, -999);
let targetMouse = new THREE.Vector2(0, 0);
let scrollVelocity = 0; 
let appState = 'IDLE'; 
let grabbedCard = null;
let particlesGroup = []; 
let grabStartHandSize = 0;
let isMediaPipeReady = false;
let drawnCardsList = []; 
let isFlowActive = true; 
let isHandReady = false;

function getFrustumSize(zDepth) {
    const dist = camera.position.z - zDepth;
    const height = 2 * dist * Math.tan(THREE.MathUtils.degToRad(camera.fov / 2));
    const width = height * camera.aspect;
    return { width, height };
}

function updateBgElements() {
    const fSky = getFrustumSize(-60);
    if (skyPlane) skyPlane.scale.set(fSky.width * 1.5, fSky.height * 1.5, 1);
    const fTrail = getFrustumSize(-45);
    const centerX = (BG_CONFIG.CENTER_X_RATIO - 0.5) * fTrail.width;
    const centerY = (0.5 - BG_CONFIG.CENTER_Y_RATIO) * fTrail.height;
    if (starPoints) starPoints.material.uniforms.uCenter.value.set(centerX, centerY);
}

function createNebula() {
    const geometry = new THREE.BufferGeometry();
    const positions = [], colors = [], sizes = [], phases = [];
    const f = getFrustumSize(-50);
    for (let i = 0; i < BG_CONFIG.NEBULA_COUNT; i++) {
        positions.push((Math.random() * 1.5 - 0.1) * f.width, (Math.random() * 1.5 - 0.1) * f.height, -50);
        const color = new THREE.Color(BG_COLORS[Math.floor(Math.random() * BG_COLORS.length)]);
        colors.push(color.r, color.g, color.b);
        sizes.push(Math.random() * 6.0 + 2.0); 
        phases.push(Math.random() * Math.PI * 2);
    }
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
    geometry.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1));
    geometry.setAttribute('phase', new THREE.Float32BufferAttribute(phases, 1));

function createStarTrails() {
    const geometry = new THREE.BufferGeometry();
    const totalPoints = BG_CONFIG.STAR_GROUPS * BG_CONFIG.POINTS_PER_TRAIL;
    const positions = new Float32Array(totalPoints * 3);
    const colors = new Float32Array(totalPoints * 3);
    const customData = new Float32Array(totalPoints * 3);

for (let i = 0; i < BG_CONFIG.STAR_GROUPS; i++) {
        const radius = Math.random() * 600; 
        const startAngle = Math.random() * Math.PI * 2;
        const color = new THREE.Color(BG_COLORS[Math.floor(Math.random() * BG_COLORS.length)]);
        for (let j = 0; j < BG_CONFIG.POINTS_PER_TRAIL; j++) {
            const idx = (i * BG_CONFIG.POINTS_PER_TRAIL + j);
            positions[idx * 3] = 0; positions[idx * 3 + 1] = 0; positions[idx * 3 + 2] = -45;
            colors[idx * 3] = color.r; colors[idx * 3 + 1] = color.g; colors[idx * 3 + 2] = color.b;
            customData[idx * 3] = radius; customData[idx * 3 + 1] = startAngle; customData[idx * 3 + 2] = j; 
        }
    }
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
    geometry.setAttribute('customData', new THREE.BufferAttribute(customData, 3));

function initScene() {
    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x050a1a, 0.012); 
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 28;
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.outputEncoding = THREE.sRGBEncoding;
    document.body.appendChild(renderer.domElement);
    
    scene.add(new THREE.AmbientLight(0xffffff, 0.8)); 
    const frontLight = new THREE.DirectionalLight(0xffffff, 0.8);
    frontLight.position.set(0, 10, 10);
    scene.add(frontLight);

createSky();
    createNebula();
    createStarTrails();
    createMountains();
    updateBgElements();

clock = new THREE.Clock();
    deckGroup = new THREE.Group();
    const texLoader = new THREE.TextureLoader();
    const cardGeo = new THREE.BoxGeometry(3.2, 4.8, 0.01); 
    for(let i=0; i<78; i++) {
        const edgeMat = new THREE.MeshStandardMaterial({ color: 0x222222, emissive: 0xffffff, emissiveIntensity: 0.0 });
        const mats = [ edgeMat.clone(), edgeMat.clone(), edgeMat.clone(), edgeMat.clone(), new THREE.MeshBasicMaterial({color: 0x000000}), new THREE.MeshStandardMaterial({roughness: 0.4, metalness: 0.2}) ];
        const card = new THREE.Mesh(cardGeo, mats);
        card.position.x = (i - 78/2) * CONFIG.spacing;
        card.rotation.y = Math.PI; 
        card.userData = { basePos: card.position.clone(), data: null, index: i };
        deckGroup.add(card);
        cards.push(card);
    }
    scene.add(deckGroup);

handCursor = new THREE.Mesh(
        new THREE.RingGeometry(0.35, 0.45, 32),
        new THREE.MeshBasicMaterial({color: 0xffffff, transparent: true, opacity: 0.8, side: THREE.DoubleSide})
    );
    scene.add(handCursor);
    raycaster = new THREE.Raycaster();
    window.addEventListener('resize', onResize);
    animate();
    setTimeout(() => { 
        const loadingEl = document.getElementById('loading');
        if (loadingEl) { loadingEl.style.opacity = 0; setTimeout(() => { loadingEl.style.display = 'none'; }, 1000); }
    }, 1500);
}

function animate() {
    requestAnimationFrame(animate);
    const dt = clock.getDelta();
    const elapsed = clock.getElapsedTime();

if (nebulaPoints) nebulaPoints.material.uniforms.uTime.value = elapsed;
    if (starPoints) starPoints.material.uniforms.uTime.value = elapsed;

raycaster.setFromCamera(mouse, camera);
    cards.forEach(card => {
        const jump = Math.sin(elapsed * 2.0 + card.userData.index * 1.0) * 0.5;
        if (card.userData.isCollected) {
            card.position.lerp(card.userData.targetPos, 0.08);
            card.rotation.x = THREE.MathUtils.lerp(card.rotation.x, 0, 0.1);
            card.rotation.y = THREE.MathUtils.lerp(card.rotation.y, 0, 0.1); 
            const targetZ = (card.userData.data && card.userData.data.isRev) ? Math.PI : 0;
            card.rotation.z = THREE.MathUtils.lerp(card.rotation.z, targetZ, 0.1);
            card.scale.lerp(new THREE.Vector3(0.6, 0.6, 0.6), 0.1); 
            for(let j=0; j<4; j++) card.material[j].emissiveIntensity = THREE.MathUtils.lerp(card.material[j].emissiveIntensity, 0, 0.1);
            return; 
        }
        if (card === grabbedCard) {
            for(let j=0; j<4; j++) card.material[j].emissiveIntensity = THREE.MathUtils.lerp(card.material[j].emissiveIntensity, 0, 0.1);
            if (appState === 'GRABBING') {
                const localTarget = deckGroup.worldToLocal(handCursor.position.clone());
                localTarget.z = card.userData.basePos.z + 4.0;
                card.position.lerp(localTarget, 0.2);
                card.rotation.y = THREE.MathUtils.lerp(card.rotation.y, Math.PI + mouse.x * 0.3, 0.1);
                card.scale.lerp(new THREE.Vector3(1.1, 1.1, 1.1), 0.1);
            } else if (appState === 'REVEALED') {
                const targetWorldPos = camera.position.clone().add(new THREE.Vector3(0, 0.6, -9.0)); 
                const targetLocalPos = deckGroup.worldToLocal(targetWorldPos.clone());
                card.position.lerp(targetLocalPos, 0.08);
                card.rotation.y = THREE.MathUtils.lerp(card.rotation.y, 0, 0.06); 
                const targetZ = (card.userData.data && card.userData.data.isRev) ? Math.PI : 0;
                card.rotation.z = THREE.MathUtils.lerp(card.rotation.z, targetZ, 0.08);
                card.scale.lerp(new THREE.Vector3(1.35, 1.35, 1.35), 0.08);
            }
        } else {
            card.position.lerp(card.userData.basePos, 0.1);
            card.rotation.y = THREE.MathUtils.lerp(card.rotation.y, Math.PI, 0.1);
            card.rotation.z = THREE.MathUtils.lerp(card.rotation.z, 0, 0.1);
            for(let j=0; j<4; j++) card.material[j].emissiveIntensity = THREE.MathUtils.lerp(card.material[j].emissiveIntensity, 20.0, 0.1);
            if (appState === 'IDLE' && isFlowActive) {
                const intersect = raycaster.intersectObject(card).length > 0;
                card.scale.lerp(new THREE.Vector3(1, intersect?1.25:1, 1), 0.1);
                card.position.y = THREE.MathUtils.lerp(card.position.y, (intersect?1.5:0) + jump, 0.1);
            } else {
                card.scale.lerp(new THREE.Vector3(0.6, 0.6, 0.6), 0.1);
                card.position.y = THREE.MathUtils.lerp(card.position.y, jump, 0.1);
            }
        }
    });

updateParticles(dt);
    renderer.render(scene, camera);
}

function drawPlaceholder(card, text) {
    const canvas = document.createElement('canvas'); canvas.width = 512; canvas.height = 768; 
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#080810'; ctx.fillRect(0,0,512,768);
    ctx.strokeStyle = '#fff'; ctx.lineWidth = 10; ctx.strokeRect(20,20,472,728);
    ctx.fillStyle = '#fff'; ctx.font = 'bold 60px "Noto Sans SC"'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
    ctx.fillText(text, 256, 384);
    card.material[4].map = new THREE.CanvasTexture(canvas);
    card.material[4].needsUpdate = true;
}

/**
 * 优化后的尖锐六芒星粒子消散
 */
function createSilverDissolve(mesh) {
    if (!mesh) return;
    appState = 'DISSOLVING';
    drawnCardsList.push(mesh.userData.data);
    
    const center = new THREE.Vector3();
    mesh.getWorldPosition(center);
    
    // 配置参数
    const particleCount = 280000; // 增加粒子数量使星形更完整
    const outerRadius = 3.2;    // 外半径
    const innerRadius = 1.1;    // 减小内半径，使角更加修长、尖锐 (约 30 度角效果)
    const explodeForce = 1.8;  
    
    const geo = new THREE.BufferGeometry();
    const pos = new Float32Array(particleCount * 3);
    const colors = new Float32Array(particleCount * 3); // 新增颜色数组
    const vels = [];

// 定义调色板
    const colorPalette = [
        new THREE.Color('#0f1730'),
        new THREE.Color('#2c3e50'),
        new THREE.Color('#4a90e2'),
        new THREE.Color('#f39c12'),
        new THREE.Color('#f1c40f'),
        new THREE.Color('#ffffff')
    ];
    
    // 生成 12 个星形顶点 (6个尖角 + 6个内凹点)
    const vertices = [];
    for (let i = 0; i < 12; i++) {
        const angle = (i * Math.PI) / 6; // 每 30 度一个点
        const r = (i % 2 === 0) ? outerRadius : innerRadius;
        vertices.push(new THREE.Vector3(r * Math.sin(angle), r * Math.cos(angle), 0));
    }

// 在 12 条边段上采样粒子
    function getPointOnSegment(p1, p2) {
        const t = Math.random();
        return new THREE.Vector3().lerpVectors(p1, p2, t);
    }

for (let i = 0; i < particleCount; i++) {
        // 随机选择星形的一条边
        const sideIdx = Math.floor(Math.random() * 12);
        const p1 = vertices[sideIdx];
        const p2 = vertices[(sideIdx + 1) % 12];
        
        const localPos = getPointOnSegment(p1, p2);
        
        // 极小化散步厚度，使轮廓极其精准
        localPos.x += (Math.random() - 0.5) * 0.3;
        localPos.y += (Math.random() - 0.5) * 0.3;
        localPos.z += (Math.random() - 0.5) * 0.5;

pos[i * 3] = center.x + localPos.x; 
        pos[i * 3 + 1] = center.y + localPos.y; 
        pos[i * 3 + 2] = center.z + localPos.z;

// 颜色比例逻辑：按 10%, 10%, 10%, 10%, 10%, 50% 分配
        const ratio = i / particleCount;
        let selectedColor;
        if (ratio < 0.1) selectedColor = colorPalette[0];
        else if (ratio < 0.2) selectedColor = colorPalette[1];
        else if (ratio < 0.3) selectedColor = colorPalette[2];
        else if (ratio < 0.4) selectedColor = colorPalette[3];
        else if (ratio < 0.5) selectedColor = colorPalette[4];
        else selectedColor = colorPalette[5];

colors[i * 3] = selectedColor.r;
        colors[i * 3 + 1] = selectedColor.g;
        colors[i * 3 + 2] = selectedColor.b;

const velDir = localPos.clone().normalize();
        const speed = Math.random() * explodeForce + 0.06;
        vels.push({ 
            x: velDir.x * speed, 
            y: velDir.y * speed, 
            z: velDir.z * speed + (Math.random() - 0.5) * 0.02
        });
    }

geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
    geo.setAttribute('color', new THREE.BufferAttribute(colors, 3)); // 绑定颜色属性

function createCircleTexture() {
    const canvas = document.createElement('canvas'); canvas.width = 64; canvas.height = 64;
    const ctx = canvas.getContext('2d');
    const grad = ctx.createRadialGradient(32, 32, 0, 32, 32, 32);
    grad.addColorStop(0, 'rgba(255, 255, 255, 1)'); 
    grad.addColorStop(0.2, 'rgba(180, 220, 255, 0.6)'); 
    grad.addColorStop(1, 'rgba(255, 255, 255, 0)');
    ctx.fillStyle = grad; ctx.fillRect(0, 0, 64, 64);
    return new THREE.CanvasTexture(canvas);
}

function onResize() { 
    if(camera){
        camera.aspect = window.innerWidth/window.innerHeight; camera.updateProjectionMatrix(); 
        renderer.setSize(window.innerWidth, window.innerHeight);
        updateBgElements();
    } 
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Mystic Tarot - Butterfly Edition</title>
    <style>
        :root {
            --gold: #ffd700;
            --bg-deep: #000000;
        }

.status-dot { width: 8px; height: 8px; background: #555; border-radius: 50%; transition: 0.3s; }
        .status-dot.active { background: #00ffaa; box-shadow: 0 0 10px #00ffaa; }

.interpretation-box { 
            max-width: 800px; margin: 0 auto 50px; 
            display: grid; gap: 50px;
        }

.deep-dive {
            background: rgba(255,255,255,0.03);
            padding: 40px; border-radius: 2px;
            border: 1px solid rgba(255,255,255,0.05);
        }

<div id="loading">
    <div class="spinner"></div>
    <p id="loading-txt" style="margin-top: 20px; letter-spacing: 6px; color: #666; font-size: 10px;">INITIALIZING...</p>
</div>

<div id="card-modal">
        <h2 id="c-name">Card Name</h2>
        <div class="sub" id="c-sub">Arcana</div>
        <p id="c-desc">解析内容...</p>
    </div>

<div id="hint" class="mystic-hint">👌一只手比OK捏住再后拉【选牌】→🖐张开手掌【把牌放下】→✊握拳【看解析】→🖐张开手掌【返回】</div>
</div>

// --- 数据层 ---
let TAROT_DB = {};

// --- [直接移植] 32蝴蝶基础配置参数 ---
const BUTTERFLY_SCALE = 0.2; 
const butterflyCount = 26;
const butterflies = [];
const pCount = 100000;
let pGeom, pPos, pVel, pLife, pSystem, pMat, pIdx = 0;

// --- [直接移植] 蝴蝶纹理生成函数 ---
function createNeonWingTexture() {
    const size = 512;
    const canvas = document.createElement('canvas');
    canvas.width = size; canvas.height = size;
    const ctx = canvas.getContext('2d');
    ctx.strokeStyle = '#00f3ff'; ctx.shadowBlur = 12; ctx.shadowColor = '#00aaff'; ctx.lineWidth = 8;
    ctx.beginPath();
    ctx.moveTo(20, 256); ctx.bezierCurveTo(50, 20, 480, 20, 500, 256); ctx.bezierCurveTo(480, 490, 50, 490, 20, 256);
    ctx.stroke();
    ctx.lineWidth = 2; ctx.globalAlpha = 0.6;
    for(let i = 0; i < 16; i++) {
        ctx.beginPath(); ctx.moveTo(20, 256);
        const angle = (i / 15) * Math.PI - Math.PI / 2;
        ctx.quadraticCurveTo(250, 256 + Math.sin(angle) * 80, 480, 256 + Math.sin(angle) * 235);
        ctx.stroke();
    }
    return new THREE.CanvasTexture(canvas);
}

function createParticleTexture() {
    const canvas = document.createElement('canvas');
    canvas.width = 64; canvas.height = 64;
    const ctx = canvas.getContext('2d');
    const gradient = ctx.createRadialGradient(32, 32, 0, 32, 32, 32);
    gradient.addColorStop(0, 'rgba(255, 255, 255, 1)'); gradient.addColorStop(0.2, 'rgba(0, 243, 255, 0.8)');
    gradient.addColorStop(0.5, 'rgba(0, 100, 255, 0.3)'); gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
    ctx.fillStyle = gradient; ctx.fillRect(0, 0, 64, 64);
    return new THREE.CanvasTexture(canvas);
}

// --- [直接移植] 蝴蝶初始化逻辑 ---
function initButterflySystem() {
    const wingTexture = createNeonWingTexture();
    const pTex = createParticleTexture();

const wingShape = new THREE.Shape();
    wingShape.moveTo(0, 0);
    wingShape.bezierCurveTo(1.5 * BUTTERFLY_SCALE, 3.5 * BUTTERFLY_SCALE, 4.5 * BUTTERFLY_SCALE, 3.5 * BUTTERFLY_SCALE, 5.0 * BUTTERFLY_SCALE, 1.0 * BUTTERFLY_SCALE);
    wingShape.bezierCurveTo(5.2 * BUTTERFLY_SCALE, -1.0 * BUTTERFLY_SCALE, 8.5 * BUTTERFLY_SCALE, -3.0 * BUTTERFLY_SCALE, 0.2 * BUTTERFLY_SCALE, -0.5 * BUTTERFLY_SCALE);
    wingShape.lineTo(0, 0);
    const wingGeom = new THREE.ShapeGeometry(wingShape);
    const uvs = wingGeom.attributes.uv;
    for (let i = 0; i < uvs.count; i++) uvs.setXY(i, uvs.getX(i) / (5.0 * BUTTERFLY_SCALE), (uvs.getY(i) + 3.0 * BUTTERFLY_SCALE) / (6.5 * BUTTERFLY_SCALE));
    const wingMat = new THREE.MeshBasicMaterial({ map: wingTexture, transparent: true, opacity: 0.85, side: THREE.DoubleSide, blending: THREE.AdditiveBlending });

for (let i = 0; i < butterflyCount; i++) {
        const group = new THREE.Group();
        const body = new THREE.Mesh(new THREE.CylinderGeometry(0.08 * BUTTERFLY_SCALE, 0.08 * BUTTERFLY_SCALE, 0.3 * BUTTERFLY_SCALE, 8), new THREE.MeshBasicMaterial({ color: 0x0044ff }));
        group.add(body);

const leftWingGroup = new THREE.Group();
        leftWingGroup.add(new THREE.Mesh(wingGeom, wingMat));
        group.add(leftWingGroup);

const rightWingGroup = new THREE.Group();
        const rw = new THREE.Mesh(wingGeom, wingMat);
        rw.scale.x = -1;
        rightWingGroup.add(rw);
        group.add(rightWingGroup);

const individualScale = 0.05 + Math.random() * 1;
        group.scale.setScalar(individualScale);

scene.add(group);
        butterflies.push({
            group,
            leftWingGroup,
            rightWingGroup,
            timeOffset: Math.random() * 100, 
            yBase: (Math.random() - 0.5) * 8, 
            phaseShift: Math.random() * Math.PI * 2, 
            speedMult: 1.8 + Math.random() * 0.4,
            individualScale
        });
    }

pGeom = new THREE.BufferGeometry();
    pPos = new Float32Array(pCount * 3);
    pVel = new Float32Array(pCount * 3); 
    pLife = new Float32Array(pCount);    
    for(let i=0; i<pCount; i++) pPos[i*3+1] = -500;
    pGeom.setAttribute('position', new THREE.BufferAttribute(pPos, 3));
    pMat = new THREE.PointsMaterial({ color: 0xffffff, size: 0.15 * BUTTERFLY_SCALE, map: pTex, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, opacity: 0.8 });
    pSystem = new THREE.Points(pGeom, pMat);
    scene.add(pSystem);
}

scene.add(new THREE.AmbientLight(0xffffff, 0.5)); 
    const frontLight = new THREE.DirectionalLight(0xffffff, 1.0);
    frontLight.position.set(0, 10, 10);
    scene.add(frontLight);
    createGalaxy();
    
    // [叠加注入] 执行蝴蝶系统初始化
    initButterflySystem();

clock = new THREE.Clock();

const backUrl = (typeof CARD_ASSETS !== 'undefined' && CARD_ASSETS['牌背7.jpg']) ? CARD_ASSETS['牌背7.jpg'] : null;
    if(backUrl) texLoader.load(backUrl, tex => {
        tex.encoding = THREE.sRGBEncoding;
        cards.forEach(c => { c.material[5].map = tex; c.material[5].needsUpdate = true; });
    });

function animate() {
    requestAnimationFrame(animate);
    const dt = clock.getDelta();
    const time = Date.now() * 0.002;
    const t = clock.getElapsedTime();

if (galaxySystem) galaxySystem.rotation.y += 0.0023;

// --- [直接移植] 蝴蝶动画循环逻辑 ---
    const flapSpeed = 1; 
    const baseAmplitude = 0.3 * BUTTERFLY_SCALE;
    const baseMoveSpeed = 13.5 * BUTTERFLY_SCALE;
    const range = 240 * BUTTERFLY_SCALE; 
    const posAttr = pGeom.attributes.position.array;

butterflies.forEach(b => {
        const bt = (t * b.speedMult) + b.timeOffset;
        const xPos = ((bt * baseMoveSpeed) % range) - (range / 2); 
        const yPos = b.yBase + baseAmplitude * Math.sin((0.8 / BUTTERFLY_SCALE) * xPos + b.phaseShift);
        const slope = baseAmplitude * (0.8 / BUTTERFLY_SCALE) * Math.cos((0.8 / BUTTERFLY_SCALE) * xPos + b.phaseShift);
        const targetRotationZ = Math.atan(slope) - Math.PI / 2;

b.group.position.set(xPos, yPos, (Math.sin(bt) * 0.5) * BUTTERFLY_SCALE);
        b.group.rotation.z = targetRotationZ;

const flapAngle = Math.sin(bt * flapSpeed) * 1.1; 
        b.leftWingGroup.rotation.y = flapAngle;
        b.rightWingGroup.rotation.y = -flapAngle;

for(let k = 0; k < 15; k++) {
            pLife[pIdx] = 1.0;
            posAttr[pIdx*3] = xPos + (Math.random() - 0.5) * 0.2 * BUTTERFLY_SCALE * b.individualScale;
            posAttr[pIdx*3+1] = yPos + (Math.random() - 0.5) * 0.2 * BUTTERFLY_SCALE * b.individualScale;
            posAttr[pIdx*3+2] = b.group.position.z;
            pVel[pIdx*3] = (Math.random() - 0.5) * 0.15 * BUTTERFLY_SCALE;
            pVel[pIdx*3+1] = ((Math.random() - 0.5) * 0.15 - 0.005) * BUTTERFLY_SCALE;
            pVel[pIdx*3+2] = (Math.random() - 0.5) * 0.15 * BUTTERFLY_SCALE;
            pIdx = (pIdx + 1) % pCount;
        }
    });

for(let i=0; i<pCount; i++) {
        if(pLife[i] > 0) {
            pLife[i] -= 0.05; 
            posAttr[i*3] += pVel[i*3]; posAttr[i*3+1] += pVel[i*3+1]; posAttr[i*3+2] += pVel[i*3+2];
            if(pLife[i] <= 0) posAttr[i*3+1] = -500; 
        }
    }
    pGeom.attributes.position.needsUpdate = true;
    pMat.size = (0.16 + Math.sin(t * 2) * 0.04) * BUTTERFLY_SCALE; 
    // --- 蝴蝶动画循环结束 ---

raycaster.setFromCamera(mouse, camera);
    cards.forEach(card => {
        const jump = Math.sin(time + card.userData.index * 1.0) * 0.5;

for(let j=0; j<4; j++) card.material[j].emissiveIntensity = THREE.MathUtils.lerp(card.material[j].emissiveIntensity, CONFIG.neonIntensity, 0.1);

updateParticles(dt);
    composer.render();
}

function triggerReveal(card) {
    if (!card || appState !== 'GRABBING') return;
    appState = 'REVEALED';
    for(let j=0; j<4; j++) card.material[j].emissiveIntensity = 0;

const availablePool = DECK_POOL.filter(p => !drawnCardsList.some(d => d.zh === p.zh));
    if (availablePool.length === 0) return;

const randomData = availablePool[Math.floor(Math.random() * availablePool.length)];

function createSilverDissolve(mesh) {
    if (!mesh) return;
    appState = 'DISSOLVING';
    drawnCardsList.push(mesh.userData.data);

document.getElementById('card-modal').classList.remove('active');
    grabbedCard = null;

if (isOpen) isHandReady = true;