<!-- Fonts for store -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">

<!-- DEBUG MARKER: Template Updated on 2026-01-31 -->
<!-- DEBUG MARKER: Template Loaded Successfully on 2026-01-31 -->

<!-- ========== ASCEND STORE SECTION ========== -->
<section class="aa-panel" id="a_store">
    <div class="aa-panel-head">
        <h3>
            <img src="{{store_icon_url}}" 
                 alt="{{store_label}}" 
                 style="width:60px;height:60px;vertical-align:middle;margin-right:8px;">
            {{store_label}}
            <span style="color:#ec4899;font-size:14px;font-weight:600;margin-left:8px;">({{coin_balance_display}} {{coins_available_label}})</span>
        </h3>
        <i class="fa-solid fa-chevron-down"></i>
    </div>
    
    <div class="aa-panel-content">
        <!-- XP Multiplier Active Notice -->
        {{#xp_multiplier_active}}
            <div style="background:linear-gradient(135deg,#ec4899,#FF00AA);border-radius:12px;padding:20px;margin-bottom:20px;text-align:center;">
                <div style="font-size:18px;font-weight:700;color:#fff;margin-bottom:8px;">{{xp_multiplier_active_label}}</div>
                <div style="font-size:14px;color:rgba(255,255,255,0.9);">{{xp_multiplier_expires_label}} <strong id="xpMultiplierTimer_store" data-expires="{{xp_multiplier_expires}}"></strong></div>
            </div>
        {{/xp_multiplier_active}}
        
        <!-- ============================================================================
             POWER-UPS & MYSTERY BOX SECTION
             ============================================================================ -->
        <div style="margin-bottom:40px;padding-bottom:24px;border-bottom:2px solid rgba(255,255,255,0.1);">
            <h4 style="color:#00D4FF;font-size:18px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:8px;">
                {{powerups_title_label}}
            </h4>
            
            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;">
                <!-- XP Multiplier -->
                <div class="store-card" style="background:linear-gradient(135deg,#01142E,#010828);border:2px solid {{#xp_item.can_afford}}#00D4FF{{/xp_item.can_afford}}{{^xp_item.can_afford}}rgba(255,255,255,0.1){{/xp_item.can_afford}};border-radius:12px;padding:24px;transition:all 0.3s ease;">
                    <div style="text-align:center;margin-bottom:20px;">
                        <img src="{{xp_item.icon_url}}" 
                             alt="{{xp_item.name}}" 
                             style="width:120px;height:120px;object-fit:contain;margin-bottom:12px;filter:drop-shadow(0 4px 12px rgba(0,212,255,0.3));">
                        <div style="font-size:18px;font-weight:700;color:#e6e9f0;margin-bottom:8px;">{{xp_item.name}}</div>
                        <div style="font-size:14px;color:#94a3b8;">{{xp_item.description}}</div>
                    </div>
                    
                    <div style="background:rgba(255,255,255,0.03);border-radius:8px;padding:16px;">
                        <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;">
                            <img src="{{coin_icon_url}}" 
                                 alt="{{coins_label}}" 
                                 style="width:28px;height:28px;">
                            <span style="font-size:24px;font-weight:800;color:#FFD700;">{{xp_item.price_display}}</span>
                        </div>
                        
                        {{#xp_item.show_disabled}}
                            <button disabled style="width:100%;background:#4b5563;border:none;color:#94a3b8;padding:12px;border-radius:8px;font-size:14px;font-weight:600;cursor:not-allowed;">
                                {{not_enough_coins_label}}
                            </button>
                        {{/xp_item.show_disabled}}
                        {{#xp_item.show_buy}}
                            <button class="store-buy-btn store-btn" 
                                data-item-id="{{xp_item.id}}"
                                data-item-name="{{xp_item.short_name}}"
                                data-item-price="{{xp_item.price}}"
                                style="width:100%;background:linear-gradient(135deg,#00D4FF,#06b6d4);border:none;color:#01142E;padding:12px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 12px rgba(0,212,255,0.4);">
                                {{xp_item.buy_label}}
                            </button>
                        {{/xp_item.show_buy}}
                        {{#xp_item.show_activate}}
                            <button class="store-activate-btn" 
                                data-item-id="{{xp_item.id}}"
                                data-item-name="{{xp_item.short_name}}"
                                style="width:100%;background:linear-gradient(135deg,#FFD700,#FFA500);border:none;color:#01142E;padding:12px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 12px rgba(255,215,0,0.4);">
                                {{xp_item.activate_label}} ({{xp_item.inventory_count}} {{available_label}})
                            </button>
                        {{/xp_item.show_activate}}
                    </div>
                </div>
                
                <!-- Mystery Box Card -->
                <div class="store-card" style="background:linear-gradient(135deg,#01142E,#010828);border:2px solid {{#mystery_box.can_afford}}#FFD700{{/mystery_box.can_afford}}{{^mystery_box.can_afford}}rgba(255,255,255,0.1){{/mystery_box.can_afford}};border-radius:12px;padding:24px;transition:all 0.3s ease;">
                    <div style="text-align:center;margin-bottom:20px;">
                        <img src="{{mystery_box.image_url}}" alt="{{mystery_box.label}}" style="width:120px;height:120px;object-fit:contain;margin-bottom:12px;filter:drop-shadow(0 4px 12px rgba(255,215,0,0.3));">
                        <div style="font-size:18px;font-weight:700;color:#e6e9f0;margin-bottom:8px;">{{mystery_box.label}}</div>
                        <div style="font-size:14px;color:#94a3b8;">{{mystery_box.description}}</div>
                    </div>

                    <div style="background:rgba(255,255,255,0.03);border-radius:8px;padding:16px;">
                        <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;">
                            <img src="{{coin_icon_url}}" 
                                 alt="{{coins_label}}" 
                                 style="width:28px;height:28px;">
                            <span style="font-size:24px;font-weight:800;color:#FFD700;">{{mystery_box.price_display}}</span>
                        </div>

                        {{^mystery_box.can_afford}}
                            <button disabled style="width:100%;background:#4b5563;border:none;color:#94a3b8;padding:12px;border-radius:8px;font-size:14px;font-weight:600;cursor:not-allowed;">
                                {{not_enough_coins_label}}
                            </button>
                        {{/mystery_box.can_afford}}
                        {{#mystery_box.can_afford}}
                            <button class="mysterybox-open-btn store-btn" 
                                data-price="{{mystery_box.price}}"
                                style="width:100%;background:linear-gradient(135deg,#FFD700,#FFA500);border:none;color:#01142E;padding:12px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 12px rgba(255,215,0,0.4);">
                                {{mystery_box.open_label}}
                            </button>
                        {{/mystery_box.can_afford}}
                    </div>
                </div>
            </div>
        </div>
        
        <!-- ============================================================================
             PETS SECTION
             ============================================================================ -->
        <div style="margin-bottom:40px;padding-bottom:24px;border-bottom:2px solid rgba(255,255,255,0.1);">
            <h4 style="color:#ec4899;font-size:18px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:8px;">
                <img src="{{pets_icon_url}}" alt="{{pets_label}}" style="width:28px;height:28px;object-fit:contain;">
                {{pets_label}}
            </h4>
            
            {{#no_pets}}
                <div style="background:rgba(236,72,153,0.1);border:2px dashed #ec4899;border-radius:12px;padding:32px;text-align:center;">
                    <div style="font-size:48px;margin-bottom:16px;">{{empty_state_icon}}</div>
                    <div style="font-size:18px;font-weight:700;color:#e6e9f0;margin-bottom:12px;">{{no_pets_title}}</div>
                    <div style="font-size:14px;color:#94a3b8;margin-bottom:16px;">
                        {{no_pets_description}}
                    </div>
                    <div style="font-size:13px;color:#64748b;">
                        {{no_pets_tip}}
                    </div>
                </div>
            {{/no_pets}}
            {{^no_pets}}
                <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;">
                    {{#pets}}
                    <div class="store-card" style="background:linear-gradient(135deg,#01142E,#010828);border:2px solid {{#can_afford}}#ec4899{{/can_afford}}{{^can_afford}}rgba(255,255,255,0.1){{/can_afford}};border-radius:12px;padding:24px;transition:all 0.3s ease;">
                        <div style="text-align:center;margin-bottom:20px;">
                            <div class="store-pet-frame" role="button" tabindex="0" aria-label="{{aria_label}}" style="width:120px;height:120px;margin:0 auto;border-radius:50%;overflow:hidden;border:3px solid {{border_color}};box-shadow:0 6px 18px rgba(0,0,0,0.5);">
                                <img src="{{image_url}}" 
                                     alt="{{name}}" 
                                     style="width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 20px rgba(255,149,0,0.25));">
                            </div>
                            <div style="font-size:18px;font-weight:700;color:#e6e9f0;margin-top:12px;margin-bottom:6px;font-family:'Uncial Antiqua',serif;">
                                {{name}}
                            </div>
                            <div style="font-size:13px;color:#94a3b8;margin-bottom:12px;">{{level_label}} {{level}} {{pet_label}}</div>
                            
                            {{#avatar_badge_url}}
                                <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;">
                                    <div style="font-size:12px;color:#94a3b8;">{{linked_hero_label}}</div>
                                    <div style="width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid #FFD700;box-shadow:0 2px 8px rgba(255,215,0,0.3);">
                                        <img src="{{avatar_badge_url}}" alt="{{hero_label}}" style="width:100%;height:100%;object-fit:cover;">
                                    </div>
                                </div>
                            {{/avatar_badge_url}}
                        </div>
                        
                        <div style="background:rgba(255,255,255,0.03);border-radius:8px;padding:16px;">
                            <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;">
                                <img src="{{coin_stack_url}}" 
                                     alt="{{coins_label}}" 
                                     style="width:32px;height:32px;object-fit:contain;">
                                <span style="font-size:24px;font-weight:800;color:#FFD700;">{{price_display}}</span>
                            </div>
                            
                            {{^can_afford}}
                                <button disabled style="width:100%;background:#4b5563;border:none;color:#94a3b8;padding:12px;border-radius:8px;font-size:14px;font-weight:600;cursor:not-allowed;">
                                    {{not_enough_coins_label}}
                                </button>
                            {{/can_afford}}
                            {{#can_afford}}
                                <button class="pet-buy-btn store-btn" 
                                        data-item-id="{{id}}"
                                        data-item-name="{{name}}"
                                        data-item-price="{{price}}"
                                        style="width:100%;background:linear-gradient(135deg,#ec4899,#db2777);border:none;color:#fff;padding:12px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 12px rgba(236,72,153,0.4);">
                                    {{buy_label}}
                                </button>
                            {{/can_afford}}
                        </div>
                    </div>
                    {{/pets}}
                </div>
            {{/no_pets}}
        </div>
        
        <!-- ============================================================================
             VILLAINS SECTION
             ============================================================================ -->
        <div style="margin-bottom:40px;padding-bottom:24px;border-bottom:2px solid rgba(255,255,255,0.1);">
            <h4 style="color:#06b6d4;font-size:18px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:8px;">
                <img src="{{villain_icon_url}}" alt="{{villains_label}}" style="width:28px;height:28px;object-fit:contain;">
                {{villains_label}}
            </h4>
            
            {{#no_villains}}
                <div style="background:rgba(6,182,212,0.1);border:2px dashed #06b6d4;border-radius:12px;padding:32px;text-align:center;">
                    <div style="font-size:48px;margin-bottom:16px;">{{empty_state_icon}}</div>
                    <div style="font-size:18px;font-weight:700;color:#e6e9f0;margin-bottom:12px;">{{no_villains_title}}</div>
                    <div style="font-size:14px;color:#94a3b8;margin-bottom:16px;">
                        {{no_villains_description}}
                    </div>
                    <div style="font-size:13px;color:#64748b;">
                        {{no_villains_tip}}
                    </div>
                </div>
            {{/no_villains}}
            {{^no_villains}}
                <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;">
                    {{#villains}}
                    <div class="store-card" style="background:linear-gradient(135deg,#01142E,#010828);border:2px solid {{#can_afford}}#06b6d4{{/can_afford}}{{^can_afford}}rgba(255,255,255,0.1){{/can_afford}};border-radius:12px;padding:24px;transition:all 0.3s ease;">
                        <div style="text-align:center;margin-bottom:20px;">
                            <div class="store-villain-frame" role="button" tabindex="0" aria-label="{{aria_label}}" style="width:120px;height:120px;margin:0 auto;border-radius:50%;overflow:hidden;border:3px solid {{border_color}};box-shadow:0 6px 18px rgba(0,0,0,0.5);">
                                <img src="{{image_url}}" 
                                     alt="{{name}}" 
                                     style="width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 20px rgba(0,212,255,0.25));">
                            </div>
                            <div style="font-size:18px;font-weight:700;color:#e6e9f0;margin-top:12px;margin-bottom:6px;font-family:'Uncial Antiqua',serif;">
                                {{name}}
                            </div>
                            <div style="font-size:13px;color:#94a3b8;margin-bottom:12px;">{{level_label}} {{level}} {{villain_label}}</div>
                            
                            {{#avatar_badge_url}}
                                <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;">
                                    <div style="font-size:12px;color:#94a3b8;">{{linked_hero_label}}</div>
                                    <div style="width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid #FFD700;box-shadow:0 2px 8px rgba(255,215,0,0.3);">
                                        <img src="{{avatar_badge_url}}" alt="{{hero_label}}" style="width:100%;height:100%;object-fit:cover;">
                                    </div>
                                </div>
                            {{/avatar_badge_url}}
                            {{#pet_badge_url}}
                                <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;">
                                    <div style="font-size:12px;color:#94a3b8;">{{linked_pet_label}}</div>
                                    <div style="width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid #ec4899;box-shadow:0 2px 8px rgba(236,72,153,0.3);">
                                        <img src="{{pet_badge_url}}" alt="{{pet_label}}" style="width:100%;height:100%;object-fit:cover;">
                                    </div>
                                </div>
                            {{/pet_badge_url}}
                        </div>
                        
                        <div style="background:rgba(255,255,255,0.03);border-radius:8px;padding:16px;">
                            <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;">
                                <img src="{{coin_stack_url}}" 
                                     alt="{{coins_label}}" 
                                     style="width:32px;height:32px;object-fit:contain;">
                                <span style="font-size:24px;font-weight:800;color:#FFD700;">{{price_display}}</span>
                            </div>
                            
                            {{^can_afford}}
                                <button disabled style="width:100%;background:#4b5563;border:none;color:#94a3b8;padding:12px;border-radius:8px;font-size:14px;font-weight:600;cursor:not-allowed;">
                                    {{not_enough_coins_label}}
                                </button>
                            {{/can_afford}}
                            {{#can_afford}}
                                <button class="villain-buy-btn store-btn" 
                                        data-item-id="{{id}}"
                                        data-item-name="{{name}}"
                                        data-item-price="{{price}}"
                                        data-villain-icon="{{icon_name}}"
                                        style="width:100%;background:linear-gradient(135deg,#06b6d4,#0891b2);border:none;color:#fff;padding:12px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 12px rgba(6,182,212,0.4);">
                                    {{buy_label}}
                                </button>
                            {{/can_afford}}
                        </div>
                    </div>
                    {{/villains}}
                </div>
            {{/no_villains}}
        </div>
        

    </div>
</section>

<!-- Mystery Box Animation Modal -->
<div id="mysteryBoxModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);z-index:10000;align-items:center;justify-content:center;">
    <div style="background:linear-gradient(135deg,#01142E,#010828);border:3px solid #FFD700;border-radius:20px;padding:24px;max-width:500px;width:90%;box-shadow:0 20px 60px rgba(255,215,0,0.3);">
        <!-- 4 Mystery Boxes Container -->
        <div id="boxesContainer" style="display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:40px;">
            <div class="mystery-box" data-box="1" style="cursor:pointer;opacity:1;transition:all 0.3s;transform:scale(1);">
                <div style="height:120px;display:flex;align-items:center;justify-content:center;border-radius:15px;">
                    <img src="{{mystery_box.image_url}}" alt="{{mystery_box.label}}" style="width:110px;height:110px;object-fit:contain;">
                </div>
                <div style="text-align:center;margin-top:10px;color:#FFD700;font-weight:700;font-size:14px;">{{box_label_1}}</div>
            </div>
            <div class="mystery-box" data-box="2" style="cursor:pointer;opacity:1;transition:all 0.3s;transform:scale(1);">
                <div style="height:120px;display:flex;align-items:center;justify-content:center;border-radius:15px;">
                    <img src="{{mystery_box.image_url}}" alt="{{mystery_box.label}}" style="width:110px;height:110px;object-fit:contain;">
                </div>
                <div style="text-align:center;margin-top:10px;color:#FFD700;font-weight:700;font-size:14px;">{{box_label_2}}</div>
            </div>
            <div class="mystery-box" data-box="3" style="cursor:pointer;opacity:1;transition:all 0.3s;transform:scale(1);">
                <div style="height:120px;display:flex;align-items:center;justify-content:center;border-radius:15px;">
                    <img src="{{mystery_box.image_url}}" alt="{{mystery_box.label}}" style="width:110px;height:110px;object-fit:contain;">
                </div>
                <div style="text-align:center;margin-top:10px;color:#FFD700;font-weight:700;font-size:14px;">{{box_label_3}}</div>
            </div>
            <div class="mystery-box" data-box="4" style="cursor:pointer;opacity:1;transition:all 0.3s;transform:scale(1);">
                <div style="height:120px;display:flex;align-items:center;justify-content:center;border-radius:15px;">
                    <img src="{{mystery_box.image_url}}" alt="{{mystery_box.label}}" style="width:110px;height:110px;object-fit:contain;">
                </div>
                <div style="text-align:center;margin-top:10px;color:#FFD700;font-weight:700;font-size:14px;">{{box_label_4}}</div>
            </div>
        </div>
        
        <!-- Result Display -->
        <div id="resultDisplay" style="display:none;text-align:center;">
            <div style="margin-bottom:16px;" id="resultIcon"></div>
            <div style="font-size:18px;color:#e6e9f0;font-weight:700;margin-bottom:12px;opacity:0;transition:opacity 0.5s ease;" id="resultMessage"></div>
            <button id="closeModalBtn" style="background:linear-gradient(135deg,#FFD700,#FFA500);border:none;color:#01142E;padding:10px 24px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;margin-top:12px;opacity:0;transition:opacity 0.5s ease;">{{continue_label}}</button>
        </div>
    </div>
</div>

<style>
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-slide-in {
    animation: slideInUp 0.8s ease-out forwards;
}

.animate-bounce-in {
    animation: bounceIn 0.8s ease-out forwards;
}
.aa-panel:hover {
    box-shadow: 0 8px 24px rgba(6,182,212,0.2);
}

@keyframes boxSpin {
    0% { transform: rotateY(0deg) scale(1); }
    50% { transform: rotateY(180deg) scale(1.05); }
    100% { transform: rotateY(360deg) scale(1); }
}

@keyframes boxHop {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.mystery-box {
    animation: boxHop 0.5s ease-in-out infinite !important;
}

.mystery-box.spinning {
    animation: boxSpin 0.6s ease-in-out infinite !important;
}

.mystery-box.selected {
    animation: none !important;
    transform: scale(1.1) !important;
}

.store-pet-frame:hover,
.store-villain-frame:hover {
    transform: scale(1.06);
}

.store-pet-frame img,
.store-villain-frame img {
    transition: transform 0.25s ease, filter 0.25s ease;
}

.store-pet-frame:hover img,
.store-villain-frame:hover img {
    transform: scale(1.03);
    filter: none;
}

/* Modern unified store styles */
.store-card {
    background: linear-gradient(180deg, rgba(6,10,20,0.6), rgba(3,6,12,0.6));
    border-radius: 14px;
    padding: 22px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    backdrop-filter: blur(6px);
}
.store-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(2,6,23,0.6); }

.store-btn {
    display: inline-block;
    width: 100%;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.store-btn:active { transform: translateY(1px); }
.store-btn[disabled] { opacity: 0.6; cursor: not-allowed !important; }

.store-title { font-family: 'Uncial Antiqua', serif; font-size: 18px; font-weight: 700; color: #e6e9f0; }
.store-sub { color: #94a3b8; font-size: 13px; }

.store-price { display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px }
.store-price .amount { font-size:22px;font-weight:800;color:#FFD700 }

.corner-badge { position:absolute;width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,0.06);background:#1a1f2e;box-shadow:0 2px 8px rgba(0,0,0,0.5);z-index:12 }
.corner-badge img { width:100%;height:100%;object-fit:cover }

@media (max-width:720px) { .store-price .amount { font-size:18px } .store-card { padding:16px } }
</style>

<script src="{{avatar_modals_js_url}}"></script>

<script>
var mysteryOpeningLabel = '{{mystery_opening_label}}';
var mysteryErrorCouldNotOpen = '{{mystery_error_could_not_open}}';
var mysteryErrorProcessing = '{{mystery_error_processing}}';
var mysteryErrorNetwork = '{{mystery_error_network}}';
var balanceLabel = '{{balance_label}}';
var coinsLabel = '{{coins_label}}';
var tokensLabel = '{{tokens_label}}';

(function() {
    'use strict';
    
    // XP Multiplier Timer (Store Section)
    var timerEl = document.getElementById('xpMultiplierTimer_store');
    if (timerEl) {
        function updateTimer() {
            var expiresAt = parseInt(timerEl.getAttribute('data-expires'));
            var now = Math.floor(Date.now() / 1000);
            var remaining = expiresAt - now;
            
            if (remaining <= 0) {
                timerEl.textContent = '{{expired_label}}';
                return;
            }
            
            var hours = Math.floor(remaining / 3600);
            var minutes = Math.floor((remaining % 3600) / 60);
            var seconds = remaining % 60;
            
            timerEl.textContent = hours + 'h ' + minutes + 'm ' + seconds + 's';
        }
        
        updateTimer();
        setInterval(updateTimer, 1000);
    }
    
    // Store Purchase Handler (exclude pets and villains - they have their own handlers)
    var storeBuyBtns = document.querySelectorAll('.store-buy-btn:not(.pet-buy-btn):not(.villain-buy-btn)');
    storeBuyBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var itemId = btn.getAttribute('data-item-id');
            var itemName = btn.getAttribute('data-item-name');
            var itemPrice = btn.getAttribute('data-item-price');
            
            if (!confirm('{{purchase_confirm_prefix}}' + itemName + '{{purchase_confirm_mid}}' + itemPrice + '{{purchase_confirm_suffix}}')) {
                return;
            }
            
            btn.disabled = true;
            btn.textContent = '{{processing_label}}';
            
            var xhr = new XMLHttpRequest();
            xhr.open('POST', M.cfg.wwwroot + '/local/ascend_rewards/store_purchase.php');
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function() {
                if (xhr.status === 200) {
                    try {
                        var result = JSON.parse(xhr.responseText);
                        if (result.success) {
                            alert('{{purchase_success_label}}\n\n{{remaining_balance_label}} ' + result.remaining_coins.toLocaleString() + ' {{coins_label}}');
                            location.reload();
                        } else {
                            alert('{{error_prefix}}' + (result.error || '{{purchase_error_label}}'));
                            btn.disabled = false;
                            btn.textContent = '{{purchase_button_prefix}}' + itemPrice + ' {{coins_label}}';
                        }
                    } catch(e) {
                        alert('{{purchase_processing_error_label}}');
                        btn.disabled = false;
                        btn.textContent = '{{purchase_button_prefix}}' + itemPrice + ' {{coins_label}}';
                    }
                }
            };
            xhr.send('item_id=' + encodeURIComponent(itemId));
        });
    });
    
    // Store Activate Button Handler
    var activateBtns = document.querySelectorAll('.store-activate-btn');
    activateBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var itemId = parseInt(btn.getAttribute('data-item-id'));
            var itemName = btn.getAttribute('data-item-name');
            
            btn.disabled = true;
            btn.textContent = '{{processing_label}}';
            
            var xhr = new XMLHttpRequest();
            xhr.open('POST', M.cfg.wwwroot + '/local/ascend_rewards/store_activate.php');
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function() {
                if (xhr.status === 200) {
                    try {
                        var result = JSON.parse(xhr.responseText);
                        if (result.success) {
                            alert(result.message);
                            location.reload();
                        } else {
                            alert('{{error_prefix}}' + (result.error || '{{activation_error_label}}'));
                            btn.disabled = false;
                            btn.textContent = '{{activate_label}}';
                        }
                    } catch(e) {
                        alert('{{activation_processing_error_label}}');
                        btn.disabled = false;
                        btn.textContent = '{{activate_label}}';
                    }
                }
            };
            xhr.send('item_id=' + encodeURIComponent(itemId));
        });
    });
    
    // Pet Purchase Handler - Use same modal as Ascend Universe
    var petBuyBtns = document.querySelectorAll('.pet-buy-btn');
    petBuyBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var petId = parseInt(btn.getAttribute('data-item-id'));
            var petName = btn.getAttribute('data-item-name');
            var petPrice = parseInt(btn.getAttribute('data-item-price'));
            
            // Map pet IDs to video files (same as Ascend Universe)
            var petVideoMap = {
                100: 'lynx.mp4', 101: 'tortoise.mp4', 102: 'hamster.mp4',
                103: 'falcon.mp4', 104: 'gryphon.mp4', 105: 'boar.mp4',
                106: 'viper.mp4', 107: 'swan.mp4', 108: 'mischiefcap.mp4',
                109: 'otter.mp4', 110: 'kinkajou.mp4', 111: 'seahorse.mp4',
                112: 'dragonet.mp4', 113: 'mastiff.mp4', 114: 'raven.mp4',
                115: 'tiger.mp4', 116: 'wolf.mp4', 117: 'polar_bear.mp4'
            };
            
            var petVideo = petVideoMap[petId] || 'lynx.mp4';
            
            // Call the same function as Ascend Universe (requires avatar_modals.js)
            if (typeof showPetUnlockModal === 'function') {
                showPetUnlockModal(petId, petName, petPrice, petVideo, {{tokens_available}}, {{coin_balance}});
            } else {
                alert('{{modal_not_loaded_label}}');
            }
        });
    });

    // Make pet frames keyboard-accessible: Enter/Space triggers nearest pet buy button
    document.querySelectorAll('.store-pet-frame').forEach(function(frame) {
        frame.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                var btn = frame.closest('.store-card').querySelector('.pet-buy-btn');
                if (btn && !btn.disabled) btn.click();
            }
        });
        frame.addEventListener('click', function() {
            var btn = frame.closest('.store-card').querySelector('.pet-buy-btn');
            if (btn && !btn.disabled) btn.click();
        });
    });

    // Villain Purchase Handler - Use same modal as Ascend Universe
    var villainBuyBtns = document.querySelectorAll('.villain-buy-btn');
    villainBuyBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var villainId = parseInt(btn.getAttribute('data-item-id'));
            var villainName = btn.getAttribute('data-item-name');
            var villainPrice = parseInt(btn.getAttribute('data-item-price'));
            var villainIconName = btn.getAttribute('data-villain-icon');
            
            // Map villain icon filenames to video files
            var villainVideoMap = {
                'elf_dryad': 'elf_dryad.mp4',
                'ent_blightmind': 'ent_blightmind.mp4',
                'jester_mourner': 'jester_mourner.mp4',
                'magician_spellbreaker': 'magician_spellbreaker.mp4',
                'nomad_dune': 'nomad_dune.mp4',
                'philosopher_mirror': 'philosopher_mirror.mp4',
                'mermaid_duchess': 'mermaid_duchess.mp4',
                'warrior_warlord': 'warrior_warlord.mp4',
                'sorceress_stormveil': 'sorceress_stormveil.mp4',
                'gatekeeper_wraith': 'gatekeeper_wraith.mp4',
                'viking_betrayer': 'viking_betrayer.mp4',
                'pirate_barron': 'pirate_barron.mp4',
                'amazon_huntsmistress': 'amazon_huntsmistress.mp4',
                'imp_mole': 'imp_mole.mp4',
                'wizard_pale_scholar': 'wizard_pale_scholar.mp4',
                'maori_shaman': 'maori_shaman.mp4',
                'zulu_witchdoctor': 'zulu_witchdoctor.mp4',
                'sentinel_void': 'sentinel_void.mp4',
                'kapu_judge': 'kapu_judge.mp4'
            };
            
            var villainVideo = villainVideoMap[villainIconName.replace('.png','')] || 'elf_dryad.mp4';
            
            // Call the same function as Ascend Universe (requires avatar_modals.js)
            if (typeof showVillainUnlockModal === 'function') {
                showVillainUnlockModal(villainId, villainName, villainPrice, villainIconName, villainVideo, {{tokens_available}}, {{coin_balance}});
            } else {
                alert('{{modal_not_loaded_label}}');
            }
        });
    });

    // Make villain frames keyboard-accessible: Enter/Space triggers nearest villain buy button
    document.querySelectorAll('.store-villain-frame').forEach(function(frame) {
        frame.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                var btn = frame.closest('.store-card').querySelector('.villain-buy-btn');
                if (btn && !btn.disabled) btn.click();
            }
        });
        frame.addEventListener('click', function() {
            var btn = frame.closest('.store-card').querySelector('.villain-buy-btn');
            if (btn && !btn.disabled) btn.click();
        });
    });
    
    // Mystery Box Handler
    var mysteryBtns = document.querySelectorAll('.mysterybox-open-btn');
    var mysteryModal = document.getElementById('mysteryBoxModal');
    var boxesContainer = document.getElementById('boxesContainer');
    var resultDisplay = document.getElementById('resultDisplay');
    var resultMessage = document.getElementById('resultMessage');
    var resultIcon = document.getElementById('resultIcon');
    var closeModalBtn = document.getElementById('closeModalBtn');
    
    if (mysteryBtns.length) {
        mysteryBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                var price = parseInt(btn.getAttribute('data-price') || '50');
                
                // Show modal directly to result (skip boxes)
                if (mysteryModal) {
                    mysteryModal.style.display = 'flex';
                    if (boxesContainer) boxesContainer.style.display = 'none';
                    if (resultDisplay) resultDisplay.style.display = 'block';
                }
                
                btn.disabled = true;
                var originalText = btn.textContent;
                btn.textContent = mysteryOpeningLabel;
                
                // Fetch mystery box result immediately
                var xhr = new XMLHttpRequest();
                xhr.open('POST', M.cfg.wwwroot + '/local/ascend_rewards/mysterybox.php');
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onload = function() {
                    try {
                        var result = JSON.parse(xhr.responseText);
                        if (result.success) {
                            // Map reward type to video paths with cache busting
                            var cacheBust = '?v=' + Date.now();
                            var videoCoins = M.cfg.wwwroot + '/local/ascend_rewards/pix/coins.mp4' + cacheBust;
                            var videoTokens = M.cfg.wwwroot + '/local/ascend_rewards/pix/token.mp4' + cacheBust;
                            var videoHero = M.cfg.wwwroot + '/local/ascend_rewards/pix/hero.mp4' + cacheBust;
                            var videoNoReward = M.cfg.wwwroot + '/local/ascend_rewards/pix/no_reward.mp4' + cacheBust;

                            // Image URLs
                            var imgStar = M.cfg.wwwroot + '/local/ascend_rewards/pix/start.png';
                            var imgCoins = M.cfg.wwwroot + '/local/ascend_rewards/pix/ascend_assets_stack.png';

                            var videos = {
                                'coins': videoCoins,
                                'coins_duplicate': videoCoins,
                                'tokens': videoTokens,
                                'avatar_new': videoHero,
                                'avatar_duplicate': videoHero,
                                'avatar_locked_level': videoHero,
                                'nothing': videoNoReward
                            };

                            var videoUrl = videos[result.reward_type] || videoNoReward;
                            
                            // Build result HTML with video (no loop, play once)
                            var resultHTML = '<video autoplay playsinline preload="auto" crossorigin="anonymous" style="width:280px;height:280px;object-fit:contain;border:2px solid #FFD700;border-radius:16px;box-shadow:inset 0 0 20px rgba(255,215,0,0.2);" id="rewardVideo"><source src="' + videoUrl + '" type="video/mp4"></video>';

                            resultIcon.innerHTML = resultHTML;
                            
                            // Build message with images based on reward type
                            var messageHTML = '';
                            var balanceHTML = '';
                            
                            if (result.reward_type === 'tokens') {
                                messageHTML = '<div style="margin-bottom:16px;"><img src="' + imgStar + '" style="width:75px;height:75px;object-fit:contain;"></div>' +
                                             '<div>' + result.message + '</div>';
                                balanceHTML = '<div style="margin-top:12px;font-size:16px;color:#94a3b8;">New balance: <img src="' + imgStar + '" style="width:24px;height:24px;vertical-align:middle;margin:0 4px;">' + result.total_tokens + ' ' + tokensLabel + '</div>';
                            } else if (result.reward_type === 'coins' || result.reward_type === 'coins_duplicate') {
                                messageHTML = '<div style="margin-bottom:16px;"><img src="' + imgCoins + '" style="width:75px;height:36px;object-fit:contain;"></div>' +
                                             '<div>' + result.message + '</div>';
                                balanceHTML = '<div style="margin-top:12px;font-size:16px;color:#94a3b8;">New balance: <img src="' + imgCoins + '" style="width:32px;height:15px;vertical-align:middle;margin:0 4px;object-fit:contain;">' + result.new_balance.toLocaleString() + ' ' + coinsLabel + '</div>';
                            } else if (result.reward_type === 'avatar_duplicate' || result.reward_type === 'avatar_locked_level') {
                                messageHTML = '<div>' + result.message + '</div>';
                                balanceHTML = '<div style="margin-top:12px;font-size:16px;color:#94a3b8;">New balance: <img src="' + imgCoins + '" style="width:32px;height:15px;vertical-align:middle;margin:0 4px;object-fit:contain;">' + result.new_balance.toLocaleString() + ' ' + coinsLabel + '</div>';
                            } else if (result.reward_type === 'avatar_new') {
                                messageHTML = '<div>' + result.message + '</div>';
                            } else {
                                messageHTML = result.message;
                                balanceHTML = '<div style="margin-top:12px;font-size:16px;color:#94a3b8;">' + balanceLabel + ' <img src="' + imgCoins + '" style="width:32px;height:15px;vertical-align:middle;margin:0 4px;object-fit:contain;">' + result.new_balance.toLocaleString() + ' ' + coinsLabel + '</div>';
                            }
                            
                            resultMessage.innerHTML = messageHTML + balanceHTML;
                            
                            // For avatar rewards, show the actual avatar image below the video
                            if ((result.reward_type === 'avatar_new' || result.reward_type === 'avatar_duplicate') && result.reward_data && result.reward_data.avatar_filename) {
                                var avatarUrl = M.cfg.wwwroot + '/local/ascend_rewards/pix/Avatars/circular avatars/' + result.reward_data.avatar_filename;
                                resultHTML += '<div style="margin-top:16px;" id="avatarReward"><img src="' + avatarUrl + '" alt="Avatar" style="width:80px;height:80px;object-fit:contain;border:2px solid #06b6d4;border-radius:50%;box-shadow:0 4px 16px rgba(6,182,212,0.5);opacity:0;"></div>';
                                resultIcon.innerHTML = resultHTML;
                            }
                            
                            // Wait for video to end before showing message
                            var video = document.getElementById('rewardVideo');
                            if (video) {
                                // Handle video errors
                                video.addEventListener('error', function(e) {
                                    console.error('Video failed to load, showing message immediately');
                                    resultMessage.classList.add('animate-slide-in');
                                    resultMessage.style.opacity = '1';
                                    closeModalBtn.style.opacity = '1';
                                    
                                    var avatarReward = document.getElementById('avatarReward');
                                    if (avatarReward) {
                                        var avatarImg = avatarReward.querySelector('img');
                                        if (avatarImg) {
                                            avatarImg.classList.add('animate-bounce-in');
                                            avatarImg.style.opacity = '1';
                                        }
                                    }
                                });
                                
                                video.addEventListener('ended', function() {
                                    resultMessage.classList.add('animate-slide-in');
                                    resultMessage.style.opacity = '1';
                                    
                                    setTimeout(function() {
                                        closeModalBtn.style.opacity = '1';
                                    }, 300);
                                    
                                    var avatarReward = document.getElementById('avatarReward');
                                    if (avatarReward) {
                                        var avatarImg = avatarReward.querySelector('img');
                                        if (avatarImg) {
                                            avatarImg.classList.add('animate-bounce-in');
                                            avatarImg.style.opacity = '1';
                                        }
                                    }
                                });
                                
                                // Fallback: Show message after 5 seconds if video hasn't ended
                                setTimeout(function() {
                                    if (resultMessage.style.opacity === '0' || resultMessage.style.opacity === '') {
                                        resultMessage.classList.add('animate-slide-in');
                                        resultMessage.style.opacity = '1';
                                        closeModalBtn.style.opacity = '1';
                                        
                                        var avatarReward = document.getElementById('avatarReward');
                                        if (avatarReward) {
                                            var avatarImg = avatarReward.querySelector('img');
                                            if (avatarImg && avatarImg.style.opacity === '0') {
                                                avatarImg.classList.add('animate-bounce-in');
                                                avatarImg.style.opacity = '1';
                                            }
                                        }
                                    }
                                }, 5000);
                            }
                            
                            btn.disabled = false;
                            btn.textContent = originalText;
                        } else {
                            if (mysteryModal) mysteryModal.style.display = 'none';
                            alert('❌ ' + (result.message || mysteryErrorCouldNotOpen));
                            btn.disabled = false;
                            btn.textContent = originalText;
                        }
                    } catch (e) {
                        console.error('Error opening mystery box:', xhr.responseText, e);
                        if (boxesContainer) boxesContainer.style.display = 'none';
                        if (resultDisplay) resultDisplay.style.display = 'block';
                        resultIcon.innerHTML = '<video autoplay loop playsinline style="width:280px;height:280px;object-fit:contain;border:3px solid #FFD700;border-radius:12px;"><source src="' + M.cfg.wwwroot + '/local/ascend_rewards/pix/no_reward.mp4" type="video/mp4"></video>';
                        resultMessage.textContent = mysteryErrorProcessing;
                        btn.disabled = false;
                        btn.textContent = originalText;
                    }
                };
                xhr.onerror = function() {
                    console.error('Network error opening mystery box');
                    if (boxesContainer) boxesContainer.style.display = 'none';
                    if (resultDisplay) resultDisplay.style.display = 'block';
                    resultIcon.innerHTML = '<img src="' + M.cfg.wwwroot + '/local/ascend_rewards/pix/mystery_box.png" style="width:96px;height:96px;object-fit:contain;">';
                    resultMessage.textContent = mysteryErrorNetwork;
                    btn.disabled = false;
                    btn.textContent = originalText;
                };
                xhr.send('action=open');
            });
        });
    }

    // Close button handler
    if (closeModalBtn) {
        closeModalBtn.addEventListener('click', function() {
            if (mysteryModal) {
                mysteryModal.style.display = 'none';
                window.location.reload();
            }
        });
    }
})();
</script>
