:root {
            --gold: #ffd700; --orange: #ff6b00; --purple: #a855f7; --blue: #3b82f6;
            --green: #22c55e; --red: #ef4444; --dark: #0a0a0f; --mythic: #ff00ff;
            --cyan: #00ffff; --log: #c97f3d;
        }
        
        /* Custom NW Icon Styling */
        .nw-icon { display: inline-block; vertical-align: middle; fill: currentColor; }
        .nw-icon.nw-spin { animation: nwSpin 1s linear infinite; }
        @keyframes nwSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        
        /* Rarity Glow Effects for Icons */
        .mythic-glow { filter: drop-shadow(0 0 6px #ff00ff) drop-shadow(0 0 12px rgba(255,0,255,0.5)); }
        .legendary-glow { filter: drop-shadow(0 0 4px #ffd700) drop-shadow(0 0 8px rgba(255,215,0,0.5)); }
        .epic-glow { filter: drop-shadow(0 0 4px #a855f7) drop-shadow(0 0 8px rgba(168,85,247,0.5)); }
        .rare-glow { filter: drop-shadow(0 0 3px #3b82f6); }
        .uncommon-glow { filter: drop-shadow(0 0 2px #22c55e); }
        .common-glow { opacity: 0.8; }
        * { margin: 0; padding: 0; box-sizing: border-box;
            -webkit-user-select: none; user-select: none;
            -webkit-tap-highlight-color: transparent; }
        html, body { height: 100%; overflow-x: hidden; }
        body { 
            font-family: 'Inter', system-ui, -apple-system, sans-serif; 
            background: var(--dark); 
            color: #fff; 
            font-weight: 500; 
        }
        
        /* ═══════════════════════════════════════════════════════════════════
           🔥 EPIC FORGE ROOM - HERO BACKGROUND IMAGE
        ═══════════════════════════════════════════════════════════════════ */
        .forge-hero {
            position: fixed; inset: 0; z-index: -2;
            background: url('/static/forge-room.webp') center center / cover no-repeat;
            filter: brightness(0.7);
        }
        
        /* Overlay gradient for UI readability */
        .forge-overlay {
            position: fixed; inset: 0; z-index: -1;
            background: 
                radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(0,0,0,0.4) 60%),
                linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.6) 100%);
        }
        
        /* Animated Fire Glow at Bottom - enhanced */
        .forge-fire {
            position: fixed; bottom: 0; left: 0; right: 0; height: 250px; z-index: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(255,100,0,0.15) 40%, rgba(255,60,0,0.25) 100%);
            animation: fireGlow 2s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes fireGlow {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }
        
        /* Screen Shake Animation */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10% { transform: translateX(calc(-1 * var(--shake-intensity, 3px))); }
            20% { transform: translateX(var(--shake-intensity, 3px)); }
            30% { transform: translateX(calc(-1 * var(--shake-intensity, 3px))); }
            40% { transform: translateX(var(--shake-intensity, 3px)); }
            50% { transform: translateX(calc(-1 * var(--shake-intensity, 3px))); }
            60% { transform: translateX(var(--shake-intensity, 3px)); }
            70% { transform: translateX(calc(-1 * var(--shake-intensity, 3px))); }
            80% { transform: translateX(var(--shake-intensity, 3px)); }
            90% { transform: translateX(calc(-1 * var(--shake-intensity, 3px))); }
        }
        
        /* Floating Embers */
        .embers {
            position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
        }
        .ember {
            position: absolute; width: 4px; height: 4px; border-radius: 50%;
            background: radial-gradient(circle, #ff6600, #ff3300);
            box-shadow: 0 0 6px #ff6600, 0 0 12px #ff3300;
            animation: emberFloat 4s ease-in-out infinite;
        }
        @keyframes emberFloat {
            0% { transform: translateY(100vh) scale(1); opacity: 1; }
            100% { transform: translateY(-100px) scale(0); opacity: 0; }
        }
        
        /* Clean Header */
        .hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 12px 16px;
            background: linear-gradient(180deg, rgba(10,10,15,0.98), rgba(10,10,15,0.9));
            display: flex; justify-content: space-between; align-items: center; backdrop-filter: blur(10px);
            border-bottom: 2px solid rgba(201,127,61,0.4); }
        .logo { font-family: 'Orbitron', sans-serif; font-size: 16px; font-weight: 800;
            color: var(--gold); text-decoration: none; display: flex; align-items: center; gap: 8px;
            text-shadow: 0 0 20px rgba(255,215,0,0.5); letter-spacing: 1px; }
        .nav-links { display: flex; gap: 8px; align-items: center; }
        .nav-link { padding: 8px 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
            border-radius: 8px; color: #fff; font-size: 13px; text-decoration: none; font-weight: 600;
            transition: all 0.3s; }
        .nav-link:hover { background: rgba(201,127,61,0.2); border-color: var(--log); }
        
        /* Guest ID Display */
        .guest-id-bar {
            display: flex; align-items: center; gap: 6px;
            padding: 5px 12px; background: rgba(0,0,0,0.5);
            border: 1px solid rgba(255,215,0,0.2); border-radius: 6px;
        }
        .guest-label { font-size: 10px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; }
        .guest-code { font-family: 'Orbitron', monospace; font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: 1px; }
        
        .lang { display: flex; gap: 4px; background: rgba(0,0,0,0.4); padding: 3px; border-radius: 8px; }
        .lang button { padding: 6px 10px; border: none; background: transparent;
            color: rgba(255,255,255,0.5); font-size: 12px; border-radius: 6px; cursor: pointer;
            font-family: 'Inter', sans-serif; font-weight: 600; }
        .lang button.on { background: linear-gradient(135deg, var(--log), var(--orange)); color: #fff; }
        
        /* Log Balance Bar - Premium Design */
        .log-bar { position: fixed; top: 56px; left: 0; right: 0;
            display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
            background: linear-gradient(90deg, rgba(201,127,61,0.15), rgba(0,0,0,0.9), rgba(201,127,61,0.15));
            border-bottom: 1px solid rgba(201,127,61,0.3); z-index: 90; }
        .log-display { display: flex; align-items: center; gap: 12px; }
        .log-icon { width: 32px; height: 32px; filter: drop-shadow(0 0 10px rgba(255,215,0,0.8)); }
        .log-icon img { width: 100%; height: 100%; object-fit: contain; }
        .log-value { font-family: 'Orbitron', sans-serif; font-size: 26px; font-weight: 800; color: var(--gold);
            text-shadow: 0 0 15px rgba(255,215,0,0.6); letter-spacing: 1px; }
        .log-label { font-size: 13px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 2px; font-weight: 600; }
        .arcade-btn { padding: 10px 20px; background: linear-gradient(135deg, var(--log), #8B5A2B);
            border: 2px solid var(--gold); border-radius: 8px; color: #fff; font-size: 13px;
            font-weight: 700; text-decoration: none;
            transition: all 0.3s; box-shadow: 0 0 15px rgba(201,127,61,0.4); }
        .arcade-btn:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(255,215,0,0.6); }
        
        /* Test Mode Badge */
        .test-badge { padding: 4px 10px; background: linear-gradient(135deg, #22c55e, #16a34a);
            border-radius: 6px; font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 700;
            color: #fff; text-transform: uppercase; letter-spacing: 1px; animation: testPulse 2s ease-in-out infinite; }
        @keyframes testPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
        
        /* Main Content */
        main { padding: 125px 16px 40px; max-width: 500px; margin: 0 auto; }
        
        /* 🎴 SET SELECTOR */
        .set-selector { display: flex; gap: 10px; margin-bottom: 16px; }
        .set-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 8px;
            background: rgba(255,255,255,0.03);
            border: 2px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            color: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: all 0.3s;
        }
        .set-btn:hover { border-color: rgba(255,107,0,0.5); color: #fff; }
        .set-btn.active {
            background: linear-gradient(135deg, rgba(255,107,0,0.15), rgba(255,215,0,0.1));
            border-color: var(--gold);
            color: #fff;
        }
        .set-btn[data-set="2"].active {
            background: linear-gradient(135deg, rgba(139,69,19,0.2), rgba(255,215,0,0.1));
            border-color: #8b4513;
        }
        .set-icon { font-size: 24px; margin-bottom: 4px; }
        .set-name { font-size: 11px; font-weight: 700; text-transform: uppercase; }
        .set-cards { font-size: 10px; color: rgba(255,255,255,0.4); }
        
        /* 🎰 MULTI-TIER PITY SYSTEM - Addictive Design */
        .pity-section { background: linear-gradient(135deg, rgba(255,0,255,0.06), rgba(0,255,255,0.03));
            border: 2px solid rgba(255,0,255,0.25); border-radius: 16px; padding: 12px; margin-bottom: 20px; }
        
        .pity-row { margin-bottom: 10px; padding: 8px; border-radius: 8px; background: rgba(0,0,0,0.3); }
        .pity-row:last-of-type { margin-bottom: 0; }
        
        .pity-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
        .pity-icon { font-size: 14px; }
        .pity-title { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; flex: 1; }
        .pity-title.mythic { color: var(--mythic); text-shadow: 0 0 10px rgba(255,0,255,0.5); }
        .pity-title.legendary { color: var(--gold); text-shadow: 0 0 10px rgba(255,215,0,0.5); }
        .pity-title.epic { color: var(--purple); text-shadow: 0 0 10px rgba(168,85,247,0.5); }
        .pity-rate { font-family: 'Orbitron', sans-serif; font-size: 10px; color: rgba(255,255,255,0.5); }
        .pity-count { font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 800; color: #fff; }
        
        .pity-track { height: 8px; background: rgba(0,0,0,0.6); border-radius: 4px; overflow: visible;
            border: 1px solid rgba(255,255,255,0.1); position: relative; }
        .pity-track.mythic .pity-fill { 
            background: linear-gradient(90deg, #22c55e, #84cc16 30%, #ffd700 60%, #ff6b00 80%, #ff00ff 100%); }
        .pity-track.legendary .pity-fill { 
            background: linear-gradient(90deg, #22c55e, #ffd700 50%, #ff6b00 100%); }
        .pity-track.epic .pity-fill { 
            background: linear-gradient(90deg, #22c55e, #a855f7 100%); }
        
        .pity-fill { height: 100%; border-radius: 4px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
            position: relative; box-shadow: 0 0 8px rgba(255,215,0,0.3); }
        
        /* Soft Pity Marker */
        .pity-soft-marker { position: absolute; top: -3px; bottom: -3px; width: 2px; 
            background: rgba(255,255,255,0.8); border-radius: 1px;
            box-shadow: 0 0 6px rgba(255,255,255,0.5); z-index: 2; }
        .pity-soft-marker::after { content: ''; position: absolute; top: -14px; left: 50%; width: 8px; height: 8px;
            transform: translateX(-50%); background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffd700"><path d="M13 3L4 14h7l-2 7 9-11h-7l2-7z"/></svg>') center/contain no-repeat; }
        
        /* Pity Glow when close */
        .pity-row.close .pity-track { animation: pityPulse 1s infinite; }
        @keyframes pityPulse {
            0%, 100% { box-shadow: 0 0 5px rgba(255,215,0,0.3); }
            50% { box-shadow: 0 0 15px rgba(255,215,0,0.6); }
        }
        
        .pity-info { margin-top: 10px; padding: 8px; background: rgba(0,0,0,0.4); border-radius: 8px;
            font-size: 10px; color: rgba(255,255,255,0.6); text-align: center; line-height: 1.4; }
        .pity-info strong { color: var(--gold); }
        
        /* Pack Area - Premium */
        .pack-area { position: relative; height: 360px; display: flex; align-items: center; justify-content: center;
            margin-bottom: 10px; perspective: 1500px; padding-bottom: 30px; }
        
        /* The Pack - NEW IMAGE-BASED DESIGN */
        .pack { width: 200px; height: 280px; position: relative; cursor: pointer;
            transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
            filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)); }
        .pack:hover:not(.opening) { transform: scale(1.05) rotateY(5deg); }
        .pack.opening { pointer-events: none; }
        
        /* Main pack image */
        .pack-main-img { width: 100%; height: 100%; object-fit: contain; }
        
        .pack-badge { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
            padding: 8px 20px; border-radius: 20px; font-family: 'Orbitron', sans-serif;
            font-size: 11px; font-weight: 700; letter-spacing: 2px;
            background: linear-gradient(135deg, var(--purple), var(--mythic)); color: #fff;
            box-shadow: 0 4px 15px rgba(168,85,247,0.4); text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
        
        .tap-hint { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
            font-size: 12px; color: rgba(255,255,255,0.4); animation: tapPulse 2s ease-in-out infinite; font-weight: 600;
            white-space: nowrap; pointer-events: none; z-index: 1; }
        @keyframes tapPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
        
        /* Pull Options - Clean */
        .pull-options { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
        .pull-option { padding: 14px 16px; border: 2px solid rgba(201,127,61,0.4); border-radius: 12px;
            background: rgba(0,0,0,0.5); cursor: pointer; transition: all 0.3s; text-align: center; min-width: 90px; }
        .pull-option:hover:not(.disabled) { border-color: var(--gold); background: rgba(201,127,61,0.15); }
        .pull-option.active { border-color: var(--mythic); background: rgba(255,0,255,0.1);
            box-shadow: 0 0 20px rgba(255,0,255,0.3); }
        .pull-option.disabled { opacity: 0.4; cursor: not-allowed; }
        .pull-option .cost { font-family: 'Orbitron', sans-serif; font-size: 16px; font-weight: 800; color: var(--gold); 
            display: flex; align-items: center; justify-content: center; gap: 4px; }
        .pull-option .cost-icon { width: 20px; height: 20px; vertical-align: middle; }
        .pull-option .label { font-size: 12px; color: rgba(255,255,255,0.6); font-weight: 600; margin-top: 2px; }
        .pull-option .bonus { font-size: 10px; color: var(--green); margin-top: 2px; font-weight: 700; }
        
        /* Rates Display */
        .rates-section { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px; padding: 14px; margin-bottom: 20px; }
        .rates-header { display: flex; justify-content: space-between; align-items: center;
            cursor: pointer; font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 600; }
        .rates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
        .rate-item { text-align: center; padding: 8px 4px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .rate-item.mythic { background: linear-gradient(135deg, rgba(255,0,255,0.15), rgba(0,255,255,0.08)); 
            border: 1px solid rgba(255,0,255,0.3); }
        .rate-item.legendary { background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.2); }
        .rate-item.epic { background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.2); }
        .rate-item.rare { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2); }
        .rate-item.uncommon { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2); }
        .rate-item.common { background: rgba(107,114,128,0.1); border: 1px solid rgba(107,114,128,0.2); }
        .rate-item .rate-name { font-size: 9px; color: rgba(255,255,255,0.6); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; }
        .rate-item .rate-pct { font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; }
        .rate-item .rate-note { font-size: 8px; color: rgba(255,255,255,0.4); margin-top: 2px; }
        .rate-item.mythic .rate-pct { background: linear-gradient(135deg, var(--mythic), var(--cyan));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .rate-item.legendary .rate-pct { color: var(--gold); }
        .rate-item.epic .rate-pct { color: var(--purple); }
        .rate-item.rare .rate-pct { color: var(--blue); }
        .rate-item.uncommon .rate-pct { color: var(--green); }
        .rate-item.common .rate-pct { color: #9ca3af; }
        .rates-pity-info { margin-top: 10px; padding: 8px; background: rgba(0,0,0,0.3); border-radius: 6px;
            font-size: 9px; color: rgba(255,255,255,0.5); line-height: 1.5; }
        .rates-pity-info strong { color: var(--gold); }
        
        /* History */
        .history-section { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px; padding: 14px; }
        .history-header { display: flex; justify-content: space-between; align-items: center;
            font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 12px; font-weight: 600; }
        .history-count { font-family: 'Orbitron', sans-serif; color: var(--gold); font-weight: 700; font-size: 12px; }
        .history-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
        .history-card { aspect-ratio: 1/1.4; border-radius: 8px; overflow: hidden;
            border: 2px solid transparent; transition: all 0.3s; cursor: pointer; background: rgba(255,255,255,0.05); }
        .history-card:hover { transform: scale(1.1); z-index: 10; }
        .history-card.mythic { border-color: var(--mythic); box-shadow: 0 0 15px rgba(255,0,255,0.5); }
        .history-card.legendary { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,215,0,0.4); }
        .history-card.epic { border-color: var(--purple); }
        .history-card.rare { border-color: var(--blue); }
        .history-card img { width: 100%; height: 100%; object-fit: cover; }
        .empty-slot { display: flex; align-items: center; justify-content: center;
            font-size: 20px; color: rgba(255,255,255,0.1); }
        
        /* History card with rendered frame */
        .history-card .nw-card { width: 100%; height: 100%; }
        .history-card .nw-card-sm { transform: scale(0.8); transform-origin: center; }
        
        /* ===== CARD RENDER CONTAINER IN REVEAL ===== */
        /* Container fills the entire card face */
        .card-render-container { 
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important; 
            height: 100% !important; 
            overflow: hidden;
            border-radius: 20px;
        }
        /* Image fills the entire container */
        .card-render-container {
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: #333; /* Fallback if image fails */
        }
        .card-render-container img,
        .card-render-container img#cardImg,
        #cardImg { 
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important; 
            height: 100% !important; 
            object-fit: cover !important;
            border-radius: 20px;
            z-index: 5;
        }
        /* Hide NW_CARD_RENDERER elements */
        .card-render-container .nw-card { display: none !important; }
        .card-render-container .nw-card::after { display: none !important; }
        .card-render-container .nw-card-lg { transform: none; }
        
        /* ===== ULTRA PREMIUM CARD REVEAL SYSTEM ===== */
        .reveal-overlay { position: fixed; inset: 0; background: #000; z-index: 1000;
            display: none; flex-direction: column; align-items: center; justify-content: center; }
        .reveal-overlay.show { display: flex; }
        
        /* Background Effects */
        .reveal-bg-effects { position: absolute; inset: 0; overflow: hidden; }
        .reveal-vignette { position: absolute; inset: 0; 
            background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.6) 70%, #000 100%); }
        
        /* Dramatic Rays */
        .reveal-rays { position: absolute; top: 50%; left: 50%; width: 200vmax; height: 200vmax;
            transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.5s; }
        .reveal-rays.active { opacity: 1; }
        .reveal-ray { position: absolute; top: 50%; left: 50%; width: 8px; height: 50%;
            transform-origin: bottom center; opacity: 0.6; }
        
        /* Energy Ring */
        .energy-ring { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px;
            transform: translate(-50%, -50%); border-radius: 50%; opacity: 0;
            border: 3px solid transparent; pointer-events: none; }
        .energy-ring.pulse { animation: ringPulse 0.8s ease-out forwards; }
        @keyframes ringPulse {
            0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; border-color: var(--gold); }
            100% { transform: translate(-50%, -50%) scale(2); opacity: 0; border-color: transparent; }
        }
        
        /* Particle Container */
        .reveal-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
        
        /* Card Container */
        .card-stage { 
            position: relative; 
            z-index: 10; 
            perspective: 2000px;
        }
        
        /* The Card - BIG SIZE - 80vw */
        .reveal-card { 
            /* BIG - 80% of viewport width */
            width: 80vw !important;
            height: calc(80vw * 1.4) !important;
            max-height: 75vh; /* Don't overflow screen */
            position: relative; 
            transform-style: preserve-3d; 
            cursor: pointer;
            border-radius: 16px;
            /* Default visible - animations can override */
            transform: scale(1) translateY(0);
            opacity: 1;
            visibility: visible;
            background: #222; /* Fallback background */
            /* ALLOW ANIMATIONS */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        /* Entrance animation */
        .reveal-card.card-entrance-start {
            transform: scale(0.5) translateY(50px);
            opacity: 0.5;
        }
        .reveal-card.card-entrance-end {
            transform: scale(1) translateY(0);
            opacity: 1;
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
        }
        
        .card-inner { 
            position: absolute; 
            inset: 0; 
        }
        .card-inner.flipped { 
            /* Flip disabled - show front directly */
        }
        
        /* Both card faces - IDENTICAL structure - FULL SIZE */
        .card-face { 
            position: absolute; 
            inset: 0; 
            border-radius: 20px;
            overflow: hidden; 
            box-shadow: 0 25px 50px rgba(0,0,0,0.5); 
        }
        
        /* Card Back - Rich Design */
        .card-back { background: linear-gradient(135deg, #2d1f0f, #1a1208);
            border: 4px solid #8B5A2B; display: flex; align-items: center; justify-content: center;
            flex-direction: column; gap: 10px; transition: box-shadow 0.3s ease; }
        .card-back-pattern { font-size: 70px; opacity: 0.4; }
        .card-back::before { content: ''; position: absolute; inset: 10px; border: 2px solid rgba(255,215,0,0.2);
            border-radius: 10px; }
        .card-back-text { font-family: 'Orbitron', sans-serif; font-size: 11px; color: rgba(255,215,0,0.5);
            letter-spacing: 3px; font-weight: 700; }
        
        /* 🎰 Rarity Tease Effect - Suspense Builder */
        .rarity-tease { animation: rarityTease 0.4s ease-in-out infinite; }
        .rarity-tease .card-back { 
            animation: cardBackPulse 0.3s ease-in-out infinite;
        }
        @keyframes rarityTease {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }
        @keyframes cardBackPulse {
            0%, 100% { 
                box-shadow: 0 0 40px var(--tease-color, #ffd700), 
                            0 0 80px var(--tease-color, #ffd700),
                            inset 0 0 30px rgba(255,255,255,0.1);
            }
            50% { 
                box-shadow: 0 0 60px var(--tease-color, #ffd700), 
                            0 0 120px var(--tease-color, #ffd700),
                            inset 0 0 50px rgba(255,255,255,0.2);
            }
        }
        
        /* Card Front - Just shows the image, nothing else */
        /* TEMPORARILY DISABLED FLIP - Show card immediately for mobile testing */
        .card-front { 
            /* transform: rotateY(180deg); */
            transform: none !important;
            z-index: 10;
        }
        /* Hide the card back for now */
        .card-back {
            display: none !important;
        }
        
        /* Card image styles are defined above in CARD RENDER CONTAINER section */
        
        /* Hide legacy glow elements */
        .card-border-glow, .card-glow { display: none; }
        
        /* GLOW - Uses box-shadow on card-front (same shape, same radius) */
        .card-front.glow-mythic {
            box-shadow: 
                0 0 30px 10px rgba(255,0,255,0.6),
                0 0 60px 20px rgba(0,255,255,0.4),
                0 0 100px 40px rgba(255,0,255,0.2);
            animation: glowPulse 2s ease-in-out infinite;
        }
        .card-front.glow-legendary {
            box-shadow: 
                0 0 25px 8px rgba(255,215,0,0.6),
                0 0 50px 15px rgba(255,107,0,0.4),
                0 0 80px 30px rgba(255,215,0,0.2);
            animation: glowPulse 2.5s ease-in-out infinite;
        }
        .card-front.glow-epic {
            box-shadow: 
                0 0 20px 6px rgba(168,85,247,0.5),
                0 0 40px 12px rgba(168,85,247,0.3);
            animation: glowPulse 3s ease-in-out infinite;
        }
        .card-front.glow-rare {
            box-shadow: 0 0 15px 5px rgba(59,130,246,0.4);
        }
        .card-front.glow-uncommon {
            box-shadow: 0 0 12px 4px rgba(34,197,94,0.3);
        }
        @keyframes glowPulse {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.1); }
        }
        
        /* Holographic Overlay - Premium Effect */
        .card-holo { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: overlay;
            background: linear-gradient(125deg, transparent 0%, rgba(255,0,128,0.3) 20%,
                rgba(0,255,255,0.3) 40%, rgba(255,255,0,0.3) 60%, rgba(128,0,255,0.3) 80%, transparent 100%);
            background-size: 200% 200%; }
        .card-holo.active { opacity: 1; animation: holoShift 3s linear infinite; }
        @keyframes holoShift { 0% { background-position: 0% 0%; } 100% { background-position: 200% 200%; } }
        
        /* Foil Sparkle Effect */
        .card-sparkle { position: absolute; inset: 0; pointer-events: none; opacity: 0; overflow: hidden; }
        .card-sparkle.active { opacity: 1; }
        .sparkle { position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%;
            animation: sparkleAnim 1.5s ease-in-out infinite; }
        @keyframes sparkleAnim { 0%, 100% { opacity: 0; transform: scale(0); }
            50% { opacity: 1; transform: scale(1); } }
        
        /* Rarity Badge - Bold Design */
        .rarity-badge { position: absolute; top: -65px; left: 50%; transform: translateX(-50%) scale(0);
            padding: 12px 35px; border-radius: 30px; font-family: 'Orbitron', sans-serif;
            font-size: 15px; font-weight: 900; letter-spacing: 4px; white-space: nowrap;
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .rarity-badge.show { transform: translateX(-50%) scale(1); }
        .rarity-badge.mythic { background: linear-gradient(135deg, var(--mythic), var(--cyan)); color: #000;
            box-shadow: 0 0 40px var(--mythic), 0 0 80px rgba(0,255,255,0.5);
            animation: mythicBadgePulse 1s ease-in-out infinite; }
        @keyframes mythicBadgePulse { 0%, 100% { transform: translateX(-50%) scale(1); }
            50% { transform: translateX(-50%) scale(1.08); } }
        .rarity-badge.legendary { background: linear-gradient(135deg, var(--gold), var(--orange)); color: #000;
            box-shadow: 0 0 30px rgba(255,215,0,0.6); }
        .rarity-badge.epic { background: var(--purple); color: #fff; box-shadow: 0 0 20px rgba(168,85,247,0.5); }
        .rarity-badge.rare { background: var(--blue); color: #fff; }
        .rarity-badge.uncommon { background: var(--green); color: #fff; }
        .rarity-badge.common { background: #6b7280; color: #fff; }
        
        /* Card Info - Clean Typography */
        .card-info { position: absolute; bottom: -85px; left: 50%; transform: translateX(-50%);
            text-align: center; width: 100%; opacity: 0; transition: opacity 0.5s 0.3s; }
        .card-info.show { opacity: 1; }
        .card-name { font-family: 'Orbitron', sans-serif; font-size: 17px; font-weight: 700; color: #fff;
            text-shadow: 0 2px 10px rgba(0,0,0,0.8); margin-bottom: 6px; letter-spacing: 1px; }
        .card-stats { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 600; }
        
        /* Counter */
        .reveal-counter { position: fixed; top: 20px; right: 20px; padding: 12px 24px;
            background: rgba(0,0,0,0.8); border-radius: 25px; border: 2px solid rgba(255,215,0,0.3);
            font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 700; z-index: 20; letter-spacing: 1px; }
        
        /* Continue Button */
        .reveal-continue { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%);
            padding: 16px 60px; border: 2px solid rgba(255,255,255,0.3); border-radius: 30px;
            background: rgba(0,0,0,0.7); color: #fff;
            font-size: 14px; font-weight: 700; letter-spacing: 3px; cursor: pointer;
            transition: all 0.3s; z-index: 20; opacity: 0; }
        .reveal-continue.show { opacity: 1; animation: continueAppear 0.5s ease-out; }
        @keyframes continueAppear { from { transform: translateX(-50%) translateY(20px); opacity: 0; }
            to { transform: translateX(-50%) translateY(0); opacity: 1; } }
        .reveal-continue:hover { background: rgba(255,255,255,0.1); border-color: var(--gold); }
        
        /* Screen Flash - Improved - HIGH Z-INDEX to show over reveal */
        .screen-flash { position: fixed; inset: 0; background: #fff; opacity: 0;
            pointer-events: none; z-index: 9999; display: none; }
        .screen-flash.flash { 
            display: block;
            animation: flashAnim 0.3s ease-out; 
        }
        @keyframes flashAnim { 
            0% { opacity: 0.7; } 
            100% { opacity: 0; } 
        }
        
        /* Screen Shake - SMOOTH with natural decay */
        .shake { animation: shakeSmooth var(--shake-duration, 0.5s) ease-out; }
        @keyframes shakeSmooth {
            0% { transform: translate(0, 0); }
            15% { transform: translate(calc(var(--shake-intensity, 8px) * -0.8), calc(var(--shake-intensity, 8px) * 0.3)); }
            30% { transform: translate(calc(var(--shake-intensity, 8px) * 0.6), calc(var(--shake-intensity, 8px) * -0.2)); }
            45% { transform: translate(calc(var(--shake-intensity, 8px) * -0.4), calc(var(--shake-intensity, 8px) * 0.15)); }
            60% { transform: translate(calc(var(--shake-intensity, 8px) * 0.25), calc(var(--shake-intensity, 8px) * -0.1)); }
            75% { transform: translate(calc(var(--shake-intensity, 8px) * -0.12), calc(var(--shake-intensity, 8px) * 0.05)); }
            90% { transform: translate(calc(var(--shake-intensity, 8px) * 0.05), 0); }
            100% { transform: translate(0, 0); }
        }
        
        /* 🌟 Sparkle Rain Effect */
        .rain-sparkle {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            top: -10px;
            animation: sparkleRain linear forwards;
            pointer-events: none;
        }
        @keyframes sparkleRain {
            0% { 
                transform: translateY(0) scale(0); 
                opacity: 0; 
            }
            10% { 
                transform: translateY(10vh) scale(1); 
                opacity: 1; 
            }
            90% { 
                transform: translateY(90vh) scale(0.8); 
                opacity: 0.8; 
            }
            100% { 
                transform: translateY(100vh) scale(0); 
                opacity: 0; 
            }
        }
        
        /* Card Entrance Animation - More dramatic */
        .card-entrance { animation: cardEntrance 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes cardEntrance {
            0% { transform: scale(0.3) translateY(100px) rotate(-5deg); opacity: 0; }
            50% { transform: scale(1.15) translateY(-30px) rotate(2deg); opacity: 1; }
            70% { transform: scale(0.95) translateY(5px) rotate(-1deg); }
            100% { transform: scale(1) translateY(0) rotate(0deg); opacity: 1; }
        }
        
        /* ===== MYTHIC CELEBRATION - MAXIMUM HYPE ===== */
        .mythic-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.98); z-index: 2000;
            display: none; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
        .mythic-modal.show { display: flex; animation: mythicAppear 2.5s ease-out; }
        @keyframes mythicAppear { 
            0% { opacity: 0; } 
            5% { opacity: 1; background: rgba(255,0,255,0.9); }
            15% { background: rgba(0,255,255,0.7); }
            25% { background: rgba(255,255,0,0.6); }
            40% { background: rgba(255,0,255,0.4); }
            60% { background: rgba(0,255,255,0.2); } 
            100% { background: rgba(0,0,0,0.98); } 
        }
        .mythic-rays-container { position: absolute; inset: 0; overflow: hidden; }
        .mythic-ray { position: absolute; top: 50%; left: 50%; width: 6px; height: 150vh;
            background: linear-gradient(to bottom, transparent, rgba(255,0,255,0.6), rgba(0,255,255,0.4), transparent);
            transform-origin: center top; animation: rayRotate 20s linear infinite; }
        @keyframes rayRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .mythic-content { position: relative; z-index: 1; text-align: center; }
        .mythic-title { font-family: 'Orbitron', sans-serif; font-size: clamp(28px, 9vw, 52px); font-weight: 900;
            background: linear-gradient(135deg, #ff00ff, #00ffff, #ff00ff, #ffff00);
            background-size: 400% 400%; animation: mythicGradient 3s linear infinite;
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px;
            letter-spacing: 4px; }
        @keyframes mythicGradient { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } }
        .mythic-subtitle { font-size: 14px; color: rgba(255,255,255,0.8); max-width: 320px;
            margin: 0 auto 20px; line-height: 1.8; }
        .mythic-card-showcase { width: min(240px, 60vw); height: calc(min(240px, 60vw) * 1.4);
            border-radius: 16px; overflow: hidden; margin: 0 auto 20px;
            box-shadow: 0 0 80px rgba(255,0,255,0.8), 0 0 150px rgba(0,255,255,0.5);
            animation: mythicFloat 4s ease-in-out infinite; }
        @keyframes mythicFloat { 0%, 100% { transform: translateY(0) rotateY(0); }
            25% { transform: translateY(-10px) rotateY(5deg); }
            75% { transform: translateY(-10px) rotateY(-5deg); } }
        .mythic-card-showcase img { width: 100%; height: 100%; object-fit: cover; }
        .mythic-prize { padding: 16px 28px; border-radius: 12px;
            background: linear-gradient(135deg, rgba(255,0,255,0.12), rgba(0,255,255,0.08));
            border: 2px solid rgba(255,0,255,0.3); margin-bottom: 20px; }
        .mythic-prize-label { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase;
            letter-spacing: 3px; margin-bottom: 4px; font-weight: 700; }
        .mythic-prize-value { font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 1px; }
        .mythic-close { padding: 14px 40px; border: 2px solid var(--mythic); border-radius: 25px;
            background: transparent; color: #fff;
            font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: 3px; transition: all 0.3s; }
        .mythic-close:hover { background: rgba(255,0,255,0.2); box-shadow: 0 0 30px rgba(255,0,255,0.5); }
        
        /* Toast */
        .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px);
            background: rgba(0,0,0,0.9); border: 2px solid rgba(255,215,0,0.4); padding: 14px 28px;
            border-radius: 12px; z-index: 3000; transition: transform 0.3s;
            font-weight: 600; font-size: 14px; }
        .toast.show { transform: translateX(-50%) translateY(0); }
        
        /* Responsive - USE VIEWPORT HEIGHT for proper sizing */
        @media (max-width: 480px) {
            .pull-options { flex-wrap: wrap; gap: 8px; }
            .pull-option { min-width: 80px; padding: 10px 12px; }
        }
        
        /* === UNIFIED SIZING SYSTEM === 
         * Pack and Card are now BIG - 80vw width
         */
        :root {
            --card-width: 80vw;
            --card-height: calc(var(--card-width) * 1.4);
            --card-radius: 16px;
        }
        
        /* Pack = BIG */
        .pack-bag { 
            width: var(--card-width) !important;
            height: var(--card-height) !important;
        }
        
        /* Card reveal = BIG (same as pack) */
        .reveal-card { 
            width: var(--card-width) !important;
            height: var(--card-height) !important;
        }
        
        /* ===== 3D PACK OPENING ===== */
        .pack-overlay {
            position: fixed;
            inset: 0;
            background: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.98) 100%);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        .pack-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }
        
        .pack-scene {
            perspective: 1200px;
            perspective-origin: 50% 50%;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            /* Ensure full viewport centering */
            position: absolute;
            inset: 0;
        }
        
        .pack-container {
            display: flex;
            align-items: center;
            justify-content: center;
            transform-style: preserve-3d;
            /* Ensure proper centering for both bag and box */
            width: 100%;
            max-width: 400px;
        }
        
        /* 3D Pack Box - LEGACY */
        .pack-3d {
            width: 220px;
            height: 300px;
            position: relative;
            transform-style: preserve-3d;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        .pack-3d:hover { transform: scale(1.02); }
        
        .pack-face {
            position: absolute;
            backface-visibility: hidden;
            overflow: hidden;
        }
        
        /* Front face - main pack design */
        .pack-front {
            width: 220px;
            height: 300px;
            background: linear-gradient(145deg, #1a0a30 0%, #2d1050 30%, #1a0a30 100%);
            border: 4px solid;
            border-image: linear-gradient(135deg, #ffd700, #ff6b00, #ffd700) 1;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 
                0 0 40px rgba(255, 107, 0, 0.4),
                0 0 80px rgba(255, 215, 0, 0.2),
                inset 0 0 60px rgba(255, 215, 0, 0.1);
        }
        .pack-front::before {
            content: '';
            position: absolute;
            inset: 8px;
            border: 2px solid rgba(255, 215, 0, 0.3);
            border-radius: 10px;
            pointer-events: none;
        }
        
        .pack-logo {
            font-size: 48px;
            margin-bottom: 10px;
            filter: drop-shadow(0 0 20px rgba(255, 107, 0, 0.8));
            animation: packLogoPulse 2s infinite;
        }
        @keyframes packLogoPulse {
            0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(255, 107, 0, 0.8)); }
            50% { transform: scale(1.1); filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)); }
        }
        
        .pack-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 18px;
            font-weight: bold;
            background: linear-gradient(135deg, #ffd700, #ff6b00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 10px rgba(255, 107, 0, 0.5);
            letter-spacing: 2px;
        }
        
        .pack-subtitle {
            font-size: 12px;
            color: rgba(255, 215, 0, 0.7);
            margin-top: 5px;
            letter-spacing: 1px;
        }
        
        .pack-count {
            position: absolute;
            top: 15px;
            right: 15px;
            background: linear-gradient(135deg, #ff6b00, #ffd700);
            color: #000;
            font-weight: bold;
            font-size: 14px;
            padding: 4px 10px;
            border-radius: 20px;
            font-family: 'Orbitron', sans-serif;
        }
        
        /* Back face */
        .pack-back {
            width: 220px;
            height: 300px;
            transform: rotateY(180deg);
            background: linear-gradient(145deg, #1a0a30 0%, #0d051a 100%);
            border: 4px solid #3d2060;
            border-radius: 16px;
        }
        
        /* Side faces for 3D depth */
        .pack-side {
            background: linear-gradient(to bottom, #ffd700, #8B5A2B, #ffd700);
        }
        .pack-side-left {
            width: 30px;
            height: 300px;
            left: -30px;
            top: 0;
            transform: rotateY(-90deg);
            transform-origin: right center;
        }
        .pack-side-right {
            width: 30px;
            height: 300px;
            right: -30px;
            top: 0;
            transform: rotateY(90deg);
            transform-origin: left center;
        }
        .pack-side-top {
            width: 220px;
            height: 30px;
            top: -30px;
            left: 0;
            transform: rotateX(90deg);
            transform-origin: bottom center;
        }
        .pack-side-bottom {
            width: 220px;
            height: 30px;
            bottom: -30px;
            left: 0;
            transform: rotateX(-90deg);
            transform-origin: top center;
        }
        
        /* Top flap that opens */
        .pack-flap {
            position: absolute;
            width: 220px;
            height: 60px;
            top: -30px;
            left: 0;
            background: linear-gradient(to bottom, #ffd700, #ff6b00);
            border-radius: 12px 12px 0 0;
            transform-origin: bottom center;
            transform-style: preserve-3d;
            transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 10;
        }
        .pack-flap::after {
            content: 'TAP';  /* Custom icon handled separately */
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'Orbitron', sans-serif;
            font-size: 12px;
            color: #1a0a30;
            font-weight: bold;
        }
        .pack-3d.opening .pack-flap {
            transform: rotateX(-150deg);
        }
        
        /* Pack shake animation */
        .pack-3d.shaking {
            animation: packShake 0.1s infinite;
        }
        @keyframes packShake {
            0%, 100% { transform: translateX(0) rotateZ(0); }
            25% { transform: translateX(-3px) rotateZ(-1deg); }
            75% { transform: translateX(3px) rotateZ(1deg); }
        
        /* ═══════════════════════════════════════════════════════════════════
           🎰 SWIPE-TO-TEAR PACK SYSTEM
           ═══════════════════════════════════════════════════════════════════ */
        
        /* Swipe instruction styling */
        .pack-instruction {
            position: absolute;
            bottom: 100px;
            left: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            z-index: 10;
        }
        .pack-instruction.hidden {
            display: none;
        }
        .swipe-text {
            font-family: 'Orbitron', sans-serif;
            font-size: 18px;
            color: #ffd700;
            text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 2px 10px rgba(0,0,0,0.8);
            animation: swipeTextPulse 1.5s infinite;
            letter-spacing: 1px;
        }
        .swipe-arrow {
            font-size: 40px;
            color: #ffd700;
            animation: swipeArrowBounce 0.8s infinite;
            text-shadow: 0 0 20px #ffd700;
        }
        @keyframes swipeTextPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.02); }
        }
        @keyframes swipeArrowBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }
        
        /* Swipe progress bar */
        .swipe-progress {
            position: absolute;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            width: 260px;
            height: 12px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 6px;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.3s;
            border: 2px solid rgba(255, 215, 0, 0.3);
            z-index: 10;
        }
        .swipe-progress.active {
            opacity: 1;
        }
        .swipe-progress-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #ff6b00, #ffd700, #ffff00);
            border-radius: 4px;
            transition: width 0.05s linear;
            box-shadow: 0 0 15px #ffd700, inset 0 0 10px rgba(255,255,255,0.3);
        }
        
        /* Pack Bag - FULL BLEED, same size as card */
        .pack-bag {
            position: relative;
            /* SAME SIZE AS REVEAL CARD - this is critical */
            width: var(--card-width, min(320px, 65vw));
            height: var(--card-height, calc(min(320px, 65vw) * 1.4));
            cursor: grab;
            touch-action: none;
            user-select: none;
            transform: scale(1);
            transition: transform 0.3s ease;
            /* PERFECT CENTERING */
            margin: 0 auto;
            /* FORCE TRANSPARENT - no orange! */
            background: none !important;
            background-color: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }
        /* Kill any pseudo-elements that might add color */
        .pack-bag::before, .pack-bag::after,
        .pack-bag *::before, .pack-bag *::after {
            background: none !important;
            background-color: transparent !important;
        }
        /* Ensure only the image shows */
        .pack-bag > img {
            background: none !important;
        }
        
        /* Thick pack for 10+ pulls - visual edge depth */
        .pack-bag.pack-thick::before {
            content: '';
            position: absolute;
            top: 10%;
            left: -6px;
            width: 6px;
            height: 80%;
            background: linear-gradient(to right, #1a0820, #2d1050);
            border-left: 2px solid #8B5A2B;
            border-radius: 4px 0 0 4px;
            z-index: -1;
        }
        .pack-bag.pack-thick::after {
            content: '';
            position: absolute;
            top: 10%;
            right: -6px;
            width: 6px;
            height: calc(100% - 70px - 24px);
            background: linear-gradient(to left, #1a0820, #2d1050);
            border-right: 2px solid #8B5A2B;
            border-radius: 0 0 8px 0;
            transform: skewY(2deg);
        }
        
        /* Visual card stack inside thick pack */
        .pack-stack-indicator {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 2px;
        }
        .pack-stack-card {
            width: 30px;
            height: 42px;
            background: linear-gradient(135deg, #3d2060, #1a0a30);
            border: 1px solid #ffd700;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
        }
        .pack-stack-card:nth-child(odd) { transform: rotate(-3deg); }
        .pack-stack-card:nth-child(even) { transform: rotate(3deg); }
        .pack-bag:active { cursor: grabbing; transform: scale(0.98); }
        
        /* Bag top seal - DISABLED - we now use full-bleed images */
        .pack-bag-seal {
            display: none !important; /* Hide old seal - images have built-in torn top */
        }
        .pack-bag-seal-OLD {
            position: relative;
            width: 100%;
            height: 70px;
            min-height: 70px;
            background: linear-gradient(180deg, #ffd700 0%, #ff8c00 50%, #ff6b00 100%);
            border-radius: 16px 16px 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Orbitron', sans-serif;
            font-size: 18px;
            font-weight: bold;
            color: #1a0a30;
            letter-spacing: 3px;
            transform-origin: bottom center;
            transition: transform 0.3s ease;
            z-index: 5;
            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.6);
            border: 3px solid #ffaa00;
            border-bottom: none;
        }
        .pack-bag-seal::before {
            content: '✂ - - - - - - - - - - - ✂';
            position: absolute;
            bottom: 6px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            letter-spacing: 2px;
            opacity: 0.6;
            color: #8B4513;
        }
        
        .pack-bag-body {
            position: relative;
            flex: 1;
            width: 100%;
            min-height: 300px;
            background: linear-gradient(145deg, #2d1050 0%, #1a0a30 40%, #150820 100%);
            border: 4px solid #ffd700;
            border-top: 2px dashed rgba(255, 215, 0, 0.5);
            border-radius: 0 0 24px 24px;
            overflow: hidden;
            box-shadow: 
                0 15px 50px rgba(0, 0, 0, 0.6),
                0 0 80px rgba(255, 107, 0, 0.4),
                inset 0 0 60px rgba(255, 215, 0, 0.15);
        }
        
        /* Bag art */
        .pack-bag-art {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 30px;
        }
        .pack-bag-icon {
            font-size: 100px;
            filter: drop-shadow(0 0 40px rgba(255, 107, 0, 0.9));
            animation: bagIconPulse 2s infinite;
        }
        @keyframes bagIconPulse {
            0%, 100% { transform: scale(1); filter: drop-shadow(0 0 40px rgba(255, 107, 0, 0.9)); }
            50% { transform: scale(1.15); filter: drop-shadow(0 0 60px rgba(255, 215, 0, 1)); }
        }
        .pack-bag-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 24px;
            background: linear-gradient(135deg, #ffd700, #ff6b00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-top: 15px;
            font-weight: 900;
            letter-spacing: 2px;
        }
        .pack-bag-count {
            position: absolute;
            top: 20px;
            right: 20px;
            background: linear-gradient(135deg, #ff6b00, #ffd700);
            color: #000;
            font-weight: 900;
            font-size: 20px;
            padding: 8px 18px;
            border-radius: 25px;
            font-family: 'Orbitron', sans-serif;
            box-shadow: 0 6px 20px rgba(255, 107, 0, 0.6);
            border: 2px solid #fff3;
        }
        
        /* Swipe hint pulse animation */
        @keyframes swipeHintPulse {
            0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
            50% { opacity: 0.7; transform: translateX(-50%) scale(1.05); }
        }
        
        /* Pack opening animation - realistic tear/rip effect */
        .pack-bag.tearing {
            animation: packTearOpen 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }
        @keyframes packTearOpen {
            0% { 
                transform: scale(1) rotateZ(0);
                clip-path: inset(0 0 0 0);
                opacity: 1;
            }
            20% {
                transform: scale(1.02) rotateZ(-1deg);
                clip-path: inset(0 0 0 0);
            }
            40% {
                transform: scale(1.05) rotateZ(1deg);
                clip-path: inset(5% 0 0 0); /* Start tearing from top */
            }
            60% {
                transform: scale(1.02) rotateZ(-2deg) translateY(-30px);
                clip-path: inset(30% 0 0 0); /* Tear progresses */
                opacity: 0.9;
            }
            80% {
                transform: scale(0.9) rotateZ(5deg) translateY(-80px);
                clip-path: inset(60% 0 0 0);
                opacity: 0.5;
            }
            100% { 
                transform: scale(0.6) rotateZ(10deg) translateY(-150px);
                clip-path: inset(100% 0 0 0); /* Fully torn away */
                opacity: 0;
            }
        }
        
        /* Hide swipe hint when tearing */
        .pack-bag.tearing .pack-swipe-hint {
            opacity: 0;
            transform: translateX(-50%) translateY(20px);
            transition: all 0.3s ease;
        }
        
        /* Shake animation for pack */
        .pack-bag.shaking, .pack-box.shaking {
            animation: packShake 0.1s infinite;
        }
        @keyframes packShake {
            0%, 100% { transform: translateX(0) rotate(0); }
            25% { transform: translateX(-4px) rotate(-1deg); }
            75% { transform: translateX(4px) rotate(1deg); }
        }
        
        /* Pack Box (10 pulls) - BIG & CENTERED with lid */
        .pack-box {
            position: relative;
            width: min(320px, 85vw);
            height: min(320px, calc(85vw * 1.1));
            transform-style: preserve-3d;
            perspective: 1000px;
            cursor: grab;
            touch-action: none;
            user-select: none;
            /* PERFECT CENTERING */
            margin: 0 auto;
            /* Account for lid height */
            padding-top: 100px;
            min-width: 280px;
        }
        .pack-box:active { cursor: grabbing; }
        
        .pack-box-body {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.4s ease;
        }
        
        .pack-box-face {
            position: absolute;
            backface-visibility: hidden;
        }
        
        .pack-box-front {
            width: 100%;
            height: 200px;
            background: linear-gradient(145deg, #1a0a30 0%, #2d1050 50%, #1a0a30 100%);
            border: 4px solid;
            border-image: linear-gradient(135deg, #ffd700, #ff6b00, #ffd700) 1;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 
                0 10px 40px rgba(0, 0, 0, 0.5),
                0 0 60px rgba(255, 107, 0, 0.3),
                inset 0 0 40px rgba(255, 215, 0, 0.1);
        }
        
        /* Box lid - GOLD with swipe instruction - FULL WIDTH */
        .pack-box-lid {
            position: absolute;
            top: -90px;
            left: -4px;
            right: -4px;
            width: calc(100% + 8px);
            height: 100px;
            background: linear-gradient(180deg, #ffd700, #ff8c00, #ff6b00);
            border-radius: 16px 16px 0 0;
            transform-origin: bottom center;
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Orbitron', sans-serif;
            font-size: 18px;
            font-weight: bold;
            color: #1a0a30;
            letter-spacing: 2px;
            box-shadow: 0 -5px 30px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 107, 0, 0.3);
            border: 3px solid #ffaa00;
            border-bottom: none;
        }
        .pack-box-lid::after {
            content: '↑ SWIPE UP ↑';
            position: absolute;
            bottom: 10px;
            font-size: 12px;
            animation: lidArrow 1s infinite;
        }
        @keyframes lidArrow {
            0%, 100% { transform: translateY(0); opacity: 1; }
            50% { transform: translateY(-5px); opacity: 0.6; }
        }
        
        .pack-box.opening .pack-box-lid {
            transform: rotateX(-120deg);
        }
        
        .pack-box-icon {
            font-size: 48px;
            filter: drop-shadow(0 0 20px rgba(255, 107, 0, 0.8));
        }
        .pack-box-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 16px;
            background: linear-gradient(135deg, #ffd700, #ff6b00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-top: 5px;
        }
        .pack-box-count {
            position: absolute;
            top: 10px;
            right: 10px;
            background: linear-gradient(135deg, #ff6b00, #ffd700);
            color: #000;
            font-weight: bold;
            font-size: 14px;
            padding: 5px 12px;
            border-radius: 20px;
            font-family: 'Orbitron', sans-serif;
        }
        
        /* Cards inside box (after opening) */
        .pack-box-cards {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 160px;
            height: 120px;
            opacity: 0;
            transition: opacity 0.3s, transform 0.3s;
        }
        .pack-box.opening .pack-box-cards {
            opacity: 1;
            transform: translateX(-50%) translateY(-30px);
        }
        .pack-box-card-stack {
            position: absolute;
            width: 80px;
            height: 112px;
            background: linear-gradient(135deg, #2d1050, #1a0a30);
            border: 2px solid #ffd700;
            border-radius: 8px;
            left: 50%;
            top: 50%;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        }
        .pack-box-card-stack:nth-child(1) { transform: translate(-50%, -50%) rotate(-10deg); }
        .pack-box-card-stack:nth-child(2) { transform: translate(-50%, -50%) rotate(-5deg); }
        .pack-box-card-stack:nth-child(3) { transform: translate(-50%, -50%) rotate(0deg); }
        .pack-box-card-stack:nth-child(4) { transform: translate(-50%, -50%) rotate(5deg); }
        .pack-box-card-stack:nth-child(5) { transform: translate(-50%, -50%) rotate(10deg); }
        
        /* Tear effect SVG */
        .tear-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 100;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .tear-effect.active {
            opacity: 1;
        }
        .tear-path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            filter: url(#tearFilter);
        }
        .tear-effect.tearing .tear-path {
            animation: tearDraw 0.5s ease-out forwards;
        }
        @keyframes tearDraw {
            to { stroke-dashoffset: 0; }
        }
        
        /* Rarity glow on swipe pack */
        .pack-bag.glow-mythic, .pack-box.glow-mythic {
            animation: mythicGlow 0.5s infinite alternate;
        }
        .pack-bag.glow-legendary, .pack-box.glow-legendary {
            animation: legendaryGlow 0.5s infinite alternate;
        }
        .pack-bag.glow-epic, .pack-box.glow-epic {
            animation: epicGlow 0.5s infinite alternate;
        }
        @keyframes mythicGlow {
            from { box-shadow: 0 0 30px #ff00ff, 0 0 60px #00ffff; }
            to { box-shadow: 0 0 60px #ff00ff, 0 0 120px #00ffff; }
        }
        @keyframes legendaryGlow {
            from { box-shadow: 0 0 30px #ffd700, 0 0 60px #ff6b00; }
            to { box-shadow: 0 0 60px #ffd700, 0 0 120px #ff6b00; }
        }
        @keyframes epicGlow {
            from { box-shadow: 0 0 30px #a855f7; }
            to { box-shadow: 0 0 60px #a855f7; }
        }
        
        /* Pack box responsive - lid follows parent width */
        @media (max-width: 400px) {
            .pack-box-front {
                height: 180px;
            }
            .pack-box-lid {
                height: 90px;
                top: -85px;
            }
        }
        
        @keyframes particleFly {
            0% { 
                transform: translate(-50%, -50%) scale(1); 
                opacity: 1; 
            }
            100% { 
                transform: translate(calc(-50% + var(--fly-x)), calc(-50% + var(--fly-y))) scale(0.3); 
                opacity: 0; 
            }
        }
        
        /* Glow effects by rarity */
        .pack-3d.glow-mythic .pack-front {
            box-shadow: 
                0 0 60px rgba(255, 0, 255, 0.6),
                0 0 100px rgba(0, 255, 255, 0.4),
                inset 0 0 40px rgba(255, 0, 255, 0.3);
        }
        .pack-3d.glow-legendary .pack-front {
            box-shadow: 
                0 0 60px rgba(255, 215, 0, 0.7),
                0 0 100px rgba(255, 107, 0, 0.5),
                inset 0 0 40px rgba(255, 215, 0, 0.3);
        }
        .pack-3d.glow-epic .pack-front {
            box-shadow: 
                0 0 50px rgba(168, 85, 247, 0.6),
                inset 0 0 30px rgba(168, 85, 247, 0.3);
        }
        
        /* Cards flying out */
        .pack-cards-out {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-style: preserve-3d;
        }
        .flying-card {
            position: absolute;
            width: 100px;
            height: 140px;
            background-size: cover;
            background-position: center;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.6);
            opacity: 0;
        }
        
        /* Instruction */
        .pack-instruction {
            margin-top: 40px;
            text-align: center;
        }
        .tap-text {
            font-family: 'Orbitron', sans-serif;
            font-size: 20px;
            color: #ffd700;
            text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
            animation: tapPulse 1.5s infinite;
        }
        @keyframes tapPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(0.95); }
        }
        .pack-instruction.hidden { display: none; }
        
        .pack-particles {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
        }
        /* Unified nav adjustments */
        .nw-nav-toggle { top: 10px; left: 10px; z-index: 200; }
        .hdr { padding-left: 60px; }