<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="assets/icons/logo.png">
<title>Fortnite Sprite Locker</title>

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" defer></script>

<style>
:root{
  --bg:#050814; --panel:#0b1220; --muted:#9aa6b2; --primary:#2fb6ff; --accent:#7b6bff;
  --gold:#ffd166; --complete:#16a34a; --glass:rgba(255,255,255,0.03);
  --card-radius:12px; --shadow:0 18px 40px rgba(2,6,23,0.6); --ease:cubic-bezier(.2,.9,.3,1);
  --font-heading:'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --font-body:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --btn-text-dark:#04121a; --btn-text-light:#f7fbff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font-body); color:#e6f0f6;
  background: #07101a;
  background-image: url("assets/ui/background.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-y:scroll;
}

.site-logo{height:48px;width:auto;display:block;user-select:none;pointer-events:none;transition:.18s ease;}
.app {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  padding: 18px;
  min-height: 100vh;
  height: 100vh;              
  max-height: 100vh;          
  position: relative;
  z-index: 1;
}
.header{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin-bottom:6px;z-index:2;background:rgba(0,0,0,0.8);border-radius:12px;padding:12px;flex-wrap:wrap;}
.banner{flex:1;display:flex;align-items:center;gap:12px;padding:18px;border-radius:14px;background:linear-gradient(90deg, rgba(47,182,255,0.08), rgba(123,107,255,0.06));border:1px solid rgba(255,255,255,0.03);position:relative;overflow:hidden;box-shadow:0 18px 60px rgba(47,182,255,0.04);flex-wrap:wrap;  flex: 0 0 100%;       /* forza il banner ad occupare tutta la larghezza */
  order: 0;             /* lo mette prima della filter-bar */}
.banner .title{font-family:var(--font-heading);font-weight:800;font-size:16px}
.header .controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;  order: 2;             /* i controlli vanno dopo la filter-bar */}
.last-save-chip{margin-left:12px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:8px;}
.asset-base-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.asset-base-wrapper.hidden{display:none;}
.sidebar {
  background: rgba(0,0,0,0.45);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  z-index: 2;
  height: 100%;
  min-height: 0;
}
/* HEADER MODERNO */
.header {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 12px;
}

.banner {
  display: flex;
  align-items: center;
  justify-content: center;  /* CENTRA TUTTO */
  gap: 16px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(47, 182, 255, 0.06), rgba(123, 107, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  flex: 0 0 100%;
  order: 0;
  flex-wrap: wrap;
}

.banner .brand img {
  height: 44px;
  width: auto;
  transition: transform 0.3s ease;
}

.banner .brand img:hover {
  transform: scale(1.05) rotate(-2deg);
}

.banner .title {
  text-align: center;
  font-family: var(--font-heading);
}

.banner .title div:first-child {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

.banner .title div:last-child {
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(90deg, var(--primary), var(--accent), #FF6B3D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* FILTER BAR - CENTRATA */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  flex: 0 0 100%;
  order: 1;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  flex-wrap: wrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.filter-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.filter-select {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(4px);
  padding: 8px 14px;
  border-radius: 8px;
  color: #e6f0f6;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 140px;
}

.filter-select:hover {
  background: rgba(47, 182, 255, 0.12) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 20px rgba(47, 182, 255, 0.15);
  transform: translateY(-1px);
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 24px rgba(47, 182, 255, 0.15);
}

/* TOGGLE SWITCH - PICCOLI MIGLIORAMENTI */
.toggle-switch {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  padding: 4px 12px 4px 6px;
}

.toggle-switch:hover {
  border-color: var(--primary);
  box-shadow: 0 0 20px rgba(47, 182, 255, 0.1);
}

/* CONTROLS - CENTRATI */
.header .controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 100%;
  order: 2;
  margin-top: 4px;
  flex-wrap: wrap;
}

.btn-adaptive {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.25s cubic-bezier(.2, .9, .3, 1);
}

.btn-adaptive.ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
}

.btn-adaptive.ghost:hover {
  border-color: rgba(47, 182, 255, 0.3);
  background: rgba(47, 182, 255, 0.08);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(47, 182, 255, 0.1);
}

/* ===== PULSANTI GHOST CON COLORI DEDICATI ===== */

/* 1. STATS (viola) */
#btn-stats.btn-adaptive.ghost {
  border-color: rgba(123, 107, 255, 0.5);
  color: #b8aaff;
  background: rgba(123, 107, 255, 0.05);
  transition: all 0.25s cubic-bezier(.2, .9, .3, 1);
}

#btn-stats.btn-adaptive.ghost:hover {
  border-color: #7b6bff;
  background: rgba(123, 107, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 0 30px rgba(123, 107, 255, 0.4), inset 0 0 20px rgba(123, 107, 255, 0.1);
  transform: translateY(-3px) scale(1.05);
}

/* 2. EXPORT (oro) */
#btn-menu.btn-adaptive.ghost {
  border-color: rgba(255, 209, 102, 0.5);
  color: #ffd966;
  background: rgba(255, 209, 102, 0.05);
}

#btn-menu.btn-adaptive.ghost:hover {
  border-color: #ffd166;
  background: rgba(255, 209, 102, 0.2);
  color: #ffffff;
  box-shadow: 0 0 30px rgba(255, 209, 102, 0.4), inset 0 0 20px rgba(255, 209, 102, 0.1);
  transform: translateY(-3px) scale(1.05);
}

/* 3. SFX / MUSICA (rosa/rosso) */
#music-toggle.btn-adaptive.ghost {
  border-color: rgba(255, 122, 182, 0.5);
  color: #ff7ab6;
  background: rgba(255, 122, 182, 0.05);
}

#music-toggle.btn-adaptive.ghost:hover {
  border-color: #ff7ab6;
  background: rgba(255, 122, 182, 0.2);
  color: #ffffff;
  box-shadow: 0 0 30px rgba(255, 122, 182, 0.4), inset 0 0 20px rgba(255, 122, 182, 0.1);
  transform: translateY(-3px) scale(1.05);
}

/* 4. SCORCIATOIE (pulsante ⚡) – turchese/azzurro acceso */
#btn-shortcuts-mobile.btn-adaptive.ghost {
  border-color: rgba(0, 212, 255, 0.5);
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.05);
}

#btn-shortcuts-mobile.btn-adaptive.ghost:hover {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.4), inset 0 0 20px rgba(0, 212, 255, 0.1);
  transform: translateY(-3px) scale(1.05);
}

/* ===== LOBBY CODES S4 (ciano neon) ===== */
#btn-codes-s4.btn-adaptive.ghost {
  border-color: #00d4ff;
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.06);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.1);
  transition: all 0.3s ease;
}

#btn-codes-s4.btn-adaptive.ghost:hover {
  border-color: #00e5ff;
  background: rgba(0, 212, 255, 0.15);
  box-shadow: 0 0 40px rgba(0, 212, 255, 0.4), inset 0 0 20px rgba(0, 212, 255, 0.1);
   color: #ffffff !important;
  transform: translateY(-3px) scale(1.05);
}

/* ===== SHORTCUTS (⚡) – giallo/arancione "energia" ===== */
#btn-shortcuts-mobile.btn-adaptive.ghost {
  border-color: #fbbf24;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.06);
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.1);
  transition: all 0.3s ease;
}

#btn-shortcuts-mobile.btn-adaptive.ghost:hover {
  border-color: #f59e0b;
  background: rgba(251, 191, 36, 0.15);
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.4), inset 0 0 20px rgba(251, 191, 36, 0.1);
  color: #fff;
  transform: translateY(-3px) scale(1.05);
}

#btn-shortcuts-mobile.btn-adaptive.ghost:hover::before {
  opacity: 1;
  transform: translateX(-20px) scale(1);
}

/* Pulsante Settings nel dropdown - colore grigio/argento con glow */
#btn-settings.btn-adaptive.ghost {
    border-color: rgba(200, 200, 220, 0.4);
    color: #c8c8dc;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 10px rgba(200, 200, 220, 0.05);
    transition: all 0.3s ease;
}

#btn-settings.btn-adaptive.ghost:hover {
    border-color: #c8c8dc;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    box-shadow: 0 0 30px rgba(200, 200, 220, 0.3), inset 0 0 20px rgba(200, 200, 220, 0.05);
    transform: translateY(-3px) scale(1.04);
    padding-left: 16px;
}

/* 6. PREV / NEXT – azzurro (già presenti, li miglioro) */
#prev.btn-adaptive.ghost,
#next.btn-adaptive.ghost {
  border-color: rgba(47, 182, 255, 0.4);
  color: #8fcbff;
  background: rgba(47, 182, 255, 0.05);
}

#prev.btn-adaptive.ghost:hover,
#next.btn-adaptive.ghost:hover {
  border-color: #2fb6ff;
  background: rgba(47, 182, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 0 30px rgba(47, 182, 255, 0.4), inset 0 0 20px rgba(47, 182, 255, 0.1);
  transform: translateY(-3px) scale(1.05);
}

/* 7. CLEAR – pulsante pericolo (rosso) */
#clear-variants {
  background: rgba(230, 57, 70, 0.15);
  border: 2px solid rgba(230, 57, 70, 0.4);
  color: #ff6b7a;
}

#clear-variants:hover {
  background: rgba(230, 57, 70, 0.3);
  border-color: #e63946;
  color: #ffffff;
  box-shadow: 0 0 30px rgba(230, 57, 70, 0.4);
  transform: translateY(-3px) scale(1.05);
}

/* ASSET BASE WRAPPER - MIGLIORATO */
.asset-base-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

#asset-base-input {
  background: transparent;
  border: none;
  padding: 6px 8px;
  color: #e6f0f6;
  font-size: 12px;
  width: 200px;
  min-width: 120px;
}

#asset-base-input::placeholder {
  color: var(--muted);
  opacity: 0.5;
}

.sidebar .search{display:flex;gap:8px;align-items:center;padding:8px;border-radius:8px;background:rgba(255,255,255,0.02)}
.sidebar .search input{background:transparent;border:none;color:inherit;outline:none;width:100%}
.sidebar .list {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  flex: 1;
  min-height: 0;
}
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

#search-clear {
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  transition: opacity .2s;
  padding: 4px;
}

#search-clear:hover {
  opacity: 1 !important;
}
.sidebar-crown{
    position:absolute;
    top:-2px;
	left: 57%;
	transform: translateX(-50%);
	width: 18px;
	height: 18px;
	z-index: 20;
	pointer-events: none;
}
.name{display:flex;align-items:center;gap:6px;}
.sprite-item{
  display:flex;gap:10px;align-items:center;padding:8px;border-radius:8px;cursor:pointer;transition:background .12s, box-shadow .2s;
  position:relative;background:linear-gradient(90deg, rgba(47,182,255,0.12), rgba(123,107,255,0.06)); margin-bottom:6px;
}
.sprite-item:hover{transform:translateX(5px);background:rgba(255,255,255,.045);box-shadow:0 6px 16px rgba(0,0,0,.25);}
/* Sfondo di base per active */
.sprite-item.active {
  background: linear-gradient(90deg, rgba(47,182,255,0.12), rgba(123,107,255,0.06)) !important;
  border-color: rgba(47,182,255,0.06);
}

/* Glow active con il colore della rarità */
.sprite-item.active.rarity-rare {
  box-shadow: 0 0 20px rgba(79, 195, 255, 0.3), inset 0 0 0 2px #4FC3FF;
}
.sprite-item.active.rarity-epic {
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), inset 0 0 0 2px #A855F7;
}
.sprite-item.active.rarity-legendary {
  box-shadow: 0 0 20px rgba(255, 107, 61, 0.3), inset 0 0 0 2px #FF6B3D;
}
.sprite-item.active.rarity-mythic {
  box-shadow: 0 0 20px rgba(255, 211, 77, 0.3), inset 0 0 0 2px #FFD34D;
}

/* Bordo laterale rarità */
.sprite-item.rarity-rare { border-left: 4px solid #4FC3FF; padding-left: 12px; }
.sprite-item.rarity-epic { border-left: 4px solid #A855F7; padding-left: 12px; }
.sprite-item.rarity-legendary { border-left: 4px solid #FF6B3D; padding-left: 12px; }
.sprite-item.rarity-mythic { border-left: 4px solid #FFD34D; padding-left: 12px; }

/* Sfondo thumb in base alla rarità (stato normale) */
.sprite-item.rarity-rare .thumb { background-color: rgba(79, 195, 255, 0.12) !important; }
.sprite-item.rarity-epic .thumb { background-color: rgba(168, 85, 247, 0.12) !important; }
.sprite-item.rarity-legendary .thumb { background-color: rgba(255, 107, 61, 0.12) !important; }
.sprite-item.rarity-mythic .thumb { background-color: rgba(255, 211, 77, 0.12) !important; }

/* Hover più intenso */
.sprite-item.rarity-rare:hover .thumb { background-color: rgba(79, 195, 255, 0.25) !important; }
.sprite-item.rarity-epic:hover .thumb { background-color: rgba(168, 85, 247, 0.25) !important; }
.sprite-item.rarity-legendary:hover .thumb { background-color: rgba(255, 107, 61, 0.25) !important; }
.sprite-item.rarity-mythic:hover .thumb { background-color: rgba(255, 211, 77, 0.25) !important; }

.sidebar-rare{
    border-left:4px solid #2b6bc7;
}
.sidebar-epic{
    border-left:4px solid #7f37d9;
}
.sidebar-legendary{
    border-left:4px solid #d14f28;
}
.sidebar-mythic{
    border-left:4px solid #d99a18;
}
.thumb{width:48px;height:48px;border-radius:8px;background:rgba(255,255,255,0.02);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0;transition:box-shadow .2s;}
.thumb .thumb-img{width:100%;height:100%;object-fit:contain;}
.side-meta{flex:1;display:flex;flex-direction:column;min-width:0;}
.side-meta .name{font-weight:700;font-size:13px}
.side-meta .mini{font-size:12px;color:var(--muted)}
.side-progress{width:56px;text-align:right;font-size:12px;color:var(--muted);flex-shrink:0;}
.panel{background:rgba(0,0,0,0.45);border-radius:12px;padding:18px;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--shadow);display:flex;gap:18px;align-items:flex-start;position:relative;overflow:visible;z-index:1;flex-wrap:wrap;}
.left-panel{width:420px;display:flex;flex-direction:column;align-items:center;gap:12px;background:rgba(0,0,0,0.35);border-radius:12px;padding:16px;}
.sprite-art{width:360px;height:360px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,0.02);position:relative;}
.main-crown{
    position:absolute;
    top:13px;
    left:50%;
    transform:translateX(-50%);
    width:52px;
    height:auto;
    opacity:0;
    transition:opacity .25s, transform .25s;
    z-index:25;
    pointer-events:none;
}
.main-crown.show{opacity:1;transform:translateX(-50%) scale(1);}
.sprite-art img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.sprite-ghost{position:absolute;right:12px;bottom:12px;color:rgba(255,255,255,0.04);font-size:160px;transform:translate(10px,10px);pointer-events:none}
.right-panel{background:rgba(0,0,0,0.35);flex:1;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:12px;min-width:300px;}
.title-large{font-family:var(--font-heading);font-size:28px;font-weight:800}
.progress-row{display:flex;align-items:center;gap:12px;width:100%;}
.progress-row .percent{font-weight:800;font-size:18px;flex-shrink:0;}
.progress-row .bar{flex:1;height:14px;border-radius:999px;background:rgba(255,255,255,0.03);overflow:hidden;min-width:60px;}
.progress-row .bar .fill{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .5s var(--ease)}

/* --- INFO BOX: passive e variant --- */
#main-passive,
.variant-info {
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 2px solid var(--primary);
  padding: 14px 18px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  margin-top: 10px;
  color: #e6f0f6;
}

/* Etichette delle sezioni (già presenti nel HTML) */
#details .label {
  display: block;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 4px;
}

.variant-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:6px 0;
    font-size:14px;
    gap:12px;
    flex-wrap:wrap;
}
.variant-row span:last-child{
    font-weight:800;
}

.variant-divider {
  border-top: 2px solid rgba(255,255,255,1);
  margin: 6px 0;
  padding: 0;
}

.dust-cost {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dust-icon {
  width: 25px;
  height: 25px;
  object-fit: contain;
}
.variants-grid { display:flex; gap:14px; flex-wrap:wrap; padding-top:6px; }
.variant-btn {
    min-width: 120px;
    padding: 10px 14px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)) !important;  /* ← uguale a variant-info */
    backdrop-filter: blur(4px) !important;           /* ← sfocatura */
    -webkit-backdrop-filter: blur(4px) !important;
    color: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, background .25s ease, border-color .25s ease;
    font-size: 13px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.variant-btn.owned {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 0 20px rgba(47,182,255,0.08);
    background: #ffffff !important;
    color: #04121a !important;
    border-color: rgba(47,182,255,0.15);
    transition: all 0.3s cubic-bezier(.2,.9,.3,1);
}
.variant-btn.owned:active {
    transform: scale(0.95) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

/* Se vuoi anche l'hover per il pulsante acquisito */
.variant-btn.owned:hover {
    background: #f5f5f5 !important;
    box-shadow: 0 14px 40px rgba(47,182,255,0.15);
    transform: translateY(-3px) scale(1.04);
}

@keyframes selectedPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(47, 182, 255, 0.35), inset 0 0 20px rgba(47, 182, 255, 0.05); }
    50% { box-shadow: 0 0 50px rgba(47, 182, 255, 0.55), inset 0 0 30px rgba(47, 182, 255, 0.10); }
}

.variant-unreleased{
    margin-left:auto;
    padding:2px 7px;
    border-radius:999px;
    background:#d62828;
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.6px;
    text-transform:uppercase;
    box-shadow:0 0 8px rgba(214,40,40,.35);
}
.variant-btn.unreleased:hover{
    transform:none;
    box-shadow:0 0 12px rgba(214,40,40,.35);
}
.variant-btn .dot{ width:14px; height:14px; border-radius:4px; display:inline-block; flex-shrink:0; }
.variant-btn.basic .dot {
  background: #6b7280; /* grigio chiaro */
}
/* Basic - hover più sottile (default) */
.variant-btn.basic:hover {
  box-shadow: 0 0 12px rgba(200, 210, 220, 0.25);
}
.variant-btn.gold .dot{ background: linear-gradient(90deg,#FFD166,#FFB84D); }
.variant-btn.gummy .dot{ background: #FF7AB6; }
.variant-btn.galaxy .dot{ background: linear-gradient(90deg,#9B6BFF,#2FB6FF); }
.variant-btn.holo .dot{ background: linear-gradient(90deg,#DDFBFF,#7EF0FF,#FFFFFF); }
.variant-btn.cube .dot { background: linear-gradient(90deg,#4A00FF,#7A00FF,#B400FF); }
.variant-btn.gem .dot { background: linear-gradient(90deg,#FFFFFF,#D9D9D9,#B5B5B5); }
.variant-btn.quack .dot { background: linear-gradient(135deg, #A855F7, #6366F1); }
.variant-btn.cheat .dot { background: linear-gradient(135deg, #00E676, #00BCD4); }

.variant-btn:hover {
    transform: translateY(-3px) scale(1.02);
    background: linear-gradient(135deg, rgba(47,182,255,0.10), rgba(123,107,255,0.05)) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25), 0 0 20px rgba(47,182,255,0.05);
}
.variant-btn:active{transform:scale(.96);}

/* Gold */
.variant-btn.gold:hover { box-shadow: 0 0 12px rgba(255, 209, 102, 0.45); }

/* Gummy */
.variant-btn.gummy:hover { box-shadow: 0 0 12px rgba(255, 122, 182, 0.45); }

/* Galaxy */
.variant-btn.galaxy:hover { box-shadow: 0 0 12px rgba(155, 107, 255, 0.45); }

/* Holofoil */
.variant-btn.holo:hover { box-shadow: 0 0 12px rgba(126, 240, 255, 0.45); }

/* Cube */
.variant-btn.cube:hover { box-shadow: 0 0 12px rgba(74, 0, 255, 0.45); }

/* Gem */
.variant-btn.gem:hover { box-shadow: 0 0 12px rgba(200, 200, 200, 0.45); }

/* Quack */
.variant-btn.quack:hover { box-shadow: 0 0 12px rgba(168, 85, 247, 0.45); }

/* Cheat */
.variant-btn.cheat:hover { box-shadow: 0 0 16px rgba(0, 230, 118, 0.6); }

.variant-btn.owned{ transform: translateY(-2px); box-shadow: 0 14px 40px rgba(47,182,255,0.08); background:linear-gradient(180deg,#e6f9ff,#dff6ff); color:#04121a; }
.mastered-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,var(--gold),#ffb84d);color:#04121a;font-weight:900;box-shadow:0 12px 40px rgba(255,177,66,0.12)}
.mastered-badge.hidden{display:none}
#main-name{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.mastered-crown{
    width:24px;
    height:24px;
}
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  background: rgba(0,0,0,0.35);
  padding: 10px 12px;
  border-radius: 10px;
  flex-wrap:wrap;
  flex: 0 0 100%;      /* forza la filter-bar ad occupare tutta la larghezza */
  order: 1;             /* la mette dopo il banner */
}
.filter-select {
  border: 1px solid rgba(255,255,255,0.08);
  padding: 8px 12px;
  border-radius: 8px;
  background:#1a1d24;
  color:white;
}
/* Fix per i select - mantiene lo sfondo scuro sempre */
.filter-select,
.filter-select:hover,
.filter-select:focus,
.filter-select:active {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e6f0f6 !important;
  border-color: rgba(255, 255, 255, 0.1);
}

.filter-select:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--primary);
}

.filter-select:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 20px rgba(47, 182, 255, 0.15);
}

/* Opzioni del select - sfondo scuro */
.filter-select option {
  background: #1a1d24;
  color: #e6f0f6;
}
.filter-pills {
  display: flex;
  gap: 8px;
}
.pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pill.active {
  background: rgba(47,182,255,0.18);
  border-color: rgba(47,182,255,0.35);
}
.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  opacity: .8;
  border:2px solid rgba(255,255,255,.08);
  border-radius:12px;
}
.toggle:hover{
    transform:translateY(-2px);
    border-color:#2fb6ff;
    box-shadow:0 0 18px rgba(47,182,255,.22);
}

/* Toggle Switch Moderno */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  user-select: none;
  padding: 6px 12px 6px 6px;
  border-radius: 30px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.06);
  transition: all .3s cubic-bezier(.2, .9, .3, 1);
}

.toggle-switch:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(47, 182, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 30px rgba(47,182,255,0.06);
}

.toggle-switch:active {
  transform: scale(0.96) translateY(0);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.toggle-switch input {
  display: none;
}

.toggle-switch input:hover {
  border-color: rgba(47,182,255,0.4);
  box-shadow: 0 6px 24px rgba(47,182,255,0.15);
}

/* Il corpo dello switch */
.toggle-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: rgba(255,255,255,0.12);
  border-radius: 30px;
  transition: all .3s ease;
  flex-shrink: 0;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

/* Il pallino che si muove */
.toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: all .3s cubic-bezier(.4,.0,.2,1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.toggle-switch:hover .toggle-slider::before {
  box-shadow: 0 0 20px rgba(47,182,255,0.15), 0 2px 8px rgba(0,0,0,0.3);
}
/* Stato ON */
.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 20px rgba(47,182,255,0.25);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
  background: #fff;
}

.lang-selector {
  background: rgba(47, 182, 255, 0.12);
  border: 1.5px solid rgba(47, 182, 255, 0.3);
  color: #fff;
  font-weight: 700;
  padding: 8px 20px 8px 14px;
  border-radius: 30px;
  font-size: 13px;
  margin-left: auto;
  transition: all 0.25s ease;
  cursor: pointer;
  appearance: none; /* rimuove la freccia di default se vuoi personalizzarla */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.lang-selector:hover {
  background-color: rgba(47, 182, 255, 0.25);
  border-color: var(--primary);
  box-shadow: 0 0 24px rgba(47, 182, 255, 0.15);
  transform: translateY(-1px);
}

.lang-selector option {
  background: #1a1d24;
  color: #e6f0f6;
}

/* Etichetta a destra */
.toggle-label {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: #cbd5e1;
  transition: color .2s;
}

.toggle-switch input:checked ~ .toggle-label {
  color: #fff;
}

/* Variante piccola per i filtri */
.toggle-switch.small .toggle-slider {
  width: 36px;
  height: 20px;
}

.toggle-switch.small .toggle-slider::before {
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
}

.toggle-switch.small input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

.btn-adaptive{ padding:8px 12px;border-radius:10px;border:none;cursor:pointer;font-weight:800;display:inline-flex;align-items:center;gap:8px; background:linear-gradient(90deg,var(--primary),var(--accent)); color:var(--btn-text-dark); box-shadow:0 10px 30px rgba(47,182,255,0.08); transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease; }
.btn-adaptive.ghost {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.12);  /* <-- da 1px a 2px e più visibile */
  color: var(--muted);
  padding: 8px 14px;                         /* <-- leggermente più ampio per bilanciare */
  transition: all .25s cubic-bezier(.2,.9,.3,1);
}
.btn-adaptive:focus{outline:3px solid rgba(47,182,255,0.12);outline-offset:2px}
.btn-adaptive:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.08);box-shadow:0 6px 20px rgba(0,0,0,.35),0 0 18px rgba(0,194,255,.25);}
.btn-adaptive:active{transform:scale(.96);}

/* Color hover per acquire-all e clear-variants */
#acquire-all:hover {
  background: #2d9cff;
  border-color: #2d9cff;
  color: #fff;
  box-shadow: 0 0 22px rgba(45,156,255,.35);
}
#clear-variants:hover {
  background: #e63946;
  border-color: #e63946;
  color: #fff;
  box-shadow: 0 0 22px rgba(230,57,70,.45);
}
.footer {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.footer a {
  color: var(--primary);
  text-decoration: none;
  transition: color .2s;
}

.footer a:hover {
  color: #fff;
  text-decoration: underline;
}
.arrow{display:inline-block;transition:.18s;}
#prev:hover .arrow{transform:translateX(-4px);}
#next:hover .arrow{transform:translateX(4px);}
/* Prev / Next - bordo azzurro */
#prev.btn-adaptive.ghost,
#next.btn-adaptive.ghost {
  border-color: rgba(47,182,255,0.2);
}

#prev.btn-adaptive.ghost:hover,
#next.btn-adaptive.ghost:hover {
  border-color: rgba(47,182,255,0.7);
  box-shadow: 0 8px 30px rgba(47,182,255,0.25);
}

/* Stats - bordo viola */
#btn-stats.btn-adaptive.ghost {
  border-color: rgba(123,107,255,0.2);
}

#btn-stats.btn-adaptive.ghost:hover {
  border-color: rgba(123,107,255,0.7);
  box-shadow: 0 8px 30px rgba(123,107,255,0.25);
}

/* Export - bordo oro */
#btn-menu.btn-adaptive.ghost {
  border-color: rgba(255,209,102,0.2);
}

#btn-menu.btn-adaptive.ghost:hover {
  border-color: rgba(255,209,102,0.7);
  box-shadow: 0 8px 30px rgba(255,209,102,0.25);
}

/* Music - bordo rosa/rosso */
#music-toggle.btn-adaptive.ghost {
  border-color: rgba(255,122,182,0.2);
}

#music-toggle.btn-adaptive.ghost:hover {
  border-color: rgba(255,122,182,0.7);
  box-shadow: 0 8px 30px rgba(255,122,182,0.25);
}

/* === MAP BUTTON (verde neon) === */
#btn-map.btn-adaptive.ghost {
  border-color: rgba(0, 230, 118, 0.5);
  color: #00E676;
  background: rgba(0, 230, 118, 0.05);
  transition: all 0.25s cubic-bezier(.2, .9, .3, 1);
}

#btn-map.btn-adaptive.ghost:hover {
  border-color: #00E676;
  background: rgba(0, 230, 118, 0.15);
  box-shadow: 0 0 30px rgba(0, 230, 118, 0.4), inset 0 0 20px rgba(0, 230, 118, 0.1);
  color: #ffffff;
  transform: translateY(-3px) scale(1.05);
}

.select-custom{position:relative;display:inline-block;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);color:inherit;padding:8px 12px;border-radius:10px;min-width:160px}
.select-custom select{appearance:none;background:transparent;border:0;color:inherit;font-weight:700;width:100%;padding-right:18px;outline:none}
.select-custom::after{content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.custom-checkbox{display:inline-grid;grid-auto-flow:column;gap:8px;align-items:center}
.custom-checkbox input[type="checkbox"]{appearance:none;width:22px;height:22px;border-radius:6px;border:2px solid rgba(255,255,255,0.06);display:inline-grid;place-items:center;cursor:pointer;background:linear-gradient(180deg,#fff7e6,#fff0cc);transition:transform .12s ease,box-shadow .12s ease}
.custom-checkbox input[type="checkbox"]::after{content:'👑';opacity:0;transform:scale(.7);transition:all .14s ease;font-size:14px}
.custom-checkbox input[type="checkbox"]:checked::after{opacity:1;transform:scale(1)}
.custom-checkbox input[type="checkbox"]:focus{outline:3px solid rgba(47,182,255,0.12);outline-offset:2px}

.modal .row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal {
  background: linear-gradient(180deg, #111827, #0f172a);
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  width: 440px;
  max-width: 92vw;
  color: #e6f0f6;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}

.modal .option {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: #e6f0f6;
  font-weight: 600;
  transition: all .2s cubic-bezier(.2,.9,.3,1);
  min-width: 100px;
}

.modal .option:hover {
  background: rgba(47, 182, 255, 0.15);
  border-color: rgba(47, 182, 255, 0.4);
  box-shadow: 0 0 24px rgba(47, 182, 255, 0.15);
  transform: translateY(-2px);
}

.modal .option:active {
  transform: scale(0.96);
}
.grid-card{
    position:relative;
    padding:12px;
    border-radius:14px;
    border:2px solid transparent;
    background:rgba(8,12,20,.18);
    backdrop-filter:blur(5px);
    cursor:pointer;
    transition:
        transform .18s,
        box-shadow .18s,
        border-color .18s;

    overflow:hidden;
}
.grid-card:hover{transform:translateY(-8px) scale(1.03);}
.grid-art{
    position:relative;
    height:140px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
	padding-top:10px;
}
.grid-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 40%);
	pointer-events:none;
}

.rarity-common{border-color:#6b7280;}
.rarity-rare{border-color:#4FC3FF;}
.rarity-epic{border-color:#A855F7;}
.rarity-legendary{border-color:#FF6B3D;}
.rarity-mythic{border-color:#FFD34D;}
.rarity-common:hover{box-shadow:0 0 18px rgba(107,114,128,.35);}
.rarity-rare:hover{box-shadow:0 0 20px rgba(79,195,255,.45);}
.rarity-epic:hover{box-shadow:0 0 22px rgba(168,85,247,.45);}
.rarity-legendary:hover{box-shadow:0 0 26px rgba(255,107,61,.50);}
.rarity-mythic:hover{box-shadow:0 0 24px rgba(255,211,77,.45);}

.grid-art img{max-width:100%;max-height:100%;transition:.18s;}
.grid-card:hover img{transform:scale(1.08);}
.grid-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-weight:700;
}
.grid-crown{
    position:absolute;
    left:50%;
    top:3px;
    width:34px;
    height:34px;
    z-index:50;
    pointer-events:none;
}
.grid-mini{margin-top:4px;font-size:12px;opacity:.85;text-align:center;}

.grid-card.rarity-common{
    background:linear-gradient(
        180deg,
        rgba(63,71,83,.78),
        rgba(36,41,50,.78)
    );
}
.grid-card.rarity-rare{
    background:linear-gradient(
        180deg,
        rgba(43,107,199,.78),
        rgba(23,57,111,.78)
    );
}
.grid-card.rarity-epic{
    background:linear-gradient(
        180deg,
        rgba(127,55,217,.78),
        rgba(67,27,120,.78)
    );
}
.grid-card.rarity-legendary{
    background:linear-gradient(
        180deg,
        rgba(209,79,40,.78),
        rgba(116,35,13,.78)
    );
}
.grid-card.rarity-mythic{
    background:linear-gradient(
        180deg,
        rgba(217,154,24,.78),
        rgba(125,77,8,.78)
    );
}

.grid-unreleased{position:absolute;top:10px;right:10px;background:#d62828;padding:5px 8px;border-radius:8px;font-size:10px;font-weight:900;letter-spacing:1px;color:#fff;z-index:5;}
.grid-mastered{
    position:absolute;
    top:10px;
    right:10px;
    width:32px;
    height:32px;
    border-radius:50%;
    background:#facc15;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    z-index:20;
    box-shadow:0 0 12px rgba(250,204,21,.45);
}
.sprite-title{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
}
.mastered-crown{
    width:28px;
    height:28px;
    display:none;
}
.mastered-crown.show{
    display:block;
}
.grid-card.unreleased{filter:grayscale(.75) brightness(.75);}

.fortnite-rarity-tag{
    position:absolute;
    left:-2px;
    bottom:0;
    padding:6px 14px;
    font-size:12px;
    font-weight:1000;
    letter-spacing:1px;
    color:#fff;
    text-transform:uppercase;
    clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
    box-shadow:0 4px 10px rgba(0,0,0,.35);
    z-index:5;
}
.fortnite-rarity-tag.rare{background:#00C8FF;}
.fortnite-rarity-tag.epic{background:#9B3DFF;}
.fortnite-rarity-tag.legendary{background:#FF6A1A;}
.fortnite-rarity-tag.mythic{background:#FFD34D;color:#111;}
.fortnite-rarity-tag.common{background:#6B7280;}

.toast{position:fixed;right:18px;top:18px;background:#0b1220;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 12px 40px rgba(0,0,0,0.6);color:#e6f0f6;z-index:10000}
.confirm-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.6);display:none;align-items:center;justify-content:center;z-index:10001}
.confirm-modal{background:linear-gradient(180deg,#0b1220,#07101a);padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);width:420px;color:#e6f0f6;box-shadow:0 20px 60px rgba(2,6,23,0.7)}
.pressed{transform:translateY(1px) scale(.997);box-shadow:0 8px 28px rgba(0,0,0,0.45) inset}
@media (max-width:1100px) {
    .app {
        grid-template-columns: 1fr;
        padding: 12px;
        height: auto;
        max-height: none;
        min-height: 100vh;
    }
    .panel {
        flex-direction: column;
        align-items: center;
    }
    .left-panel {
        width: 100%;
    }
    .sprite-art {
        width: 320px;
        height: 320px;
    }
    .right-panel {
        width: 100%;
    }
    .sidebar {
        order: 2;
        height: auto;
        max-height: 70vh;
        margin-top: 12px;
        display: none;    /* Nascondi sidebar di default su mobile */
		transition: transform 0.3s ease, opacity 0.3s ease;
		transform: translateY(20px);
		opacity: 0;
    }
    .sidebar.open {
        display: flex; /* Mostra quando ha la classe open */
		transform: translateY(0);
		opacity: 1;
		display: flex;
    }
    .filter-bar {
        flex-wrap: wrap;
        justify-content: center;
    }
    .filter-select {
        min-width: 120px;
        flex: 1 1 auto;
    }
}

/* Mostra il toggle solo su mobile */
#sidebar-toggle {
    display: none;
}
@media (max-width:1100px) {
    #sidebar-toggle {
        display: inline-flex;
    }
}

/* STATISTICHE MODALE */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  transition: all .2s ease;
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(47, 182, 255, 0.2);
  transform: translateY(-2px);
}

.stat-card .number {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.stat-card .label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  display: block;
}

.rarity-stats {
  margin-top: 12px;
}

.rarity-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.rarity-stat-row:last-child {
  border-bottom: none;
}

.rarity-stat-row .rarity-label {
  width: 80px;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.rarity-stat-row .rarity-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.rarity-stat-row .rarity-bar .fill {
  height: 100%;
  border-radius: 999px;
  transition: width .5s ease;
}

.rarity-stat-row .rarity-percent {
  width: 50px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.stats-title {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 4px;
  color: #fff;
}

.stats-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Shimmer loading effect */
.thumb-img,
.grid-art img,
#main-img {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  transition: opacity 0.3s ease;
}

#main-img.fade-out {
  opacity: 0;
}


@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Quando l'immagine è caricata, rimuovi l'effetto */
.thumb-img.loaded,
.grid-art img.loaded,
#main-img.loaded {
  background: none;
  animation: none;
}

/* Transizioni più fluide per sprite-item */
.sprite-item {
  transition: transform 0.25s cubic-bezier(.2,.9,.3,1),
              background 0.25s ease,
              box-shadow 0.25s ease;
}
.sprite-item:hover {
  transform: translateX(8px) scale(1.02);
}

/* Transizioni per i pulsanti varianti */
.variant-btn {
  transition: transform 0.2s cubic-bezier(.2,.9,.3,1),
              box-shadow 0.25s ease,
              background 0.25s ease;
}
.variant-btn:hover {
  transform: translateY(-3px) scale(1.04);
}

/* Transizione per le card della grid */
.grid-card {
  transition: transform 0.3s cubic-bezier(.2,.9,.3,1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}
.grid-card:hover {
  transform: translateY(-10px) scale(1.04);
}

/* ========== SPRITE GARDEN ========== */
#garden-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 80%, #0d1a2b, #050814);
    display: none;
    z-index: 9999;
    padding: 20px;
    overflow: hidden;
    font-family: var(--font-body);
}

#garden-overlay.active {
    display: block;
    animation: gardenFadeIn 0.8s ease-out;
}

@keyframes gardenFadeIn {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

#garden-close {
    position: fixed;
    top: 20px;
    right: 24px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #e6f0f6;
    font-size: 20px;
    cursor: pointer;
    z-index: 100;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
    backdrop-filter: blur(8px);
}

#garden-close:hover {
    background: rgba(255,255,255,0.12);
    transform: rotate(90deg) scale(1.05);
}

#garden-title {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 0 40px rgba(47,182,255,0.15);
    z-index: 100;
    background: rgba(0,0,0,0.3);
    padding: 8px 24px;
    border-radius: 30px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.04);
}

#garden-title span {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#garden-stats {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: var(--muted);
    background: rgba(0,0,0,0.4);
    padding: 8px 20px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.04);
    z-index: 100;
    text-align: center;
}

#garden-stats strong {
    color: #fff;
}

#garden-container {
    position: relative;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

/* Decorazioni di base */
.garden-decoration {
    position: absolute;
    pointer-events: none;
    font-size: 40px;
    opacity: 0.4;
    user-select: none;
}

.garden-decoration.tree { font-size: 60px; opacity: 0.3; }
.garden-decoration.flower { font-size: 28px; opacity: 0.5; }
.garden-decoration.rock { font-size: 32px; opacity: 0.25; }
.garden-decoration.water { font-size: 50px; opacity: 0.35; }
.garden-decoration.star { font-size: 20px; opacity: 0.6; animation: twinkle 2s ease-in-out infinite alternate; }

@keyframes twinkle {
    0% { opacity: 0.2; transform: scale(0.9); }
    100% { opacity: 0.8; transform: scale(1.1); }
}

/* Card dello sprite nel giardino */
.garden-sprite {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.03);
    min-width: 80px;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.garden-sprite:hover {
    transform: scale(1.15) !important;
    background: rgba(255,255,255,0.06);
    border-color: rgba(47,182,255,0.15);
    z-index: 10;
}

.garden-sprite img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.garden-sprite .garden-name {
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.garden-sprite .garden-crown {
    position: absolute;
    top: -8px;
    right: -4px;
    font-size: 16px;
    filter: drop-shadow(0 0 8px rgba(255,211,77,0.4));
    pointer-events: none;
}

.garden-sprite.mastered {
    border-color: rgba(255,211,77,0.15);
    box-shadow: 0 0 30px rgba(255,211,77,0.08), inset 0 0 30px rgba(255,211,77,0.03);
}

.garden-sprite.mastered img {
    filter: drop-shadow(0 0 20px rgba(255,211,77,0.15));
}

/* Animazione di fluttuazione (differenziata via JS) */
@keyframes gardenFloat {
    0% { transform: translate(calc(-1 * var(--float-x, 10px)), 0px) rotate(var(--rot-start, -2deg)); }
    50% { transform: translate(0px, var(--float-y, -12px)) rotate(0deg); }
    100% { transform: translate(var(--float-x, 10px), 0px) rotate(var(--rot-end, 2deg)); }
}

/* Animazione cuori */
@keyframes heartFloat {
  0% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-80px) scale(1.5) rotate(20deg); }
}


/* Pausa animazione al mouseover */
.garden-sprite.paused {
  animation-play-state: paused !important;
}

/* Stile per la bacca */
.garden-berry {
  position: absolute;
  left: 10%;
  bottom: 10%;
  font-size: 48px;
  cursor: grab;
  z-index: 20;
  filter: drop-shadow(0 0 16px rgba(255,200,0,0.5));
  user-select: none;
  transition: transform 0.2s ease;
}
.garden-berry:active {
  cursor: grabbing;
}
.garden-berry:hover {
  transform: scale(1.2) rotate(-10deg);
}

/* Cuori che salgono quando nutri */
@keyframes heartFloat {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-80px) scale(1.5); }
}
.heart-float {
  position: absolute;
  font-size: 28px;
  pointer-events: none;
  animation: heartFloat 1.2s ease-out forwards;
}

/* Particelle/glow per il giardino segreto */
#garden-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255,211,77,0.3);
    border-radius: 50%;
    animation: particleFloat linear infinite;
    will-change: transform, opacity;
    transform: translateZ(0);
}

@keyframes particleFloat {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-20vh) scale(1); opacity: 0; }
}

/* ========== GLITCH OVERLAY ========== */
.glitch-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
    display: none;
    align-items: center;
    justify-content: center;
    background: #0a0015;
    font-family: 'Montserrat', var(--font-heading);
    overflow: hidden;
}

.glitch-overlay.active {
    display: flex;
    animation: glitchAppear 0.3s ease-out;
}

/* Sfondo con texture glitch */
.glitch-overlay .glitch-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 50% 80%, rgba(120, 50, 200, 0.3), transparent 70%),
        radial-gradient(ellipse at 20% 20%, rgba(200, 50, 255, 0.1), transparent 50%),
        #0a0015;
}

/* Linee di scansione glitch */
.glitch-overlay .scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.02) 0px,
        rgba(255,255,255,0.02) 2px,
        transparent 2px,
        transparent 6px
    );
    pointer-events: none;
    animation: scanlinesMove 0.1s linear infinite;
}

/* Rumore glitch (overlay semitrasparente) */
.glitch-overlay .noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    animation: noiseAnim 0.5s steps(2) infinite;
}

/* Barre di distorsione orizzontali */
.glitch-overlay .glitch-bars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.glitch-overlay .glitch-bars .bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(168, 85, 247, 0.15);
    animation: glitchBar 2s ease-in-out infinite;
}

.glitch-overlay .glitch-bars .bar:nth-child(1) { top: 10%; animation-delay: 0s; height: 2px; }
.glitch-overlay .glitch-bars .bar:nth-child(2) { top: 25%; animation-delay: 0.4s; height: 4px; }
.glitch-overlay .glitch-bars .bar:nth-child(3) { top: 45%; animation-delay: 0.8s; height: 1px; }
.glitch-overlay .glitch-bars .bar:nth-child(4) { top: 60%; animation-delay: 1.2s; height: 3px; }
.glitch-overlay .glitch-bars .bar:nth-child(5) { top: 78%; animation-delay: 0.6s; height: 2px; }
.glitch-overlay .glitch-bars .bar:nth-child(6) { top: 92%; animation-delay: 1.6s; height: 1px; }

/* ===== CONTENUTO TESTO ===== */
.glitch-overlay .glitch-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 40px;
    animation: glitchPulse 2s ease-in-out infinite;
}

/* Logo FORTNITE */
.glitch-overlay .fortnite-logo {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 12px;
    color: #fff;
    text-shadow: 
        0 0 30px rgba(168, 85, 247, 0.3),
        0 0 60px rgba(168, 85, 247, 0.1);
    margin-bottom: 4px;
    font-family: var(--font-heading);
}

.glitch-overlay .fortnite-logo span {
    display: inline-block;
    animation: logoGlitch 3s steps(1) infinite;
}

/* CHAPTER 7 SEASON 4 */
.glitch-overlay .chapter-season {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 6px;
    color: #f59e0b;
    text-shadow: 0 0 40px rgba(245, 158, 11, 0.2);
    margin-bottom: 8px;
    font-family: var(--font-heading);
}

/* OVERRIDE (titolo principale) */
.glitch-overlay .override-title {
    font-size: 72px;
    font-weight: 900;
    letter-spacing: 4px;
    background: linear-gradient(135deg, #a855f7, #7c3aed, #6d28d9, #7c3aed, #a855f7);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: overrideGradient 3s ease-in-out infinite;
    text-shadow: none;
    filter: drop-shadow(0 0 60px rgba(168, 85, 247, 0.3));
    margin-bottom: 12px;
    font-family: var(--font-heading);
    position: relative;
}

/* Glitch overlay sul testo OVERRIDE */
.glitch-overlay .override-title::before {
    content: "OVERRIDE";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    clip-path: inset(0 0 30% 0);
    animation: textGlitch1 0.3s steps(1) infinite;
    opacity: 0.5;
}

.glitch-overlay .override-title::after {
    content: "OVERRIDE";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    clip-path: inset(70% 0 0 0);
    animation: textGlitch2 0.3s steps(1) infinite;
    opacity: 0.5;
}

/* Slogan */
.glitch-overlay .slogan {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    font-family: var(--font-body);
}

/* ===== TEMI STAGIONI ===== */

.glitch-overlay .chapter-season {
    color: #ffffff;
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 60px rgba(0, 0, 0, 0.3);
    font-weight: 700;
}

/* Season 4 - VIOLA */
.glitch-overlay.season-4 .glitch-bg {
    background: 
        radial-gradient(ellipse at 50% 80%, rgba(120, 50, 200, 0.3), transparent 70%),
        radial-gradient(ellipse at 20% 20%, rgba(200, 50, 255, 0.1), transparent 50%),
        #0a0015;
}
.glitch-overlay.season-4 .override-title {
    background: linear-gradient(135deg, #a855f7, #7c3aed, #6d28d9, #7c3aed, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 60px rgba(168, 85, 247, 0.4));
}

/* Season 3 - ARANCIONE */
.glitch-overlay.season-3 .glitch-bg {
    background: 
        radial-gradient(ellipse at 50% 80%, rgba(255, 107, 53, 0.3), transparent 70%),
        radial-gradient(ellipse at 20% 20%, rgba(255, 150, 50, 0.1), transparent 50%),
        #1a0a00;
}

.glitch-overlay.season-3 .override-title {
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 60px rgba(251, 191, 36, 0.4));
    animation: runnersShake 0.8s ease-in-out infinite alternate;
}

@keyframes runnersShake {
    0% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-3px) rotate(-0.5deg); }
    75% { transform: translateX(3px) rotate(0.5deg); }
    100% { transform: translateX(0) rotate(0deg); }
}

.glitch-overlay.season-3 .slogan {
    color: rgba(255, 255, 255, 0.7);
}

.glitch-overlay.season-3 .override-title::before,
.glitch-overlay.season-3 .override-title::after {
    content: none !important;
    display: none !important;
}

/* ===== ANIMAZIONI ===== */
@keyframes glitchAppear {
    0% { opacity: 0; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes scanlinesMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

@keyframes noiseAnim {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(5%, 0%); }
    30% { transform: translate(0%, 5%); }
    40% { transform: translate(-5%, 0%); }
    50% { transform: translate(5%, 5%); }
    60% { transform: translate(0%, -5%); }
    70% { transform: translate(-5%, 5%); }
    80% { transform: translate(5%, -5%); }
    90% { transform: translate(0%, 0%); }
}

@keyframes glitchBar {
    0%, 100% { transform: translateX(-100%); opacity: 0; }
    20%, 80% { transform: translateX(0); opacity: 1; }
    90% { transform: translateX(100%); opacity: 0; }
}

@keyframes glitchPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

@keyframes overrideGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes logoGlitch {
    0%, 100% { transform: translate(0, 0); }
    5% { transform: translate(-2px, 1px); }
    10% { transform: translate(2px, -1px); }
    15% { transform: translate(-1px, 2px); }
    20% { transform: translate(0, 0); }
}

@keyframes textGlitch1 {
    0%, 100% { clip-path: inset(0 0 30% 0); transform: translate(0); }
    50% { clip-path: inset(0 0 60% 0); transform: translate(2px); }
}

@keyframes textGlitch2 {
    0%, 100% { clip-path: inset(70% 0 0 0); transform: translate(0); }
    50% { clip-path: inset(40% 0 0 0); transform: translate(-2px); }
}

/* GLITCH EFFECT */
@keyframes glitchEffect {
    0% { transform: translateX(0) scale(1); opacity: 0.7; }
    20% { transform: translateX(-4px) scale(1.02); opacity: 0.9; }
    40% { transform: translateX(4px) scale(0.98); opacity: 0.8; }
    60% { transform: translateX(-2px) scale(1.01); opacity: 0.95; }
    80% { transform: translateX(2px) scale(0.99); opacity: 0.85; }
    100% { transform: translateX(0) scale(1); opacity: 0.7; }
}

@keyframes overridePulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    100% { transform: scale(1.05); opacity: 1; }
}

body.retro-mode {
  font-family: 'Press Start 2P', 'Courier New', monospace !important;
  background: #0a0a0a !important;
  color: #33ff33 !important;
  filter: none !important;
}

/* Tutti i bordi diventano quadrati e spessi */
body.retro-mode * {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Pannelli e sidebar con bordo pixel */
body.retro-mode .sidebar {
  background: #000 !important;
  border: 2px solid #00ff41 !important;
  padding: 8px !important;
}
body.retro-mode .sprite-item {
  background: #111 !important;
  border: 1px solid #00ff41 !important;
  border-radius: 0 !important;
  padding: 6px !important;
  margin-bottom: 4px !important;
}
body.retro-mode .sprite-item .side-meta .name {
  font-size: 13px !important;
  color: #00ff41 !important;
}
body.retro-mode .sprite-item .side-meta .mini {
  font-size: 11px !important;
  color: #88ff88 !important;
}
body.retro-mode .side-progress {
  font-size: 14px !important;
  color: #00ff41 !important;
  font-weight: 700 !important;
}
body.retro-mode .thumb {
  background: #000 !important;
  border: 1px solid #00ff41 !important;
  border-radius: 0 !important;
}
body.retro-mode .filter-bar,
body.retro-mode .controls {
  background: #111 !important;
  border: 1px solid #00ff41 !important;
}
body.retro-mode .filter-select {
  background: #000 !important;
  color: #00ff41 !important;
  border: 1px solid #00ff41 !important;
}

/* Pulsanti */
body.retro-mode .btn-adaptive {
  background: #000 !important;
  border: 3px solid #33ff33 !important;
  color: #33ff33 !important;
  font-family: 'Press Start 2P', monospace !important;
  text-transform: uppercase;
  font-size: 10px;
  padding: 8px 12px;
}
body.retro-mode .btn-adaptive:hover {
  background: #33ff33 !important;
  color: #000 !important;
}

/* Immagini pixelate (già gestito da JS) */
body.retro-mode img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Il toggle switch diventa stile pixel */
body.retro-mode .toggle-slider {
  background: #222 !important;
  border: 2px solid #33ff33 !important;
  border-radius: 0 !important;
}
body.retro-mode .toggle-slider::before {
  background: #33ff33 !important;
  border-radius: 0 !important;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
}

/* Barra di progresso */
body.retro-mode .bar {
  background: #222 !important;
  border: 2px solid #33ff33 !important;
  border-radius: 0 !important;
}
body.retro-mode .bar .fill {
  background: #33ff33 !important;
  border-radius: 0 !important;
}

/* Font più piccolo per adattarsi */
body.retro-mode .title-large,
body.retro-mode .name,
body.retro-mode .side-meta .name {
  font-size: 14px;
}

body.retro-mode a {
  color: #33ff33 !important;
}
body.retro-mode .muted,
body.retro-mode .variant-info,
body.retro-mode .side-progress {
  color: #88ff88 !important;
}

body.retro-mode .side-meta .mini {
  font-size: 10px;
}

body.retro-mode::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.15) 0px,
    rgba(0,0,0,0.15) 2px,
    transparent 2px,
    transparent 6px
  );
  z-index: 99999;
  animation: scanlines 0.3s linear infinite;
}

/* Aggiustamenti per il menu export in retro mode - versione bilanciata */
body.retro-mode .modal .option {
    font-size: 9px !important;
    padding: 4px 6px !important;
    min-width: 40px !important;
    flex: 0 1 auto !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
}

body.retro-mode .modal #modal-title {
    font-size: 14px !important;
}

body.retro-mode .modal #modal-description {
    font-size: 10px !important;
}

body.retro-mode .modal .row {
    gap: 4px !important;
    flex-wrap: wrap !important;
}

body.retro-mode .modal {
    padding: 10px 14px !important;
    max-width: 95vw !important;
}

body.retro-mode .modal #modal-footer {
    font-size: 9px !important;
    margin-top: 8px !important;
}

@keyframes scanlines {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

#btn-codes-s4 {
  border-color: rgba(0, 212, 255, 0.4) !important;
  color: #00D4FF !important;
}

#btn-codes-s4:hover {
  border-color: rgba(0, 212, 255, 0.9) !important;
  background: rgba(0, 212, 255, 0.1) !important;
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.2) !important;
}

/* Tooltip per varianti su mobile */
.variant-tooltip {
    position: fixed;
    background: rgba(11, 18, 32, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 18px;
    z-index: 10000;
    max-width: 260px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: #e6f0f6;
    font-size: 13px;
    line-height: 1.5;
}
.variant-tooltip.show {
    opacity: 1;
}
.variant-tooltip .tt-title {
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 4px;
    color: #fff;
}
.variant-tooltip .tt-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.variant-tooltip .tt-row:last-child {
    border-bottom: none;
}
.variant-tooltip .tt-label {
    color: var(--muted);
}
.variant-tooltip .tt-value {
    font-weight: 700;
}

#footer-season {
  cursor: pointer;
  transition: color 0.2s, text-decoration 0.2s;
}
#footer-season:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ——— RESPONSIVE SHORTCUT MODAL ——— */
@media (max-width: 600px) {
  #shortcuts-modal .modal {
    max-width: 95vw;
    padding: 16px 12px;
    overflow-y: auto;
    max-height: 90vh;
  }
  /* Impila le colonne */
  #shortcuts-modal .modal > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Pulsanti più compatti */
  #shortcuts-modal .modal .btn-adaptive {
    font-size: 12px;
    padding: 6px 10px;
  }
  /* Riduci font della descrizione */
  #shortcuts-modal .modal .variant-row span,
  #shortcuts-modal .modal .tt-label,
  #shortcuts-modal .modal .tt-value {
    font-size: 12px;
  }
  /* Pulsante di chiusura del giardino più grande e accessibile */
  #garden-close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    font-size: 22px;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    z-index: 101;
  }
  #garden-title {
    font-size: 18px;
    padding: 4px 16px;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 80%;
  }
  #garden-stats {
    font-size: 11px;
    padding: 6px 14px;
    bottom: 12px;
    width: auto;
    max-width: 90%;
  }
}

#main-art {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation; /* disabilita zoom e doppio tocco */
}

#map-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.92);
  backdrop-filter: blur(8px);
  display: none;
  z-index: 9999;
  padding: 20px;
  overflow: auto;
}

#map-overlay.active {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#map-image {
  display: block !important;
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  visibility: visible !important;
  opacity: 1 !important;
}

#map-overlay img {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  display: block; /* forza il display */
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}

/* === BADGE PER OTTENIMENTO E LEVEL UP === */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.badge-code {
    background: rgba(0, 230, 118, 0.15);
    color: #00E676;
    border: 1px solid rgba(0, 230, 118, 0.2);
}
.badge-locator {
    background: rgba(0, 212, 255, 0.15);
    color: #00D4FF;
    border: 1px solid rgba(0, 212, 255, 0.2);
}
.badge-sprite-chest {
    background: rgba(255, 211, 77, 0.15);
    color: #FFD34D;
    border: 1px solid rgba(255, 211, 77, 0.2);
}
.badge-cheat-code {
    background: rgba(168, 85, 247, 0.15);
    color: #A855F7;
    border: 1px solid rgba(168, 85, 247, 0.2);
}
.badge-level-chests {
    background: rgba(79, 195, 255, 0.12);
    color: #4FC3FF;
    border: 1px solid rgba(79, 195, 255, 0.15);
}
.badge-level-victory {
    background: rgba(255, 211, 77, 0.2);
    color: #FFD34D;
    border: 1px solid rgba(255, 211, 77, 0.25);
    box-shadow: 0 0 12px rgba(255, 211, 77, 0.15);
}
.badge-level-consumables {
    background: rgba(255, 122, 182, 0.15);
    color: #FF7AB6;
    border: 1px solid rgba(255, 122, 182, 0.2);
}
.badge-default {
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.badge-variant-basic { background: rgba(107, 114, 128, 0.15); color: #6b7280; border: 1px solid rgba(107, 114, 128, 0.3); }
.badge-variant-gold { background: rgba(255, 209, 102, 0.15); color: #FFD166; border: 1px solid rgba(255, 209, 102, 0.3); }
.badge-variant-gummy { background: rgba(255, 122, 182, 0.15); color: #FF7AB6; border: 1px solid rgba(255, 122, 182, 0.3); }
.badge-variant-galaxy { background: rgba(155, 107, 255, 0.15); color: #9B6BFF; border: 1px solid rgba(155, 107, 255, 0.3); }
.badge-variant-holofoil { background: rgba(126, 240, 255, 0.15); color: #7EF0FF; border: 1px solid rgba(126, 240, 255, 0.3); }
.badge-variant-cube { background: rgba(74, 0, 255, 0.15); color: #4A00FF; border: 1px solid rgba(74, 0, 255, 0.3); }
.badge-variant-gem { background: rgba(217, 217, 217, 0.15); color: #D9D9D9; border: 1px solid rgba(217, 217, 217, 0.3); }
.badge-variant-quack { background: rgba(168, 85, 247, 0.15); color: #A855F7; border: 1px solid rgba(168, 85, 247, 0.3); }
.badge-variant-cheat { background: rgba(0, 230, 118, 0.15); color: #00E676; border: 1px solid rgba(0, 230, 118, 0.3); }

/* Badge per Sprite Chest (Season 3) */
.badge-sprite-chest {
    background: rgba(255, 211, 77, 0.2);
    color: #FFD34D;
    border: 1px solid rgba(255, 211, 77, 0.3);
}

/* Badge per Cheat Code (Season 4) – base, poi specifico per rarità */
.badge-cheat-rare {
    background: rgba(79, 195, 255, 0.2);
    color: #4FC3FF;
    border: 1px solid rgba(79, 195, 255, 0.3);
}
.badge-cheat-epic {
    background: rgba(168, 85, 247, 0.2);
    color: #A855F7;
    border: 1px solid rgba(168, 85, 247, 0.3);
}
.badge-cheat-legendary {
    background: rgba(255, 107, 61, 0.2);
    color: #FF6B3D;
    border: 1px solid rgba(255, 107, 61, 0.3);
}
.badge-cheat-mythic {
    background: rgba(255, 211, 77, 0.2);
    color: #FFD34D;
    border: 1px solid rgba(255, 211, 77, 0.3);
}

/* Stile identico a variant-info per selettore e livello */
.variant-selector-box,
.level-control-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 2px solid var(--primary);
    padding: 12px 16px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    margin-top: 6px;
    color: #e6f0f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.variant-selector-box select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #fff;
    padding: 4px 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    min-width: 110px;
}

.variant-selector-box select:hover {
    background: rgba(47,182,255,0.12);
    border-color: var(--primary);
}

.variant-selector-box select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(47,182,255,0.15);
}

.variant-selector-box select option {
    background: #1a1d24;
    color: #e6f0f6;
}

/* Titoli delle sezioni come i label di variant-info */
.section-label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 4px;
}

/* Stile per le etichette dei controlli (Selected variant, Level) */
.control-label {
    font-size: 13px;
    font-weight: 600;
    color: #e6f0f6;
}

#codes-modal .modal {
    max-width: 680px;
    width: 90%;
}

#codes-modal .modal td {
    padding: 8px 10px;
}

#codes-modal .modal table td:first-child {
    min-width: 120px;
    white-space: nowrap;
}

#codes-modal .modal td:first-child {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #00D4FF;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px 10px;
}

#codes-modal .modal td:first-child:hover {
    color: #00E5FF;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    transform: scale(1.02);
    background: rgba(0, 212, 255, 0.05);
    border-radius: 4px;
}

#codes-modal .modal table td:last-child {
    padding-left: 16px;
    white-space: nowrap;
}
#codes-modal .modal td:last-child {
    padding-left: 8px;
}

#codes-modal .modal #codes-title {
    text-align: center;
}

#codes-modal .modal #codes-description {
    text-align: center;
}

#codes-modal .modal table {
    width: 100%;           /* Tutta la larghezza disponibile */
    text-align: center;     /* I testi rimangono allineati a sinistra per leggibilità */
    margin: 0 auto;        /* Centra la tabella nel contenitore */
    border-collapse: collapse;
}

#codes-modal .modal table td {
    text-align: center;
    padding: 8px 10px;
}

#codes-modal .modal > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#codes-modal .modal > div:last-child {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

#btn-grid-toggle:hover {
    color: #fff !important;
    background: linear-gradient(90deg, #2d9cff, #7b6bff) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 18px rgba(0,194,255,0.25);
}

/* MASTERY POD */
#pod-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #0b2b4e, #1e5a8a);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
}
#pod-overlay.active {
    display: flex;
}

.modal-box {
    background: linear-gradient(135deg, #0b2b4e, #1e5a8a);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

#pod-overlay .modal-box {
    background: rgba(0,0,0,0.4);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 30px;
    width: 90%;
    max-width: 700px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
#pod-title {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #4FC3FF, #A855F7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}
#pod-subtitle {
    text-align: center;
    color: #8fcbff;
    font-size: 14px;
    margin-bottom: 20px;
}
.pod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 12px;
    justify-content: center;
    padding: 10px;
    max-height: 400px;
    overflow-y: auto;
}
/* Pod: elemento griglia */
.pod-item {
    position: relative;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 6px;
    transition: transform 0.2s, background 0.2s, border-color 0.2s;
    cursor: pointer;
}
.pod-item:hover {
    transform: scale(1.1);
    background: rgba(255,255,255,0.15);
    border-color: #FFFFFF;
}

/* Sprite non masterato: immagine offuscata + lucchetto */
.pod-item.locked img {
    filter: grayscale(0.8) brightness(0.6);
    opacity: 0.6;
}
.pod-item.locked .pod-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    z-index: 2;
    pointer-events: none;
}

/* Sprite masterato: bordo dorato */
.pod-item.mastered {
    border-color: #FFD700;
    box-shadow: 0 0 10px rgba(255,215,0,0.3);
}

/* Back bling: colonna sinistra */
#pod-character {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.3);
}

#pod-backbling {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
    z-index: 0;
}

#pod-backbling-selector .btn-adaptive.active {
    border-color: #2fb6ff !important;
    background: rgba(47, 182, 255, 0.15) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(47, 182, 255, 0.2);
}

/* Sprite mostrato dentro il back bling */
#pod-sprite-preview {
    position: absolute;
    top: 41% !important;
    left: 47% !important;
    transform: translate(-50%, -50%) scale(0.8);
    width: 100px !important;
    height: 100px !important;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10 !important;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}

#pod-sprite-preview.show {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.pod-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
.pod-item .name {
    font-size: 9px;
    color: #ddd;
    text-align: center;
    margin-top: 3px;
    font-weight: 700;
}

/* Stile per il dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Contenitore dropdown: bordo e ombra più morbidi */
.dropdown #more-menu {
  background: rgba(11, 18, 32, 0.98);
  border: 1px solid rgba(0, 212, 255, 0.15); /* Bordo leggermente cyan */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 212, 255, 0.1); /* Ombra con leggero glow */
  backdrop-filter: blur(12px);
}

.dropdown #more-menu button {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 4px;
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: background .2s, color .2s;
  cursor: pointer;
}

.dropdown #more-menu button:hover {
  background: rgba(47, 182, 255, 0.1);
  color: #fff;
}

.dropdown #more-menu button:last-child {
  margin-bottom: 0;
}

/* Pulsante "More" - speciale blu ciano */
#btn-more.btn-adaptive.ghost {
  border-color: rgba(0, 212, 255, 0.4);
  color: #00D4FF;
  background: rgba(0, 212, 255, 0.05);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.05);
  transition: all 0.3s ease;
}

#btn-more.btn-adaptive.ghost:hover {
  border-color: #00e5ff;
  background: rgba(0, 212, 255, 0.12);
  color: #ffffff;
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.4), inset 0 0 15px rgba(0, 212, 255, 0.1);
  transform: translateY(-3px) scale(1.05);
}

/* Voce Mastery Pod dentro il dropdown */
#btn-pod.btn-adaptive.ghost {
  border-color: rgba(255, 122, 182, 0.6); /* Rosa acceso */
  color: #ff7ab6;
  background: rgba(255, 122, 182, 0.05);
  box-shadow: 0 0 10px rgba(255, 122, 182, 0.1);
  margin-bottom: 6px; /* Per dargli più risalto */
  transition: all 0.3s ease;
}

#btn-pod.btn-adaptive.ghost:hover {
  border-color: #ff7ab6;
  background: rgba(255, 122, 182, 0.2);
  color: #ffffff;
  box-shadow: 0 0 30px rgba(255, 122, 182, 0.4), inset 0 0 20px rgba(255, 122, 182, 0.1);
  transform: translateY(-3px) scale(1.05);
  padding-left: 16px; /* Piccolo movimento per far capire che è interattivo */
}

.dust-tab.active {
    border-color: #2fb6ff !important;
    background: rgba(47,182,255,0.15) !important;
    color: #fff !important;
}

#dust-rarity-summary .dust-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    font-size: 13px;
    font-weight: 600;
}

/* Checkbox varianti */
.variant-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: all 0.2s;
}

.variant-check input {
  accent-color: #2fb6ff;
}

.variant-check.owned {
  opacity: 0.5;
  cursor: not-allowed;
}

.variant-check:hover {
  border-color: #2fb6ff;
  background: rgba(47,182,255,0.05);
}

/* Fix per il selettore della calcolatrice */
#planner-modal select,
#planner-modal select option {
    background: #1a1d24 !important;
    color: #e6f0f6 !important;
}
#planner-modal select {
    border: 1px solid rgba(255,255,255,0.1);
    padding: 8px 12px;
    border-radius: 6px;
}

#planner-sprite-select {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px;
  color: #e6f0f6;
  font-weight: 600;
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e6f0f6' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

#planner-sprite-select:hover {
  border-color: var(--primary);
  box-shadow: 0 0 20px rgba(47, 182, 255, 0.15);
}

#planner-sprite-select option {
  background: #1a1d24;
  color: #e6f0f6;
  padding: 8px;
}

#planner-sprite-select option:hover {
  background: rgba(47, 182, 255, 0.15);
}

#planner-modal {
  display: flex !important;
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#planner-modal.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

#planner-variants-list {
  transition: opacity 0.2s ease;
}
#planner-variants-list.loading {
  opacity: 0.4;
}

#planner-count, #planner-total, #planner-deficit {
  transition: transform 0.15s ease, color 0.2s ease;
}
#planner-count.updated, #planner-total.updated, #planner-deficit.updated {
  transform: scale(1.1);
  color: #2fb6ff;
}

#planner-selected-list {
  transition: max-height 0.3s ease, opacity 0.2s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
#planner-selected-list.show {
  max-height: 300px;
  opacity: 1;
}

.variant-check input[type="checkbox"] {
  transition: transform 0.15s ease;
}
.variant-check input[type="checkbox"]:checked {
  transform: scale(1.1);
}

/* GARDEN (verde) */
#btn-garden.btn-adaptive.ghost {
  border-color: rgba(0, 230, 118, 0.5);
  color: #00E676;
  background: rgba(0, 230, 118, 0.05);
  transition: all 0.25s cubic-bezier(.2, .9, .3, 1);
}

#btn-garden.btn-adaptive.ghost:hover {
  border-color: #00E676;
  background: rgba(0, 230, 118, 0.15);
  box-shadow: 0 0 30px rgba(0, 230, 118, 0.4), inset 0 0 20px rgba(0, 230, 118, 0.1);
  color: #ffffff;
  transform: translateY(-3px) scale(1.05);
}

/* CALCULATOR (oro/ambra) */
#btn-planner.btn-adaptive.ghost {
  border-color: rgba(255, 209, 102, 0.5);
  color: #FFD166;
  background: rgba(255, 209, 102, 0.05);
  transition: all 0.25s cubic-bezier(.2, .9, .3, 1);
}

#btn-planner.btn-adaptive.ghost:hover {
  border-color: #FFD166;
  background: rgba(255, 209, 102, 0.15);
  box-shadow: 0 0 30px rgba(255, 209, 102, 0.4), inset 0 0 20px rgba(255, 209, 102, 0.1);
  color: #ffffff;
  transform: translateY(-3px) scale(1.05);
}

/* INTRO OVERLAY */
#intro-overlay {
    position: fixed;
    inset: 0;
    background: #0a0a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    transition: opacity 0.8s ease;
}
#intro-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
#intro-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
#intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}
/* Intro poster */
#intro-poster {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 20px;
}
#intro-play {
    padding: 12px 32px;
    background: linear-gradient(90deg, #2fb6ff, #7b6bff);
    border: none;
    border-radius: 30px;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 24px;
}
#intro-play:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(47,182,255,0.3);
}
#intro-skip-poster {
    display: inline-block;
    margin-top: 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    padding: 6px 18px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    text-decoration: none;
}
#intro-skip-poster:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}
#intro-skip {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 10px 24px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 30px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    z-index: 1000000;
    transition: background 0.2s, transform 0.2s;
}
#intro-skip:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

#intro-play, #intro-skip-poster {
    padding: 12px 32px;
    background: linear-gradient(90deg, #2fb6ff, #7b6bff);
    border: none;
    border-radius: 30px;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 12px;
}
#intro-skip-poster {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    padding: 8px 20px;
    margin-left: 12px;
}
#intro-skip-poster:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}

@media (max-width: 600px) {
  #intro-poster {
    padding: 10px;
  }
  #intro-poster > div > div:first-child { /* il div con il logo */
    height: 32px; /* riduci il logo */
  }
  #intro-poster > div > div:nth-child(2) { /* "Welcome to" */
    font-size: 18px !important;
  }
  #intro-poster > div > div:nth-child(3) { /* titolo principale */
    font-size: 22px !important;
  }
  #intro-play, #intro-skip-poster {
    padding: 8px 16px;
    font-size: 14px;
    margin-top: 8px;
  }
  #intro-skip-poster {
    margin-left: 6px;
  }
}

#dance-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

/*  RESET INTRO BUTTON */

#reset-intro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    color: var(--muted, #9aa6b2);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(.2, .9, .3, 1);
    position: relative;
    margin-left: 12px;
    flex-shrink: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow: visible;
}

/* Hover – glow + rotazione */
#reset-intro:hover {
    border-color: rgba(47, 182, 255, 0.45);
    background: rgba(47, 182, 255, 0.08);
    color: #fff;
    transform: rotate(120deg) scale(1.06);
    box-shadow:
        0 0 24px rgba(47, 182, 255, 0.12),
        inset 0 0 24px rgba(47, 182, 255, 0.04);
}

/* Click – feedback tattile */
#reset-intro:active {
    transform: rotate(120deg) scale(0.92);
    box-shadow: 0 0 12px rgba(47, 182, 255, 0.06);
    transition-duration: 0.08s;
}

/* Focus – accessibilità */
#reset-intro:focus-visible {
    outline: 2px solid var(--primary, #2fb6ff);
    outline-offset: 3px;
}

/* COMPAGNO SPRITE */
#companion-sprite {
    position: fixed;
    bottom: 12px;
    right: 7px;
    width: 72px;
    height: 72px;
    z-index: 9999;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 8px 24px rgba(47, 182, 255, 0.35));
    animation: companionFloat 4s ease-in-out infinite alternate;
    transition: transform 0.3s ease, filter 0.3s ease;
	filter: drop-shadow(0 8px 30px rgba(47, 182, 255, 0.5));
	border: 1.5px solid rgba(47, 182, 255, 0.15);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
}

#companion-sprite:hover {
    transform: scale(1.15) rotate(-4deg);
    filter: drop-shadow(0 12px 40px rgba(47, 182, 255, 0.6));
}

/* Selettore companion nel modale */
#companion-select {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: #e6f0f6;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e6f0f6' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

#companion-select:hover {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(47, 182, 255, 0.15);
    transform: translateY(-1px);
}

#companion-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 24px rgba(47, 182, 255, 0.15);
}

#companion-select option {
    background: #1a1d24;
    color: #e6f0f6;
    padding: 8px;
}

/* Label del selettore */
#settings-modal .modal label[for="companion-select"] {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--muted);
    letter-spacing: 0.5px;
    font-size: 13px;
}

@keyframes companionFloat {
    0% { transform: translateY(0px) rotate(-2deg); }
    100% { transform: translateY(-18px) rotate(2deg); }
}

/* Su mobile riduci dimensione e spostalo leggermente */
@media (max-width: 600px) {
    #companion-sprite {
        width: 56px;
        height: 56px;
        bottom: 16px;
        right: 16px;
    }
}
</style>
</head>
<body>

<audio id="bg-music" loop>
  <source src="assets/audios/lobby-music.mp3" type="audio/mp3">
</audio>

<audio id="click-sound" preload="auto">
  <source src="assets/audios/click.mp3" type="audio/mp3">
</audio>

<audio id="extraction-sound" preload="auto">
  <source src="assets/audios/extraction.mp3" type="audio/mp3">
</audio>

<!-- Menu Modal -->
<div id="modal-backdrop" class="modal-backdrop" role="dialog" aria-modal="true" aria-hidden="true">
    <div class="modal" role="document" aria-labelledby="modal-title">
        <div id="modal-header">
            <div id="modal-title" style="font-weight:800">Export menu</div>
            <div id="modal-description" style="font-size:13px;color:var(--muted);margin-top:6px">Choose what to export</div>
        </div>
        <div id="modal-content">
            <div style="margin-top:12px;font-weight:800">🖼️ Export PNG</div>
            <div class="row">
                <div class="option" data-action="all">📁 Entire collection</div>
                <div class="option" data-action="missing">🔍 Missing only</div>
                <div class="option" data-action="current">🎯 Current sprite</div>
            </div>
            <div style="margin-top:12px;font-weight:800">💾 Data</div>
            <div class="row">
                <div class="option" data-action="export-json">📤 Export JSON</div>
                <div class="option" data-action="import-json">📥 Import JSON</div>
            </div>
            <div style="margin-top:12px;font-weight:800">🌐 Community</div>
            <div class="row">
                <div class="option" data-action="share-link">🔗 Copy share link</div>
                <div class="option" data-action="qr">📱 QR Code</div>
                <div class="option" data-action="support">❤️ Support me</div>
                <div class="option" data-action="github">
                   <img src="assets/icons/github.png" style="width:18px;height:18px;display:inline-block;vertical-align:middle;margin-right:6px;"> View on GitHub
                </div>
            </div>
        </div>
        <div id="modal-footer" style="margin-top:12px;display:flex;justify-content:space-between">
            <div style="color:var(--muted);font-size:13px">Last save: <span id="last-save">—</span></div>
            <button id="modal-close" class="btn-adaptive ghost">Close</button>
        </div>
    </div>
</div>

<!-- Statistiche Modal -->
<div id="stats-modal" class="modal-backdrop" role="dialog" aria-modal="true" aria-hidden="true" style="display:none">
    <div class="modal" role="document" aria-labelledby="stats-title">
        <div id="stats-content"></div>
        <div style="margin-top:16px;display:flex;justify-content:flex-end;">
            <button id="stats-close" class="btn-adaptive ghost">Close</button>
        </div>
    </div>
</div>

<!-- QR Code Modal -->
<div id="qr-modal" class="modal-backdrop" role="dialog" aria-modal="true" aria-hidden="true" style="display:none">
    <div class="modal" role="document" aria-labelledby="qr-title">
        <div id="qr-title" style="font-weight:800;font-size:20px;" data-i18n="qr_title">📱 QR Code</div>
        <div style="text-align:center;margin:16px 0;">
            <img id="qr-image" src="" alt="QR Code" style="max-width:200px;border-radius:12px;background:white;padding:8px;">
        </div>
        <div style="font-size:13px;color:var(--muted);text-align:center;" data-i18n="qr_description">Scan this QR code to open the website on another device</div>
        <div style="display:flex;gap:10px;margin-top:16px;justify-content:flex-end;">
            <button id="qr-close" class="btn-adaptive ghost" data-i18n="export_close">Close</button>
        </div>
    </div>
</div>

<!-- Shortcuts Modal -->
<div id="shortcuts-modal" class="modal-backdrop" role="dialog" aria-modal="true" aria-hidden="true" style="display:none">
    <div class="modal" role="document" style="max-width: 780px; width: 90%;" aria-labelledby="shortcuts-title">
        <div id="shortcuts-title" style="font-weight:800;font-size:20px;text-align:center;" data-i18n="shortcuts_title">⌨️ Keyboard Shortcuts</div>
        <div style="display:grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px;">

            <!-- Colonna SINISTRA: shortcut tastiera -->
            <div>
                <div style="font-weight:700; font-size:14px; color:var(--primary); margin-bottom:8px;" data-i18n="shortcuts_keyboard">⌨️ Keyboard</div>
                <div style="display:flex;flex-direction:column; gap:4px;">
                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
                        <span>← / →</span>
                        <span style="color:var(--muted);" data-i18n="shortcut_navigate">Navigate sprites</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
                        <span>Space</span>
                        <span style="color:var(--muted);" data-i18n="shortcut_toggle">Toggle variant</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
                        <span>M</span>
                        <span style="color:var(--muted);" data-i18n="shortcut_music">Play/Pause SFX</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
                        <span>Shift + M</span>
                        <span style="color:var(--muted);" data-i18n="shortcut_mastered">Toggle Mastered</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
                        <span>G</span>
                        <span style="color:var(--muted);" data-i18n="shortcut_grid">Toggle Grid / Locker</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
                        <span>S</span>
                        <span style="color:var(--muted);" data-i18n="shortcut_search">Focus search</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
                        <span>I</span>
                        <span style="color:var(--muted);" data-i18n="shortcut_stats">Open Stats</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
                        <span>E</span>
                        <span style="color:var(--muted);" data-i18n="shortcut_export">Open Export</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
                        <span>J</span>
                        <span style="color:var(--muted);" data-i18n="shortcut_garden">Open Sprite Garden</span>
                    </div>
					<div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
					  <span>K</span>
					  <span style="color:var(--muted);" data-i18n="shortcut_map">Open Map</span>
					</div>
					<div style="display:flex;justify-content:space-between;padding:4px 0;">
                        <span>P</span>
                        <span style="color:var(--muted);" data-i18n="shortcut_pod">Show mastery back bling</span>
                    </div>
					<div style="display:flex;justify-content:space-between;padding:4px 0;">
                        <span>C</span>
                        <span style="color:var(--muted);" data-i18n="shortcut_calculator">Open Sprite Dust Calculator</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
                        <span>↑ ↑ ↓ ↓ ← → ← → b a</span>
                        <span style="color:var(--muted);" data-i18n="shortcut_konami">Switch seasons quickly</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
                        <span>Ctrl+Alt+R</span>
                        <span style="color:var(--muted);" data-i18n="shortcut_retro">Toggle Retro Mode (S4 only)</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;padding:4px 0;">
                        <span>?</span>
                        <span style="color:var(--muted);" data-i18n="shortcut_help">Show this menu</span>
                    </div>
                </div>
            </div>

            <!-- Colonna DESTRA: azioni touch / mobile (solo descrizioni) -->
			<div>
				<div style="font-weight:700; font-size:14px; color:var(--accent); margin-bottom:8px;" data-i18n="shortcuts_touch">📱 Touch / Mobile</div>
				<div style="display:flex;flex-direction:column; gap:4px;">

					<div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
						<span data-i18n="touch_gesture_swipe">Swipe ← / → on sprite</span>
						<span style="color:var(--muted);" data-i18n="shortcut_navigate">Navigate sprites</span>
					</div>

					<div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
						<span data-i18n="touch_gesture_doubletap">Double‑tap on sprite</span>
						<span style="color:var(--muted);" data-i18n="shortcut_toggle">Toggle variant</span>
					</div>

					<div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
						<span data-i18n="touch_gesture_tap_btn">Double-tap Chapter 7 - Season ... header</span>
						<span style="color:var(--muted);" data-i18n="shortcut_search">Focus search</span>
					</div>

					<div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
						<span data-i18n="touch_gesture_doubletap_logo">Double‑tap on website logo</span>
						<span style="color:var(--muted);" data-i18n="shortcut_garden">Open Sprite Garden</span>
					</div>

					<div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
						<span data-i18n="touch_gesture_tap_footer">Tap season in footer</span>
						<span style="color:var(--muted);" data-i18n="shortcut_retro">Toggle Retro Mode (S4 only)</span>
					</div>

				</div>
			</div>
        </div>
        <div style="display:flex; justify-content:flex-end; margin-top:20px;">
            <button id="shortcuts-close" class="btn-adaptive ghost" data-i18n="shortcuts_close">Close</button>
        </div>
    </div>
</div>

<!-- Codici Season 4 Modal -->
<div id="codes-modal" class="modal-backdrop" role="dialog" aria-modal="true" aria-hidden="true" style="display:none">
    <div class="modal" role="document" aria-labelledby="codes-title" style="max-width: 680px; width: 90%;">
        <!-- TITOLO CENTRATO -->
        <div id="codes-title" style="font-weight:800;font-size:20px;text-align:center;margin-bottom:4px;" data-i18n="codes_title">📋 Lobby Codes - Season 4</div>
        
        <!-- DESCRIZIONE CENTRATA -->
        <div id="codes-description" style="font-size:13px;color:var(--muted);text-align:center;margin-top:4px;margin-bottom:12px;" data-i18n="codes_description">
            Use these codes in lobby to unlock special rewards
        </div>
        
        <!-- TABELLA CON THEAD E TBODY -->
        <div style="max-height:450px;overflow-y:auto;width:100%;">
            <table style="width:100%;border-collapse:collapse;font-size:14px;">
                <!-- CORPO DELLA TABELLA -->
                <tbody id="codes-table-body"></tbody>
            </table>
        </div>
        
        <!-- PULSANTE CHIUSURA -->
        <div style="margin-top:16px;display:flex;justify-content:flex-end;width:100%;">
            <button id="codes-close" class="btn-adaptive ghost" data-i18n="codes_close">Close</button>
        </div>
    </div>
</div>

<!-- Map Modal -->
<div id="map-modal" class="modal-backdrop" role="dialog" aria-modal="true" aria-hidden="true" style="display:none">
  <div class="modal" role="document" style="max-width: 90vw; width: auto;">
    <div id="map-title" style="font-weight:800;font-size:20px;text-align:center;">🗺️ Map</div>
    <div style="text-align:center;margin:12px 0;position:relative;">
      <img id="map-image" src="" alt="Map" style="max-width:100%;border-radius:8px;border:1px solid rgba(255,255,255,0.06);">
      <!-- overlay per i marker (opzionale) -->
      <div id="map-markers" style="position:absolute;inset:0;pointer-events:none;"></div>
    </div>
    <div style="display:flex;justify-content:flex-end;margin-top:12px;">
      <button id="map-close" class="btn-adaptive ghost">Close</button>
    </div>
  </div>
</div>

<!-- OVERRIDE MODAL -->
<div id="override-modal" class="glitch-overlay">
    <!-- Sfondo con texture glitch -->
    <div class="glitch-bg"></div>
    <!-- Linee di scansione -->
    <div class="scanlines"></div>
    <!-- Rumore -->
    <div class="noise"></div>
    <!-- Barre di distorsione -->
    <div class="glitch-bars">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <!-- Contenuto testuale -->
    <div class="glitch-content">
        <div class="fortnite-logo">
            <span>F</span><span>O</span><span>R</span><span>T</span><span>N</span><span>I</span><span>T</span><span>E</span>
        </div>
        <div class="chapter-season">CHAPTER 7 • SEASON 4</div>
        <div class="override-title">OVERRIDE</div>
        <div class="slogan">BREAK THE RULES · CHANGE THE GAME</div>
    </div>
</div>

<!-- SPRITE GARDEN OVERLAY -->
<div id="garden-overlay">
    <button id="garden-close" aria-label="Close garden">✕</button>
    <div id="garden-title">🌱 <span data-i18n="garden_title">Sprite Garden</span></div>
    <div id="garden-container"></div>
    <div id="garden-stats">Loading garden...</div>
    <div id="garden-particles"></div>
</div>

<!-- MAP OVERLAY -->
<div id="map-overlay">
  <button id="map-close" style="position:fixed;top:20px;right:24px;...">✕</button>
  <div style="position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;">
    <div id="map-title" style="color:var(--muted);font-size:14px;">Season 3 - Sprite Chests</div>
    <div style="position:relative;width:100%;max-width:92vw;max-height:82vh;">
      <img id="map-image" src="" alt="Map" style="width:100%;height:auto;border-radius:12px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 20px 60px rgba(0,0,0,0.7);display:block;">
      <!-- Marker -->
    </div>
    <div id="map-legend" style="color:var(--muted);font-size:12px;"></div>
  </div>
</div>

<!-- MASTERY POD OVERLAY -->
<div id="pod-overlay" style="display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center;">
    <div class="modal-box" style="max-width: 900px; width: 95%;">
        
        <!-- Intestazione -->
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
			<div>
				<div id="pod-title" style="font-size:24px; font-weight:900; color:white;" data-i18n="pod_title_mastery">MASTERY POD</div>
				<div id="pod-subtitle" style="color:#8fcbff; font-size:14px;" data-i18n="pod_subtitle_s3">Stagione 3</div>
			</div>
			<button id="pod-close" class="btn-adaptive ghost">✕</button>
		</div>

        <!-- Corpo: due colonne -->
        <div style="display: flex; gap: 20px; align-items: stretch;">
            
            <!-- Colonna sinistra: back bling -->
			<div id="pod-left-col" style="flex: 0 0 250px; background: rgba(0,0,0,0.3); border-radius: 15px; padding: 15px; display:flex; flex-direction:column; align-items:center; justify-content:center; border: 1px solid rgba(255,255,255,0.1);">
				<div id="pod-character">
					<img id="pod-backbling" src="assets/ui/mastery-pod.png" alt="Back Bling" style="position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:0;">
					<img id="pod-sprite-preview" src="" alt="Sprite preview" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:120px; height:120px; object-fit:contain; opacity:0; z-index:1;">
				</div>
				<div style="color:white; font-weight:700; margin-top:10px;" data-i18n="pod_backbling_label">Mastery Back Bling</div>
				<div style="color:var(--muted); font-size:12px;" data-i18n="pod_hover_preview">Hover to preview</div>
			</div>

            <!-- Colonna destra: griglia sprite -->
            <div style="flex:1;">
                <div id="pod-container" class="pod-grid" style="max-height: 400px; overflow-y:auto; padding-right:5px;"></div>
            </div>
        </div>
    </div>
</div>

<!-- Dust Calculator Modal -->
<div id="planner-modal" class="modal-backdrop" role="dialog" aria-modal="true" aria-hidden="true">
  <div class="modal" role="document" style="max-width: 680px; width: 90%; background: linear-gradient(180deg, #111827, #0f172a);">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
      <div style="display:flex; align-items:center; gap:10px;">
        <img src="assets/ui/sprite-dust.png" alt="Sprite Dust" style="width:32px; height:32px; object-fit:contain;">
        <div>
          <div style="font-weight:800; font-size:20px;" data-i18n="calculator_title">Sprite Dust Calculator</div>
		  <div style="font-size:13px; color:var(--muted); margin-top:4px;" data-i18n="calculator_subtitle">Select the variants you need to resummon</div>
        </div>
      </div>
      <button id="planner-close" class="btn-adaptive ghost">✕</button>
    </div>

    <!-- Selettore Sprite -->
    <div style="margin-bottom:12px;">
      <div style="margin-bottom:12px;">
		  <label style="font-size:12px; font-weight:700; color:var(--muted); display:block; margin-bottom:6px;" data-i18n="calculator_sprite_label">Sprite</label>
	      <input type="text" id="planner-sprite-input" list="planner-sprite-datalist" placeholder="Search a sprite..." data-i18n-placeholder="calculator_search_placeholder" style="width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:white; padding:10px; border-radius:8px; font-weight:700; outline:none;">
		  <datalist id="planner-sprite-datalist"></datalist>
	  </div>
    </div>

    <!-- Griglia Varianti (tutte selezionabili) -->
    <div id="planner-variants-list" style="display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;">
      <!-- Checkbox generate via JS -->
    </div>

    <!-- Riepilogo SUPERIORE: Current Dust, Variants selected, Total, Missing -->
    <div style="background: rgba(255,255,255,0.03); padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.06); display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px;">
      <!-- Current Sprite Dust -->
      <div>
        <div style="font-size:12px; color:var(--muted);" data-i18n="calculator_current_dust">Current Sprite Dust</div>
        <input type="text" id="planner-dust-input" placeholder="Es. 15000" style="width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:white; padding:8px; border-radius:6px; font-weight:800; margin-top:4px;">
      </div>
      <!-- Variants selected -->
      <div>
        <div style="font-size:12px; color:var(--muted);" data-i18n="calculator_variants_selected">Variants selected</div>
        <div id="planner-count" style="font-size:20px; font-weight:900;">0</div>
      </div>
      <!-- Total -->
      <div>
        <div style="font-size:12px; color:var(--muted);" data-i18n="calculator_resummon_cost">Resummon Cost</div>
        <div id="planner-total" style="font-size:20px; font-weight:900; color:#FFD166;">0 <img src="assets/ui/sprite-dust.png" style="width:24px; height:24px; object-fit:contain; vertical-align:middle;"></div>
      </div>
      <!-- Missing -->
      <div>
        <div style="font-size:12px; color:var(--muted);" data-i18n="calculator_missing_dust">Missing Dust</div>
        <div id="planner-deficit" style="padding:0; border-radius:6px; background:transparent; font-weight:900; color:#FF6B3D; font-size:20px;">0 <img src="assets/ui/sprite-dust.png" style="width:24px; height:24px; object-fit:contain; vertical-align:middle;"></div>
      </div>
    </div>

    <!-- DIVISORE e RIEPILOGO DETTAGLIATO -->
    <hr style="border: 1px solid rgba(255,255,255,0.06); margin: 12px 0;">
    <div style="margin-bottom:12px;">
      <div style="font-size:13px; font-weight:700; color:var(--muted); margin-bottom:6px;" data-i18n="calculator_summary_title">📋 Selected variants summary</div>
      <div id="planner-selected-list" style="max-height:200px; overflow-y:auto; background:rgba(255,255,255,0.02); padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.04);">
        <div style="color:var(--muted); font-size:13px;">No variants selected yet.</div>
      </div>
    </div>

    <!-- Pulsanti -->
    <div style="display:flex; gap:8px; justify-content:space-between; margin-top:8px;">
      <button id="planner-clear" class="btn-adaptive ghost" style="flex:1;" data-i18n="calculator_clear">Clear selection</button>
      <button id="planner-close-footer" class="btn-adaptive ghost" style="flex:1;" data-i18n="calculator_close">Close</button>
    </div>
  </div>
</div>

<!-- VIDEO EASTER EGG OVERLAY -->
<div id="video-overlay" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:99999; align-items:center; justify-content:center; backdrop-filter:blur(8px);">
  <video id="easter-video" src="" controls autoplay style="max-width:90vw; max-height:90vh; border-radius:12px; box-shadow:0 0 60px rgba(0,0,0,0.8);"></video>
  <button id="video-close" style="position:absolute; top:20px; right:24px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:#fff; font-size:24px; width:48px; height:48px; border-radius:50%; cursor:pointer;">✕</button>
</div>

<!-- INTRO OVERLAY -->
<div id="intro-overlay" class="hidden">
    <video id="intro-video" playsinline preload="auto" style="display:none;">
        <source src="assets/videos/intro.mp4" type="video/mp4">
    </video>
    <!-- Schermata di benvenuto con pulsante Play -->
    <div id="intro-poster">
    <div style="text-align:center; color:#fff; font-family: 'Montserrat', sans-serif;">
        <img src="assets/icons/logo.png" alt="Logo" style="height:48px; width:auto; margin-bottom:20px;">
        <div style="font-size:24px; font-weight:800; margin-bottom:8px;" data-i18n="intro_welcome">Welcome to</div>
        <div style="font-size:32px; font-weight:900; background: linear-gradient(90deg, #2fb6ff, #7b6bff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;" data-i18n="intro_title">Fortnite Sprite Locker</div>
        <button id="intro-play" data-i18n="intro_watch">▶ Watch the intro</button>
        <button id="intro-skip-poster" data-i18n="intro_skip">⏭️ Skip</button>
    </div>
    </div>
</div>

<!-- Video del completamento della collezione -->
<video id="dance-video" src="assets/videos/dancing.webm" muted
       style="position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
              width:60%; max-width:800px; height:auto; z-index:99999; 
              pointer-events:none; opacity:0; transition: opacity 0.8s ease;">
</video>

<!-- SETTINGS MODAL -->
<div id="settings-modal" class="modal-backdrop" role="dialog" aria-modal="true" aria-hidden="true">
    <div class="modal" role="document" style="max-width:480px; width:90%;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
            <span style="font-weight:800; font-size:20px;" data-i18n="settings_title">⚙️ Settings</span>
            <button id="settings-close" class="btn-adaptive ghost">✕</button>
        </div>

        <!-- VOLUME -->
        <div style="margin-bottom:16px;">
            <label style="display:block; font-weight:700; margin-bottom:4px;" data-i18n="volume_label">🔊 Volume</label>
            <input type="range" id="volume-slider" min="0" max="1" step="0.01" value="0.1" style="width:100%;">
            <span id="volume-label" style="font-size:13px; color:var(--muted);">10%</span>
        </div>

       <!-- SPRITE COMPANION SELECTOR -->
	   <div style="margin-bottom:16px;">
			<label style="display:block; font-weight:700; margin-bottom:4px;" data-i18n="companion_label">🐾 Sprite Companion</label>
			<select id="companion-select" style="width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:white; padding:8px; border-radius:8px;">
				<!-- Verrà popolato dinamicamente -->
			</select>
			<div style="font-size:12px; color:var(--muted); margin-top:4px;" data-i18n="companion_desc">Choose your favorite sprite companion</div>
	    </div>

		<!-- TOGGLE COMPAGNO SPRITE -->
		<div style="margin-bottom:16px; display:flex; align-items:center; gap:10px;">
			<label style="font-weight:700; cursor:pointer; display:flex; align-items:center; gap:8px;">
				<input type="checkbox" id="companion-toggle" checked>
				<span data-i18n="companion_toggle">Show companion</span>
			</label>
		</div>

        <div style="display:flex; justify-content:flex-end;">
            <button id="settings-close-footer" class="btn-adaptive ghost">Close</button>
        </div>
    </div>
</div>

<!-- Confirm modal -->
<div id="confirm-backdrop" class="confirm-backdrop" aria-hidden="true" style="display:none">
  <div class="confirm-modal" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
    <div id="confirm-title" style="font-weight:800" data-i18n="confirm_title">Confirm</div>
    <div id="confirm-message" style="margin-top:8px;color:var(--muted)"></div>
    <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px">
      <button id="confirm-cancel" class="btn-adaptive ghost" data-i18n="confirm_cancel">Cancel</button>
      <button id="confirm-ok" class="btn-adaptive" data-i18n="confirm_ok">Confirm</button>
    </div>
  </div>
</div>

<!-- Toast container -->
<div id="toast-container" aria-live="polite" aria-atomic="true"></div>

<div class="app" role="application" aria-label="Fortnite Sprite Locker">
  <div class="header">
    <div class="banner" role="banner">
	  <button id="sidebar-toggle" class="btn-adaptive ghost">☰</button>
      <div class="brand"><img src="assets/icons/logo.png" class="site-logo"></div>
      <div class="title">
        <div style="font-size:12px;color:var(--muted)" data-i18n="banner_sub">MY SPRITE COLLECTION</div>
        <div style="font-size:16px;font-weight:800" data-i18n="banner_title">CHAPTER 7 • SEASON 3</div>
      </div>

      <div class="asset-base-wrapper" id="asset-base-wrapper">
        <input id="asset-base-input" placeholder="Percorso immagini (es. Sprites Checklist/assets/sprites/)" style="background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px;border-radius:8px;color:inherit;width:360px;min-width:200px;">
        <button id="asset-base-save" class="btn-adaptive ghost" title="Salva percorso">💾</button>
        <button id="asset-base-hide" class="btn-adaptive ghost" title="Nascondi percorso">✕</button>
      </div>

      <button id="asset-base-show" class="btn-adaptive ghost" style="display:none;" title="Mostra percorso">📁</button>
	  <button id="reset-intro" 
        data-i18n-tooltip="reset_tooltip"
        data-tooltip="Reset welcome">
      🔄
	  </button>
    </div>
	<div class="filter-bar">
	
  <!-- TUTTI I FILTRI IN UN UNICO CONTENITORE -->
  <div class="filter-group">
    <select id="filter-rarity" class="filter-select">
      <option value="all" data-i18n="filter_all">All</option>
      <option value="rare">Rare</option>
      <option value="epic">Epic</option>
      <option value="legendary">Legendary</option>
      <option value="mythic">Mythic</option>
    </select>

    <select id="sort-order" class="filter-select">
      <option value="name-asc" data-i18n="sort_name_asc">Name (A-Z)</option>
      <option value="name-desc" data-i18n="sort_name_desc">Name (Z-A)</option>
      <option value="rarity-desc" data-i18n="sort_rarity_desc">Rarity (rarest first)</option>
      <option value="rarity-asc" data-i18n="sort_rarity_asc">Rarity (rarest last)</option>
      <option value="progress-desc" data-i18n="sort_progress_desc">Completion (high first)</option>
      <option value="progress-asc" data-i18n="sort_progress_asc">Completion (low first)</option>
      <option value="updated-desc" data-i18n="sort_updated_desc">Last updated</option>
    </select>

    <select id="filter-season" class="filter-select">
      <option value="all" data-i18n="filter_all_seasons">All Seasons</option>
      <option value="3" data-i18n="season_3">Season 3 - Runners</option>
      <option value="4" data-i18n="season_4">Season 4 - Override</option>
    </select>

    <label class="toggle-switch small">
      <input type="checkbox" id="toggle-mastered">
      <span class="toggle-slider"></span>
      <span class="toggle-label" data-i18n="hide_mastered">Hide mastered</span>
    </label>

    <label class="toggle-switch small">
      <input type="checkbox" id="toggle-hide-unreleased">
      <span class="toggle-slider"></span>
      <span class="toggle-label" data-i18n="hide_unreleased">Hide unreleased</span>
    </label>

    <label class="toggle-switch small">
      <input type="checkbox" id="toggle-group-rarity">
      <span class="toggle-slider"></span>
      <span class="toggle-label" data-i18n="group_rarity">Group by rarity</span>
    </label>
  </div>

  <!-- LANGUAGE SELECTOR -->
  <select id="lang-selector" class="lang-selector">
    <option value="it">🇮🇹 Italiano</option>
    <option value="en">🇬🇧 English</option>
    <option value="es">🇪🇸 Español</option>
    <option value="fr">🇫🇷 Français</option>
  </select>
</div>
	  
    <div class="controls" role="toolbar" aria-label="Global controls">
	  <button class="btn-adaptive" id="btn-grid-toggle" data-i18n="layout">🔳 Layout</button>
	  <button class="btn-adaptive ghost" id="btn-stats" data-i18n="stats">📊 Stats</button>
	  <button class="btn-adaptive ghost" id="btn-menu" data-i18n="export">⚙️ Export</button>
	  <button class="btn-adaptive ghost" id="music-toggle" data-i18n="music">🔊 SFX</button>
	  
	  <!-- DROPDOWN PER I PULSANTI SECONDARI -->
	  <div class="dropdown" style="position:relative;">
		<button class="btn-adaptive ghost" id="btn-more" data-i18n="more">⋯ More</button>
		<div id="more-menu" style="display:none; position:absolute; right:0; top:100%; background:#0b1220; border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:6px; z-index:1000; box-shadow:0 10px 30px rgba(0,0,0,0.5); min-width:200px;">
		  <button class="btn-adaptive ghost" id="btn-settings" data-i18n="settings" style="width:100%; text-align:left;">⚙️ Settings</button>
		  <button class="btn-adaptive ghost" id="btn-shortcuts-mobile" data-i18n="shortcuts_mobile" style="width:100%; text-align:left;">⚡ Shortcuts</button>
		  <button class="btn-adaptive ghost" id="btn-codes-s4" data-i18n="lobby_codes" style="width:100%; text-align:left;">📋 Lobby Codes S4</button>
		  <button class="btn-adaptive ghost" id="btn-garden" data-i18n="garden_title" style="width:100%; text-align:left;">🌱 Sprite Garden</button>
		  <button class="btn-adaptive ghost" id="btn-planner" data-i18n="calculator_title" style="width:100%; text-align:left;">🧮 Sprite Dust Calculator</button>
		  <button class="btn-adaptive ghost" id="btn-map" data-i18n="map" style="width:100%; text-align:left;">🗺️ Map</button>
		  <button class="btn-adaptive ghost" id="btn-pod" data-i18n="pod" style="width:100%; text-align:left;">🎒 Mastery Pod</button>
	    </div>
	  </div>
	</div>
  </div>

  <aside class="sidebar" aria-label="Lista Sprite">
  <div class="search" role="search">
    <span>🔍</span>
    <input id="sidebar-search" placeholder="Search Sprite..." aria-label="Cerca Sprite" data-i18n-placeholder="search_placeholder">
    <span id="search-clear" class="search-clear" style="display:none; cursor:pointer; font-size:16px; opacity:0.6;">✕</span>
  </div>

    <div style="display:flex;gap:8px;align-items:center;justify-content:space-between">
       <div style="font-weight:800" data-i18n="my_collection">My collection</div>
       <div style="font-size:12px;color:var(--muted)" id="sidebar-stats">—</div>
    </div>

    <!-- PROGRESS BAR GLOBALE -->
<div id="global-progress-wrapper" style="margin-top:4px;">
    <div style="display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:2px;">
        <span data-i18n="collection_progress">Collection progress</span>
        <span id="global-progress-percent">0%</span>
    </div>
    <div id="global-progress-bar" style="
        height:8px;
        border-radius:999px;
        background:rgba(255,255,255,0.06);
        overflow:hidden;
        position:relative;
        transition:box-shadow 0.5s ease;
    ">
        <div id="global-progress-fill" style="
            height:100%;
            width:0%;
            border-radius:999px;
            background:linear-gradient(90deg,var(--primary),var(--accent));
            transition:width 0.8s cubic-bezier(.2,.9,.3,1);
        "></div>
    </div>
    <!-- Badge per le soglie -->
    <div id="progress-badge" style="
        margin-top:4px;
        font-size:10px;
        font-weight:700;
        color:var(--muted);
        text-align:center;
        opacity:0;
        transition:opacity 0.5s ease, transform 0.5s ease;
        transform:translateY(-6px);
    "></div>
</div>

    <div class="list" id="sidebar-list" role="list" aria-label="Elenco Sprite"></div>
  </aside>

  <section class="panel" aria-live="polite">
    <div class="left-panel">
	<div class="sprite-art" id="main-art">
		<div id="main-rarity-tag" class="fortnite-rarity-tag"></div>
		<img id="main-crown" class="main-crown" src="assets/ui/mastered.png" alt="Mastered">
		<img id="main-img" alt="Sprite art">
		<video id="main-video" playsinline style="display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1;"></video>
		<div class="sprite-ghost" id="ghost-large"></div>
	</div>

      <div style="display:flex;gap:8px">
        <button class="btn-adaptive ghost" id="prev" data-i18n="prev">◀ Prev</button>
        <button class="btn-adaptive ghost" id="next" data-i18n="next">Next ▶</button>
      </div>

      <div style="display:flex;gap:8px;margin-top:8px;align-items:center">
        <input type="file" id="sprite-upload" accept="image/*" style="display:none">
      </div>
    </div>

    <div class="right-panel">
      <div style="display:flex;align-items:center;justify-content:space-between" class="sprite-title">
		<img class="mastered-crown">
        <span class="title-large" id="main-name">Water Sprite</span>
      </div>

      <div class="progress-row">
        <div class="percent" id="main-percent">0%</div>
        <div class="bar"><div class="fill" id="main-fill"></div></div>
        <div style="width:80px;text-align:right;color:var(--muted)" id="main-count">0 / 0</div>
      </div>

      <!-- VARIANTS SECTION -->
	  <div style="display:flex;flex-direction:column;gap:8px;margin-top:6px;width:100%;">
			
			<!-- Toggle Mastered (centrato) -->
			<div style="display:flex;justify-content:center;">
				<label class="toggle-switch" style="padding:4px 12px;">
					<span style="font-size:13px;color:var(--muted);margin-right:4px;" data-i18n="mastered">Mastered</span>
					<input type="checkbox" id="main-mastered" aria-label="Mastered toggle">
					<span class="toggle-slider"></span>
				</label>
			</div>
			
			<!-- RIGA 1: Selettore variante (stile variant-info) -->
			<div class="variant-selector-box" style="display:flex;align-items:center;gap:12px;">
				<span class="control-label" style="flex-shrink:0;" data-i18n="selected_variant">Selected variant</span>
				<div style="flex:1;display:flex;justify-content:right;">
					<select id="variant-selector">
						<!-- Le opzioni verranno generate dinamicamente -->
					</select>
				</div>
			</div>
			
			<!-- RIGA 2: Controllo livello (slider, stile variant-info) -->
			<div class="level-control-box" style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
				<span class="control-label" style="flex-shrink:0;" data-i18n="level">Level</span>
				<div style="flex:1;display:flex;align-items:center;gap:12px;min-width:150px;">
					<input type="range" id="level-slider" min="1" max="5" step="1" value="1" style="flex:1;">
					<span class="level-display" id="level-display" style="min-width:24px;text-align:center;font-weight:900;font-size:18px;color:#fff;">1</span>
					<span class="level-max" style="font-size:11px;color:var(--muted);">/ 5</span>
				</div>
			</div>
			
			<!-- Etichetta Variants (come passive/variant-info) -->
			<span class="section-label" data-i18n="variants">Variants</span>
			
			<!-- PULSANTI VARIANTI -->
			<div class="variants-grid" id="variants-grid" aria-label="Varianti"></div>
	  </div>

	  <div class="details" id="details">
		<div>
			<span class="label" data-i18n="passive_ability">Passive ability</span>
			<div style="color:var(--muted);margin-top:6px" id="main-passive" class="variant-info">
				Replenishes shield while in water.
			</div>
		</div>
		<div style="margin-top:18px">
			<span class="label" data-i18n="variant_info">Variant information</span>
			<div class="variant-info">
				<div class="variant-row"><span data-i18n="variant">Variant</span><span id="variant-name">Basic</span></div>
				<div class="variant-row">
					<span data-i18n="summon_cost">Summon cost</span>
					<div class="dust-cost">
						<img src="assets/ui/sprite-dust.png" class="dust-icon">
						<span id="variant-dust">-</span>
					</div>
				</div>
				<div class="variant-row"><span data-i18n="bonus">Bonus</span><span id="variant-bonus">-</span></div>
				<div class="variant-row"><span data-i18n="spawn_rate">Spawn rate</span><span id="variant-spawn">-</span></div>
				<div class="variant-row"><span data-i18n="obtained_via">Obtained via</span><span id="variant-obtain">—</span></div>
				<div class="variant-row"><span data-i18n="level_up">Level up</span><span id="variant-levelup">—</span></div>
				<div class="variant-row variant-divider"></div>
				<div class="variant-row"><span data-i18n="base_spawn">Base sprite spawn rate</span><span id="base-spawn">-</span></div>
			</div>
		</div>
	</div>

      <div style="display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap;">
        <button class="btn-adaptive" id="acquire-all" data-i18n="mark_all">Mark All Acquired</button>
        <button class="btn-adaptive ghost" id="clear-variants" data-i18n="clear">Clear</button>
      </div>
    </div>
  </section>

<div class="footer" aria-hidden="true">
  <div id="footer-stats" data-i18n="footer_sprites">Sprites: 21 • Variants total: —</div>
  <span id="footer-season" style="font-size:11px;color:var(--muted);margin-left:8px;"></span>
  <span id="footer-last-save" style="font-size:11px;color:var(--muted);" data-i18n="footer_last_save">Last save: —</span>
  <a href="https://github.com/mrpaulgaming/fnspritelocker" target="_blank"> View on GitHub</a>
</div>

<input type="file" id="file-import" accept="application/json" style="display:none">

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>

// IMPOSTAZIONI
// Apertura modale impostazioni
document.getElementById('btn-settings').addEventListener('click', function() {
    document.getElementById('settings-modal').style.display = 'flex';
    document.getElementById('settings-modal').setAttribute('aria-hidden', 'false');
});

// Chiusura
['settings-close', 'settings-close-footer'].forEach(id => {
    document.getElementById(id).addEventListener('click', function() {
        document.getElementById('settings-modal').style.display = 'none';
        document.getElementById('settings-modal').setAttribute('aria-hidden', 'true');
    });
});
// Chiusura cliccando fuori
document.getElementById('settings-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        this.style.display = 'none';
        this.setAttribute('aria-hidden', 'true');
    }
});

// --- VOLUME GLOBALE (audio + video) ---
const volumeSlider = document.getElementById('volume-slider');
const volumeLabel = document.getElementById('volume-label');

// Funzione helper per applicare il volume a TUTTI gli elementi audio e video
function applyVolumeToAll(volume) {
    // Seleziona TUTTI gli audio e TUTTI i video
    document.querySelectorAll('audio, video').forEach(el => {
        try {
            el.volume = volume;
        } catch (e) {
            // Ignora eventuali errori su elementi non ancora pronti
        }
    });
}

// Carica il volume salvato all'avvio
const savedVolume = parseFloat(localStorage.getItem('sfx_volume')) || 0.1;
volumeSlider.value = savedVolume;
applyVolumeToAll(savedVolume);
volumeLabel.textContent = Math.round(savedVolume * 100) + '%';

// Quando l'utente muove lo slider
volumeSlider.addEventListener('input', function() {
    const val = parseFloat(this.value);
    applyVolumeToAll(val);
    volumeLabel.textContent = Math.round(val * 100) + '%';
    localStorage.setItem('sfx_volume', val);
});

const companionToggle = document.getElementById('companion-toggle');
const companionEl = document.createElement('div');

// ----- INTRO OVERLAY -----
document.addEventListener('DOMContentLoaded', function() {
    const overlay = document.getElementById('intro-overlay');
    const video = document.getElementById('intro-video');
    const poster = document.getElementById('intro-poster');
    const playBtn = document.getElementById('intro-play');
    const skipPoster = document.getElementById('intro-skip-poster');

    // Se l'intro è già stata mostrata in questa sessione, nascondi tutto SUBITO
    if (localStorage.getItem('introShown') === 'true') {
        return;
    }
	
	overlay.classList.remove('hidden');
	overlay.classList.add('visible');
    function closeIntro() {
		overlay.classList.add('hidden');
		overlay.style.display = 'none';
		localStorage.setItem('introShown', 'true');
		video.pause();
		video.currentTime = 0;
		video.style.display = 'none';
		poster.style.display = 'block';
	}

    function startVideo() {
        poster.style.display = 'none';
        video.style.display = 'block';
		const currentVol = parseFloat(localStorage.getItem('sfx_volume')) || 0.1;
        video.volume = currentVol;
        video.play().catch(err => {
            console.warn('Play bloccato:', err);
            // Se il play fallisce, mostra di nuovo il poster con un messaggio
            poster.style.display = 'block';
            alert('Clicca sul video per avviare l\'intro.');
        });
    }

    // Eventi
    playBtn.addEventListener('click', startVideo);
    skipPoster.addEventListener('click', closeIntro);
    video.addEventListener('ended', closeIntro);

    // Se l'utente clicca sul video (quando è visibile) e non parte, riprova
    video.addEventListener('click', function() {
        if (video.paused) {
            video.play().catch(() => {});
        }
    });
});

// Video che parte a collezione completa
function playDancingSpriteVideo() {
  const video = document.getElementById('dance-video');
  if (!video) return;

  // Rimuovi eventuali listener precedenti
  video.onended = null;
  clearTimeout(window._danceTimer);

  // Prepara il video
  video.muted = false;
  video.currentTime = 0;
  
  const currentVol = parseFloat(localStorage.getItem('sfx_volume')) || 0.1;
  video.volume = currentVol;
	
  video.style.opacity = '1';

  // ---- Quando il video finisce naturalmente ----
  video.onended = function() {
    // Applica la dissolvenza (la transizione CSS è già impostata)
    video.style.opacity = '0';
    // Dopo la dissolvenza (0.8s), ferma e ripristina
    setTimeout(() => {
      video.pause();
      video.currentTime = 0;
      video.muted = true;
      video.onended = null;
    }, 800);
  };

  // ---- Fallback di sicurezza (se il video non parte o dura troppo) ----
  window._danceTimer = setTimeout(() => {
    // Se il video è ancora visibile, forzane la chiusura
    if (video.style.opacity !== '0') {
      video.style.opacity = '0';
      setTimeout(() => {
        video.pause();
        video.currentTime = 0;
        video.muted = true;
        video.onended = null;
      }, 800);
    }
  }, 10000); // 10 secondi di sicurezza

  // Avvia la riproduzione
  video.play().catch(() => {
    // Se non parte, nascondi subito
    video.style.opacity = '0';
    video.muted = true;
    clearTimeout(window._danceTimer);
  });
}

function formatNumber(num) {
  const localeMap = {
    'it': 'it-IT',
    'en': 'en-US',
    'es': 'es-ES',
    'fr': 'fr-FR'
  };
  const locale = localeMap[currentLang] || 'en-US';
  return num.toLocaleString(locale);
}

const sidebarToggle = document.getElementById('sidebar-toggle');
const sidebar = document.querySelector('.sidebar');

if (sidebarToggle) {
    sidebarToggle.addEventListener('click', function() {
        sidebar.classList.toggle('open');
        
		// Cambia icona
        this.textContent = sidebar.classList.contains('open') ? '✕' : '☰';
    });
}

let renderCounter = 0;
let konamiIndex = 0;
let videoTapCount = 0;
let videoTapTimer = null;
let currentVideoIndex = 0;
let isVideoSequenceActive = false
let animationsEnabled = false;
let currentVideoSrc = null;
let videoIndex = {}; 

// ---- EASTER EGG GLOBALI ----
let retroModeActive = false;
let clickCounter = 0;
let soundEffectsEnabled = false;

/* ---------- MUSICA ---------- */
const audio = document.getElementById('bg-music');
let musicPlaying = false;
const musicBtn = document.getElementById('music-toggle');

musicBtn.addEventListener('click', () => {
  if (musicPlaying) {
    audio.pause();
    musicPlaying = false;
    soundEffectsEnabled = false;
    musicBtn.textContent = '🔇 SFX';
    animationsEnabled = false;
    hideVideo();
  } else {
    const playPromise = audio.play();
    if (playPromise !== undefined) {
      playPromise
        .then(() => {
          musicPlaying = true;
          soundEffectsEnabled = true;
          audio.volume = 0.1;
          musicBtn.textContent = '🔊 SFX';
          soundEffectsEnabled = musicPlaying;
          animationsEnabled = true;
          // Riavvia il video per lo sprite corrente
          const sp = SPRITES[currentIndex];
          if (sp) {
              videoIndex[sp.id] = 0;
              loadVideoForSprite(sp);
          }
        })
        .catch(error => {
          console.warn('[VIDEO] Playback bloccato:', error);
          musicPlaying = false;
          soundEffectsEnabled = false;
          musicBtn.textContent = '🔇 SFX';
          animationsEnabled = false;
          hideVideo();
        });
    }
  }
});

const originalLeftPanel = document.querySelector('.left-panel');
const originalRightPanel = document.querySelector('.right-panel');

/* ---------- DATA ---------- */
const SPRITES = [

// --------- SEASON 3 - RUNNERS -----------------

// --- ACQUA ---
{ id:"water", name:"Water", season: 3, passive:"Replenishes Shield for its user and their squadmates while in water.", variants:["basic","gold","gummy","galaxy","holofoil","gem","quack"], unreleasedVariants:[], rarity:"rare", unreleased:false,
  spawn:{ basic:"0%", gold:"0.75%", gummy:"0.62%", galaxy:"0.5%", holofoil:"0.25%", gem:"0%", quack:"0.01%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", holofoil:"chest", gem:"chest", quack:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- TERRA ---
{ id:"earth", name:"Earth", season: 3, passive:"Increased chance to find additional rare items when opening chests.", variants:["basic","gold","gummy","galaxy","cube","gem","quack"], unreleasedVariants:[], rarity:"rare", unreleased:false,
  spawn:{ basic:"0%", gold:"0.75%", gummy:"0.62%", galaxy:"0.5%", cube:"0%", gem:"0%", quack:"0.01%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", cube:"chest", gem:"chest", quack:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- FUOCO ---
{ id:"fire", name:"Fire", season: 3, passive:"Creates a Fire burst upon dealing enough damage to an enemy.", variants:["basic","gold","gummy","galaxy","holofoil","cube","quack"], unreleasedVariants:[], rarity:"rare", unreleased:false,
  spawn:{ basic:"0%", gold:"0.75%", gummy:"0.62%", galaxy:"0.5%", holofoil:"0.25%", cube:"0%", quack:"0.01%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", holofoil:"chest", cube:"chest", quack:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- PAPERA ---
{ id:"duck", name:"Duck", season: 3, passive:"Emoting or Jamming replenishes Shield.", variants:["basic","gold","gummy","galaxy","gem","cube"], unreleasedVariants:["cube"], rarity:"epic", unreleased:false,
  spawn:{ basic:"9%", gold:"0.4%", gummy:"0.3%", galaxy:"0.16%", gem:"0%", cube:"0%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", gem:"chest", cube:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- FANTASMA ---
{ id:"ghost", name:"Ghost", season: 3, passive:"Grants Cloak for a short duration upon reloading.", variants:["basic","gold","gummy","galaxy","holofoil"], unreleasedVariants:[], rarity:"epic", unreleased:false,
  spawn:{ basic:"9%", gold:"0.4%", gummy:"0.3%", galaxy:"0.16%", holofoil:"0.06%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", holofoil:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- SOGNO ---
{ id:"dream", name:"Dream", season: 3, passive:"Grants a random item every time the Sprite is leveled up. It automatically explodes with Legendary loot, resets to Level 1 and auto-extracts upon reaching its maximum level.", variants:["basic","gold","gummy","galaxy","cube"], unreleasedVariants:[], rarity:"legendary", unreleased:false,
  spawn:{ basic:"6.98%", gold:"0.31%", gummy:"0.23%", galaxy:"0.12%", cube:"0%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", cube:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- DEMONE ---
{ id:"demon", name:"Demon", season: 3, passive:"Grants Siphon upon eliminating an opponent.", variants:["basic","gold","gummy","galaxy","gem","cube","holofoil"], unreleasedVariants:["cube","holofoil"], rarity:"epic", unreleased:false,
  spawn:{ basic:"9%", gold:"0.4%", gummy:"0.3%", galaxy:"0.16%", gem:"0%", cube:"0%", holofoil:"0%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", gem:"chest", cube:"chest", holofoil:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- PUNK ---
{ id:"punk", name:"Punk", season: 3, passive:"Does nothing until Level 5, in which it will always grant a buff for unlimited ammo.", variants:["basic","gold","gummy","galaxy","cube","gem","holofoil"], unreleasedVariants:["gem","holofoil"], rarity:"legendary", unreleased:false,
  spawn:{ basic:"6.98%", gold:"0.31%", gummy:"0.23%", galaxy:"0.12%", cube:"0%", gem:"0%", holofoil:"0%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", cube:"chest", gem:"chest", holofoil:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- RE ---
{ id:"king", name:"King", season: 3, passive:"Grants increased Pickaxe damage.", variants:["basic","gold","gummy","galaxy","holofoil","cube","gem"], unreleasedVariants:["cube","gem"], rarity:"epic", unreleased:false,
  spawn:{ basic:"9%", gold:"0.4%", gummy:"0.3%", galaxy:"0.16%", holofoil:"0.06%", cube:"0%", gem:"0%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", holofoil:"chest", cube:"chest", gem:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- PUNTO ZERO ---
{ id:"zeropoint", name:"Zero Point", season: 3, passive:"Spawns a Shield Bubble Jr. around the player when they use a healing item.", variants:["basic","gold","gummy","galaxy","holofoil", "cube","gem","quack"], unreleasedVariants:[], rarity:"mythic", unreleased:false,
  spawn:{ basic:"0.00093%", gold:"0.000041%", gummy:"0.000031%", galaxy:"0.000016%", holofoil:"0.000008%", cube:"0.000001%", gem:"0%", quack:"0.000001%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", holofoil:"chest", cube:"chest", gem:"chest", quack:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- ARACHIDE BRUCIATA ---
{ id:"burntpeanut", name:"Burnt Peanut", season: 3, passive:"Grants a low chance for additional loot from eliminations, including MYTHIC loot.", variants:["basic"], unreleasedVariants:[], rarity:"mythic", unreleased:false,
  spawn:{ basic:"0%" },
  obtain: { basic:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- PESCE ---
{ id:"fishy", name:"Fishy", season: 3, passive:"Swim faster and gain a brief speed boost when damaged.", variants:["basic","gold","gummy","galaxy","cube"], unreleasedVariants:[], rarity:"rare", unreleased:false,
  spawn:{ basic:"0%", gold:"0.75%", gummy:"0.62%", galaxy:"0.5%", cube:"0%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", cube:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- STRIKER ---
{ id:"striker", name:"Striker", season: 3, passive:"Gain an Overdrive boost when you mantle, hurdle, or wall scramble.", variants:["basic","gold","gummy","galaxy","holofoil"], unreleasedVariants:[], rarity:"epic", unreleased:false,
  spawn:{ basic:"6.98%", gold:"0.31%", gummy:"0.23%", galaxy:"0.12%", holofoil:"0.05%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", holofoil:"chest" },
  levelUp: "Chests"
},
// --- AURA ---
{ id:"aura", name:"Aura", season: 3, passive:"Gain a Shock Rock charge when you deal enough damage to enemies.", variants:["basic","gold","gummy","galaxy","gem"], unreleasedVariants:[], rarity:"epic", unreleased:false,
  spawn:{ basic:"6.98%", gold:"0.31%", gummy:"0.23%", galaxy:"0.12%", gem:"0%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", gem:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- BOSS ---
{ id:"boss", name:"Boss", season: 3, passive:"Boosts your maximum Health and Shield.", variants:["basic","gold","gummy","galaxy","cube"], unreleasedVariants:[], rarity:"legendary", unreleased:false,
  spawn:{ basic:"6.98%", gold:"0.31%", gummy:"0.23%", galaxy:"0.12%", cube:"0%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", cube:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- GRIM ---
{ id:"grim", name:"Grim", season: 3, passive:"Opponents who attacks its user get Scanned for a short duration of time.", variants:["basic","gold","gummy","galaxy","holofoil","cube","gem"], unreleasedVariants:[], rarity:"mythic", unreleased:false,
  spawn:{ basic:"0.09%", gold:"0%", gummy:"0%", galaxy:"0%", holofoil:"0%", cube:"0%", gem:"0%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", holofoil:"chest", cube:"chest", gem:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- ARIA ---
{ id:"air", name:"Air", season: 3, passive:"Increases sprinting speed and jump height.", variants:["basic","gold","gummy","galaxy","holofoil"], unreleasedVariants:[], rarity:"rare", unreleased:false,
  spawn:{ basic:"0%", gold:"0.75%", gummy:"0.62%", galaxy:"0.5%", holofoil:"0.25%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", holofoil:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- SETTE ---
{ id:"seven", name:"Seven", season: 3, passive:"Reveal enemy foot trails to all nearby squadmates around the island.", variants:["basic","gold","gummy","galaxy","holofoil"], unreleasedVariants:[], rarity:"legendary", unreleased:false,
  spawn:{ basic:"6.98%", gold:"0.31%", gummy:"0.23%", galaxy:"0.12%", holofoil:"0.05%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", holofoil:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- BATMAN ---
{ id:"batman", name:"Batman", season: 3, passive:"Launches the user upwards and deploy Bat Cape.", variants:["basic","gold","gummy","galaxy","holofoil","cube"], unreleasedVariants:[], rarity:"mythic", unreleased:false,
  spawn:{ basic:"2.23%", gold:"0.1%", gummy:"0.07%", galaxy:"0.04%", holofoil:"0.01%", cube:"0%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", holofoil:"chest", cube:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- POLLO ---
{ id:"pollo", name:"Pollo", season: 3, passive:"Replenishes Shield for its user and their squadmates in a short amount of time after eliminating an enemy player.", variants:["basic"], unreleasedVariants:[], rarity:"mythic", unreleased:false,
  spawn:{ basic:"0%" },
  obtain: { basic:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- VINI JR ---
{ id:"vini", name:"Vini Jr.", season: 3, passive:"Grants a heavy increase to structural damage after sprinting and an Overdrive after sliding, slide-kicking the enemies will increases fire rate and reload speed buff.", variants:["basic"], unreleasedVariants:[], rarity:"mythic", unreleased:false,
  spawn:{ basic:"0%" },
  obtain: { basic:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- LLAMA ---
{ id:"llama", name:"Llama", season: 3, passive:"Opening ammo boxes has a chance to grant a weapon upgrade.", variants:["basic","gold","gummy","galaxy","gem"], unreleasedVariants:[], rarity:"legendary", unreleased:false,
  spawn:{ basic:"6.98%", gold:"0.31%", gummy:"0.23%", galaxy:"0.12%", gem:"0%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", gem:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- PEELY ---
{ id:"peely", name:"Peely", season: 3, passive:"Emits a ping for players with rare Sprites nearby but marks you on the map.", variants:["basic","gold","gummy","galaxy","holofoil"], unreleasedVariants:[], rarity:"legendary", unreleased:false,
  spawn:{ basic:"6.98%", gold:"0.31%", gummy:"0.23%", galaxy:"0.12%", holofoil:"0.05%" },
  obtain: { basic:"chest", gold:"chest", gummy:"chest", galaxy:"chest", holofoil:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- IRONMOUSE ---
{ id:"ironmouse", name:"Ironmouse", season: 3, passive:"Regenerate health over time when low. While regenerating, gain Cloak and low gravity.", variants:["basic"], unreleasedVariants:[], rarity:"mythic", unreleased:false,
  spawn:{ basic:"0.09%" },
  obtain: { basic:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- JOHN WICK ---
{ id:"johnwick", name:"John Wick", season: 3, passive:"Knocking players reveals other nearby.", variants:["basic"], unreleasedVariants:[], rarity:"mythic", unreleased:false,
  spawn:{ basic:"0%" },
  obtain: { basic:"chest" },
  levelUp: "📦 Chests | 💀 Eliminations"
},

// --------- SEASON 4 - OVERRIDE ---------

// --- SONIC ---
{ id:"sonic", name:"Sonic", season: 4, passive:"Lets you use Sonic's Spin Dash and boosts your sprinting speed. Sprint faster with each Level Up.", variants:["basic","gold","cheat"], unreleasedVariants:[], rarity:"epic", unreleased:false,
  spawn:{ basic:"0%", gold:"0.4%", cheat:"0.2%" },
  obtain: { basic: "code", gold: "code", cheat: "lobby" }, 
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- TAILS ---
{ id:"tails", name:"Tails", season: 4, passive:"Lets you hover and glide through the air with the help of Tails.", variants:["basic","gold","cheat"], unreleasedVariants:[], rarity:"epic", unreleased:false,
  spawn:{ basic:"0%", gold:"0.4%", cheat:"0.2%" },
  obtain: { basic: "code", gold: "code", cheat: "lobby" }, 
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- SHADOW ---
{ id:"shadow", name:"Shadow", season: 4, passive:"Automatically reloads weapons over time even when unequipped.", variants:["basic","gold","cheat"], unreleasedVariants:[], rarity:"epic", unreleased:false,
  spawn:{ basic:"0%", gold:"0.4%", cheat:"0.2%" },
  obtain: { basic:"code", gold:"code", cheat:"code" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- ADVENTURE ---
{ id:"adventure", name:"Adventure", season: 4, passive:"Upgrades a random item in your inventory at each level. It automatically resets to Level 1 and auto-extracts upon reaching its maximum level.", variants:["basic","gold","cheat"], unreleasedVariants:[], rarity:"rare", unreleased:false,
  spawn:{ basic:"0%", gold:"0.75%", cheat:"0.5%" },
  obtain: { basic:"code", gold:"code", cheat:"lobby" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- BUSH ---
{ id:"bush", name:"Bush", season: 4, passive:"Spawns a Bush on you after a duration. At max level, gain a Bush on elimination.", variants:["basic","gold","cheat"], unreleasedVariants:[], rarity:"rare", unreleased:false,
  spawn:{ basic:"0%", gold:"0.75%", cheat:"0.5%" },
  obtain: { basic:"code", gold:"code", cheat:"lobby" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- JONESY ---
{ id:"jonesy", name:"Jonesy", season: 4, passive:"After a short duration, recovers some Health or Shield after being damaged.", variants:["basic","gold","cheat"], unreleasedVariants:[], rarity:"rare", unreleased:false,
  spawn:{ basic:"0%", gold:"0.75%", cheat:"0.5%" },
  obtain: { basic:"code", gold:"lobby", cheat:"lobby" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- 8-BIT ---
{ id:"8bit", name:"8-Bit", season: 4, passive:"Find an 8-Bit Shotgun in your first Chest and gain a core multiplier for it.", variants:["basic","gold","cheat"], unreleasedVariants:[], rarity:"rare", unreleased:false,
  spawn:{ basic:"0%", gold:"0.75%", cheat:"0.5%" },
  obtain: { basic:"code", gold:"code", cheat:"lobby" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- STORM SCOUT ---
{ id:"stormking", name:"Storm Scout", season: 4, passive:"Reveals the next storm circle early.", variants:["basic","gold","cheat"], unreleasedVariants:[], rarity:"rare", unreleased:true,
  spawn:{ basic:"0%", gold:"0.75%", cheat:"0.5%" },
  obtain: { basic:"code", gold:"code", cheat:"code" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- KILLSWITCH ---
{ id:"killswitch", name:"Killswitch", season: 4, passive:"Enter Hangtime with improved accuracy.", variants:["basic","gold","cheat"], unreleasedVariants:[], rarity:"epic", unreleased:false,
  spawn:{ basic:"0%", gold:"0.4%", cheat:"0.2%" },
  obtain: { basic:"code", gold:"code", cheat:"code" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- JACKRABBIT ---
{ id:"jackrabbit", name:"Jackrabbit", season: 4, passive:"Perform another jump while mid-air (double jump).", variants:["basic","gold","cheat"], unreleasedVariants:[], rarity:"legendary", unreleased:false,
  spawn:{ basic:"0%", gold:"0.31%", cheat:"0.15%" },
  obtain: { basic:"code", gold:"code", cheat:"code" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- KLOMBO ---
{ id:"klombo", name:"Klombo", season: 4, passive:"Grants random items at each level.", variants:["basic","gold","cheat"], unreleasedVariants:[], rarity:"mythic", unreleased:false,
  spawn:{ basic:"0%", gold:"0.04%", cheat:"0.02%" },
  obtain: { basic:"code", gold:"code", cheat:"code" },
  levelUp: "Consumables (Shield)"
},
// --- CROWN (Victory Crown) ---
{ id:"crown", name:"Victory Crown", season: 4, passive:"Gain extra Crown Wins after getting a Victory Royale. You can only level it up by winning matches.", variants:["basic","gold","cheat"], unreleasedVariants:[], rarity:"mythic", unreleased:false,
  spawn:{ basic:"0%", gold:"0.04%", cheat:"0.02%" },
  obtain: { basic:"code", gold:"code", cheat:"code" },
  levelUp: "Victory Royale"
},
// --- X-RAY ---
{ id:"xray", name:"X-Ray", season: 4, passive:"Reveal players through walls and other objects for a short time.", variants:["basic"], unreleasedVariants:[], rarity:"mythic", unreleased:true,
  spawn:{ basic:"0%" },
  obtain: { basic:"code" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- POND ---
{ id:"pond", name:"Pond", season: 4, passive:"Increases your movement speed in water as it evolves through its stages, adding increased jump height and fall damage reduction.", variants:["basic"], unreleasedVariants:[], rarity:"mythic", unreleased:true,
  spawn:{ basic:"0%" },
  obtain: { basic:"code" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- HONEY ---
{ id:"honey", name:"Honey", season: 4, passive:"When a nearby enemy damages you, it causes a beehive to quickly emerge and release a swarm of bees that pursues and attacks the attacker.", variants:["basic"], unreleasedVariants:[], rarity:"mythic", unreleased:true,
  spawn:{ basic:"0%" },
  obtain: { basic:"code" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- DUMPSTER DIVE ---
{ id:"dumpster", name:"Dumpster Dive", season: 4, passive:"Gather extra loot whenever you jump into a dumpster.", variants:["basic"], unreleasedVariants:[], rarity:"mythic", unreleased:true,
  spawn:{ basic:"0%" },
  obtain: { basic:"code" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
// --- BULLET ---
{ id:"bullet", name:"Bullet", season: 4, passive:"Ammo boxes grant slightly more ammunition.", variants:["basic"], unreleasedVariants:[], rarity:"mythic", unreleased:true,
  spawn:{ basic:"0%" },
  obtain: { basic:"code" },
  levelUp: "📦 Chests | 💀 Eliminations"
},
];

const SPRITE_VIDEOS = {
    water: [
        'assets/videos/water_1.webm',
        'assets/videos/water_2.webm',
        'assets/videos/water_3.webm',
		'assets/videos/water_4.webm',
		'assets/videos/water_5.webm',
		'assets/videos/water_6.webm',
		'assets/videos/water_7.webm'
    ],
};

const PASSIVE_TRANSLATIONS = {
    it: {
        "Replenishes Shield for its user and their squadmates while in water.": "Ricarica lo scudo per l'utente e i suoi compagni quando sono in acqua.",
        "Increased chance to find additional rare items when opening chests.": "Maggiore possibilità di trovare oggetti rari aggiuntivi quando apri forzieri.",
        "Creates a Fire burst upon dealing enough damage to an enemy.": "Crea un'esplosione di Fuoco dopo aver inflitto abbastanza danni a un nemico.",
        "Emoting or Jamming replenishes Shield.": "Emote o Jamming ricaricano lo scudo.",
        "Grants Cloak for a short duration upon reloading.": "Concede il Cloak per breve tempo dopo aver ricaricato.",
        "Grants a random item every time the Sprite is leveled up. It automatically explodes with Legendary loot, resets to Level 1 and auto-extracts upon reaching its maximum level.": "Concede un oggetto casuale ogni volta che lo Sprite sale di livello. Esplode automaticamente con bottino Leggendario, si resetta al Livello 1 e si auto‑estrae al raggiungimento del livello massimo.",
        "Grants Siphon upon eliminating an opponent.": "Concede Sifone dopo aver eliminato un avversario.",
        "Does nothing until Level 5, in which it will always grant a buff for unlimited ammo.": "Non fa nulla fino al Livello 5, in cui garantirà sempre un potenziamento per munizioni infinite.",
        "Grants increased Pickaxe damage.": "Aumenta il danno del piccone.",
        "Spawns a Shield Bubble Jr. around the player when they use a healing item.": "Genera una Bolla Scudo Jr. attorno al giocatore quando usa un oggetto curativo.",
        "Grants a low chance for additional loot from eliminations, including MYTHIC loot.": "Concede una piccola possibilità di ottenere bottino aggiuntivo dalle eliminazioni, incluso bottino MITICO.",
        "Swim faster and gain a brief speed boost when damaged.": "Nuota più velocemente e ottieni un breve aumento di velocità quando subisci danni.",
        "Gain an Overdrive boost when you mantle, hurdle, or wall scramble.": "Ottieni un potenziamento Overdrive quando ti arrampichi, superi ostacoli o ti arrampichi sui muri.",
        "Gain a Shock Rock charge when you deal enough damage to enemies.": "Ottieni una carica di Shock Rock quando infliggi abbastanza danni ai nemici.",
        "Boosts your maximum Health and Shield.": "Aumenta la salute e lo scudo massimi.",
        "Opponents who attacks its user get Scanned for a short duration of time.": "I nemici che attaccano il suo utilizzatore vengono Scansionati per breve tempo.",
        "Increases sprinting speed and jump height.": "Aumenta la velocità di corsa e l'altezza del salto.",
        "Reveal enemy foot trails to all nearby squadmates around the island.": "Rivela le tracce dei nemici a tutti i compagni vicini sull'isola.",
        "Launches the user upwards and deploy Bat Cape.": "Lancia l'utilizzatore verso l'alto e attiva il Mantello di Pipistrello.",
        "Replenishes Shield for its user and their squadmates in a short amount of time after eliminating an enemy player.": "Ricarica lo scudo per l'utente e i suoi compagni in breve tempo dopo aver eliminato un giocatore nemico.",
        "Grants a heavy increase to structural damage after sprinting and an Overdrive after sliding, slide-kicking the enemies will increases fire rate and reload speed buff.": "Concede un forte aumento del danno strutturale dopo lo sprint e un Overdrive dopo lo scivolamento, il calcio scivolando sui nemici aumenterà la velocità di fuoco e la ricarica.",
        "Opening ammo boxes has a chance to grant a weapon upgrade.": "Aprire casse di munizioni ha una possibilità di concedere un potenziamento dell'arma.",
        "Emits a ping for players with rare Sprites nearby but marks you on the map.": "Emette un ping per i giocatori con Sprites rari vicini ma ti segna sulla mappa.",
        "Regenerate health over time when low. While regenerating, gain Cloak and low gravity.": "Rigenera salute nel tempo quando sei basso. Durante la rigenerazione, ottieni Cloak e bassa gravità.",
        "Knocking players reveals other nearby.": "Mettere KO i giocatori rivela altri vicini.",
        "Reveal players through walls and other objects for a short time.": "Rivela i giocatori attraverso muri e altri oggetti per breve tempo.",
        "Increases your movement speed in water as it evolves through its stages, adding increased jump height and fall damage reduction.": "Aumenta la velocità di movimento in acqua mentre si evolve attraverso le sue fasi, aggiungendo maggiore altezza di salto e riduzione del danno da caduta.",
        "When a nearby enemy damages you, it causes a beehive to quickly emerge and release a swarm of bees that pursues and attacks the attacker.": "Quando un nemico vicino ti danneggia, fa emergere rapidamente un alveare che rilascia uno sciame di api che insegue e attacca l'aggressore.",
        "Gather extra loot whenever you jump into a dumpster.": "Raccogli bottino extra ogni volta che salti in un cassonetto.",
        "Ammo boxes grant slightly more ammunition.": "Le casse di munizioni concedono leggermente più munizioni.",
		"Lets you use Sonic's Spin Dash and boosts your sprinting speed.": "Ti permette di usare lo Spin Dash di Sonic e aumenta la velocità di sprint.",
		"Lets you hover through the air.": "Ti permette di fluttuare nell'aria.",
		"Ability not yet revealed.": "Abilità non ancora rivelata.",
		"Grants a brief cloaking effect after standing still for a short time.": "Concede un effetto di mimetizzazione breve dopo essere rimasto fermo per un po'.",
		"Increases weapon reload speed after a kill.": "Aumenta la velocità di ricarica delle armi dopo un'eliminazione.",
		"Grants a small amount of shield when opening chests.": "Concede una piccola quantità di scudo quando apri forzieri.",
		"Converts eliminated enemies into ammo.": "Trasforma i nemici eliminati in munizioni.",
		"Reveals the next storm circle early.": "Rivela in anticipo il prossimo cerchio della tempesta.",
		"Grants increased movement speed while in shadows.": "Aumenta la velocità di movimento quando sei nell'ombra.",
		"Lets you use Sonic's Spin Dash and boosts your sprinting speed. Sprint faster with each Level Up.": "Ti permette di usare lo Spin Dash di Sonic e aumenta la velocità di sprint. Corri più veloce a ogni livello.",
		"Lets you hover and glide through the air with the help of Tails.": "Ti permette di planare e fluttuare nell'aria con l'aiuto di Tails.",
		"Automatically reloads weapons over time even when unequipped.": "Ricarica automaticamente le armi nel tempo anche quando non sono equipaggiate.",
		"Upgrades a random item in your inventory at each level. It automatically resets to Level 1 and auto-extracts upon reaching its maximum level.": "Potenziamento di un oggetto casuale nell'inventario a ogni livello. Si resetta automaticamente al Livello 1 e si auto‑estrae al raggiungimento del livello massimo.",
		"Spawns a Bush on you after a duration. At max level, gain a Bush on elimination.": "Genera un Cespuglio su di te dopo un po' di tempo. Al livello massimo, ottieni un Cespuglio dopo un'eliminazione.",
		"After a short duration, recovers some Health or Shield after being damaged.": "Dopo un breve periodo, recupera un po' di Salute o Scudo dopo aver subito danni.",
		"Find an 8-Bit Shotgun in your first Chest and gain a core multiplier for it.": "Trova un Fucile a Pompa 8-Bit nel tuo primo Forziere e ottieni un moltiplicatore per esso.",
		"Enter Hangtime with improved accuracy.": "Entra in Hangtime con precisione migliorata.",
		"Perform another jump while mid-air (double jump).": "Esegui un altro salto mentre sei in aria (doppio salto).",
		"Grants random items at each level.": "Concede oggetti casuali a ogni livello.",
		"Gain extra Crown Wins after getting a Victory Royale. You can only level it up by winning matches.": "Ottieni Corone extra dopo una Vittoria Reale. Puoi salire di livello solo vincendo partite."
    },
    en: {
        "Replenishes Shield for its user and their squadmates while in water.": "Replenishes Shield for its user and their squadmates while in water.",
        "Increased chance to find additional rare items when opening chests.": "Increased chance to find additional rare items when opening chests.",
        "Creates a Fire burst upon dealing enough damage to an enemy.": "Creates a Fire burst upon dealing enough damage to an enemy.",
        "Emoting or Jamming replenishes Shield.": "Emoting or Jamming replenishes Shield.",
        "Grants Cloak for a short duration upon reloading.": "Grants Cloak for a short duration upon reloading.",
        "Grants a random item every time the Sprite is leveled up. It automatically explodes with Legendary loot, resets to Level 1 and auto-extracts upon reaching its maximum level.": "Grants a random item every time the Sprite is leveled up. It automatically explodes with Legendary loot, resets to Level 1 and auto-extracts upon reaching its maximum level.",
        "Grants Siphon upon eliminating an opponent.": "Grants Siphon upon eliminating an opponent.",
        "Does nothing until Level 5, in which it will always grant a buff for unlimited ammo.": "Does nothing until Level 5, in which it will always grant a buff for unlimited ammo.",
        "Grants increased Pickaxe damage.": "Grants increased Pickaxe damage.",
        "Spawns a Shield Bubble Jr. around the player when they use a healing item.": "Spawns a Shield Bubble Jr. around the player when they use a healing item.",
        "Grants a low chance for additional loot from eliminations, including MYTHIC loot.": "Grants a low chance for additional loot from eliminations, including MYTHIC loot.",
        "Swim faster and gain a brief speed boost when damaged.": "Swim faster and gain a brief speed boost when damaged.",
        "Gain an Overdrive boost when you mantle, hurdle, or wall scramble.": "Gain an Overdrive boost when you mantle, hurdle, or wall scramble.",
        "Gain a Shock Rock charge when you deal enough damage to enemies.": "Gain a Shock Rock charge when you deal enough damage to enemies.",
        "Boosts your maximum Health and Shield.": "Boosts your maximum Health and Shield.",
        "Opponents who attacks its user get Scanned for a short duration of time.": "Opponents who attacks its user get Scanned for a short duration of time.",
        "Increases sprinting speed and jump height.": "Increases sprinting speed and jump height.",
        "Reveal enemy foot trails to all nearby squadmates around the island.": "Reveal enemy foot trails to all nearby squadmates around the island.",
        "Launches the user upwards and deploy Bat Cape.": "Launches the user upwards and deploy Bat Cape.",
        "Replenishes Shield for its user and their squadmates in a short amount of time after eliminating an enemy player.": "Replenishes Shield for its user and their squadmates in a short amount of time after eliminating an enemy player.",
        "Grants a heavy increase to structural damage after sprinting and an Overdrive after sliding, slide-kicking the enemies will increases fire rate and reload speed buff.": "Grants a heavy increase to structural damage after sprinting and an Overdrive after sliding, slide-kicking the enemies will increases fire rate and reload speed buff.",
        "Opening ammo boxes has a chance to grant a weapon upgrade.": "Opening ammo boxes has a chance to grant a weapon upgrade.",
        "Emits a ping for players with rare Sprites nearby but marks you on the map.": "Emits a ping for players with rare Sprites nearby but marks you on the map.",
        "Regenerate health over time when low. While regenerating, gain Cloak and low gravity.": "Regenerate health over time when low. While regenerating, gain Cloak and low gravity.",
        "Knocking players reveals other nearby.": "Knocking players reveals other nearby.",
        "Reveal players through walls and other objects for a short time.": "Reveal players through walls and other objects for a short time.",
        "Increases your movement speed in water as it evolves through its stages, adding increased jump height and fall damage reduction.": "Increases your movement speed in water as it evolves through its stages, adding increased jump height and fall damage reduction.",
        "When a nearby enemy damages you, it causes a beehive to quickly emerge and release a swarm of bees that pursues and attacks the attacker.": "When a nearby enemy damages you, it causes a beehive to quickly emerge and release a swarm of bees that pursues and attacks the attacker.",
        "Gather extra loot whenever you jump into a dumpster.": "Gather extra loot whenever you jump into a dumpster.",
        "Ammo boxes grant slightly more ammunition.": "Ammo boxes grant slightly more ammunition.",
		"Lets you use Sonic's Spin Dash and boosts your sprinting speed.": "Lets you use Sonic's Spin Dash and boosts your sprinting speed.",
		"Lets you hover through the air.": "Lets you hover through the air.",
		"Ability not yet revealed.": "Ability not yet revealed.",
		"Grants a brief cloaking effect after standing still for a short time.": "Grants a brief cloaking effect after standing still for a short time.",
		"Increases weapon reload speed after a kill.": "Increases weapon reload speed after a kill.",
		"Grants a small amount of shield when opening chests.": "Grants a small amount of shield when opening chests.",
		"Converts eliminated enemies into ammo.": "Converts eliminated enemies into ammo.",
		"Reveals the next storm circle early.": "Reveals the next storm circle early.",
		"Grants increased movement speed while in shadows.": "Grants increased movement speed while in shadows.",
		"Lets you use Sonic's Spin Dash and boosts your sprinting speed. Sprint faster with each Level Up.": "Lets you use Sonic's Spin Dash and boosts your sprinting speed. Sprint faster with each Level Up.",
		"Lets you hover and glide through the air with the help of Tails.": "Lets you hover and glide through the air with the help of Tails.",
		"Automatically reloads weapons over time even when unequipped.": "Automatically reloads weapons over time even when unequipped.",
		"Upgrades a random item in your inventory at each level. It automatically resets to Level 1 and auto-extracts upon reaching its maximum level.": "Upgrades a random item in your inventory at each level. It automatically resets to Level 1 and auto-extracts upon reaching its maximum level.",
		"Spawns a Bush on you after a duration. At max level, gain a Bush on elimination.": "Spawns a Bush on you after a duration. At max level, gain a Bush on elimination.",
		"After a short duration, recovers some Health or Shield after being damaged.": "After a short duration, recovers some Health or Shield after being damaged.",
		"Find an 8-Bit Shotgun in your first Chest and gain a core multiplier for it.": "Find an 8-Bit Shotgun in your first Chest and gain a core multiplier for it.",
		"Enter Hangtime with improved accuracy.": "Enter Hangtime with improved accuracy.",
		"Perform another jump while mid-air (double jump).": "Perform another jump while mid-air (double jump).",
		"Grants random items at each level.": "Grants random items at each level.",
		"Gain extra Crown Wins after getting a Victory Royale. You can only level it up by winning matches.": "Gain extra Crown Wins after getting a Victory Royale. You can only level it up by winning matches."
    },
    es: {
        "Replenishes Shield for its user and their squadmates while in water.": "Recarga el escudo para el usuario y sus compañeros mientras están en el agua.",
        "Increased chance to find additional rare items when opening chests.": "Mayor probabilidad de encontrar objetos raros adicionales al abrir cofres.",
        "Creates a Fire burst upon dealing enough damage to an enemy.": "Crea una explosión de Fuego al infligir suficiente daño a un enemigo.",
        "Emoting or Jamming replenishes Shield.": "Emoticon o Jamming recargan el escudo.",
        "Grants Cloak for a short duration upon reloading.": "Otorga Cloak por un breve período al recargar.",
        "Grants a random item every time the Sprite is leveled up. It automatically explodes with Legendary loot, resets to Level 1 and auto-extracts upon reaching its maximum level.": "Otorga un objeto aleatorio cada vez que el Sprite sube de nivel. Explota automáticamente con botín Legendario, se reinicia al Nivel 1 y se auto‑extrae al alcanzar el nivel máximo.",
        "Grants Siphon upon eliminating an opponent.": "Otorga Sifón al eliminar a un oponente.",
        "Does nothing until Level 5, in which it will always grant a buff for unlimited ammo.": "No hace nada hasta el Nivel 5, en el que siempre otorgará una mejora para munición ilimitada.",
        "Grants increased Pickaxe damage.": "Aumenta el daño del pico.",
        "Spawns a Shield Bubble Jr. around the player when they use a healing item.": "Genera una Burbuja Escudo Jr. alrededor del jugador cuando usa un objeto curativo.",
        "Grants a low chance for additional loot from eliminations, including MYTHIC loot.": "Otorga una pequeña probabilidad de obtener botín adicional de las eliminaciones, incluyendo botín MÍTICO.",
        "Swim faster and gain a brief speed boost when damaged.": "Nada más rápido y obtén un breve aumento de velocidad al recibir daño.",
        "Gain an Overdrive boost when you mantle, hurdle, or wall scramble.": "Obtén un impulso Overdrive al escalar, saltar obstáculos o trepar paredes.",
        "Gain a Shock Rock charge when you deal enough damage to enemies.": "Obtén una carga de Shock Rock al infligir suficiente daño a los enemigos.",
        "Boosts your maximum Health and Shield.": "Aumenta la salud y el escudo máximos.",
        "Opponents who attacks its user get Scanned for a short duration of time.": "Los oponentes que atacan a su usuario son Escaneados por un breve período.",
        "Increases sprinting speed and jump height.": "Aumenta la velocidad de carrera y la altura de salto.",
        "Reveal enemy foot trails to all nearby squadmates around the island.": "Revela las huellas de los enemigos a todos los compañeros cercanos en la isla.",
        "Launches the user upwards and deploy Bat Cape.": "Lanza al usuario hacia arriba y despliega la Capa de Murciélago.",
        "Replenishes Shield for its user and their squadmates in a short amount of time after eliminating an enemy player.": "Recarga el escudo para el usuario y sus compañeros en poco tiempo después de eliminar a un jugador enemigo.",
        "Grants a heavy increase to structural damage after sprinting and an Overdrive after sliding, slide-kicking the enemies will increases fire rate and reload speed buff.": "Otorga un gran aumento del daño estructural después de correr y un Overdrive después de deslizarse, patear a los enemigos al deslizarse aumentará la cadencia de fuego y la recarga.",
        "Opening ammo boxes has a chance to grant a weapon upgrade.": "Abrir cajas de munición tiene probabilidad de otorgar una mejora de arma.",
        "Emits a ping for players with rare Sprites nearby but marks you on the map.": "Emite un ping para jugadores con Sprites raros cercanos, pero te marca en el mapa.",
        "Regenerate health over time when low. While regenerating, gain Cloak and low gravity.": "Regenera salud con el tiempo cuando estás bajo. Mientras te regeneras, obtienes Cloak y baja gravedad.",
        "Knocking players reveals other nearby.": "Derribar jugadores revela a otros cercanos.",
        "Reveal players through walls and other objects for a short time.": "Revela jugadores a través de paredes y otros objetos por un breve tiempo.",
        "Increases your movement speed in water as it evolves through its stages, adding increased jump height and fall damage reduction.": "Aumenta tu velocidad de movimiento en el agua a medida que evoluciona, añadiendo mayor altura de salto y reducción de daño por caída.",
        "When a nearby enemy damages you, it causes a beehive to quickly emerge and release a swarm of bees that pursues and attacks the attacker.": "Cuando un enemigo cercano te daña, hace que una colmena aparezca rápidamente y libere un enjambre de abejas que persigue y ataca al agresor.",
        "Gather extra loot whenever you jump into a dumpster.": "Recoge botín adicional cada vez que saltas a un contenedor.",
        "Ammo boxes grant slightly more ammunition.": "Las cajas de munición otorgan un poco más de munición.",
		"Lets you use Sonic's Spin Dash and boosts your sprinting speed.": "Te permite usar el Spin Dash de Sonic y aumenta la velocidad de sprint.",
		"Lets you hover through the air.": "Te permite flotar en el aire.",
		"Ability not yet revealed.": "Habilidad aún no revelada.",
		"Grants a brief cloaking effect after standing still for a short time.": "Otorga un breve efecto de camuflaje después de permanecer quieto por un tiempo.",
		"Increases weapon reload speed after a kill.": "Aumenta la velocidad de recarga de armas después de una eliminación.",
		"Grants a small amount of shield when opening chests.": "Otorga una pequeña cantidad de escudo al abrir cofres.",
		"Converts eliminated enemies into ammo.": "Convierte a los enemigos eliminados en munición.",
		"Reveals the next storm circle early.": "Revela el próximo círculo de la tormenta con antelación.",
		"Grants increased movement speed while in shadows.": "Aumenta la velocidad de movimiento mientras estás en las sombras.",
		"Lets you use Sonic's Spin Dash and boosts your sprinting speed. Sprint faster with each Level Up.": "Te permite usar el Spin Dash de Sonic y aumenta tu velocidad de sprint. Corre más rápido con cada nivel.",
		"Lets you hover and glide through the air with the help of Tails.": "Te permite planear y flotar en el aire con la ayuda de Tails.",
		"Automatically reloads weapons over time even when unequipped.": "Recarga automáticamente las armas con el tiempo incluso cuando no están equipadas.",
		"Upgrades a random item in your inventory at each level. It automatically resets to Level 1 and auto-extracts upon reaching its maximum level.": "Mejora un objeto aleatorio en tu inventario en cada nivel. Se reinicia automáticamente al Nivel 1 y se auto‑extrae al alcanzar el nivel máximo.",
		"Spawns a Bush on you after a duration. At max level, gain a Bush on elimination.": "Genera un Arbusto sobre ti después de un tiempo. Al nivel máximo, obtén un Arbusto al eliminar.",
		"After a short duration, recovers some Health or Shield after being damaged.": "Después de un breve período, recupera algo de Salud o Escudo después de recibir daño.",
		"Find an 8-Bit Shotgun in your first Chest and gain a core multiplier for it.": "Encuentra una Escopeta 8-Bit en tu primer Cofre y obtén un multiplicador para ella.",
		"Enter Hangtime with improved accuracy.": "Entra en Hangtime con precisión mejorada.",
		"Perform another jump while mid-air (double jump).": "Realiza otro salto mientras estás en el aire (doble salto).",
		"Grants random items at each level.": "Otorga objetos aleatorios en cada nivel.",
		"Gain extra Crown Wins after getting a Victory Royale. You can only level it up by winning matches.": "Obtén Coronas extra después de una Victoria Royale. Solo puedes subir de nivel ganando partidas."
    },
    fr: {
        "Replenishes Shield for its user and their squadmates while in water.": "Restaure le bouclier pour son utilisateur et ses coéquipiers lorsqu'ils sont dans l'eau.",
        "Increased chance to find additional rare items when opening chests.": "Chance accrue de trouver des objets rares supplémentaires en ouvrant des coffres.",
        "Creates a Fire burst upon dealing enough damage to an enemy.": "Crée une explosion de Feu en infligeant suffisamment de dégâts à un ennemi.",
        "Emoting or Jamming replenishes Shield.": "Les émoticônes ou le Jamming restaurent le bouclier.",
        "Grants Cloak for a short duration upon reloading.": "Accorde le Cloak pendant une courte durée après le rechargement.",
        "Grants a random item every time the Sprite is leveled up. It automatically explodes with Legendary loot, resets to Level 1 and auto-extracts upon reaching its maximum level.": "Accorde un objet aléatoire à chaque fois que le Sprite monte de niveau. Il explose automatiquement avec un butin Légendaire, se réinitialise au Niveau 1 et s'auto‑extrait lorsqu'il atteint son niveau maximum.",
        "Grants Siphon upon eliminating an opponent.": "Accorde le Siphon après avoir éliminé un adversaire.",
        "Does nothing until Level 5, in which it will always grant a buff for unlimited ammo.": "Ne fait rien jusqu'au niveau 5, où il accordera toujours un buff pour des munitions illimitées.",
        "Grants increased Pickaxe damage.": "Augmente les dégâts de la pioche.",
        "Spawns a Shield Bubble Jr. around the player when they use a healing item.": "Fait apparaître une Bulle de Bouclier Jr. autour du joueur lorsqu'il utilise un objet de soin.",
        "Grants a low chance for additional loot from eliminations, including MYTHIC loot.": "Accorde une faible chance d'obtenir du butin supplémentaire lors des éliminations, y compris du butin MYTHIQUE.",
        "Swim faster and gain a brief speed boost when damaged.": "Nage plus vite et obtient un bref boost de vitesse lorsqu'il est endommagé.",
        "Gain an Overdrive boost when you mantle, hurdle, or wall scramble.": "Obtenez un boost Overdrive lorsque vous escaladez, sautez des obstacles ou grimpez aux murs.",
        "Gain a Shock Rock charge when you deal enough damage to enemies.": "Obtenez une charge de Shock Rock en infligeant suffisamment de dégâts aux ennemis.",
        "Boosts your maximum Health and Shield.": "Augmente votre santé et votre bouclier maximum.",
        "Opponents who attacks its user get Scanned for a short duration of time.": "Les adversaires qui attaquent son utilisateur sont Scannés pendant une courte durée.",
        "Increases sprinting speed and jump height.": "Augmente la vitesse de sprint et la hauteur de saut.",
        "Reveal enemy foot trails to all nearby squadmates around the island.": "Révèle les traces de pas des ennemis à tous les coéquipiers proches sur l'île.",
        "Launches the user upwards and deploy Bat Cape.": "Lance l'utilisateur vers le haut et déploie la Cape de Chauve-souris.",
        "Replenishes Shield for its user and their squadmates in a short amount of time after eliminating an enemy player.": "Restaure le bouclier pour son utilisateur et ses coéquipiers en peu de temps après avoir éliminé un joueur ennemi.",
        "Grants a heavy increase to structural damage after sprinting and an Overdrive after sliding, slide-kicking the enemies will increases fire rate and reload speed buff.": "Accorde une forte augmentation des dégâts structurels après un sprint et un Overdrive après un glissement, le coup de pied en glissant sur les ennemis augmentera la cadence de tir et la vitesse de rechargement.",
        "Opening ammo boxes has a chance to grant a weapon upgrade.": "Ouvrir des caisses de munitions a une chance d'accorder une amélioration d'arme.",
        "Emits a ping for players with rare Sprites nearby but marks you on the map.": "Émet un ping pour les joueurs avec des Sprites rares à proximité mais vous marque sur la carte.",
        "Regenerate health over time when low. While regenerating, gain Cloak and low gravity.": "Régénère la santé au fil du temps lorsqu'elle est basse. Pendant la régénération, gagnez Cloak et faible gravité.",
        "Knocking players reveals other nearby.": "Mettre KO des joueurs révèle d'autres joueurs à proximité.",
        "Reveal players through walls and other objects for a short time.": "Révèle les joueurs à travers les murs et autres objets pendant une courte durée.",
        "Increases your movement speed in water as it evolves through its stages, adding increased jump height and fall damage reduction.": "Augmente votre vitesse de déplacement dans l'eau au fur et à mesure de son évolution, ajoutant une hauteur de saut accrue et une réduction des dégâts de chute.",
        "When a nearby enemy damages you, it causes a beehive to quickly emerge and release a swarm of bees that pursues and attacks the attacker.": "Lorsqu'un ennemi proche vous endommage, il provoque l'apparition rapide d'une ruche qui libère un essaim d'abeilles qui poursuit et attaque l'agresseur.",
        "Gather extra loot whenever you jump into a dumpster.": "Récupère du butin supplémentaire chaque fois que vous sautez dans une benne à ordures.",
        "Ammo boxes grant slightly more ammunition.": "Les caisses de munitions accordent un peu plus de munitions.",
		"Lets you use Sonic's Spin Dash and boosts your sprinting speed.": "Vous permet d'utiliser le Spin Dash de Sonic et augmente la vitesse de sprint.",
		"Lets you hover through the air.": "Vous permet de planer dans les airs.",
		"Ability not yet revealed.": "Capacité pas encore révélée.",
		"Grants a brief cloaking effect after standing still for a short time.": "Accorde un bref effet de camouflage après être resté immobile pendant un court instant.",
		"Increases weapon reload speed after a kill.": "Augmente la vitesse de rechargement des armes après une élimination.",
		"Grants a small amount of shield when opening chests.": "Accorde une petite quantité de bouclier lors de l'ouverture de coffres.",
		"Converts eliminated enemies into ammo.": "Transforme les ennemis éliminés en munitions.",
		"Reveals the next storm circle early.": "Révèle le prochain cercle de la tempête à l'avance.",
		"Grants increased movement speed while in shadows.": "Augmente la vitesse de déplacement dans les ombres.",
		"Lets you use Sonic's Spin Dash and boosts your sprinting speed. Sprint faster with each Level Up.": "Vous permet d'utiliser le Spin Dash de Sonic et augmente votre vitesse de sprint. Courez plus vite à chaque niveau.",
		"Lets you hover and glide through the air with the help of Tails.": "Vous permet de planer et de flotter dans les airs avec l'aide de Tails.",
		"Automatically reloads weapons over time even when unequipped.": "Recharge automatiquement les armes au fil du temps même lorsqu'elles ne sont pas équipées.",
		"Upgrades a random item in your inventory at each level. It automatically resets to Level 1 and auto-extracts upon reaching its maximum level.": "Améliore un objet aléatoire dans votre inventaire à chaque niveau. Il se réinitialise automatiquement au Niveau 1 et s'auto‑extrait lorsqu'il atteint son niveau maximum.",
		"Spawns a Bush on you after a duration. At max level, gain a Bush on elimination.": "Fait apparaître un Buisson sur vous après un certain temps. Au niveau maximum, obtenez un Buisson après une élimination.",
		"After a short duration, recovers some Health or Shield after being damaged.": "Après une courte durée, récupère un peu de Santé ou de Bouclier après avoir subi des dégâts.",
		"Find an 8-Bit Shotgun in your first Chest and gain a core multiplier for it.": "Trouvez un Fusil à Pompe 8-Bit dans votre premier Coffre et obtenez un multiplicateur pour celui-ci.",
		"Enter Hangtime with improved accuracy.": "Entrez en Hangtime avec une précision améliorée.",
		"Perform another jump while mid-air (double jump).": "Effectuez un autre saut en plein air (double saut).",
		"Grants random items at each level.": "Accorde des objets aléatoires à chaque niveau.",
		"Gain extra Crown Wins after getting a Victory Royale. You can only level it up by winning matches.": "Obtenez des Couronnes supplémentaires après une Victoire Royale. Vous ne pouvez le monter de niveau qu'en gagnant des matchs."
    }
};

const SPRITE_NAME_TRANSLATIONS = {
    it: {
        "Water": "Acqua",
        "Earth": "Terra",
        "Fire": "Fuoco",
        "Duck": "Papera",
        "Ghost": "Fantasma",
        "Dream": "Sogno",
        "Demon": "Demone",
        "Punk": "Punk",
        "King": "Re",
        "Zero Point": "Punto Zero",
        "Burnt Peanut": "Arachide Bruciata",
        "Fishy": "Pesciolino",
        "Striker": "Attaccante",
        "Aura": "Aura",
        "Boss": "Capo",
        "Grim": "Grim",
        "Air": "Aria",
        "Seven": "Sette",
        "Batman": "Batman",
        "Pollo": "Pollo",
        "Vini Jr.": "Vini Jr.",
        "Llama": "Lama",
        "Peely": "Peely",
        "Ironmouse": "Ironmouse",
        "John Wick": "John Wick",
        "X-Ray": "Raggi X",
        "Pond": "Stagno",
        "Honey": "Miele",
        "Dumpster Dive": "Tuffo nel Cassonetto",
        "Bullet": "Proiettile",
		"Sonic": "Sonic",
        "Tails": "Tails",
        "Jackrabbit": "Jazz Jackrabbit",
        "Klombo": "Klombo",
        "Killswitch": "Killswitch",
		"Bush": "Fuorilegge",
		"Jonesy": "Jonesy",
		"Adventure": "Avventura",
		"8-Bit": "8-Bit",
		"Storm Scout": "Esploratore della Tempesta",
		"Shadow": "Shadow",
		"Crown": "Corona",
    },
    en: {
        "Water": "Water",
        "Earth": "Earth",
        "Fire": "Fire",
        "Duck": "Duck",
        "Ghost": "Ghost",
        "Dream": "Dream",
        "Demon": "Demon",
        "Punk": "Punk",
        "King": "King",
        "Zero Point": "Zero Point",
        "Burnt Peanut": "Burnt Peanut",
        "Fishy": "Fishy",
        "Striker": "Striker",
        "Aura": "Aura",
        "Boss": "Boss",
        "Grim": "Grim",
        "Air": "Air",
        "Seven": "Seven",
        "Batman": "Batman",
        "Pollo": "Pollo",
        "Vini Jr.": "Vini Jr.",
        "Llama": "Llama",
        "Peely": "Peely",
        "Ironmouse": "Ironmouse",
        "John Wick": "John Wick",
        "X-Ray": "X-Ray",
        "Pond": "Pond",
        "Honey": "Honey",
        "Dumpster Dive": "Dumpster Dive",
        "Bullet": "Bullet",
		"Sonic": "Sonic",
		"Tails": "Tails",
		"Jackrabbit": "Jazz Jackrabbit",
		"Klombo": "Klombo",
		"Bush": "Bushranger",
		"Killswitch": "Killswitch",
		"Victory Crown": "Victory Crown"
    },
    es: {
        "Water": "Agua",
        "Earth": "Tierra",
        "Fire": "Fuego",
        "Duck": "Pato",
        "Ghost": "Fantasma",
        "Dream": "Sueño",
        "Demon": "Demonio",
        "Punk": "Punk",
        "King": "Rey",
        "Zero Point": "Punto Cero",
        "Burnt Peanut": "Cacahuete Quemado",
        "Fishy": "Pez",
        "Striker": "Atacante",
        "Aura": "Aura",
        "Boss": "Jefe",
        "Grim": "Grim",
        "Air": "Aire",
        "Seven": "Siete",
        "Batman": "Batman",
        "Pollo": "Pollo",
        "Vini Jr.": "Vini Jr.",
        "Llama": "Llama",
        "Peely": "Peely",
        "Ironmouse": "Ironmouse",
        "John Wick": "John Wick",
        "X-Ray": "Rayos X",
        "Pond": "Estanque",
        "Honey": "Miel",
        "Dumpster Dive": "Zambullida en Contenedor",
        "Bullet": "Bala",
		"Sonic": "Sonic",
		"Tails": "Tails",
		"Klombo": "Klombo",
		"Killswitch": "Killswitch",
		"Bush": "Bandido",
		"Jonesy": "Jonesy",
		"Adventure": "Aventura",
		"8-Bit": "8-Bit",
		"Storm Scout": "Explorador de la Tormenta",
		"Shadow": "Shadow",
		"Jackrabbit": "Jazz Jackrabbit",
		"Crown": "Corona"
    },
    fr: {
        "Water": "Eau",
        "Earth": "Terre",
        "Fire": "Feu",
        "Duck": "Canard",
        "Ghost": "Fantôme",
        "Dream": "Rêve",
        "Demon": "Démon",
        "Punk": "Punk",
        "King": "Roi",
        "Zero Point": "Point Zéro",
        "Burnt Peanut": "Cacahuète Brûlée",
        "Fishy": "Poisson",
        "Striker": "Attaquant",
        "Aura": "Aura",
        "Boss": "Patron",
        "Grim": "Grim",
        "Air": "Air",
        "Seven": "Sept",
        "Batman": "Batman",
        "Pollo": "Pollo",
        "Vini Jr.": "Vini Jr.",
        "Llama": "Lama",
        "Peely": "Peely",
        "Ironmouse": "Ironmouse",
        "John Wick": "John Wick",
        "X-Ray": "Rayons X",
        "Pond": "Étang",
        "Honey": "Miel",
        "Dumpster Dive": "Plongeon dans la Poubelle",
        "Bullet": "Balle",
		"Sonic": "Sonic",
		"Tails": "Tails",
		"Klombo": "Klombo",
		"Killswitch": "Killswitch",
		"Bush": "Hors-la-loi du bush",
		"Jonesy": "Jonesy",
		"Adventure": "Aventure",
		"8-Bit": "8-Bit",
		"Storm Scout": "Éclaireur de la Tempête",
		"Shadow": "Shadow",
		"Jackrabbit": "Jazz Jackrabbit",
		"Crown": "Couronne"
    }
};

const VARIANT_BONUSES = {
	basic:{ name:"Basic", bonus:"No bonus" },
	gold:{ name:"Gold", bonus:"3x Sprite XP from eliminations" },
	gummy:{ name:"Gummy", bonus:"+20% Sprite Dust when extracted" },
	galaxy:{ name:"Galaxy", bonus:"+30% Ammo whenever it is picked up" },
	holofoil:{ name:"Holofoil", bonus:"+5% chance to find rare sprites" },
	cube:{ name:"Cube", bonus:"Overdrive effect while inside the Storm" },
	quack:{ name:"Quack", bonus:"50% Sprite XP to other sprites in inventory" },
    gem:{ name:"Gem", bonus:"-30% Fall damage" },
	cheat:{ name:"Cheat Master", bonus:"+50% damage to chests and ammo boxes" }
};

const RARITY_COST = {
    // Season 3 - Runners (prezzi originali)
    3: {
        rare: { base: 1800, special: 2700 },
        epic: { base: 2700, special: 4000 },
        legendary: { base: 4500, special: 6750 },
        mythic: { base: 6750, special: 10000 }
    },
    
	// Season 4 - Override (nuovi prezzi ridotti)
    4: {
        rare: { base: 100, special: 1500 },
        epic: { base: 1500, special: 2100 },
        legendary: { base: 2100, special: 2000 },
        mythic: { base: 2000, special: 2400 }
    }
};

const SEASON_CONFIG = {
  3: { 
    label: 'Runners', 
    color: '#FF6B35',      // Arancione acceso
    bg: '#E05A2A',         // Sfondo arancione scuro
    textColor: '#FFFFFF'   // Testo bianco per contrasto
  },
  4: { 
    label: 'Override', 
    color: '#A855F7',      // Viola brillante
    bg: '#7C3AED',         // Sfondo viola scuro
    textColor: '#FFFFFF'   // Testo bianco
  },
};

const SEASON_NAME_TRANSLATIONS = {
    it: {
        "Season 3 - Runners": "Stagione 3 - Runners",
        "Season 4 - Override": "Stagione 4 - Override"
    },
    en: {
        "Season 3 - Runners": "Season 3 - Runners",
        "Season 4 - Override": "Season 4 - Override"
    },
    es: {
        "Season 3 - Runners": "Temporada 3 - Runners",
        "Season 4 - Override": "Temporada 4 - Override"
    },
    fr: {
        "Season 3 - Runners": "Saison 3 - Runners",
        "Season 4 - Override": "Saison 4 - Override"
    }
};

const SEASON4_CODES = [
    // --- SPRITE VARIANTI CHEAT ---
    { code: "Born2Play", spriteId: "adventure", variant: "cheat", reward: "Cheat Master Adventure Sprite" },
    { code: "8BitBlast", spriteId: "8bit", variant: "cheat", reward: "Cheat Master 8-Bit Sprite" },
    { code: "GottaGoFast", spriteId: "sonic", variant: "cheat", reward: "Cheat Master Sonic Sprite" },
    { code: "IWannaFlyHigh", spriteId: "tails", variant: "cheat", reward: "Cheat Master Tails Sprite" },
	{ code: "Play4All", spriteId: "jonesy", variant: "cheat", reward: "Cheat Master Jonesy Sprite"},
	{ code: "GatherAndCraft", spriteId: "bush", variant: "cheat", reward: "Cheat Master Bushranger Sprite"},
    { code: "JonesyIsGolden", spriteId: "jonesy", variant: "gold", reward: "Gold Jonesy Sprite" },

    // --- LOADING SCREEN ---
    { code: "BeMoreAlien", spriteId: null, variant: null, reward: "Override Ready Loading Screen" },
    { code: "ReachYourImpossible", spriteId: null, variant: null, reward: "Block Party Loading Screen" },

    // --- SPRITE DUST & XP ---
    { code: "OverrideXP", spriteId: null, variant: null, reward: "40,000 XP" },
    { code: "Magilume", spriteId: null, variant: null, reward: "2,000 Sprite Dust" },
    { code: "Chispambo", spriteId: null, variant: null, reward: "2,000 Sprite Dust" },
    { code: "Abgestaubt", spriteId: null, variant: null, reward: "2,000 Sprite Dust" },
    { code: "PerlimPinPin", spriteId: null, variant: null, reward: "2,000 Sprite Dust" },
	{ code: "H0p0nVC", spriteId: null, variant: null, reward: "2,000 Sprite Dust"},

    // --- CONSUMABILI / RISORSE ---
    { code: "SurviveTheNight", spriteId: null, variant: null, reward: "2 Cheat Code Locators" },
	{ code: "FindItChat", spriteId: null, variant: null, reward: "2 Cheat Code Locators" },
    { code: "TakeYourHeart", spriteId: null, variant: null, reward: "2 Extraction Accelerators" },
    { code: "PerfectOrder", spriteId: null, variant: null, reward: "4 Spicy Tacos" },
    { code: "O2Override", spriteId: null, variant: null, reward: "1 Llama Supply Drop & 1 Portable Extractor" },

    // --- EFFETTI DIVERTENTI ---
    { code: "DontBlockMe", spriteId: null, variant: null, reward: "Turns you into a Tetrimino" },
    { code: "LetsBlockAndRoll", spriteId: null, variant: null, reward: "Turns you into a Tetrimino" },
];

function openCodesModal() {
    const modal = document.getElementById('codes-modal');
    const tbody = document.getElementById('codes-table-body');
    tbody.innerHTML = '';
    const lang = currentLang;

    // --- RAGGRUPPA PER SEZIONI ---
    const sections = {
        sprites: [],
        loading: [],
        resources: [],
        effects: []
    };

    SEASON4_CODES.forEach(item => {
        if (item.spriteId && item.variant) {
            sections.sprites.push(item);
        } else if (item.reward.includes('Loading Screen')) {
            sections.loading.push(item);
        } else if (item.reward.includes('Sprite Dust') || item.reward.includes('XP') || 
                   item.reward.includes('40k') || item.reward.includes('Cheat Code Locators') || 
                   item.reward.includes('Extraction') || item.reward.includes('Tacos') || 
                   item.reward.includes('Llama')) {
            sections.resources.push(item);
        } else {
            sections.effects.push(item);
        }
    });

    // --- ETICHETTE SEZIONI ---
    const sectionLabels = {
        sprites: TRANSLATIONS[lang]?.codes_section_sprites || '🎮 Sprite Variants',
        loading: TRANSLATIONS[lang]?.codes_section_loading || '🖼️ Loading Screens',
        resources: TRANSLATIONS[lang]?.codes_section_resources || '💎 Resources',
        effects: TRANSLATIONS[lang]?.codes_section_effects || '✨ Fun Effects'
    };

    const sectionColors = {
        sprites: '#00E676',
        loading: '#A855F7',
        resources: '#FFD166',
        effects: '#FF6B9D'
    };

    // --- RENDERIZZA LE SEZIONI ---
    const sectionKeys = ['sprites', 'loading', 'resources', 'effects'];

    sectionKeys.forEach(key => {
        const items = sections[key];
        if (items.length === 0) return;

        // === DIVISORE CON TITOLO ===
        const color = sectionColors[key] || '#2FB6FF';
        const divider = document.createElement('tr');
        divider.innerHTML = `
            <td colspan="2" style="padding: 24px 6px 12px 6px; border-bottom: none;">
                <div style="display:flex;align-items:center;gap:12px;">
                    <div style="flex:1;height:3px;background:linear-gradient(90deg, transparent, ${color}66);border-radius:3px;"></div>
                    <span style="
                        font-size:12px;
                        font-weight:900;
                        color:#fff;
                        letter-spacing:2px;
                        text-transform:uppercase;
                        background:rgba(0,0,0,0.7);
                        padding:8px 24px;
                        border-radius:30px;
                        border:2px solid ${color}44;
                        white-space:nowrap;
                        backdrop-filter:blur(4px);
                        box-shadow: 0 0 30px ${color}22, inset 0 0 30px ${color}11;
                        text-shadow: 0 0 20px ${color}44;
                    ">${sectionLabels[key]}</span>
                    <div style="flex:1;height:3px;background:linear-gradient(90deg, ${color}66, transparent);border-radius:3px;"></div>
                </div>
            </td>
        `;
        tbody.appendChild(divider);

        // === CODICI ===
        items.forEach(item => {
            const tr = document.createElement('tr');
            tr.style.borderBottom = '1px solid rgba(255,255,255,0.04)';

            let rewardDisplay = item.reward;

            if (item.spriteId && item.variant) {
                const sp = SPRITES.find(s => s.id === item.spriteId);
                const spriteName = sp ? (SPRITE_NAME_TRANSLATIONS[lang]?.[sp.name] || sp.name) : item.spriteId;
                
                let variantName = '';
                let badgeColor = '';
                
                if (item.variant === 'gold') {
                    variantName = TRANSLATIONS[lang]?.['variant_gold'] || 'Gold';
                    badgeColor = 'rgba(255,209,102,0.15);color:#FFD166;';
                } else if (item.variant === 'cheat') {
                    variantName = TRANSLATIONS[lang]?.['variant_cheat'] || 'Cheat';
                    badgeColor = 'rgba(0,230,118,0.15);color:#00E676;';
                } else {
                    variantName = item.variant;
                    badgeColor = 'rgba(255,255,255,0.1);color:#FFFFFF;';
                }

                // ---- CREAZIONE CELLA CODICE CON IMMAGINE ----
                const codeCell = document.createElement('td');
                codeCell.style.cssText = 'padding:6px 8px;display:flex;align-items:center;gap:8px;cursor:pointer;';
                codeCell.dataset.code = item.code;

                // Immagine thumbnail
                const img = document.createElement('img');
                img.style.cssText = 'width:32px;height:32px;object-fit:contain;border-radius:4px;background:rgba(255,255,255,0.02);flex-shrink:0;';
                img.alt = spriteName;
                
                if (sp) {
                    const imgId = getVariantImageId(sp, item.variant);
                    loadImageWithFallback(img, ASSET_BASE, imgId);
                } else {
                    img.src = placeholderSVG(spriteName);
                    img.classList.add('loaded');
                }

                const codeSpan = document.createElement('span');
                codeSpan.style.cssText = 'font-weight:700;color:#00D4FF;font-family:monospace;font-size:13px;';
                codeSpan.textContent = item.code;

                codeCell.appendChild(img);
                codeCell.appendChild(codeSpan);

                // Cella reward
                const rewardCell = document.createElement('td');
                rewardCell.style.cssText = 'padding:6px 8px;';
                const badge = `<span style="background:${badgeColor};padding:0 8px;border-radius:4px;font-weight:700;font-size:10px;">${variantName}</span>`;
                rewardCell.innerHTML = `${badge} ${spriteName}`;
                
                if (item.variant === 'gold') {
                    rewardCell.style.color = '#FFD166';
                } else {
                    rewardCell.style.color = '#00E676';
                }

                tr.appendChild(codeCell);
                tr.appendChild(rewardCell);

                // Evento click per copiare il codice
                codeCell.addEventListener('click', function() {
                    const code = this.dataset.code;
                    navigator.clipboard.writeText(code).then(() => {
                        showToast(`✅ Copied: ${code}`);
                    }).catch(() => {
                        const textarea = document.createElement('textarea');
                        textarea.value = code;
                        document.body.appendChild(textarea);
                        textarea.select();
                        document.execCommand('copy');
                        textarea.remove();
                        showToast(`✅ Copied: ${code}`);
                    });
                });

            } else {
				// Determina l'immagine in base alla ricompensa
				let iconHtml = '';
				if (item.reward.includes('Loading Screen')) {
					iconHtml = '<img src="assets/ui/loading-screen.png" style="width:20px;height:20px;vertical-align:middle;margin-right:6px;">';
				} else if (item.reward.includes('Sprite Dust')) {
					iconHtml = '<img src="assets/ui/sprite-dust.png" style="width:20px;height:20px;vertical-align:middle;margin-right:6px;">';
				} else if (item.reward.includes('XP') || item.reward.includes('40k')) {
					iconHtml = '<img src="assets/icons/xp.png" style="width:20px;height:20px;vertical-align:middle;margin-right:6px;">';
				} else if (item.reward.includes('Cheat Code Locators')) {
					iconHtml = '<img src="assets/icons/locator.png" style="width:20px;height:20px;vertical-align:middle;margin-right:6px;">';
				} else if (item.reward.includes('Extraction')) {
					iconHtml = '<img src="assets/icons/accelerator.png" style="width:20px;height:20px;vertical-align:middle;margin-right:6px;">';
				} else if (item.reward.includes('Tacos')) {
					iconHtml = '<img src="assets/icons/taco.png" style="width:20px;height:20px;vertical-align:middle;margin-right:6px;">';
				} else if (item.reward.includes('Llama')) {
					iconHtml = '<img src="assets/icons/o2.png" style="width:20px;height:20px;vertical-align:middle;margin-right:6px;">';
				} else if (item.reward.includes('Tetrimino')) {
					iconHtml = '<img src="assets/icons/tetrimino.png" style="width:20px;height:20px;vertical-align:middle;margin-right:6px;">';
				}		
			
                // Per i codici che non sono sprite (loading, resources, effects) manteniamo il vecchio stile
                let rewardStyle = 'color:#FFFFFF;';
                if (item.reward.includes('Sprite Dust')) {
                    rewardStyle = 'color:#FFD166;';
                } else if (item.reward.includes('Loading Screen')) {
                    rewardStyle = 'color:#A855F7;';
                } else if (item.reward.includes('XP') || item.reward.includes('40k')) {
                    rewardStyle = 'color:#FF6B9D;';
                }

                // Poi, nella creazione del TD, usa iconHtml al posto di ${icon}
				tr.innerHTML = `
					<td style="padding:6px 8px;font-weight:700;color:#00D4FF;font-family:monospace;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;" data-code="${item.code}">
						${iconHtml}
						<span>${item.code}</span>
					</td>
					<td style="padding:6px 8px;${rewardStyle}">${rewardDisplay}</td>
				`;
                
                const tdCode = tr.querySelector('td[data-code]');
                if (tdCode) {
                    tdCode.addEventListener('click', function() {
                        const code = this.dataset.code;
                        navigator.clipboard.writeText(code).then(() => {
                            showToast(`✅ Copied: ${code}`);
                        }).catch(() => {
                            const textarea = document.createElement('textarea');
                            textarea.value = code;
                            document.body.appendChild(textarea);
                            textarea.select();
                            document.execCommand('copy');
                            textarea.remove();
                            showToast(`✅ Copied: ${code}`);
                        });
                    });
                }
            }

            tbody.appendChild(tr);
        });
    });

    modal.style.display = 'flex';
    modal.setAttribute('aria-hidden', 'false');
}

function getSeasonConfig(season) {
  const config = SEASON_CONFIG[season];
  const seasonLabel = SEASON_NAME_TRANSLATIONS[currentLang]?.[config?.label] || config?.label || `Season ${season}`;
  if (config) return { ...config, label: seasonLabel };
  return { 
    label: `Season ${season}`, 
    color: '#FFFFFF', 
    bg: '#6B7280', 
    textColor: '#FFFFFF' 
  };
}

/* ---------- STORAGE ---------- */
const STORAGE_KEY = 'fortnite_sprites_locker_v2_6_exportbg_inline';
function defaultState() {
  const s = {};
  SPRITES.forEach(sp => {
    s[sp.id] = {
      variants: sp.variants.reduce((a, k) => { a[k] = false; return a; }, {}),
      variantsMastered: sp.variants.reduce((a, k) => { a[k] = false; return a; }, {}),
	  variantsLevel: sp.variants.reduce((a, k) => { a[k] = 1; return a; }, {}),
      mastered: false,
      img: null,
      lastUpdated: null,
    };
  });
  return s;
}

function loadState() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return defaultState();
    const parsed = JSON.parse(raw);
    const base = defaultState();
    Object.keys(base).forEach(k => {
      if (!parsed[k]) parsed[k] = base[k];
      else {
	  
        // Assicura che variants esista
        parsed[k].variants = Object.assign({}, base[k].variants, parsed[k].variants || {});
		
        // Se non esiste variantsMastered, crealo con default false
        if (!parsed[k].variantsMastered) {
          parsed[k].variantsMastered = {};
          Object.keys(base[k].variants).forEach(v => {
		  
            // Se il vecchio mastered era true, considera tutte le varianti possedute come masterate
            parsed[k].variantsMastered[v] = parsed[k].mastered === true && parsed[k].variants[v] === true;
          });
        }
		
		// Assicura che variantsLevel esista con valori di default
		if (!parsed[k].variantsLevel) {
		  parsed[k].variantsLevel = {};
		  Object.keys(base[k].variants).forEach(v => {
			parsed[k].variantsLevel[v] = 1;
		  });
		} else {
		  Object.keys(base[k].variants).forEach(v => {
			if (typeof parsed[k].variantsLevel[v] === 'undefined') {
			  parsed[k].variantsLevel[v] = 1;
			}
		  });
		}
        if (typeof parsed[k].mastered === 'undefined') parsed[k].mastered = false;
        if (typeof parsed[k].img === 'undefined') parsed[k].img = null;
      }
    });
    return parsed;
  } catch (e) {
    console.warn(e);
    return defaultState();
  }
}

function saveState(s){ try{ s._lastSave=new Date().toISOString(); localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); const ts = new Date().toLocaleString(); document.getElementById('last-save').textContent = ts;
document.getElementById('footer-last-save').textContent = 'Last save: ' + ts;updateSidebarStats(); }catch(e){console.warn(e);} }

// Migrazione per sprite masterati prima dell'introduzione dei livelli
function migrateOldMastered() {
    const s = loadState();
    let changed = false;
    SPRITES.forEach(sp => {
        const st = s[sp.id];
        if (st.mastered) {
            const released = getReleasedVariants(sp);
            released.forEach(v => {
                // Se è posseduto e masterato ma non è a livello 5, alzalo
                if (st.variants[v] && st.variantsMastered[v] && st.variantsLevel[v] !== 5) {
                    st.variantsLevel[v] = 5;
                    changed = true;
                }
            });
        }
    });
    if (changed) {
        saveState(s);
        state = loadState();
    }
}
/* ---------- ASSET BASE ---------- */
let ASSET_BASE = 'assets/sprites/';
const ASSET_BASE_KEY = 'sprites_asset_base';

function normalizeBase(b){ if(!b) return ''; let nb = b.replace(/\\/g, '/'); if(!nb.endsWith('/')) nb += '/'; return nb; }
function saveAssetBase(value){ if(!value){ localStorage.removeItem(ASSET_BASE_KEY); return; } localStorage.setItem(ASSET_BASE_KEY, value); ASSET_BASE = normalizeBase(value); }

/* ---------- Asset base show/hide ---------- */
const assetWrapper = document.getElementById('asset-base-wrapper');
const assetShowBtn = document.getElementById('asset-base-show');
const assetHideBtn = document.getElementById('asset-base-hide');

assetShowBtn.addEventListener('click', ()=>{
  assetWrapper.classList.remove('hidden');
  assetShowBtn.style.display = 'none';
});
assetHideBtn.addEventListener('click', ()=>{
  assetWrapper.classList.add('hidden');
  assetShowBtn.style.display = 'inline-flex';
});

function waitForImage(img) {
  return new Promise((resolve) => {
    if (img.complete && img.naturalWidth > 0) {
      resolve();
      return;
    }
    img.onload = () => resolve();
    img.onerror = () => resolve();
    // Timeout di sicurezza (5 secondi)
    setTimeout(resolve, 5000);
  });
}

async function loadImageWithFallback(imgEl, base, id) {
  if (!base) base = ASSET_BASE || 'assets/sprites/';
  base = base.replace(/\\/g, '/');
  if (!base.endsWith('/')) base += '/';

  // Se non c'è ID, placeholder
  if (!id) {
    imgEl.src = placeholderSVG('No Image');
    await waitForImage(imgEl);
    imgEl.classList.add('loaded');
    return;
  }

  // Se è già un dataURL o URL assoluto
  if (id.startsWith('data:') || id.startsWith('http') || id.includes('/')) {
    imgEl.src = id;
    await waitForImage(imgEl);
    imgEl.classList.add('loaded');
    return;
  }

  const isLocal = window.location.protocol === 'file:';
  const exts = ['.png'];

  // 1. Prova SENZA crossOrigin (funziona per file://)
  for (const ext of exts) {
    const candidate = base + id + ext;
    try {
      const loaded = await testCandidate(candidate, false);
      if (loaded) {
        imgEl.removeAttribute('crossorigin');
        imgEl.src = candidate;
        await waitForImage(imgEl);
        imgEl.classList.add('loaded');
        return;
      }
    } catch (e) {}
  }

  // 2. Se siamo in locale e ha fallito, usa placeholder
  if (isLocal) {
    imgEl.src = placeholderSVG(id);
    await waitForImage(imgEl);
    imgEl.classList.add('loaded');
    return;
  }

  // 3. Prova CON crossOrigin (per http/https)
  for (const ext of exts) {
    const candidate = base + id + ext;
    try {
      const loaded = await testCandidate(candidate, true);
      if (loaded) {
        imgEl.crossOrigin = 'anonymous';
        imgEl.src = candidate;
        await waitForImage(imgEl);
        imgEl.classList.add('loaded');
        return;
      }
    } catch (e) {}
  }

  // 4. Fallback finale
  imgEl.src = placeholderSVG(id);
  await waitForImage(imgEl);
  imgEl.classList.add('loaded');
}

function testCandidate(url, useCross) {
  return new Promise((resolve) => {
    const tester = new Image();
    if (useCross) tester.crossOrigin = 'anonymous';
    let done = false;
    const timeout = setTimeout(() => {
      if (!done) { done = true; tester.src = ''; resolve(false); }
    }, 2000);
    tester.onload = () => {
      if (done) return;
      done = true;
      clearTimeout(timeout);
      resolve(true);
    };
    tester.onerror = () => {
      if (done) return;
      clearTimeout(timeout);
      resolve(false);
    };
    tester.src = url;
  });
}

function placeholderSVG(name){ const svg=`<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'><rect width='100%' height='100%' rx='24' fill='rgba(255,255,255,0.02)'/><text x='50%' y='50%' font-size='28' text-anchor='middle' fill='rgba(255,255,255,0.12)' font-family='Montserrat' dy='.35em'>${name}</text></svg>`; return 'data:image/svg+xml;utf8,'+encodeURIComponent(svg); }

/* ---------- INLINE IMAGES ---------- */
async function inlineImages(container){
  const imgs = Array.from(container.querySelectorAll('img'));
  await Promise.all(imgs.map(async img => {
    try{
      if(!img.src || img.src.startsWith('data:')) return;
      if(img.src.startsWith('http://') || img.src.startsWith('https://')){
        try{
          const resp = await fetch(img.src, {mode:'cors'});
          if(!resp.ok) throw new Error('fetch failed');
          const blob = await resp.blob();
          const dataUrl = await new Promise(resolve=>{
            const r = new FileReader();
            r.onload = ()=> resolve(r.result);
            r.readAsDataURL(blob);
          });
          img.dataset._origSrc = img.src;
          img.src = dataUrl;
          return;
        }catch(e){}
      }
      try{
        if(!img.complete){
          await new Promise((res,rej)=>{
            img.onload = ()=> res();
            img.onerror = ()=> rej(new Error('img load failed'));
            setTimeout(()=> rej(new Error('img load timeout')), 2500);
          });
        }
        const w = img.naturalWidth || img.width || 256;
        const h = img.naturalHeight || img.height || 256;
        const off = document.createElement('canvas');
        off.width = w;
        off.height = h;
        const ctx = off.getContext('2d');
        ctx.drawImage(img, 0, 0, w, h);
        const dataUrl = off.toDataURL('image/png');
        img.dataset._origSrc = img.src;
        img.src = dataUrl;
        return;
      }catch(e){}
    }catch(e){}
  }));
}

/* ---------- UI ---------- */
const sidebarList = document.getElementById('sidebar-list');
if (!sidebarList) {
  console.warn('sidebar-list non trovata, ricostruisco...');
  renderSidebar();
}
const mainImg = document.getElementById('main-img');
const mainName = document.getElementById('main-name');
const mainRarityTag = document.getElementById("main-rarity-tag");
const mainFill = document.getElementById('main-fill');
const mainPercent = document.getElementById('main-percent');
const mainCount = document.getElementById('main-count');
const variantsGrid = document.getElementById('variants-grid');
const mainPassive = document.getElementById('main-passive');
const mainMastered = document.getElementById('main-mastered');

let state = loadState();
let currentIndex = 0;
let gridMode = false;
let isInitialized = false;
let _updatingMastered = false;
let selectedVariant = null;
const SELECTED_VARIANT_KEY = 'sprite_selected_variant';
const TRANSLATIONS = {
    it: {
        banner_sub: "LA MIA COLLEZIONE DI SPIRITELLI",
        banner_title: "CAPITOLO 7 • TUTTE LE STAGIONI",
		banner_title_season3: "CAPITOLO 7 • STAGIONE 3",
		banner_title_season4: "CAPITOLO 7 • STAGIONE 4",
		banner_title_all: "CAPITOLO 7 • TUTTE LE STAGIONI",
        filter_all: "Tutti",
        sort_name_asc: "Nome (A-Z)",
        sort_name_desc: "Nome (Z-A)",
        sort_rarity_desc: "Rarità (più raro prima)",
        sort_rarity_asc: "Rarità (più raro dopo)",
        sort_progress_desc: "Completamento (alto primo)",
        sort_progress_asc: "Completamento (basso primo)",
        sort_updated_desc: "Ultimo aggiornamento",
        filter_all_seasons: "Tutte le stagioni",
        hide_mastered: "Nascondi padroneggiati",
        hide_unreleased: "Nascondi non rilasciati",
        group_rarity: "Raggruppa per rarità",
        layout: "🔳 Layout",
        stats: "📊 Statistiche",
        export: "⚙️ Esporta",
        my_collection: "La mia collezione",
        variants: "Varianti",
        mastered: "Padroneggiato",
        passive_ability: "Abilità passiva",
        variant_info: "Informazioni variante",
        variant: "Variante",
        summon_cost: "Costo di evocazione",
        bonus: "Bonus",
        spawn_rate: "Tasso di spawn",
        base_spawn: "Tasso di spawn base",
        mark_all: "Segna tutte acquisite",
        clear: "Cancella",
		tooltip: "Click per selezionare, ★ per padroneggiare",
		music: "🔊 SFX",
		prev: "◀ Precedente",
		next: "Prossimo ▶",
		variant_basic: "Base",
		variant_gold: "Oro",
		variant_gummy: "Gommoso",
		variant_galaxy: "Galassia",
		variant_holofoil: "Olografico",
		variant_cube: "Cubo",
		variant_gem: "Gemma",
		variant_quack: "Paperetto",
		stats_title: "Statistiche",
		stats_sprite_acquired: "Sprite acquisiti",
		stats_variants_acquired: "Varianti acquisite",
		stats_overall_completion: "Completamento totale",
		stats_sprites_acquired: "Sprite acquisiti",
		stats_details_rarity: "Dettagli per rarità",
		footer_sprites: "Sprite: {count} • Varianti totali: {total}",
		footer_last_save: "Ultimo salvataggio:",
		search_placeholder: "Cerca Sprite...",
		export_menu_title: "Menu esportazione",
		export_menu_subtitle: "Scegli cosa esportare",
		export_png: "🖼️ Esporta PNG",
		export_entire: "📁 Tutta la collezione",
		export_missing: "🔍 Solo mancanti",
		export_current: "🎯 Sprite corrente",
		export_data: "💾 Dati",
		export_json: "📤 Esporta JSON",
		export_import: "📥 Importa JSON",
		export_community: "🌐 Community",
		export_share: "🔗 Copia link di condivisione",
		export_qr: "📱 QR Code",
		export_support: "❤️ Supportami",
		export_github: "Visualizza su GitHub",
		export_close: "Chiudi",
		qr_title: "📱 QR Code",
		qr_description: "Scansiona questo QR per aprire il sito su un altro dispositivo",
		confirm_title: "Conferma",
		confirm_cancel: "Annulla",
		confirm_ok: "Conferma",
		mastered_toggle: "Padroneggiato",
		unreleased_badge: "NON RILASCIATO",
		clear: "Cancella",
		share_title: "Condividi la collezione",
		share_description: "",
		share_copied: "✔ Link copiato con successo!",
		share_anyone: "Chiunque abbia questo link può importare la tua collezione.",
		share_copy_again: "Copia di nuovo",
		share_close: "Chiudi",
		support_title: "Supporta il progetto",
		support_description: "Grazie per usare Fortnite Sprite Locker!",
		support_text: "Se ti piace questo tracker e vuoi supportare gli aggiornamenti futuri, considera di iscriverti al mio canale.",
		support_youtube: "▶ YouTube",
		support_back: "← Indietro",
		qr_description: "Scansiona questo QR per aprire il sito su un altro dispositivo",
		export_subtitle_all: "Tutti i miei sprite collezionati e mancanti",
		export_subtitle_missing: "Sprite con varianti ancora da collezionare",
		export_subtitle_current: "Visualizzazione corrente: {sprite}",
		badge_entire: "📁 Collezione completa",
		badge_missing: "🔍 Varianti mancanti",
		badge_current: "🎯 Singolo sprite",
		collection_progress: "Avanzamento collezione",
		progress_halfway: "🏃 A metà dell'opera!",
		progress_almost: "🔥 Ci siamo quasi!",
		progress_complete: "🎉 COLLEZIONE COMPLETATA!",
		progress_unlocked: "🔓 {badge} sbloccato!",
		shortcuts_title: "⚡Scorciatoie",
		shortcut_navigate: "Naviga tra gli sprite",
		shortcut_toggle: "Cambio stato variante",
		shortcut_music: "Avvia/Metti in pausa gli SFX",
		shortcut_mastered: "Segna come padroneggiato",
		shortcut_grid: "Alterna Griglia / Locker",
		shortcut_search: "Focus sulla ricerca",
		shortcut_export: "Apri Esporta",
		shortcut_esc: "Chiudi / Esci dal campo",
		shortcut_help: "Mostra questo menu",
		shortcuts_close: "Chiudi",
		shortcut_garden: "Apri Giardino degli Sprite",
		shortcut_konami: "Cambia stagione rapidamente",
		shortcut_stats: "Apri Statistiche",
		season3_chapter: "CAPITOLO 7 • STAGIONE 3",
		season4_chapter: "CAPITOLO 7 • STAGIONE 4",
		garden_title: "🌱 Giardino degli Sprite",
		season_3: "Stagione 3 - Runners",
		season_4: "Stagione 4 - Override",
		variants_label: "varianti",
		sprites_label: "Sprite",
		bonus_basic: "Nessun bonus",
		bonus_gold: "3x Punti Esperienza Sprite dalle eliminazioni",
		bonus_gummy: "+20% Polvere di Sprite quando estratto",
		bonus_galaxy: "+30% Munizioni quando raccolto",
		bonus_holofoil: "+5% possibilità di trovare sprite rari",
		bonus_cube: "Effetto Overdrive mentre sei nella Tempesta",
		bonus_quack: "50% Punti Esperienza Sprite per gli altri sprite nell'inventario",
		bonus_gem: "-30% Danno da caduta",
		variant_cheat: "Maestro dei trucchi",
		bonus_cheat: "+50% di danno ai forzieri e alle casse di munizioni",
		codes_title: "📋 Codici Lobby - Stagione 4",
		codes_description: "Usa questi codici in lobby per sbloccare ricompense speciali",
		codes_code: "Codice",
		codes_reward: "Ricompensa",
		codes_close: "Chiudi",
		lobby_codes: "📋 Codici Lobby S4",
		shortcuts_keyboard: "⌨️ Tastiera",
		shortcuts_touch: "📱 Touch / Mobile",
		touch_gesture_swipe: "Scorri ← / → sullo sprite",
		touch_gesture_doubletap: "Doppio click sullo sprite",
		touch_gesture_tap_btn: "Doppio click sull'intestazione della stagione",
		touch_gesture_doubletap_logo: "Doppio click sul logo",
		touch_gesture_tap_footer: "Click sulla stagione 'Override' nel footer",
		shortcuts_mobile: "⚡ Scorciatoie",
		shortcut_map: "Apri mappa",
		map: "🗺️ Mappa",
		map_title_season3: "Mappa Stagione 3 - RUNNERS",
		map_title_season4: "Mappa Stagione 4 - OVERRIDE",
		map_legend_season3: "🟡 Casse Spritelli",
		map_legend_season4: "🔵 Codice dei trucchi",
		obtained_via: "Ottenuto tramite",
		level_up: "Livellamento",
		obtain_lobby_code: "🎮 Codice Lobby",
		obtain_cheat_locator: "Codice dei trucchi",
		obtain_sprite_chest: "Cassa Spiritello",
		level_chests_eliminations: "📦 Forzieri | 💀 Eliminazioni",
		level_victory_royale: "Vittoria Reale",
		level_consumables_shield: "Consumabili (Scudo)",
		level: "Livello",
        codes_section_sprites: '🎮 Varianti Sprite',
        codes_section_loading: '🖼️ Schermate di Caricamento',
        codes_section_resources: '💎 Risorse',
        codes_section_effects: '✨ Effetti Divertenti',
		selected_variant: 'Variante selezionata',
		pod: "🎒 Zaino",
		more: "⋯ Altro",
		pod_title_mastery: "ZAINO DELLA MAESTRIA",
		pod_title_all: "ZAINO DELLA MAESTRIA - TUTTE LE STAGIONI",
		pod_title_s3: "ZAINO DELLA MAESTRIA DEGLI SPRITE",
		pod_title_s4: "ZAINO GAMEBOY",
		pod_subtitle_all: "Stagione 3 & 4",
		pod_subtitle_s3: "Stagione 3 - Runners",
		pod_subtitle_s4: "Stagione 4 - Override",
		pod_backbling_label: "Zaino della Maestria",
		pod_hover_preview: "Passa il mouse sopra uno sprite per l'anteprima",
		calculator_title: "🧮 Calcolatrice Polvere di Sprite",
		calculator_subtitle: "Seleziona le varianti che devi rievocare",
		calculator_sprite_label: "Sprite",
		calculator_current_dust: "Polvere di Sprite attuale",
		calculator_variants_selected: "Varianti selezionate",
		calculator_resummon_cost: "Costo di rievocazione",
		calculator_missing_dust: "Polvere mancante",
		calculator_summary_title: "Riepilogo varianti selezionate",
		calculator_clear: "Cancella selezione",
		calculator_close: "Chiudi",
		shortcut_calculator: "Apri calcolatrice della polvere",
		intro_welcome: "Benvenuto in",
		intro_title: "Fortnite Sprite Locker",
		intro_watch: "▶ Guarda l'intro",
		intro_skip: "⏭️ Salta",
		reset_tooltip: "Ripristina intro",
		settings: "⚙️ Impostazioni",
		settings_title: "⚙️ Impostazioni",
		volume_label: "🔊 Volume",
		companion_label: "🐾 Compagno Sprite",
		companion_desc: "Scegli il tuo sprite compagno preferito",
		companion_toggle: "Mostra compagno",
		settings_close: "Chiudi"
    },
    en: {
        banner_sub: "MY SPRITE COLLECTION",
        banner_title: "CHAPTER 7 • ALL SEASONS",
		banner_title_season3: "CHAPTER 7 • SEASON 3",
		banner_title_season4: "CHAPTER 7 • SEASON 4",
		banner_title_all: "CHAPTER 7 • ALL SEASONS",
        filter_all: "All",
        sort_name_asc: "Name (A-Z)",
        sort_name_desc: "Name (Z-A)",
        sort_rarity_desc: "Rarity (rarest first)",
        sort_rarity_asc: "Rarity (rarest last)",
        sort_progress_desc: "Completion (high first)",
        sort_progress_asc: "Completion (low first)",
        sort_updated_desc: "Last updated",
        filter_all_seasons: "All Seasons",
        hide_mastered: "Hide mastered",
        hide_unreleased: "Hide unreleased",
        group_rarity: "Group by rarity",
        layout: "🔳 Layout",
        stats: "📊 Stats",
        export: "⚙️ Export",
        my_collection: "My collection",
        variants: "Variants",
        mastered: "Mastered",
        passive_ability: "Passive ability",
        variant_info: "Variant information",
        variant: "Variant",
        summon_cost: "Summon cost",
        bonus: "Bonus",
        spawn_rate: "Spawn rate",
        base_spawn: "Base sprite spawn rate",
        mark_all: "Mark All Acquired",
        clear: "Clear",
		tooltip: "Click to select, ★ to toggle mastered",
		music: "🔊 SFX",
		prev: "◀ Prev",
		next: "Next ▶",
		variant_basic: "Basic",
		variant_gold: "Gold",
		variant_gummy: "Gummy",
		variant_galaxy: "Galaxy",
		variant_holofoil: "Holofoil",
		variant_cube: "Cube",
		variant_gem: "Gem",
		variant_quack: "Quack",
		stats_title: "Stats",
		stats_sprite_acquired: "Sprites acquired",
		stats_variants_acquired: "Variants acquired",
		stats_overall_completion: "Overall completion",
		stats_sprites_acquired: "Sprites acquired",
		stats_details_rarity: "Details by rarity",
		footer_sprites: "Sprites: {count} • Variants total: {total}",
		footer_last_save: "Last save:",
		search_placeholder: "Search Sprite...",
		export_menu_title: "Export menu",
		export_menu_subtitle: "Choose what to export",
		export_png: "🖼️ Export PNG",
		export_entire: "📁 Entire collection",
		export_missing: "🔍 Missing only",
		export_current: "🎯 Current sprite",
		export_data: "💾 Data",
		export_json: "📤 Export JSON",
		export_import: "📥 Import JSON",
		export_community: "🌐 Community",
		export_share: "🔗 Copy share link",
		export_qr: "📱 QR Code",
		export_support: "❤️ Support me",
		export_github: "View on GitHub",
		export_close: "Close",
		qr_title: "📱 QR Code",
		qr_description: "Scan this QR code to open the website on another device",
		confirm_title: "Confirm",
		confirm_cancel: "Cancel",
		confirm_ok: "Confirm",
		mastered_toggle: "Mastered",
		unreleased_badge: "UNRELEASED",
		clear: "Clear",
		share_title: "Share Collection",
		share_description: "",
		share_copied: "✔ Link copied successfully!",
		share_anyone: "Anyone with this link can import your collection.",
		share_copy_again: "Copy Again",
		share_close: "Close",
		support_title: "Support the Project",
		support_description: "Thank you for using Fortnite Sprite Locker!",
		support_text: "If you enjoy this tracker and want to support future updates, consider subscribing to my channel.",
		support_youtube: "▶ YouTube",
		support_back: "← Back",
		qr_description: "Scan this QR code to open the website on another device",
		export_subtitle_all: "All my collected and missing sprites",
		export_subtitle_missing: "Sprites with variants still to collect",
		export_subtitle_current: "Currently viewing: {sprite}",
		badge_entire: "📁 Full collection",
		badge_missing: "🔍 Missing variants",
		badge_current: "🎯 Single sprite",
		collection_progress: "Collection progress",
		progress_halfway: "🏃 Halfway there!",
		progress_almost: "🔥 Almost there!",
		progress_complete: "🎉 COLLECTION COMPLETE!",
		progress_unlocked: "🔓 {badge} unlocked!",
		shortcuts_title: "️⚡ Shortcuts",
		shortcut_navigate: "Navigate sprites",
		shortcut_toggle: "Toggle variant",
		shortcut_music: "Play/Pause SFX",
		shortcut_mastered: "Toggle Mastered",
		shortcut_grid: "Toggle Grid / Locker",
		shortcut_search: "Focus search",
		shortcut_export: "Open Export Menu",
		shortcut_esc: "Close / Blur input",
		shortcut_help: "Show this menu",
		shortcuts_close: "Close",
		shortcut_stats: "Open Stats",
		shortcut_garden: "Open Sprite Garden",
		shortcut_konami: "Switch seasons quickly",
		season3_chapter: "CHAPTER 7 • SEASON 3",
		season4_chapter: "CHAPTER 7 • SEASON 4",
		garden_title: "🌱 Sprite Garden",
		season_3: "Season 3 - Runners",
		season_4: "Season 4 - Override",
		variants_label: "variants",
		sprites_label: "Sprites",
		bonus_basic: "No bonus",
		bonus_gold: "3x Sprite XP from eliminations",
		bonus_gummy: "+20% Sprite Dust when extracted",
		bonus_galaxy: "+30% Ammo whenever it is picked up",
		bonus_holofoil: "+5% chance to find rare sprites",
		bonus_cube: "Overdrive effect while inside the Storm",
		bonus_quack: "50% Sprite XP to other sprites in inventory",
		bonus_gem: "-30% Fall damage",
		variant_cheat: "Cheat Master",
		bonus_cheat: "+50% damage to chests and ammo boxes",
		codes_title: "📋 Lobby Codes - Season 4",
		codes_description: "Use these codes in lobby to unlock special rewards",
		codes_code: "Code",
		codes_reward: "Reward",
		codes_close: "Close",
		lobby_codes: "📋 Lobby Codes S4",
		shortcuts_keyboard: "⌨️ Keyboard",
		shortcuts_touch: "📱 Touch / Mobile",
		touch_gesture_swipe: "Swipe ← / → on sprite",
		touch_gesture_doubletap: "Double‑tap on sprite",
		touch_gesture_tap_btn: "Double-tap season header",
		touch_gesture_doubletap_logo: "Double‑tap on the logo",
		touch_gesture_tap_footer: "Tap season in footer",
		shortcuts_mobile: "⚡ Shortcuts",
		shortcut_map: "Open Map",
		map: "🗺️ Map",
		map_title_season3: "Season 3 - RUNNERS",
		map_title_season4: "Season 4 - OVERRIDE",
		map_legend_season3: "🟡 Sprite Chest",
		map_legend_season4: "🔵 Cheat Code",
		map_title_season3: "Season 3 Map - RUNNERS",
		obtained_via: "Obtained via",
		level_up: "Level up",
		obtain_lobby_code: "🎮 Lobby Code",
		obtain_cheat_locator: "Cheat Code",
		obtain_sprite_chest: "Sprite Chest",
		level_chests_eliminations: "📦 Chests | 💀 Eliminations",
		level_victory_royale: "Victory Royale",
		level_consumables_shield: "Consumables (Shield)",
		level: "Level",
		codes_section_sprites: '🎮 Sprite Variants',
        codes_section_loading: '🖼️ Loading Screens',
        codes_section_resources: '💎 Resources',
        codes_section_effects: '✨ Fun Effects',
		selected_variant: 'Selected variant',
		pod: "🎒 Back Bling",
		more: "⋯ More",
		pod_title_mastery: "MASTERY POD",
		pod_title_all: "MASTERY BACK BLING - ALL SEASONS",
		pod_title_s3: "SPRITE MASTERY POD",
		pod_title_s4: "GAMEBOY POD",
		pod_subtitle_all: "Season 3 & 4",
		pod_subtitle_s3: "Season 3 - Runners",
		pod_subtitle_s4: "Season 4 - Override",
		pod_backbling_label: "Mastery Back Bling",
		pod_hover_preview: "Hover to preview",
		calculator_title: "🧮 Sprite Dust Calculator",
		calculator_subtitle: "Select the variants you need to resummon",
		calculator_sprite_label: "Sprite",
		calculator_current_dust: "Current Sprite Dust",
		calculator_variants_selected: "Variants selected",
		calculator_resummon_cost: "Resummon Cost",
		calculator_missing_dust: "Missing Dust",
		calculator_summary_title: "Selected variants summary",
		calculator_clear: "Clear selection",
		calculator_close: "Close",
		shortcut_calculator: "Open Sprite Dust Calculator",
		intro_welcome: "Welcome to",
		intro_title: "Fortnite Sprite Locker",
		intro_watch: "▶ Watch the intro",
		intro_skip: "⏭️ Skip",
		reset_tooltip: "Reset welcome",
		settings: "⚙️ Settings",
		settings_title: "⚙️ Settings",
		volume_label: "🔊 Volume",
		companion_label: "🐾 Sprite Companion",
		companion_desc: "Choose your favorite sprite companion",
		companion_toggle: "Show companion",
		settings_close: "Close"
    },
    es: {
        banner_sub: "MI COLECCIÓN DE SPRITES",
        banner_title: "CAPÍTULO 7 • TODAS LAS TEMPORADAS",
		banner_title_season3: "CAPÍTULO 7 • TEMPORADA 3",
		banner_title_season4: "CAPÍTULO 7 • TEMPORADA 4",
		banner_title_all: "CAPÍTULO 7 • TODAS LAS TEMPORADAS",
        filter_all: "Todos",
        sort_name_asc: "Nombre (A-Z)",
        sort_name_desc: "Nombre (Z-A)",
        sort_rarity_desc: "Rareza (más raro primero)",
        sort_rarity_asc: "Rareza (más raro último)",
        sort_progress_desc: "Progreso (más alto primero)",
        sort_progress_asc: "Progreso (más bajo primero)",
        sort_updated_desc: "Última actualización",
        filter_all_seasons: "Todas las temporadas",
        hide_mastered: "Ocultar completados",
        hide_unreleased: "Ocultar no lanzados",
        group_rarity: "Agrupar por rareza",
        layout: "🔳 Diseño",
        stats: "📊 Estadísticas",
        export: "⚙️ Exportar",
        my_collection: "Mi colección",
        variants: "Variantes",
        mastered: "Completado",
        passive_ability: "Habilidad pasiva",
        variant_info: "Información de variante",
        variant: "Variante",
        summon_cost: "Coste de invocación",
        bonus: "Bonificación",
        spawn_rate: "Tasa de aparición",
        base_spawn: "Tasa de aparición base",
        mark_all: "Marcar todas adquiridas",
        clear: "Limpiar",
		tooltip: "Clic para seleccionar, ★ para dominar",
		music: "🔊 SFX",
		prev: "◀ Anterior",
		next: "Siguiente ▶",
		variant_basic: "Base",
		variant_gold: "Oro",
		variant_gummy: "Gomoso",
		variant_galaxy: "Galaxia",
		variant_holofoil: "Holográfico",
		variant_cube: "Cubo",
		variant_gem: "Gema",
		variant_quack: "Quack",
		stats_title: "Estadísticas",
		stats_sprite_acquired: "Sprites adquiridos",
		stats_variants_acquired: "Variantes adquiridas",
		stats_overall_completion: "Progreso total",
		stats_sprites_acquired: "Sprites completados",
		stats_details_rarity: "Detalles por rareza",
		footer_sprites: "Sprites: {count} • Variantes totales: {total}",
		footer_last_save: "Último guardado:",
		search_placeholder: "Buscar Sprite...",
		export_menu_title: "Menú exportar",
		export_menu_subtitle: "Elige qué exportar",
		export_png: "🖼️ Exportar PNG",
		export_entire: "📁 Colección completa",
		export_missing: "🔍 Solo faltantes",
		export_current: "🎯 Sprite actual",
		export_data: "💾 Datos",
		export_json: "📤 Exportar JSON",
		export_import: "📥 Importar JSON",
		export_community: "🌐 Comunidad",
		export_share: "🔗 Copiar enlace para compartir",
		export_qr: "📱 Código QR",
		export_support: "❤️ Apóyame",
		export_github: "Ver en GitHub",
		export_close: "Cerrar",
		qr_title: "📱 Código QR",
		qr_description: "Escanea este QR para abrir el sitio en otro dispositivo",
		confirm_title: "Confirmar",
		confirm_cancel: "Cancelar",
		confirm_ok: "Confirmar",
		mastered_toggle: "Dominado",
		unreleased_badge: "NO LANZADO",
		clear: "Limpiar",
		share_title: "Compartir colección",
		share_description: "",
		share_copied: "✔ ¡Enlace copiado con éxito!",
		share_anyone: "Cualquier persona con este enlace puede importar tu colección.",
		share_copy_again: "Copiar de nuevo",
		share_close: "Cerrar",
		support_title: "Apoya el proyecto",
		support_description: "¡Gracias por usar Fortnite Sprite Locker!",
		support_text: "Si te gusta este rastreador y quieres apoyar futuras actualizaciones, considera suscribirte a mi canal.",
		support_youtube: "▶ YouTube",
		support_back: "← Atrás",
		qr_description: "Escanea este QR para abrir el sitio en otro dispositivo",
		export_subtitle_all: "Todos mis sprites coleccionados y faltantes",
		export_subtitle_missing: "Sprites con variantes aún por coleccionar",
		export_subtitle_current: "Viendo actualmente: {sprite}",
		badge_entire: "📁 Colección completa",
		badge_missing: "🔍 Variantes faltantes",
		badge_current: "🎯 Sprite individual",
		collection_progress: "Progreso de la colección",
		progress_halfway: "🏃 ¡A mitad de camino!",
		progress_almost: "🔥 ¡Casi lo tienes!",
		progress_complete: "🎉 ¡COLECCIÓN COMPLETADA!",
		progress_unlocked: "🔓 ¡{badge} desbloqueado!",
		shortcuts_title: "⚡ Atajos de teclado",
		shortcut_navigate: "Navegar sprites",
		shortcut_toggle: "Alternar variante",
		shortcut_music: "Reproducir/Pausa SFX",
		shortcut_mastered: "Alternar Dominado",
		shortcut_grid: "Alternar Cuadrícula / Locker",
		shortcut_search: "Enfocar búsqueda",
		shortcut_export: "Abrir menú de exportación",
		shortcut_esc: "Cerrar / Quitar del campo",
		shortcut_help: "Mostrar este menú",
		shortcuts_close: "Cerrar",
		shortcut_garden: "Abrir Jardín de Sprites",
		shortcut_konami: "Cambiar de temporada rápidamente",
		shortcut_stats: "Abrir Estadísticas",
		season3_chapter: "CAPÍTULO 7 • TEMPORADA 3",
		season4_chapter: "CAPÍTULO 7 • TEMPORADA 4",
		garden_title: "🌱 Jardín de Sprites",
		season_3: "Temporada 3 - Runners",
		season_4: "Temporada 4 - Override",
		variants_label: "variantes",
		sprites_label: "Sprites",
		bonus_basic: "Sin bonificación",
		bonus_gold: "3x XP de Sprite por eliminaciones",
		bonus_gummy: "+20% Polvo de Sprite al extraer",
		bonus_galaxy: "+30% Munición al recogerlo",
		bonus_holofoil: "+5% de probabilidad de encontrar sprites raros",
		bonus_cube: "Efecto Overdrive dentro de la Tormenta",
		bonus_quack: "50% XP de Sprite para otros sprites en el inventario",
		bonus_gem: "-30% Daño por caída",
		variant_cheat: "Maestro de Trucos",
		bonus_cheat: "+50% de daño a cofres y cajas de munición",
		codes_title: "📋 Códigos de Lobby - Temporada 4",
		codes_description: "Usa estos códigos en el lobby para desbloquear recompensas especiales",
		codes_code: "Código",
		codes_reward: "Recompensa",
		codes_close: "Cerrar",
		lobby_codes: "📋 Códigos Lobby S4",
		shortcuts_keyboard: "⌨️ Teclado",
		shortcuts_touch: "📱 Táctil / Móvil",
		touch_gesture_swipe: "Desliza ← / → en el sprite",
		touch_gesture_doubletap: "Doble toque en el sprite",
		touch_gesture_tap_btn: "Doble toque en el encabezado de temporada",
		touch_gesture_doubletap_logo: "Doble toque en el logo",
		touch_gesture_tap_footer: "Toca la temporada en el pie de página",
		shortcuts_mobile: "⚡ Atajos",
		shortcut_map: "Abrir Mapa",
		map: "🗺️ Mapa",
		map_title_season3: "Mapa Temporada 3 - RUNNERS",
		map_title_season4: "Mapa Temporada 4 - OVERRIDE",
		map_legend_season3: "🟡 Cofre Sprite",
		map_legend_season4: "🔵 Códigos",
		obtained_via: "Obtenido mediante",
		level_up: "Subida de nivel",
		obtain_lobby_code: "🎮 Código de Lobby",
		obtain_cheat_locator: "Código",
		obtain_sprite_chest: "Cofre de Sprite",
		level_chests_eliminations: "📦 Cofres | 💀 Eliminaciones",
		level_victory_royale: "Victoria Royale",
		level_consumables_shield: "Consumibles (Escudo)",
		level: "Nivel",
		codes_section_sprites: '🎮 Variantes de Sprite',
        codes_section_loading: '🖼️ Pantallas de Carga',
        codes_section_resources: '💎 Recursos',
        codes_section_effects: '✨ Efectos Divertidos',
		selected_variant: 'Variante seleccionada',
		pod: "🎒 Mochilla",
		more: "⋯ Más",
		pod_title_mastery: "MOCHILLA DE DOMINIO",
		pod_title_all: "MOCHILLA DE DOMINIO - TODAS LAS TEMPORADAS",
		pod_title_s3: "MOCHILLA DE DOMINIO DE SPRITES",
		pod_title_s4: "MOCHILLA GAMEBOY",
		pod_subtitle_all: "Temporada 3 y 4",
		pod_subtitle_s3: "Temporada 3 - Runners",
		pod_subtitle_s4: "Temporada 4 - Override",
		pod_backbling_label: "Mochila de Dominio",
		pod_hover_preview: "Pasa el ratón sobre un espiritus para previsualizar",
		calculator_title: "🧮 Calculadora de Polvo de Sprite",
		calculator_subtitle: "Selecciona las variantes que necesitas invocar de nuevo",
		calculator_sprite_label: "Sprite",
		calculator_current_dust: "Polvo de Sprite actual",
		calculator_variants_selected: "Variantes seleccionadas",
		calculator_resummon_cost: "Costo de reinvocación",
		calculator_missing_dust: "Polvo faltante",
		calculator_summary_title: "Resumen de variantes seleccionadas",
		calculator_clear: "Limpiar selección",
		calculator_close: "Cerrar",
		shortcut_calculator: "Abrir calculadora de polvo",
		intro_welcome: "Bienvenido a",
		intro_title: "Fortnite Sprite Locker",
		intro_watch: "▶ Ver la introducción",
		intro_skip: "⏭️ Saltar",
		reset_tooltip: "Restablecer introducción",
		settings: "⚙️ Configuración",
		settings_title: "⚙️ Configuración",
		volume_label: "🔊 Volumen",
		companion_label: "🐾 Compañero Sprite",
		companion_desc: "Elige tu sprite compañero favorito",
		companion_toggle: "Mostrar compañero",
		settings_close: "Cerrar"
    },
    fr: {
        banner_sub: "MA COLLECTION DE SPRITES",
        banner_title: "CHAPITRE 7 • TOUTES LES SAISONS",
		banner_title_season3: "CHAPITRE 7 • SAISON 3",
		banner_title_season4: "CHAPITRE 7 • SAISON 4",
		banner_title_all: "CHAPITRE 7 • TOUTES LES SAISONS",
        filter_all: "Tous",
        sort_name_asc: "Nom (A-Z)",
        sort_name_desc: "Nom (Z-A)",
        sort_rarity_desc: "Rareté (plus rare d'abord)",
        sort_rarity_asc: "Rareté (plus rare en dernier)",
        sort_progress_desc: "Progression (plus haute d'abord)",
        sort_progress_asc: "Progression (plus basse d'abord)",
        sort_updated_desc: "Dernière mise à jour",
        filter_all_seasons: "Toutes les saisons",
        hide_mastered: "Masquer les maîtrisés",
        hide_unreleased: "Masquer les non publiés",
        group_rarity: "Grouper par rareté",
        layout: "🔳 Mise en page",
        stats: "📊 Statistiques",
        export: "⚙️ Exporter",
        my_collection: "Ma collection",
        variants: "Variantes",
        mastered: "Maîtrisé",
        passive_ability: "Capacité passive",
        variant_info: "Informations sur la variante",
        variant: "Variante",
        summon_cost: "Coût d'invocation",
        bonus: "Bonus",
        spawn_rate: "Taux d'apparition",
        base_spawn: "Taux d'apparition de base",
        mark_all: "Tout marquer comme acquis",
        clear: "Effacer",
		tooltip: "Cliquez pour sélectionner, ★ pour maîtriser",
		music: "🔊 SFX",
		prev: "◀ Précédent",
		next: "Suivant ▶",
		variant_basic: "Base",
		variant_gold: "Or",
		variant_gummy: "Gélifié",
		variant_galaxy: "Galaxie",
		variant_holofoil: "Holographique",
		variant_cube: "Cube",
		variant_gem: "Gemme",
		variant_quack: "Quack",
		stats_title: "Statistiques",
		stats_sprite_acquired: "Sprites acquis",
		stats_variants_acquired: "Variantes acquises",
		stats_overall_completion: "Progression totale",
		stats_sprites_acquired: "Sprites complétés",
		stats_details_rarity: "Détails par rareté",
		footer_sprites: "Sprites: {count} • Variantes totales: {total}",
		footer_last_save: "Dernier enregistrement:",
		search_placeholder: "Rechercher un Sprite...",
		export_menu_title: "Menu d'exportation",
		export_menu_subtitle: "Choisissez ce qu'il faut exporter",
		export_png: "🖼️ Exporter en PNG",
		export_entire: "📁 Collection entière",
		export_missing: "🔍 Manquants uniquement",
		export_current: "🎯 Sprite actuel",
		export_data: "💾 Données",
		export_json: "📤 Exporter JSON",
		export_import: "📥 Importer JSON",
		export_community: "🌐 Communauté",
		export_share: "🔗 Copier le lien",
		export_qr: "📱 Code QR",
		export_support: "❤️ Soutenez-moi",
		export_github: "Voir sur GitHub",
		export_close: "Fermer",
		qr_title: "📱 Code QR",
		qr_description: "Scannez ce QR pour ouvrir le site sur un autre appareil",
		confirm_title: "Confirmer",
		confirm_cancel: "Annuler",
		confirm_ok: "Confirmer",
		mastered_toggle: "Maîtrisé",
		unreleased_badge: "NON PUBLIÉ",
		clear: "Effacer",
		share_title: "Partager la collection",
		share_description: "",
		share_copied: "✔ Lien copié avec succès !",
		share_anyone: "Toute personne disposant de ce lien peut importer votre collection.",
		share_copy_again: "Copier à nouveau",
		share_close: "Fermer",
		support_title: "Soutenir le projet",
		support_description: "Merci d'utiliser Fortnite Sprite Locker !",
		support_text: "Si vous aimez ce tracker et souhaitez soutenir les futures mises à jour, pensez à vous abonner à ma chaîne.",
		support_youtube: "▶ YouTube",
		support_back: "← Retour",
		qr_description: "Scannez ce QR pour ouvrir le site sur un autre appareil",
		export_subtitle_all: "Tous mes sprites collectés et manquants",
		export_subtitle_missing: "Sprites avec des variantes encore à collecter",
		export_subtitle_current: "Visualisation actuelle : {sprite}",
		badge_entire: "📁 Collection complète",
		badge_missing: "🔍 Variantes manquantes",
		badge_current: "🎯 Sprite individuel",
		collection_progress: "Progression de la collection",
		progress_halfway: "🏃 À mi-chemin !",
		progress_almost: "🔥 On y est presque !",
		progress_complete: "🎉 COLLECTION TERMINÉE !",
		progress_unlocked: "🔓 {badge} débloqué !",
		shortcuts_title: "⚡ Raccourcis clavier",
		shortcut_navigate: "Naviguer entre les sprites",
		shortcut_toggle: "Basculer la variante",
		shortcut_music: "Lecture/Pause SFX",
		shortcut_mastered: "Basculer Maîtrisé",
		shortcut_grid: "Basculer Grille / Locker",
		shortcut_search: "Activer la recherche",
		shortcut_export: "Ouvrir le menu d'exportation",
		shortcut_esc: "Fermer / Quitter le champ de saisie",
		shortcut_help: "Afficher ce menu",
		shortcuts_close: "Fermer",
		shortcut_stats: "Ouvrir le menu de Stats",
		shortcut_garden: "Ouvrir le Jardin de Sprites",
		shortcut_konami: "Changer de saison rapidement",
		season3_chapter: "CHAPITRE 7 • SAISON 3",
		season4_chapter: "CHAPITRE 7 • SAISON 4",
		garden_title: "🌱 Jardin de Sprites",
		season_3: "Saison 3 - Runners",
		season_4: "Saison 4 - Override",
		variants_label: "variantes",
		sprites_label: "Sprites",
		bonus_basic: "Pas de bonus",
		bonus_gold: "3x XP de Sprite par éliminations",
		bonus_gummy: "+20% Poussière de Sprite lors de l'extraction",
		bonus_galaxy: "+30% Munitions quand ramassé",
		bonus_holofoil: "+5% de chance de trouver des sprites rares",
		bonus_cube: "Effet Overdrive à l'intérieur de la Tempête",
		bonus_quack: "50% XP de Sprite pour les autres sprites dans l'inventaire",
		bonus_gem: "-30% Dégâts de chute",
		variant_cheat: "Maître de la Triche",
		bonus_cheat: "+50% de dégâts aux coffres et aux caisses de munitions",
		codes_title: "📋 Codes du Lobby - Saison 4",
		codes_description: "Utilisez ces codes dans le lobby pour débloquer des récompenses spéciales",
		codes_code: "Code",
		codes_reward: "Récompense",
		codes_close: "Fermer",
		lobby_codes: "📋 Codes Lobby S4",
		shortcuts_keyboard: "⌨️ Clavier",
		shortcuts_touch: "📱 Tactile / Mobile",
		touch_gesture_swipe: "Glisser ← / → sur le sprite",
		touch_gesture_doubletap: "Double‑tap sur le sprite",
		touch_gesture_tap_btn: "Double‑tap sur l'en-tête de saison",
		touch_gesture_doubletap_logo: "Double‑tap sur le logo",
		touch_gesture_tap_footer: "Tap sur la saison dans le pied de page",
		shortcuts_mobile: "⚡ Raccourcis",
		shortcut_map: "Ouvrir Carte",
		map: "🗺️ Carte",
		map_title_season3: "Carte Saison 3 - RUNNERS",
		map_title_season4: "Carte Saison 4 - OVERRIDE",
		map_legend_season3: "🟡 Coffre Sprite",
		map_legend_season4: "🔵 Code",
		obtained_via: "Obtenu via",
		level_up: "Montée de niveau",
		obtain_lobby_code: "🎮 Code de Lobby",
		obtain_cheat_locator: "Code",
		obtain_sprite_chest: "Coffre de Sprite",
		level_chests_eliminations: "📦 Coffres | 💀 Éliminations",
		level_victory_royale: "Victoire Royale",
		level_consumables_shield: "Consommables (Bouclier)",
		level: "Niveau",
		codes_section_sprites: '🎮 Variantes de Sprite',
        codes_section_loading: '🖼️ Écrans de Chargement',
        codes_section_resources: '💎 Ressources',
        codes_section_effects: '✨ Effets Amusants',
		selected_variant: 'Variante sélectionnée',
		pod: "🎒 Pod",
		more: "⋯ Plus",
		pod_title_mastery: "POD DE MAÎTRISE",
		pod_title_all: "POD DE MAÎTRISE - TOUTES LES SAISONS",
		pod_title_s3: "POD DE MAÎTRISE DE SPRITE",
		pod_title_s4: "POD GAMEBOY",
		pod_subtitle_all: "Saison 3 et 4",
		pod_subtitle_s3: "Saison 3 - Runners",
		pod_subtitle_s4: "Saison 4 - Override",
		pod_backbling_label: "Dos de Maîtrise",
		pod_hover_preview: "Survolez pour prévisualiser",
		calculator_title: "🧮 Calculateur de Poussière de Sprite",
		calculator_subtitle: "Sélectionnez les variantes que vous devez réinvoquer",
		calculator_sprite_label: "Sprite",
		calculator_current_dust: "Poussière de Sprite actuelle",
		calculator_variants_selected: "Variantes sélectionnées",
		calculator_resummon_cost: "Coût de réinvocation",
		calculator_missing_dust: "Poussière manquante",
		calculator_summary_title: "Résumé des variantes sélectionnées",
		calculator_clear: "Effacer la sélection",
		calculator_close: "Fermer",
		shortcut_calculator: "Ouvrir le calculateur de poussière",
		intro_welcome: "Bienvenue sur",
		intro_title: "Fortnite Sprite Locker",
		intro_watch: "▶ Regarder l'intro",
		intro_skip: "⏭️ Passer",
		reset_tooltip: "Réinitialiser l'intro",
		settings: "⚙️ Paramètres",
		settings_title: "⚙️ Paramètres",
		volume_label: "🔊 Volume",
		companion_label: "🐾 Compagnon Sprite",
		companion_desc: "Choisissez votre sprite compagnon préféré",
		companion_toggle: "Afficher le compagnon",
		settings_close: "Fermer"
    }
};

let currentLang = 'en';

function applyTranslations(lang) {
    const elements = document.querySelectorAll('[data-i18n]');
    elements.forEach(el => {
        const key = el.dataset.i18n;
        if (TRANSLATIONS[lang] && TRANSLATIONS[lang][key]) {
            el.textContent = TRANSLATIONS[lang][key];
        }
    });
    
    // Aggiorna i tooltip dei pulsanti varianti
    document.querySelectorAll('.variant-btn').forEach(btn => {
        const tip = TRANSLATIONS[lang]?.tooltip || "Click to select, ★ to toggle mastered";
        btn.setAttribute('title', tip);
    });
    
	// Traduzione del tooltip per reset-intro
    const resetBtn = document.getElementById('reset-intro');
    if (resetBtn) {
        const key = resetBtn.dataset.i18nTooltip;
        if (key && TRANSLATIONS[lang] && TRANSLATIONS[lang][key]) {
            resetBtn.setAttribute('data-tooltip', TRANSLATIONS[lang][key]);
		}
	}
	
    // Placeholder search
	const searchInput = document.getElementById('sidebar-search');
	if (TRANSLATIONS[lang]?.search_placeholder) {
		searchInput.placeholder = TRANSLATIONS[lang].search_placeholder;
	}
		localStorage.setItem('preferred_lang', lang);
	}

// Carica lingua salvata
const savedLang = localStorage.getItem('preferred_lang') || 'en';
document.getElementById('lang-selector').value = savedLang;
currentLang = savedLang;
applyTranslations(savedLang);

function saveSelectedVariant(spriteId, variant) {
    if (spriteId && variant) {
        localStorage.setItem(SELECTED_VARIANT_KEY + '_' + spriteId, variant);
    }
}

function loadSelectedVariant(spriteId) {
    return localStorage.getItem(SELECTED_VARIANT_KEY + '_' + spriteId) || null;
}

function selectVariant(spriteId, variant) {
    const sp = SPRITES.find(s => s.id === spriteId);
    if (!sp || !sp.variants.includes(variant)) return;
    selectedVariant = variant;
    saveSelectedVariant(spriteId, variant);

    loadImageWithFallback(mainImg, ASSET_BASE, getVariantImageId(sp, variant));
    updateVariantInfo(sp, variant);
    
    // Aggiorna il controllo livello
    const levelDisplay = document.getElementById('level-display');
    const levelVariantName = document.getElementById('level-variant-name');
    if (sp && levelDisplay) {
        const st = loadState();
        const currentLevel = st[sp.id]?.variantsLevel?.[variant] || 1;
        levelDisplay.textContent = currentLevel;
        document.getElementById('level-slider').value = currentLevel;
        document.getElementById('level-display').textContent = currentLevel;
        
        updateSliderFill(currentLevel);
        
        // Mostra il nome della variante tradotto
        const variantNameKey = 'variant_' + variant;
        const translatedName = TRANSLATIONS[currentLang]?.[variantNameKey] || variant;
        if (levelVariantName) levelVariantName.textContent = translatedName;
    }

    // Aggiorna il display della variante selezionata
    const selectedDisplay = document.getElementById('selected-variant-display');
    if (selectedDisplay) {
        const variantNameKey = 'variant_' + variant;
        const translatedName = TRANSLATIONS[currentLang]?.[variantNameKey] || variant;
        selectedDisplay.textContent = translatedName;
    }

    document.querySelectorAll('.variant-btn').forEach(b => {
        b.classList.remove('selected');
        // Rimuovi eventuale badge precedente
        const existingBadge = b.querySelector('.selected-badge');
        if (existingBadge) existingBadge.remove();
    });

    const btn = document.querySelector(`.variant-btn[data-variant="${variant}"]`);
    if (btn) {
        btn.classList.add('selected');
        // Aggiungi badge "✓ Selezionata"
        const badge = document.createElement('span');
        badge.className = 'selected-badge';
        badge.textContent = ' ✓';
        badge.style.cssText = `
            font-weight: 900;
            color: var(--primary);
            font-size: 13px;
            margin-left: 4px;
            text-shadow: 0 0 12px rgba(47,182,255,0.6);
        `;
        const nameSpan = btn.querySelector('.variant-name');
        if (nameSpan) {
            // Rimuovi badge duplicato se esiste
            const old = nameSpan.querySelector('.selected-badge');
            if (old) old.remove();
            nameSpan.appendChild(badge);
        }
    }
}

// Listener per lo slider del livello
document.getElementById('level-slider').addEventListener('input', function() {
    const sp = SPRITES[currentIndex];
    if (!sp) return;
    const variant = selectedVariant;
    if (!variant || !sp.variants.includes(variant)) {
        showToast('Select a variant first');
        this.value = 1;
        return;
    }
    const newLevel = parseInt(this.value, 10);
    if (sp.unreleased || (sp.unreleasedVariants && sp.unreleasedVariants.includes(variant))) {
        showToast('This variant/sprite is not available.');
        this.value = 1;
        return;
    }
    document.getElementById('level-display').textContent = newLevel;
    
    updateSliderFill(newLevel);
    
    setVariantLevel(sp.id, variant, newLevel);
});

// Funzione per impostare il livello di una variante
async function setVariantLevel(spriteId, variant, newLevel) {
    const sp = SPRITES.find(s => s.id === spriteId);
    if (!sp) return;
    const s = loadState();
    const currentLevel = s[sp.id]?.variantsLevel?.[variant] || 1;
    if (newLevel === currentLevel) return;
    
    // Se il nuovo livello è 5, masterizza automaticamente
    if (newLevel === 5) {
        s[sp.id].variants[variant] = true;
        s[sp.id].variantsMastered[variant] = true;
        const released = getReleasedVariants(sp);
        const allMastered = released.every(v => s[sp.id].variants[v] && s[sp.id].variantsMastered[v]);
        s[sp.id].mastered = allMastered;
        showToast(`⭐ ${variant} mastered!`);
    } else if (newLevel < 5 && currentLevel === 5) {
        // Scende da 5 → togli master
        s[sp.id].variantsMastered[variant] = false;
        const released = getReleasedVariants(sp);
        const allMastered = released.every(v => s[sp.id].variants[v] && s[sp.id].variantsMastered[v]);
        s[sp.id].mastered = allMastered;
    }
    // Se la variante non è acquisita e il livello > 1, la acquisiamo
    if (!s[sp.id].variants[variant] && newLevel > 1) {
        s[sp.id].variants[variant] = true;
        showToast(`✅ ${variant} acquired!`);
    }
    s[sp.id].variantsLevel[variant] = newLevel;
    s[sp.id].lastUpdated = new Date().toISOString();
    saveState(s);
    state = loadState();
    updateGlobalProgress();
    setMasteredCheckbox(!!isSpriteMastered(sp));
    renderSidebar();
    await selectIndex(currentIndex, true);
    updateSliderFill(newLevel);
    
    // Pioggia solo se TUTTE le varianti sono al livello 5
    if (isSpriteAllLevelFive(sp)) {
        triggerSpriteVariantsRain(sp.id);
		if (sp.id === 'sonic') {
			triggerSonicRings(sp.id);
		}
    }
}

function updateSliderFill(level) {
    const slider = document.getElementById('level-slider');
    const percent = (level / 5) * 100;
    slider.style.background = `linear-gradient(to right, var(--primary) ${percent}%, rgba(255,255,255,0.1) ${percent}%)`;
}

function isSpriteAllLevelFive(sp) {
    const st = loadState()[sp.id];
    const released = getReleasedVariants(sp);
    // Controlla che ogni variante rilasciata sia posseduta E abbia livello 5
    return released.every(v => st.variants[v] && (st.variantsLevel?.[v] || 1) === 5);
}

async function changeVariantLevel(delta) {
    const sp = SPRITES[currentIndex];
    if (!sp) return;
    
    const variant = selectedVariant;
    if (!variant || !sp.variants.includes(variant)) {
        showToast('Select a variant first');
        return;
    }
    
    // Controllo se la variante è unreleased o lo sprite è unreleased
    if (sp.unreleased || (sp.unreleasedVariants && sp.unreleasedVariants.includes(variant))) {
        showToast('This variant/sprite is not available.');
        return;
    }

    const s = loadState();
    const wasComplete = isSpriteComplete(sp);

  // --- NUOVO: Se la variante non è acquisita e stiamo incrementando, acquisiscila subito ---
  if (!s[sp.id].variants[variant] && delta > 0) {
    s[sp.id].variants[variant] = true;
    const labelMap = {
      basic: TRANSLATIONS[currentLang]?.variant_basic || 'Basic',
      gold: TRANSLATIONS[currentLang]?.variant_gold || 'Gold',
      gummy: TRANSLATIONS[currentLang]?.variant_gummy || 'Gummy',
      galaxy: TRANSLATIONS[currentLang]?.variant_galaxy || 'Galaxy',
      holofoil: TRANSLATIONS[currentLang]?.variant_holofoil || 'Holofoil',
      cube: TRANSLATIONS[currentLang]?.variant_cube || 'Cube',
      gem: TRANSLATIONS[currentLang]?.variant_gem || 'Gem',
      quack: TRANSLATIONS[currentLang]?.variant_quack || 'Quack',
      cheat: TRANSLATIONS[currentLang]?.variant_cheat || 'Cheat'
    };
    showToast(`✅ ${labelMap[variant] || variant} acquired!`);
    // Salva subito per non perdere il cambio
    s[sp.id].lastUpdated = new Date().toISOString();
    saveState(s);
    state = loadState();
    // Aggiorna la UI della griglia varianti
    renderSidebar();
    selectIndex(currentIndex, true);
  }

  const currentLevel = s[sp.id]?.variantsLevel?.[variant] || 1;
  let newLevel = Math.min(5, Math.max(1, currentLevel + delta));
  
  // All'inizio della funzione, prima di modificare lo stato:
  const wasMastered = isSpriteMastered(sp);
  
  // Se sale a 5, acquisisci e masterizza automaticamente
  if (newLevel === 5) {
    s[sp.id].variants[variant] = true;
    s[sp.id].variantsMastered[variant] = true;
    const released = getReleasedVariants(sp);
    const allMastered = released.every(v => s[sp.id].variants[v] && s[sp.id].variantsMastered[v]);
    s[sp.id].mastered = allMastered;
    const labelMap = {
      basic: TRANSLATIONS[currentLang]?.variant_basic || 'Basic',
      gold: TRANSLATIONS[currentLang]?.variant_gold || 'Gold',
      gummy: TRANSLATIONS[currentLang]?.variant_gummy || 'Gummy',
      galaxy: TRANSLATIONS[currentLang]?.variant_galaxy || 'Galaxy',
      holofoil: TRANSLATIONS[currentLang]?.variant_holofoil || 'Holofoil',
      cube: TRANSLATIONS[currentLang]?.variant_cube || 'Cube',
      gem: TRANSLATIONS[currentLang]?.variant_gem || 'Gem',
      quack: TRANSLATIONS[currentLang]?.variant_quack || 'Quack',
      cheat: TRANSLATIONS[currentLang]?.variant_cheat || 'Cheat'
    };
    showToast(`⭐ ${labelMap[variant] || variant} mastered!`);
  } else if (currentLevel === 5 && newLevel < 5) {
    // Scende da 5 → togli master (ma resta acquisita)
    s[sp.id].variantsMastered[variant] = false;
    // Ricalcola se lo sprite è ancora masterato globalmente
    const released = getReleasedVariants(sp);
    const allMastered = released.every(v => s[sp.id].variants[v] && s[sp.id].variantsMastered[v]);
    s[sp.id].mastered = allMastered;
  }
  
  s[sp.id].variantsLevel[variant] = newLevel;
  s[sp.id].lastUpdated = new Date().toISOString();
  saveState(s);
  state = loadState();
  
  if (isSpriteAllLevelFive(sp)) {
        triggerSpriteVariantsRain(sp.id);
		if (sp.id === 'sonic') {
			triggerSonicRings(sp.id);
		}
  }

  updateGlobalProgress();
  updateGlobalProgress();
  
  // Aggiorna UI
  const levelDisplay = document.getElementById('level-display');
  if (levelDisplay) levelDisplay.textContent = newLevel;
  // Aggiorna il checkbox Mastered globale
  setMasteredCheckbox(!!isSpriteMastered(sp));
  // Aggiorna il pulsante della variante (se vuoi che il pulsante rifletta lo stato)
  // Ma abbiamo detto di non toccare i pulsanti varianti, quindi saltiamo.
  
  // Ricarica la sidebar e la variante selezionata per aggiornare i badge
  renderSidebar();
  await selectIndex(currentIndex, true);
}

// --- GESTIONE CHECKBOX MASTERED ---
function handleMasteredChange(e) {
  if (_updatingMastered) return;
  const sp = SPRITES[currentIndex];
  const s = loadState();
  const checked = e.target.checked;

  // Verifica se tutte le varianti sono possedute
  const released = getReleasedVariants(sp);
  const allOwned = released.every(v => s[sp.id].variants[v]);
  if (!allOwned) {
    _updatingMastered = true;
    mainMastered.checked = false;
    _updatingMastered = false;
    showToast('You need to acquire all variants first!');
    return;
  }

  // Applica a tutte le varianti possedute e rilasciate
  released.forEach(v => {
    s[sp.id].variantsMastered[v] = checked;
    // 🔥 Se attivi il master, porta la variante a livello 5; se lo disattivi, riportala a 1
    s[sp.id].variantsLevel[v] = checked ? 5 : 1;
  });

  s[sp.id].mastered = checked;
  s[sp.id].lastUpdated = new Date().toISOString();
  saveState(s);
  state = loadState();
  updateGlobalProgress();
  renderSidebar();
  selectIndex(currentIndex, true);

  if (checked) {
    // Pioggia solo se tutte le varianti sono ora a livello 5 (e quindi masterate)
    if (isSpriteAllLevelFive(sp)) {
      triggerSpriteVariantsRain(sp.id);
	  if (sp.id === 'sonic') {
			triggerSonicRings(sp.id);
	  }
    }
    showToast('👑 Sprite Mastered (all variants at level 5)!');
  } else {
    showToast('Sprite unmastered');
  }
}

// Attacca il listener una volta
mainMastered.addEventListener('change', handleMasteredChange);

// Sostituisci la funzione setMasteredCheckbox con questa:
function setMasteredCheckbox(value) {
  _updatingMastered = true;
  mainMastered.checked = value;
  _updatingMastered = false;
}

/* ---------- HELPERS ---------- */
function getReleasedVariants(sp){ return sp.variants.filter(v => !(sp.unreleasedVariants || []).includes(v)); }

function getImageIdForSprite(sp) {
    // Se l'id termina già con _basic, non aggiungere altro
    if (sp.id.endsWith('_basic')) {
        return sp.id;
    }
    // Altrimenti aggiungi _basic
    return `${sp.id}_basic`;
}

function getVariantImageId(sp, variant) {
    // Se la variante è basic e l'id finisce già con _basic, usa solo id
    if (variant === 'basic' && sp.id.endsWith('_basic')) {
        return sp.id;
    }
    return `${sp.id}_${variant}`;
}

function updateSidebarStats() {
    const s = loadState();
    const seasonFilter = document.getElementById('filter-season').value;
    
    // Filtra gli sprite in base alla stagione selezionata
    let releasedSprites = SPRITES.filter(sp => !sp.unreleased);
    if (seasonFilter !== 'all') {
        releasedSprites = releasedSprites.filter(sp => sp.season == seasonFilter);
    }

    let owned = 0, total = 0, mastered = 0;
    releasedSprites.forEach(sp => {
        const releasedVariants = getReleasedVariants(sp);
        releasedVariants.forEach(v => {
            total++;
            if (s[sp.id].variants[v]) owned++;
        });
        if (isSpriteMastered(sp)) mastered++;
    });
    document.getElementById('sidebar-stats').textContent = `${owned}/${total}`;
    const footerTextTemplate = TRANSLATIONS[currentLang]?.footer_sprites || "Sprites: {count} • Variants total: {total}";
	const footerText = footerTextTemplate.replace('{count}', releasedSprites.length).replace('{total}', total);
	document.getElementById('footer-stats').textContent = footerText;

    // Aggiorna il badge stagione nel footer
    const seasonLabel = seasonFilter === 'all' ? 'All Seasons' : getSeasonConfig(parseInt(seasonFilter)).label;
    document.getElementById('footer-season').textContent = seasonLabel;
}

// --- GLOBAL PROGRESS BAR ---
let progressMilestones = {
    25: false,
    50: false,
    75: false,
    100: false
};

// Carica lo stato delle soglie dal localStorage
try {
    const saved = localStorage.getItem('progress_milestones');
    if (saved) progressMilestones = JSON.parse(saved);
} catch(e) {}

function saveProgressMilestones() {
    localStorage.setItem('progress_milestones', JSON.stringify(progressMilestones));
}

function updateGlobalProgress() {
    const s = loadState();
    const releasedSprites = SPRITES.filter(sp => !sp.unreleased);
    let totalVariants = 0;
    let ownedVariants = 0;
    
    releasedSprites.forEach(sp => {
        const released = getReleasedVariants(sp);
        released.forEach(v => {
            totalVariants++;
            if (s[sp.id].variants[v]) ownedVariants++;
        });
    });
    
    const percent = totalVariants === 0 ? 0 : Math.round((ownedVariants / totalVariants) * 100);
    
    const fill = document.getElementById('global-progress-fill');
    const percentLabel = document.getElementById('global-progress-percent');
    const bar = document.getElementById('global-progress-bar');
    const badge = document.getElementById('progress-badge');
    
    if (fill) fill.style.width = percent + '%';
    if (percentLabel) percentLabel.textContent = percent + '%';
    
    // --- Reset dei flag per le soglie non più raggiunte ---
    const milestones = [25, 50, 75, 100];
    milestones.forEach(m => {
        if (percent < m && progressMilestones[m]) {
            progressMilestones[m] = false;
        }
    });
    saveProgressMilestones();
    
    // --- Controlla nuove soglie raggiunte (effetti una tantum) ---
    let newlyUnlocked = [];
    milestones.forEach(m => {
        if (percent >= m && !progressMilestones[m]) {
            progressMilestones[m] = true;
            newlyUnlocked.push(m);
        }
    });
    
    if (newlyUnlocked.length > 0) {
        saveProgressMilestones();
        newlyUnlocked.forEach(m => {
            triggerProgressEffect(m, percent, bar, badge);
        });
    }
    
    // --- Badge dinamico (in base alla percentuale corrente, non ai flag) ---
    if (percent >= 100) {
        showCompletionBadge(bar, badge, true);
    } else if (percent >= 75) {
        showCompletionBadge(bar, badge, false);
    } else {
        // Nascondi badge
        badge.style.opacity = '0';
        badge.style.transform = 'translateY(-6px)';
        bar.style.boxShadow = 'none';
    }
}

function triggerProgressEffect(milestone, percent, bar, badge) {
    const lang = currentLang;
    
    switch(milestone) {
        case 25:
            // Flash sulla barra
            bar.style.boxShadow = '0 0 20px rgba(47,182,255,0.3)';
            setTimeout(() => {
                bar.style.boxShadow = 'none';
            }, 800);
            showToast('25% completion! 🚀');
            break;
            
        case 50:
            // Badge "Halfway there!"
            badge.textContent = TRANSLATIONS[lang]?.progress_halfway || '🏃 Halfway there!';
            badge.style.opacity = '1';
            badge.style.transform = 'translateY(0)';
            setTimeout(() => {
                badge.style.opacity = '0';
                badge.style.transform = 'translateY(-6px)';
            }, 4000);
            showToast('50% completion! 🏃');
            break;
            
        case 75:
            // Glow sulla barra
            bar.style.boxShadow = '0 0 40px rgba(47,182,255,0.4), 0 0 80px rgba(47,182,255,0.1)';
            badge.textContent = TRANSLATIONS[lang]?.progress_almost || '🔥 Almost there!';
            badge.style.opacity = '1';
            badge.style.transform = 'translateY(0)';
            setTimeout(() => {
                badge.style.opacity = '0';
                badge.style.transform = 'translateY(-6px)';
            }, 4000);
            showToast('75% completion! 🔥');
            break;
            
        case 100:
            // COMPLETO! 🎉
            showCompletionBadge(bar, badge, true);
            triggerConfetti();
            // --- Pioggia di sprite ---
			triggerSpriteRain();
			showToast('🎉 COLLECTION COMPLETE! You\'re a true Sprite Master!');
            setTimeout(() => playDancingSpriteVideo(), 800);
			
            // Scroll fino alla barra per farla vedere
            document.getElementById('global-progress-wrapper')?.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
            break;
    }
}

function showCompletionBadge(bar, badge, complete) {
    const lang = currentLang;
    if (complete) {
        bar.style.boxShadow = '0 0 60px rgba(255,211,77,0.4), 0 0 120px rgba(255,211,77,0.15)';
        badge.textContent = TRANSLATIONS[lang]?.progress_complete || '🎉 COLLECTION COMPLETE!';
        badge.style.opacity = '1';
        badge.style.transform = 'translateY(0)';
        badge.style.color = '#FFD34D';
        badge.style.fontSize = '14px';
    } else {
        bar.style.boxShadow = '0 0 30px rgba(47,182,255,0.3)';
    }
}

function triggerConfetti() {
    // Usa una semplice animazione con div colorati
    const colors = ['#FFD166', '#2FB6FF', '#FF6B3D', '#7B6BFF', '#FF7AB6', '#4FC3FF', '#FFD34D'];
    const container = document.body;
    
    for (let i = 0; i < 80; i++) {
        const confetti = document.createElement('div');
        const size = 6 + Math.random() * 10;
        const startX = Math.random() * window.innerWidth;
        const startY = -20 - Math.random() * 50;
        const endX = startX + (Math.random() - 0.5) * 400;
        const endY = window.innerHeight + 50 + Math.random() * 200;
        const duration = 1.5 + Math.random() * 2;
        const delay = Math.random() * 0.8;
        const rotation = Math.random() * 720 - 360;
        
        confetti.style.cssText = `
            position: fixed;
            left: ${startX}px;
            top: ${startY}px;
            width: ${size}px;
            height: ${size}px;
            background: ${colors[Math.floor(Math.random() * colors.length)]};
            border-radius: ${Math.random() > 0.5 ? '50%' : '2px'};
            pointer-events: none;
            z-index: 99998;
            transform: rotate(0deg);
            transition: all ${duration}s cubic-bezier(.2,.8,.3,1);
            transition-delay: ${delay}s;
            opacity: 1;
        `;
        container.appendChild(confetti);
        
        requestAnimationFrame(() => {
            confetti.style.transform = `translate(${endX - startX}px, ${endY - startY}px) rotate(${rotation}deg)`;
            confetti.style.opacity = '0';
        });
        
        setTimeout(() => {
            confetti.remove();
        }, (duration + delay) * 1000 + 200);
    }
}

// Pioggia di tutti gli sprite grandi --------------------
function triggerSpriteRain() {
  const container = document.body;
  const variantIds = getAllVariantImageIds();
  if (variantIds.length === 0) return;

  for (let i = 0; i < 20; i++) {
    const imgId = variantIds[Math.floor(Math.random() * variantIds.length)];
    const img = document.createElement('img');
    img.src = `${ASSET_BASE}${imgId}.png`;
    img.style.cssText = `
      position: fixed;
      left: ${Math.random() * 100}%;
      top: -50px;
      width: ${30 + Math.random() * 40}px;
      height: auto;
      pointer-events: none;
      z-index: 99999;
      opacity: 0.7;
      transform: rotate(${Math.random() * 360}deg);
      transition: top ${5 + Math.random() * 4}s linear, opacity ${5 + Math.random() * 4}s linear;
    `;
    img.onerror = () => img.src = placeholderSVG('☔');
    container.appendChild(img);
    requestAnimationFrame(() => {
      img.style.top = (window.innerHeight + 50) + 'px';
      img.style.opacity = '0';
    });
    setTimeout(() => img.remove(), 9000);
  }
}

// Pioggia di tutti gli sprite piccoli con "basic" ----------------
function triggerMiniSpriteRain() {
  const container = document.body;
  const variantIds = getAllVariantImageIds();
  if (variantIds.length === 0) return;

  for (let i = 0; i < 8; i++) {
    const imgId = variantIds[Math.floor(Math.random() * variantIds.length)];
    const img = document.createElement('img');
    img.src = `${ASSET_BASE}${imgId}.png`;
    img.style.cssText = `
      position: fixed;
      left: ${10 + Math.random() * 80}%;
      top: -30px;
      width: ${25 + Math.random() * 30}px;
      height: auto;
      pointer-events: none;
      z-index: 99999;
      opacity: 0.8;
      transform: rotate(${Math.random() * 360}deg);
      transition: top ${3 + Math.random() * 3}s linear, opacity 3s linear;
    `;
    img.onerror = () => img.src = placeholderSVG('☔');
    container.appendChild(img);
    requestAnimationFrame(() => {
      img.style.top = (window.innerHeight + 30) + 'px';
      img.style.opacity = '0';
    });
    setTimeout(() => img.remove(), 6000);
  }
}

// Pioggia di tutte le varianti di un certo sprite -----------
function triggerSpriteVariantsRain(spriteId) {
  // ---- SUONO DI COMPLETAMENTO ----
  if (soundEffectsEnabled) {
    const extractionSound = document.getElementById('extraction-sound');
    extractionSound.currentTime = 0;
    extractionSound.play().catch(e => console.warn('Audio play bloccato', e));
  }

  const container = document.body;
  const sp = SPRITES.find(s => s.id === spriteId);
  if (!sp) return;

  // SOLO le varianti rilasciate
  const releasedVariants = getReleasedVariants(sp);
  if (releasedVariants.length === 0) return; // se non ce ne sono, esci

  const variantImages = releasedVariants.map(variant => ({
    variant: variant,
    imgId: getVariantImageId(sp, variant)
  }));

  const copiesPerVariant = 5; // puoi aumentare

  variantImages.forEach(({ variant, imgId }) => {
    for (let i = 0; i < copiesPerVariant; i++) {
      const img = document.createElement('img');
      loadImageWithFallback(img, ASSET_BASE, imgId).catch(() => {
        img.src = placeholderSVG(sp.name);
      });

      const size = 35 + Math.random() * 45;
      const left = 5 + Math.random() * 90;
      const rotation = Math.random() * 360;
      const duration = 4 + Math.random() * 3;
      const delay = Math.random() * 1.5;

      img.style.cssText = `
        position: fixed;
        left: ${left}%;
        top: -${size + 20}px;
        width: ${size}px;
        height: auto;
        pointer-events: none;
        z-index: 99999;
        transform: rotate(${rotation}deg);
        transition: top ${duration}s linear, opacity ${duration * 0.8}s linear;
        transition-delay: ${delay}s;
      `;

      container.appendChild(img);

      setTimeout(() => {
        img.style.top = (window.innerHeight + 40) + 'px';
        img.style.opacity = '0';
      }, delay * 1000);

      setTimeout(() => img.remove(), (duration + delay) * 1000 + 500);
    }
  });
}

/*--- MASTERY POD ---*/
function renderPod() {
    const container = document.getElementById('pod-container');
    const empty = document.getElementById('pod-empty');
    const title = document.getElementById('pod-title');
    const subtitle = document.getElementById('pod-subtitle');
    const backblingImg = document.getElementById('pod-backbling');
    
    container.innerHTML = '';
    if (empty) empty.style.display = 'none';

	// Di base rimuovo il selettore
    const oldSelector = document.getElementById('pod-backbling-selector');
    if (oldSelector) oldSelector.remove();

    // Leggi il filtro stagione
    const seasonFilter = document.getElementById('filter-season').value;
    
    // Gestione "All Seasons"
    if (seasonFilter === 'all') {
		title.textContent = TRANSLATIONS[currentLang]?.pod_title_all || 'ALL SEASONS';
		subtitle.textContent = TRANSLATIONS[currentLang]?.pod_subtitle_all || 'Season 3 & 4';

		// Imposta il back bling di default
		if (backblingImg) {
			backblingImg.src = 'assets/ui/mastery-pod.png';
			backblingImg.onerror = () => { backblingImg.src = placeholderSVG('🎒'); };
		}

		// --- PULSANTI DI SELEZIONE DELLO ZAINO ---
		const leftCol = document.getElementById('pod-left-col');
		
		// Rimuovi il selettore precedente
		const oldSelector = document.getElementById('pod-backbling-selector');
		if (oldSelector) oldSelector.remove();

		const selectorDiv = document.createElement('div');
		selectorDiv.id = 'pod-backbling-selector';
		selectorDiv.style.cssText = 'display:flex; gap:8px; margin-top:10px; justify-content:center; width:100%;';

		// Pulsante Mastery Pod
		const btnMastery = document.createElement('button');
		btnMastery.textContent = '🎒 Mastery Pod';
		btnMastery.className = 'btn-adaptive ghost';
		btnMastery.dataset.image = 'assets/ui/mastery-pod.png';
		btnMastery.style.padding = '4px 10px';
		btnMastery.style.fontSize = '11px';
		
		// Pulsante Gameboy
		const btnGameboy = document.createElement('button');
		btnGameboy.textContent = '🎮 Gameboy';
		btnGameboy.className = 'btn-adaptive ghost';
		btnGameboy.dataset.image = 'assets/ui/gameboy.png';
		btnGameboy.style.padding = '4px 10px';
		btnGameboy.style.fontSize = '11px';

		// Funzione per gestire il click
		function setBackbling(imgSrc) {
			if (backblingImg) {
				backblingImg.src = imgSrc;
				backblingImg.onerror = () => { backblingImg.src = placeholderSVG('🎒'); };
			}
			// Rimuovi classe 'active' da tutti
			[btnMastery, btnGameboy].forEach(b => b.classList.remove('active'));
			// 'active' al pulsante cliccato (con bordo evidenziato)
		}

		btnMastery.addEventListener('click', function() {
			setBackbling(this.dataset.image);
			this.classList.add('active');
		});
		
		btnGameboy.addEventListener('click', function() {
			setBackbling(this.dataset.image);
			this.classList.add('active');
		});

		// Imposta il pulsante Mastery Pod come attivo all'avvio
		btnMastery.classList.add('active');

		selectorDiv.appendChild(btnMastery);
		selectorDiv.appendChild(btnGameboy);

		// Inserisci il selettore dopo #pod-character
		const podChar = document.getElementById('pod-character');
		if (podChar && leftCol) {
			leftCol.insertBefore(selectorDiv, podChar.nextSibling);
		} else if (leftCol) {
			leftCol.appendChild(selectorDiv);
		}

		// Popola la griglia
		const spritesPod = SPRITES;
		renderPodItems(spritesPod, container, empty);
		return;
	}

    // Gestione singola stagione
    const season = parseInt(seasonFilter) || 3;
    if (season === 3) {
        title.textContent = TRANSLATIONS[currentLang]?.pod_title_s3 || 'SPRITE MASTERY POD';
        subtitle.textContent = TRANSLATIONS[currentLang]?.pod_subtitle_s3 || 'Season 3 - Runners';
        if (backblingImg) {
            backblingImg.src = 'assets/ui/mastery-pod.png';
            backblingImg.onerror = () => { backblingImg.src = placeholderSVG('🎒'); };
        }
    } else if (season === 4) {
        title.textContent = TRANSLATIONS[currentLang]?.pod_title_s4 || 'GAMEBOY POD';
        subtitle.textContent = TRANSLATIONS[currentLang]?.pod_subtitle_s4 || 'Season 4 - Override';
        if (backblingImg) {
            backblingImg.src = 'assets/ui/gameboy.png';
            backblingImg.onerror = () => { backblingImg.src = placeholderSVG('🎮'); };
        }
    }

    const spritesPod = SPRITES.filter(sp => sp.season === season);
    renderPodItems(spritesPod, container, empty);
}

// Funzione separata per popolare la griglia
function renderPodItems(spritesList, container, empty) {
    if (spritesList.length === 0) {
        if (empty) empty.style.display = 'block';
        return;
    }

    const s = loadState();

    spritesList.forEach(sp => {
        const released = getReleasedVariants(sp);
        released.forEach(variant => {
            const isMastered = s[sp.id].variants[variant] && s[sp.id].variantsMastered[variant];
            const div = document.createElement('div');
            div.className = 'pod-item';
            if (!isMastered) div.classList.add('locked');
            if (isMastered) div.classList.add('mastered');

            const img = document.createElement('img');
            img.src = `${ASSET_BASE}${getVariantImageId(sp, variant)}.png`;
            img.onerror = () => { img.src = placeholderSVG(sp.name); };
            div.appendChild(img);

            if (!isMastered) {
                const lock = document.createElement('div');
                lock.className = 'pod-lock';
                lock.textContent = '🔒';
                div.appendChild(lock);
            }

            const spriteName = SPRITE_NAME_TRANSLATIONS[currentLang]?.[sp.name] || sp.name;
            const variantKey = 'variant_' + variant;
            const variantName = TRANSLATIONS[currentLang]?.[variantKey] || variant;
            const name = document.createElement('div');
            name.className = 'name';
            name.textContent = `${spriteName} - ${variantName}`;
            div.appendChild(name);

            div.dataset.imgSrc = img.src;
            container.appendChild(div);
        });
    });

    container.onmouseover = (e) => {
        const item = e.target.closest('.pod-item');
        if (!item) return;
        const preview = document.getElementById('pod-sprite-preview');
        if (preview) {
            preview.src = item.dataset.imgSrc || '';
            preview.classList.add('show');
        }
    };

    container.onmouseout = (e) => {
        const item = e.target.closest('.pod-item');
        if (!item) return;
        const preview = document.getElementById('pod-sprite-preview');
        if (preview) {
            preview.classList.remove('show');
        }
    };
}

// Funzione per aprire/chiudere il modal
function togglePod() {
    const overlay = document.getElementById('pod-overlay');
    if (overlay.classList.contains('active')) {
        overlay.classList.remove('active');
        overlay.style.display = 'none';
    } else {
        renderPod();
        overlay.classList.add('active');
        overlay.style.display = 'flex';
    }
}

// Listener per il pulsante chiudi
const podCloseBtn = document.getElementById('pod-close');
if (podCloseBtn) {
    podCloseBtn.addEventListener('click', () => {
        document.getElementById('pod-overlay').classList.remove('active');
        document.getElementById('pod-overlay').style.display = 'none';
    });
}

function triggerSonicRings(spriteId) {
    if (spriteId !== 'sonic') return;
    const container = document.body;
    const total = 20;
    const imgUrl = 'assets/icons/sonic-ring.png';
    
    for (let i = 0; i < total; i++) {
        const ring = document.createElement('img');
        ring.src = imgUrl;
        ring.style.cssText = `
            position: fixed;
            top: -30px;
            left: ${Math.random() * 100}%;
            width: ${20 + Math.random() * 20}px;
            height: auto;
            z-index: 99999;
            opacity: 0.9;
            transition: top ${3 + Math.random() * 3}s linear;
            pointer-events: none;
        `;
        container.appendChild(ring);
        setTimeout(() => {
            ring.style.top = (window.innerHeight + 50) + 'px';
            setTimeout(() => ring.remove(), 4000);
        }, 10);
    }
}

function isSpriteComplete(sp) {
  const st = state[sp.id];
  const released = getReleasedVariants(sp);
  return released.every(v => st.variants[v] === true);
}

function getAllVariantImageIds() {
    const ids = [];
    SPRITES.filter(sp => !sp.unreleased).forEach(sp => {
        sp.variants.forEach(variant => {
            ids.push(getVariantImageId(sp, variant));
        });
    });
    return ids;
}

function showToast(msg, ms=1800){ const t=document.createElement('div'); t.className='toast'; t.textContent=msg; document.getElementById('toast-container').appendChild(t); setTimeout(()=> t.style.opacity='0', ms-200); setTimeout(()=> t.remove(), ms); }

function showConfirm(message){
  return new Promise(resolve=>{
    const backdrop = document.getElementById('confirm-backdrop');
    const msg = document.getElementById('confirm-message');
    const ok = document.getElementById('confirm-ok');
    const cancel = document.getElementById('confirm-cancel');
    msg.textContent = message;
    backdrop.style.display = 'flex';
    backdrop.setAttribute('aria-hidden','false');
    function cleanup(result){
      backdrop.style.display = 'none';
      backdrop.setAttribute('aria-hidden','true');
      ok.removeEventListener('click', onOk);
      cancel.removeEventListener('click', onCancel);
      resolve(result);
    }
    function onOk(){ cleanup(true); }
    function onCancel(){ cleanup(false); }
    ok.addEventListener('click', onOk);
    cancel.addEventListener('click', onCancel);
  });
}

/* ---------- GET FILTERED SPRITES ---------- */
function getFilteredSprites() {
  const search = document.getElementById('sidebar-search').value.trim().toLowerCase();
  const rarity = document.getElementById('filter-rarity').value;
  const hideMastered = document.getElementById('toggle-mastered').checked;
  return SPRITES.filter(sp => {
    if (search && !sp.name.toLowerCase().includes(search) && !sp.id.toLowerCase().includes(search)) return false;
    if (rarity !== 'all' && sp.rarity !== rarity) return false;
    if (hideMastered && state[sp.id].mastered) return false;
    return true;
  });
}

/* ---------- RENDER SIDEBAR ---------- */
async function renderSidebar() {
  const currentRender = ++renderCounter;
  
  // Se nel frattempo è partita un'altra chiamata, abbandona subito
  if (currentRender !== renderCounter) return;
  
  const search = document.getElementById('sidebar-search').value.trim().toLowerCase();
  const rarity = document.getElementById('filter-rarity').value;
  const hideMastered = document.getElementById('toggle-mastered').checked;
  const grouped = document.getElementById('toggle-group-rarity').checked;

  let filtered = getFilteredAndSortedSprites();

  // Nuovo controllo prima di svuotare
  if (currentRender !== renderCounter) return;
  
  sidebarList.innerHTML = '';
  
  // for...of invece di forEach per avere await
  for (const sp of filtered) {
  
    // Controlla se l'esecuzione è ancora quella corrente (prima di ogni operazione asincrona)
    if (currentRender !== renderCounter) {
      sidebarList.innerHTML = ''; // eventuale pulizia
      return;
    }
	
    const idx = SPRITES.indexOf(sp);
    const st = state[sp.id];
    const released = getReleasedVariants(sp);
    const owned = released.filter(v => st.variants[v]).length;
    const total = released.length;
    const percent = total === 0 ? 0 : Math.round((owned/total)*100);

    const item = document.createElement('div');
    item.className = "sprite-item";
	item.classList.add(`rarity-${sp.rarity}`);
    item.dataset.index = idx;
    if (idx === currentIndex) item.classList.add('active');

    const thumb = document.createElement('div');
    thumb.className = 'thumb';
    const img = document.createElement('img');
    img.className = 'thumb-img';
    img.alt = sp.name;
    if (st.img) {
      img.src = st.img;
      await waitForImage(img);
      img.classList.add('loaded');
    } else {
      await loadImageWithFallback(img, ASSET_BASE, getImageIdForSprite(sp));
    }
    img.onerror = () => img.src = placeholderSVG(sp.name);
    thumb.appendChild(img);

    if (isSpriteMastered(sp)) {
      const crown = document.createElement('img');
      crown.src = 'assets/ui/mastered.png';
      crown.className = 'sidebar-crown';
      thumb.appendChild(crown);
    }

	const meta = document.createElement('div');
	meta.className = 'side-meta';

	const seasonConfig = getSeasonConfig(sp.season);
	const badgeHTML = `
	  <span style="
		display: inline-flex;
		align-items: center;
		gap: 3px;
		font-size: 9px;
		font-weight: 700;
		background: linear-gradient(135deg, ${seasonConfig.bg}dd, ${seasonConfig.bg}77);
		color: ${seasonConfig.textColor};
		padding: 0 6px;
		border-radius: 8px;
		border: 1px solid rgba(255,255,255,0.08);
		height: 18px;
		letter-spacing: 0.3px;
	  ">
		S${sp.season}
	  </span>
	`;

	let unreleasedBadge = '';
	if (sp.unreleased) {
		unreleasedBadge = `<span style="background:#d62828; color:white; padding:0 6px; border-radius:4px; font-size:8px; font-weight:900; margin-left:4px;">UNRELEASED</span>`;
	}
	const translatedName = SPRITE_NAME_TRANSLATIONS[currentLang]?.[sp.name] || sp.name;
	const variantsLabel = TRANSLATIONS[currentLang]?.variants_label || 'variants';
	meta.innerHTML = `
		<div class="name">${translatedName} ${unreleasedBadge}</div>
		<div class="mini">${owned} / ${total} ${variantsLabel}</div>
		<div style="font-size:9px; margin-top:1px;">${badgeHTML}</div>
	`;
    const prog = document.createElement('div');
    prog.className = 'side-progress';
    prog.textContent = percent + '%';

    item.appendChild(thumb);
    item.appendChild(meta);
    item.appendChild(prog);
    sidebarList.appendChild(item);
  }
  
  // Ultimo controllo prima di aggiornare le stats
  if (currentRender !== renderCounter) {
    sidebarList.innerHTML = '';
    return;
  }
  updateSidebarStats();
}

async function selectIndex(i, skipFade = false) {
  currentIndex = (i + SPRITES.length) % SPRITES.length;
  const sp = SPRITES[currentIndex];
  const releasedVariants = getReleasedVariants(sp);
  saveLastSelectedSprite(sp.id);

  mainRarityTag.className = `fortnite-rarity-tag ${sp.rarity.toLowerCase()}`;
  mainRarityTag.textContent = sp.rarity.toUpperCase();

  const art = document.getElementById("main-art");
  art.classList.remove("rarity-common", "rarity-rare", "rarity-epic", "rarity-legendary", "rarity-mythic");
  art.classList.add(`rarity-${sp.rarity.toLowerCase()}`);

  state = loadState();
  updateGlobalProgress();
  const st = state[sp.id];

  // Aggiorna corona principale
  const crown = document.getElementById("main-crown");
  if (isSpriteMastered(sp)) crown.classList.add("show");
  else crown.classList.remove("show");

  // --- GESTIONE FADE (solo per transizione) ---
  if (!skipFade) {
    mainImg.classList.add('fade-out');
    await new Promise(r => setTimeout(r, 150));
  }

  // --- Caricamento immagine e info sarà gestito da selectVariant ---

  // Aggiorna il nome e badge
  mainName.innerHTML = "";
  if (isSpriteMastered(sp)) {
    const crownEl = document.createElement("img");
    crownEl.src = "assets/ui/mastered.png";
    crownEl.className = "mastered-crown";
    mainName.appendChild(crownEl);
  }
  const translatedName = SPRITE_NAME_TRANSLATIONS[currentLang]?.[sp.name] || sp.name;
mainName.append(translatedName);
  if (sp.unreleased) {
    const badge = document.createElement('span');
    badge.style.cssText = 'background:#d62828; color:white; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:900; margin-left:8px;';
    badge.textContent = 'UNRELEASED';
    mainName.appendChild(badge);
  }
  const seasonConfig = getSeasonConfig(sp.season);
  const seasonBadge = document.createElement('span');
  seasonBadge.style.cssText = `
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    background: linear-gradient(135deg, ${seasonConfig.bg}dd, ${seasonConfig.bg}77);
    color: ${seasonConfig.textColor};
    padding: 1px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    height: 22px;
    margin-left: 8px;
    letter-spacing: 0.3px;
  `;
  seasonBadge.textContent = `S${sp.season}`;
  mainName.appendChild(seasonBadge);

  // Progresso
  const owned = releasedVariants.reduce((a, v) => a + (st.variants[v] ? 1 : 0), 0);
  const total = releasedVariants.length;
  const percent = total === 0 ? 0 : Math.round((owned / total) * 100);
  mainFill.style.width = percent + '%';
  mainPercent.textContent = percent + '%';
  mainCount.textContent = `${owned} / ${total}`;

  // Aggiorna passive
  const passiveText = PASSIVE_TRANSLATIONS[currentLang]?.[sp.passive] || sp.passive;
  mainPassive.textContent = passiveText;

  // --- RIPRISTINA SELEZIONE ---
  let savedVariant = loadSelectedVariant(sp.id);
  let targetVariant = savedVariant && sp.variants.includes(savedVariant) ? savedVariant : null;
  if (!targetVariant) {
    // Scegli la prima variante posseduta, o "basic" se nessuna
    for (const v of sp.variants) {
      if (st.variants[v]) { targetVariant = v; break; }
    }
    if (!targetVariant) targetVariant = 'basic';
  }
  selectVariant(sp.id, targetVariant);
  updateVariantSelector(sp.id);

  // Ricostruisci i pulsanti varianti (con i nuovi listener)
  variantsGrid.innerHTML = '';
  const labelMap = {
    basic: TRANSLATIONS[currentLang]?.variant_basic || 'Base',
    gold: TRANSLATIONS[currentLang]?.variant_gold || 'Gold',
    gummy: TRANSLATIONS[currentLang]?.variant_gummy || 'Gummy',
    galaxy: TRANSLATIONS[currentLang]?.variant_galaxy || 'Galaxy',
    holofoil: TRANSLATIONS[currentLang]?.variant_holofoil || 'Holofoil',
    cube: TRANSLATIONS[currentLang]?.variant_cube || 'Cube',
    gem: TRANSLATIONS[currentLang]?.variant_gem || 'Gem',
    quack: TRANSLATIONS[currentLang]?.variant_quack || 'Quack',
	cheat: TRANSLATIONS[currentLang]?.variant_cheat || 'Cheat'
  };

  sp.variants.forEach(v => {
    // ---- CONTROLLO VARIANTE UNRELEASED ----
    const hideUnreleased = document.getElementById('toggle-hide-unreleased').checked;
    if (hideUnreleased && sp.unreleasedVariants && sp.unreleasedVariants.includes(v)) {
        return; // Salta questa variante
    }
	
    const unreleased = sp.unreleasedVariants?.includes(v);
    const isOwned = st.variants[v];
    const isMastered = st.variantsMastered?.[v] || false;

    const btn = document.createElement('button');
    btn.className = `variant-btn ${v}${isOwned ? ' owned' : ''}${unreleased ? ' unreleased' : ''}`;
    btn.dataset.sprite = sp.id;
    btn.dataset.variant = v;
    const tip = TRANSLATIONS[currentLang]?.tooltip || "Click to select, ★ to toggle mastered";
btn.setAttribute('title', tip);

    // Costruzione innerHTML (con icona possesso e master)
    let innerHTML = `
      <span class="dot"></span>
      <span class="variant-name">${labelMap[v]}</span>
    `;
	
    if (isOwned) {
      innerHTML += `<span class="variant-master-toggle" data-variant="${v}" style="margin-left:4px;cursor:pointer;font-size:14px;">${isMastered ? '👑' : '☆'}</span>`;
    }
    if (unreleased) {
      innerHTML += `<span class="variant-unreleased">UNRELEASED</span>`;
    }
    btn.innerHTML = innerHTML;

    // Classi colore
    if (v === 'gold') btn.classList.add('gold');
    if (v === 'gummy') btn.classList.add('gummy');
    if (v === 'galaxy') btn.classList.add('galaxy');
    if (v === 'holofoil') btn.classList.add('holo');
    if (v === 'cube') btn.classList.add('cube');
    if (v === 'gem') btn.classList.add('gem');
    if (v === 'basic') btn.classList.add('basic');

	// ---------- GESTIONE EVENTI TOUCH / CLICK ----------
	let pressTimer = null;
	let isLongPress = false;

	// Avvio long press (solo touch)
	const startPress = (e) => {
	  
	  // Se il tocco è partito dalla stellina, non attivare il long press
	  if (e.target.closest('.variant-master-toggle')) return;
	  isLongPress = false;
	  pressTimer = setTimeout(() => {
		isLongPress = true;
		showVariantTooltip(e, sp, v);
	  }, 600);
	};

	const endPress = (e) => {
	  clearTimeout(pressTimer);
	  
	  // Se era un long press, nascondi tooltip, ma non bloccare il click (lo bloccheremo nel click)
	  if (isLongPress) {
		hideVariantTooltip();
	  }
	};

	// Eventi touch (solo per avviare il long press)
	btn.addEventListener('touchstart', startPress, { passive: true });
	btn.addEventListener('touchend', endPress, { passive: true });
	btn.addEventListener('touchmove', () => {
	  clearTimeout(pressTimer);
	  hideVariantTooltip();
	  isLongPress = false; 	
	}, { passive: true });

	// Hover (preview temporanea)
    btn.addEventListener("mouseenter", () => {
	  hideVideo();
      loadImageWithFallback(mainImg, ASSET_BASE, getVariantImageId(sp, v));
      updateVariantInfo(sp, v);
    });
    btn.addEventListener("mouseleave", () => {
      // Torna alla variante selezionata, non alla prima posseduta
      const s = loadState();
      const st2 = s[sp.id];
      let target = selectedVariant && sp.variants.includes(selectedVariant) ? selectedVariant : 'basic';
      if (!st2.variants[target]) {
        for (const variant of sp.variants) {
          if (st2.variants[variant]) { target = variant; break; }
        }
      }
      updateVariantInfo(sp, target);
      loadImageWithFallback(mainImg, ASSET_BASE, getVariantImageId(sp, target));
	  if (animationsEnabled) {
        videoIndex[sp.id] = 0;
        loadVideoForSprite(sp);
      }
    });

	// Evento click (nativo, non simulato)
	btn.addEventListener('click', async function(e) {
	  
	  // Se è un long press, ignora il click
	  if (isLongPress) {
		isLongPress = false; // reset per il prossimo tap
		return;
	  }

	  const currentBtn = btn;
	  const masterToggle = e.target.closest('.variant-master-toggle');

	  if (masterToggle) {
        e.stopPropagation();
        e.preventDefault();
        if (isOwned) toggleVariantMaster(sp.id, v);
        return;
    }

    if (unreleased) {
        showToast("This variant is not available yet.");
        return;
    }
    if (sp.unreleased) {
        showToast("This sprite is not released yet.");
        return;
    }

    const s = loadState();
    const wasComplete = isSpriteComplete(sp);

    const newState = !s[sp.id].variants[v];
	s[sp.id].variants[v] = newState;
	if (newState) {
		// Se la stai acquisendo, imposta il livello a 1
		s[sp.id].variantsLevel[v] = 1;
		// e resetta il mastered (non può essere masterata se appena acquisita)
		s[sp.id].variantsMastered[v] = false;
	} else {
		// Se la stai rimuovendo, togli mastered e livello a 1
		s[sp.id].variantsMastered[v] = false;
		s[sp.id].variantsLevel[v] = 1;
	}
    // Ricalcola mastered dello sprite
    const released = getReleasedVariants(sp);
    const allMastered = released.every(vv => s[sp.id].variants[vv] && s[sp.id].variantsMastered[vv]);
    s[sp.id].mastered = allMastered;
    s[sp.id].lastUpdated = new Date().toISOString();
    saveState(s);
    state = loadState();
    updateGlobalProgress();

    if (newState) createSparkles(currentBtn);
    if (newState && soundEffectsEnabled) {
        const clickAudio = document.getElementById('click-sound');
        clickAudio.currentTime = 0;
        clickAudio.play().catch(e => console.warn('Audio play bloccato', e));
    }

    if (newState && !wasComplete && isSpriteComplete(sp)) {
        triggerSpriteVariantsRain(sp.id);
		if (sp.id === 'sonic') {
			triggerSonicRings(sp.id);
		}
    }

    // Ricarica la UI con il nuovo stato
    await selectIndex(currentIndex, true);

    // Forza la selezione nel menù a tendina alla variante appena cambiata (se acquisita) o alla prima posseduta
    const latestState = loadState();
    let forcedVariant = newState ? v : 'basic';
    if (!newState) {
        for (const variant of sp.variants) {
            if (latestState[sp.id].variants[variant]) {
                forcedVariant = variant;
                break;
            }
        }
    }
	
    // Aggiorna la variabile globale e il selettore
    selectedVariant = forcedVariant;
    saveSelectedVariant(sp.id, forcedVariant);
    document.getElementById('variant-selector').value = forcedVariant;
	
    // Aggiorna il livello visualizzato
    updateLevelControl(sp.id, forcedVariant);
	
	// Imposta lo slider al livello 1 (perché è appena acquisita)
	document.getElementById('level-slider').value = 1;
	updateSliderFill(1);
	
    // Aggiorna anche l'immagine e le info
    loadImageWithFallback(mainImg, ASSET_BASE, getVariantImageId(sp, forcedVariant));
    updateVariantInfo(sp, forcedVariant);

    showToast(newState ? `${labelMap[v]} acquired` : `${labelMap[v]} removed`);
    await renderSidebar();
	});
    variantsGrid.appendChild(btn);
  });

  // Aggiorna checkbox Mastered
  setMasteredCheckbox(!!isSpriteMastered(sp));

  // Evidenzia l'item attivo nella sidebar
  sidebarList.querySelectorAll('.sprite-item').forEach(el => el.classList.remove('active'));
  const active = sidebarList.querySelector(`.sprite-item[data-index="${currentIndex}"]`);
  if (active) active.classList.add('active');

  // Rimuovi fade se presente
  if (!skipFade) {
    mainImg.classList.remove('fade-out');
  }
  
  // --- Gestione video animati ---
  // Carica il video SOLO se la variante selezionata è "basic" e le animazioni sono attive
  if (animationsEnabled && selectedVariant === 'basic') {
      videoIndex[sp.id] = 0;
      loadVideoForSprite(sp);
  } else {
      hideVideo();
  }
}

document.getElementById('variant-selector').addEventListener('change', function(e) {
  const sp = SPRITES[currentIndex];
  if (!sp) return;
  const variant = this.value;
  if (!variant || !sp.variants.includes(variant)) return;
  
  // 1. Nascondi subito il video (se visibile)
  hideVideo();
  
  // 2. Aggiorna stato variante
  selectedVariant = variant;
  saveSelectedVariant(sp.id, variant);
  
  // 3. Aggiorna il livello
  const st = loadState();
  const level = st[sp.id]?.variantsLevel?.[variant] || 1;
  document.getElementById('level-display').textContent = level;
  document.getElementById('level-slider').value = level;
  updateSliderFill(level);
  
  // 4. Carica l'immagine e le info della variante
  loadImageWithFallback(mainImg, ASSET_BASE, getVariantImageId(sp, variant));
  updateVariantInfo(sp, variant);
  
  // 5. Se la variante è BASIC e SFX è attivo, riavvia il video
  if (variant === 'basic' && animationsEnabled) {
    videoIndex[sp.id] = 0;
    loadVideoForSprite(sp);
  }
  
  // Evidenzia il pulsante corrispondente nella griglia (senza fare toggle)
  document.querySelectorAll('.variant-btn').forEach(btn => {
    btn.classList.remove('selected');
    const badge = btn.querySelector('.selected-badge');
    if (badge) badge.remove();
  });
  const btn = document.querySelector(`.variant-btn[data-variant="${variant}"]`);
  if (btn) {
    btn.classList.add('selected');
    const badge = document.createElement('span');
    badge.className = 'selected-badge';
    badge.textContent = ' ✓';
    badge.style.cssText = 'font-weight:900;color:var(--primary);font-size:13px;margin-left:4px;text-shadow:0 0 12px rgba(47,182,255,0.6);';
    const nameSpan = btn.querySelector('.variant-name');
    if (nameSpan) {
      const old = nameSpan.querySelector('.selected-badge');
      if (old) old.remove();
      nameSpan.appendChild(badge);
    }
  }
});	

// --- POPOLA IL SELECTOR DELLE VARIANTI ---
function updateVariantSelector(spriteId) {
  const sp = SPRITES.find(s => s.id === spriteId);
  if (!sp) return;
  const selector = document.getElementById('variant-selector');
  if (!selector) return;

  // Trova il contenitore della riga (per nasconderlo)
  const selectorBox = document.querySelector('.variant-selector-box');
  
  // Salva il valore attuale prima di ricostruire
  const currentVal = selector.value;
  
  // Pulisci e ricostruisci le opzioni
  selector.innerHTML = '';
  // FILTRA le varianti: escludi quelle unreleased
  const availableVariants = sp.variants.filter(v => !(sp.unreleasedVariants || []).includes(v));

  // SE C'È UNA SOLA VARIANTE, NASCONDI IL SELECTOR
  if (availableVariants.length <= 1) {
    if (selectorBox) selectorBox.style.display = 'none';
  } else {
    if (selectorBox) selectorBox.style.display = 'flex';
  }

  availableVariants.forEach(v => {
    const option = document.createElement('option');
    option.value = v;
    const variantNameKey = 'variant_' + v;
    option.textContent = TRANSLATIONS[currentLang]?.[variantNameKey] || v;
    selector.appendChild(option);
  });
  
  // Se la variante selezionata è ancora valida, mantienila, altrimenti scegli la prima
  if (currentVal && sp.variants.includes(currentVal)) {
    selector.value = currentVal;
  } else {
    // Usa la variante selezionata o la prima
    const target = selectedVariant && sp.variants.includes(selectedVariant) ? selectedVariant : sp.variants[0];
    selector.value = target;
  }
  
  // Aggiorna il livello e il nome in base alla selezione
  const variant = selector.value;
  const st = loadState();
  const level = st[sp.id]?.variantsLevel?.[variant] || 1;
  document.getElementById('level-display').textContent = level;
  // Aggiorna anche selectedVariant per coerenza
  selectedVariant = variant;
  saveSelectedVariant(sp.id, variant);
}

function updateLevelControl(spriteId, variant) {
  const sp = SPRITES.find(s => s.id === spriteId);
  if (!sp) return;
  const st = loadState();
  const levelDisplay = document.getElementById('level-display');
  const levelVariantName = document.getElementById('level-variant-name');
  const currentLevel = st[sp.id]?.variantsLevel?.[variant] || 1;
  if (levelDisplay) levelDisplay.textContent = currentLevel;
  if (levelVariantName) {
    const variantNameKey = 'variant_' + variant;
    const translatedName = TRANSLATIONS[currentLang]?.[variantNameKey] || variant;
    levelVariantName.textContent = translatedName;
  }
}

/* ---------- UPDATE VARIANT INFO ---------- */
function updateVariantInfo(sp, variant){
  variant = variant.toLowerCase();
  
  // Prendi i costi in base alla stagione dello sprite
  const seasonCosts = RARITY_COST[sp.season] || RARITY_COST[3];    // fallback su season 3
  const price = variant === "basic" 
    ? seasonCosts[sp.rarity].base 
    : seasonCosts[sp.rarity].special;
  
  // Nome variante tradotto
  const variantNameKey = 'variant_' + variant;
  const translatedName = TRANSLATIONS[currentLang]?.[variantNameKey] 
                         || VARIANT_BONUSES[variant]?.name 
                         || variant;
  
  // Bonus tradotto
  const bonusKey = 'bonus_' + variant;
  const translatedBonus = TRANSLATIONS[currentLang]?.[bonusKey] 
                          || VARIANT_BONUSES[variant]?.bonus 
                          || '—';
  
  document.getElementById("variant-name").innerHTML = `<span class="badge badge-variant-${variant}">${translatedName}</span>`;
  if (price !== undefined) {
    document.getElementById("variant-dust").textContent = formatNumber(price);
  } else {
    document.getElementById("variant-dust").textContent = '—';
  }
  document.getElementById("variant-bonus").textContent = translatedBonus;
  
  const spawn = sp.spawn || {};
  const obtain = sp.obtain || {};

  // ---- SPAWN RATE: sempre la percentuale ----
  const rate = spawn[variant] || "0%";
  document.getElementById("variant-spawn").textContent = rate;
	
  // ---- OTTENIMENTO ----
  const obtainData = getObtainDisplay(sp, variant);
  document.getElementById('variant-obtain').innerHTML = `<span class="badge ${obtainData.cls}">${obtainData.text}</span>`;

  // ---- LEVEL UP ----
  const levelUpText = sp.levelUp || '📦 Chests | 💀 Eliminations';
  let levelBadgeClass = 'badge-level-chests';
  let levelDisplay = '';

  if (levelUpText === 'Victory Royale') {
    levelBadgeClass = 'badge-level-victory';
    const label = TRANSLATIONS[currentLang]?.level_victory_royale || '👑 Victory Royale';
    levelDisplay = `<img src="assets/ui/crown.png" style="width:14px;height:14px;vertical-align:middle;margin-right:4px;" alt="Crown"> ${label}`;
  } else if (levelUpText === 'Consumables (Shield)') {
    levelBadgeClass = 'badge-level-consumables';
    const label = TRANSLATIONS[currentLang]?.level_consumables_shield || '🛡️ Consumables (Shield)';
    levelDisplay = `<img src="assets/ui/shield.png" style="width:14px;height:14px;vertical-align:middle;margin-right:4px;" alt="Shield"> ${label}`;
  } else if (levelUpText === '📦 Chests | 💀 Eliminations') {
    levelBadgeClass = 'badge-level-chests';
    levelDisplay = TRANSLATIONS[currentLang]?.level_chests_eliminations || '📦 Chests | 💀 Eliminations';
  } else {
    levelBadgeClass = 'badge-level-chests';
    levelDisplay = levelUpText;
  }

   document.getElementById('variant-levelup').innerHTML = `<span class="badge ${levelBadgeClass}">${levelDisplay}</span>`;
  
   // ---- BASE SPAWN ----
  document.getElementById("base-spawn").textContent = spawn.basic || "0%";
}

// ===== TOOLTIP PER VARIANTI SU MOBILE =====
let tooltipEl = null;

function showVariantTooltip(e, sp, variant) {
    hideVariantTooltip();

    const seasonCosts = RARITY_COST[sp.season] || RARITY_COST[3];
    const price = variant === "basic" 
        ? seasonCosts[sp.rarity].base 
        : seasonCosts[sp.rarity].special;

    const variantNameKey = 'variant_' + variant;
    const translatedName = TRANSLATIONS[currentLang]?.[variantNameKey] 
                         || VARIANT_BONUSES[variant]?.name 
                         || variant;

    const bonusKey = 'bonus_' + variant;
    const translatedBonus = TRANSLATIONS[currentLang]?.[bonusKey] 
                          || VARIANT_BONUSES[variant]?.bonus 
                          || '—';

    const spawn = sp.spawn || {};
    const obtain = sp.obtain || {};
    const rate = spawn[variant] || "0%";
    const baseRate = spawn.basic || "0%";

    // ---- OTTENIMENTO ----
    const obtainData = getObtainDisplay(sp, variant);

    // ---- LEVEL UP ----
    const levelUpText = sp.levelUp || '📦 Chests | 💀 Eliminations';
    let levelBadgeClass = 'badge-level-chests';
    let levelDisplay = '';

    if (levelUpText === 'Victory Royale') {
      levelBadgeClass = 'badge-level-victory';
      const label = TRANSLATIONS[currentLang]?.level_victory_royale || '👑 Victory Royale';
      levelDisplay = `<img src="assets/ui/crown.png" style="width:14px;height:14px;vertical-align:middle;margin-right:4px;" alt="Crown"> ${label}`;
    } else if (levelUpText === 'Consumables (Shield)') {
      levelBadgeClass = 'badge-level-consumables';
      const label = TRANSLATIONS[currentLang]?.level_consumables_shield || '🛡️ Consumables (Shield)';
      levelDisplay = `<img src="assets/ui/shield.png" style="width:14px;height:14px;vertical-align:middle;margin-right:4px;" alt="Shield"> ${label}`;
    } else if (levelUpText === '📦 Chests | 💀 Eliminations') {
      levelBadgeClass = 'badge-level-chests';
      levelDisplay = TRANSLATIONS[currentLang]?.level_chests_eliminations || '📦 Chests | 💀 Eliminations';
    } else {
      levelBadgeClass = 'badge-level-chests';
      levelDisplay = levelUpText;
    }

    tooltipEl = document.createElement('div');
    tooltipEl.className = 'variant-tooltip';
    tooltipEl.innerHTML = `
        <div class="tt-title">${translatedName}</div>
        <div class="tt-row">
            <span class="tt-label">${TRANSLATIONS[currentLang]?.summon_cost || 'Summon cost'}</span>
            <span class="tt-value">${price.toLocaleString()} ✦</span>
        </div>
        <div class="tt-row">
            <span class="tt-label">${TRANSLATIONS[currentLang]?.bonus || 'Bonus'}</span>
            <span class="tt-value">${translatedBonus}</span>
        </div>
        <div class="tt-row">
            <span class="tt-label">${TRANSLATIONS[currentLang]?.spawn_rate || 'Spawn rate'}</span>
            <span class="tt-value">${rate}</span>
        </div>
        <div class="tt-row">
            <span class="tt-label">Obtained via</span>
            <span class="tt-value"><span class="badge ${obtainData.cls}">${obtainData.text}</span></span>
        </div>
        <div class="tt-row">
			<span class="tt-label">Level up</span>
			<span class="tt-value"><span class="badge ${levelBadgeClass}">${levelDisplay}</span></span>
		</div>
        <div class="tt-row">
            <span class="tt-label">${TRANSLATIONS[currentLang]?.base_spawn || 'Base spawn'}</span>
            <span class="tt-value">${baseRate}</span>
        </div>
    `;
    const touch = e.touches ? e.touches[0] : e;
    const x = touch.clientX || touch.pageX;
    const y = touch.clientY || touch.pageY;

    document.body.appendChild(tooltipEl);

    const rect = tooltipEl.getBoundingClientRect();
    let left = x - rect.width / 2;
    let top = y - rect.height - 12;

    if (left < 10) left = 10;
    if (left + rect.width > window.innerWidth - 10) left = window.innerWidth - rect.width - 10;
    if (top < 10) top = y + 12;

    tooltipEl.style.left = left + 'px';
    tooltipEl.style.top = top + 'px';

    requestAnimationFrame(() => {
        if (tooltipEl) tooltipEl.classList.add('show');
    });
}

function hideVariantTooltip() {
    if (tooltipEl) {
        tooltipEl.classList.remove('show');
        setTimeout(() => {
            if (tooltipEl && tooltipEl.parentNode) {
                tooltipEl.parentNode.removeChild(tooltipEl);
            }
            tooltipEl = null;
        }, 200);
    }
}

/* ---------- STATISTICHE ---------- */
function openStats() {
    const seasonFilter = document.getElementById('filter-season').value;
    const s = loadState();
    
    // Filtra gli sprite in base alla stagione selezionata
    let spritesToShow = SPRITES.filter(sp => !sp.unreleased);
    if (seasonFilter !== 'all') {
        spritesToShow = spritesToShow.filter(sp => sp.season == seasonFilter);
    }
    
    const seasonLabel = seasonFilter === 'all' ? 'All Seasons' : getSeasonConfig(parseInt(seasonFilter)).label;
    
    let totalSprites = spritesToShow.length;
    let completedSprites = 0;
    let totalVariants = 0;
    let ownedVariants = 0;
    let rarityData = { rare: { total: 0, owned: 0 }, epic: { total: 0, owned: 0 }, legendary: { total: 0, owned: 0 }, mythic: { total: 0, owned: 0 } };

    spritesToShow.forEach(sp => {
        const released = getReleasedVariants(sp);
        const owned = released.filter(v => s[sp.id].variants[v]).length;
        const total = released.length;
        totalVariants += total;
        ownedVariants += owned;
        if (total > 0 && owned === total) completedSprites++;
        if (rarityData[sp.rarity]) {
            rarityData[sp.rarity].total += total;
            rarityData[sp.rarity].owned += owned;
        }
    });

    const overallPercent = totalVariants === 0 ? 0 : Math.round((ownedVariants / totalVariants) * 100);
    const completedPercent = totalSprites === 0 ? 0 : Math.round((completedSprites / totalSprites) * 100);

    const lang = currentLang;
    const content = document.getElementById('stats-content');
    content.innerHTML = `
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
        <div class="stats-title">${TRANSLATIONS[lang]?.stats_title || "Stats"}</div>
			<span style="
            background: rgba(47,182,255,0.12);
            color: var(--primary);
            padding: 2px 12px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            border: 1px solid rgba(47,182,255,0.15);
			">${seasonLabel}
			</span>
		</div>
        <div class="stats-grid">
            <div class="stat-card">
                <div class="number">${completedSprites}/${totalSprites}</div>
                <div class="label">${TRANSLATIONS[lang]?.stats_sprite_acquired || "Sprites acquired"}</div>
            </div>
            <div class="stat-card">
                <div class="number">${ownedVariants}/${totalVariants}</div>
                <div class="label">${TRANSLATIONS[lang]?.stats_variants_acquired || "Variants acquired"}</div>
            </div>
            <div class="stat-card">
                <div class="number">${overallPercent}%</div>
                <div class="label">${TRANSLATIONS[lang]?.stats_overall_completion || "Overall completion"}</div>
            </div>
            <div class="stat-card">
                <div class="number">${completedPercent}%</div>
                <div class="label">${TRANSLATIONS[lang]?.stats_sprites_acquired || "Sprites completed"}</div>
            </div>
        </div>
        <div style="margin-top:16px;font-weight:700;">${TRANSLATIONS[lang]?.stats_details_rarity || "Details by rarity"}</div>
        <div class="rarity-stats">
            ${['rare', 'epic', 'legendary', 'mythic'].map(r => {
                const data = rarityData[r];
                const percent = data.total === 0 ? 0 : Math.round((data.owned / data.total) * 100);
                const colors = { rare: '#4FC3FF', epic: '#A855F7', legendary: '#FF6B3D', mythic: '#FFD34D' };
                return `
                    <div class="rarity-stat-row">
                        <div class="rarity-label" style="color:${colors[r]};">${r.charAt(0).toUpperCase() + r.slice(1)}</div>
                        <div class="rarity-bar"><div class="fill" style="width:${percent}%;background:${colors[r]};"></div></div>
                        <div class="rarity-percent">${data.owned}/${data.total}</div>
                    </div>
                `;
            }).join('')}
        </div>
    `;
    document.getElementById('stats-modal').style.display = 'flex';
}


// Shortcuts PC Modal -----------------
// Chiusura modale shortcut
document.getElementById('shortcuts-close').addEventListener('click', () => {
  document.getElementById('shortcuts-modal').style.display = 'none';
  document.getElementById('shortcuts-modal').setAttribute('aria-hidden', 'true');
});
document.getElementById('shortcuts-modal').addEventListener('click', e => {
  if (e.target === document.getElementById('shortcuts-modal')) {
    document.getElementById('shortcuts-modal').style.display = 'none';
    document.getElementById('shortcuts-modal').setAttribute('aria-hidden', 'true');
  }
});

// Shortcuts Mobile Modal ------------------
document.getElementById('btn-shortcuts-mobile').addEventListener('click', toggleShortcutsModal);

document.getElementById('btn-stats').addEventListener('click', openStats);
document.getElementById('stats-close').addEventListener('click', ()=>{
  document.getElementById('stats-modal').style.display = 'none';
});
// Chiusura modale QR
document.getElementById('qr-close').addEventListener('click', () => {
    document.getElementById('qr-modal').style.display = 'none';
});
document.getElementById('qr-modal').addEventListener('click', e => {
    if (e.target === document.getElementById('qr-modal')) {
        document.getElementById('qr-modal').style.display = 'none';
    }
});
document.getElementById('stats-modal').addEventListener('click', e=>{
  if(e.target === document.getElementById('stats-modal')) {
    document.getElementById('stats-modal').style.display = 'none';
  }
});

// Reset dell'intro
document.getElementById('reset-intro').addEventListener('click', function() {
  if (confirm('Do you want to see the welcome layout again?')) {
    localStorage.removeItem('introShown');
    location.reload();
  }
});

// Apertura modale
document.getElementById('btn-codes-s4').addEventListener('click', openCodesModal);

// Chiusura con il pulsante "Chiudi"
document.getElementById('codes-close').addEventListener('click', () => {
    document.getElementById('codes-modal').style.display = 'none';
    document.getElementById('codes-modal').setAttribute('aria-hidden', 'true');
});

// Chiusura cliccando fuori dal modale
document.getElementById('codes-modal').addEventListener('click', (e) => {
    if (e.target === document.getElementById('codes-modal')) {
        document.getElementById('codes-modal').style.display = 'none';
        document.getElementById('codes-modal').setAttribute('aria-hidden', 'true');
    }
});

// Footer per easter egg mobile
document.getElementById('footer-season').addEventListener('click', function() {
    const season = document.getElementById('filter-season').value;
    if (season === '4') {
        toggleRetroMode();
    } else {
        showToast('📌 Retro mode available only in Season 4 (Override)');
    }
});

// Listener per la mappa
const btnMap = document.getElementById('btn-map');
if (btnMap) {
    btnMap.addEventListener('click', openMapModal);
}

document.getElementById('filter-season').addEventListener('change', function(e) {
    const season = e.target.value;
    const btn = document.getElementById('btn-codes-s4');
    if (season === '4' | season == 'all') {
        btn.style.display = 'inline-flex';
    } else {
        btn.style.display = 'none';
    }
});

// Inoltre, all'inizializzazione, controlla il valore iniziale
document.addEventListener('DOMContentLoaded', function() {
    const season = document.getElementById('filter-season').value;
    const btn = document.getElementById('btn-codes-s4');
    if (season !== '4') btn.style.display = 'none';
});

/* ---------- EVENT LISTENERS ---------- */
document.getElementById('sidebar-search').addEventListener('input', renderSidebar);
document.getElementById('filter-rarity').addEventListener('change', ()=>{
  renderSidebar();
  if(gridMode) buildGridView();
  updateSelectionAfterFilter();
  saveFilterState();
});

const searchInput = document.getElementById('sidebar-search');
const clearBtn = document.getElementById('search-clear');

searchInput.addEventListener('input', function() {
  if (this.value.length > 0) {
    clearBtn.style.display = 'inline';
  } else {
    clearBtn.style.display = 'none';
  }
});

clearBtn.addEventListener('click', function() {
  searchInput.value = '';
  searchInput.dispatchEvent(new Event('input'));
  searchInput.focus();
});

document.getElementById('sort-order').addEventListener('change', ()=>{
  renderSidebar();
  if(gridMode) buildGridView();
  updateSelectionAfterFilter();
  saveFilterState();
});
document.getElementById('toggle-mastered').addEventListener('change', ()=>{
  renderSidebar();
  if(gridMode) buildGridView();
  updateSelectionAfterFilter();
  saveFilterState();
});

document.getElementById('toggle-hide-unreleased').addEventListener('change', ()=>{
    renderSidebar();
    if(gridMode) buildGridView();
    updateSelectionAfterFilter();
    saveFilterState();
    // Aggiorna il selettore per lo sprite corrente
    updateVariantSelector(SPRITES[currentIndex].id);
});
document.getElementById('lang-selector').addEventListener('change', e => {
    currentLang = e.target.value;
    applyTranslations(currentLang);
    
	// Ricostruisci i tooltip dei pulsanti varianti (se già creati)
    document.querySelectorAll('.variant-btn').forEach(btn => {
        const tip = TRANSLATIONS[currentLang]?.tooltip || "Click to select, ★ to toggle mastered";
        btn.setAttribute('title', tip);
    });
    
	// Ricarica lo sprite corrente per aggiornare la passive tradotta
	renderSidebar();
    selectIndex(currentIndex, true);
	updateVariantSelector(SPRITES[currentIndex].id);

    if (document.getElementById('garden-overlay').classList.contains('active')) {
        renderGarden();
    }
});
document.getElementById('toggle-group-rarity').addEventListener('change', ()=>{
    renderSidebar();
    if(gridMode) buildGridView();
    updateSelectionAfterFilter();
    saveFilterState();
});

document.getElementById('filter-season').addEventListener('change', function(e) {
    const value = e.target.value;
    if (value !== '4') {
        localStorage.removeItem('konami_override');
        localStorage.removeItem('konami_unlocked');
    }
    renderSidebar();
    if (gridMode) buildGridView();
    updateSelectionAfterFilter();
    saveFilterState();	
	
	const bannerTitle = document.querySelector('[data-i18n="banner_title"]');
    const seasonMap = {
        'all': 'banner_title_all',
        '3': 'banner_title_season3',
        '4': 'banner_title_season4'
    };
    const key = seasonMap[e.target.value] || 'banner_title';
    bannerTitle.textContent = TRANSLATIONS[currentLang]?.[key] || bannerTitle.textContent;
	
	// Se la stagione non è 4 e il Retro Mode è attivo, disattivalo
    if (value !== '4' && retroModeActive) {
        toggleRetroMode();     // Disattiverà e mostrerà il toast
    }
});

sidebarList.addEventListener('click', e=>{
  const item = e.target.closest('.sprite-item'); if(!item) return;
  const idx = parseInt(item.dataset.index,10); if(Number.isFinite(idx)) selectIndex(idx);
});

document.getElementById('prev').addEventListener('click', () => {
  const list = getFilteredAndSortedSprites();
  if (list.length === 0) return;
  const currentSp = SPRITES[currentIndex];
  const idx = list.findIndex(sp => sp.id === currentSp.id);
  if (idx > 0) {
    const newSp = list[idx - 1];
    selectIndex(SPRITES.indexOf(newSp));
  } else {
    // Se siamo al primo, vai all'ultimo (loop)
    const lastSp = list[list.length - 1];
    selectIndex(SPRITES.indexOf(lastSp));
  }
});

document.getElementById('next').addEventListener('click', () => {
  const list = getFilteredAndSortedSprites();
  if (list.length === 0) return;
  const currentSp = SPRITES[currentIndex];
  const idx = list.findIndex(sp => sp.id === currentSp.id);
  if (idx < list.length - 1) {
    const newSp = list[idx + 1];
    selectIndex(SPRITES.indexOf(newSp));
  } else {
    // Se siamo all'ultimo, torna al primo (loop)
    const firstSp = list[0];
    selectIndex(SPRITES.indexOf(firstSp));
  }
});

document.addEventListener('keydown', e=>{  
  // Ignora le shortcut se stai scrivendo in un campo di input/textarea/select
  if (['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement.tagName)) {
    // Esc fa uscire dal campo
    if (e.key === 'Escape') {
      document.activeElement.blur();
      e.preventDefault();
    }
    return;
  }

  // --- KONAMI CODE ---
  const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
  
  // Se il tasto fa parte della sequenza
  if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','b','a'].includes(e.key.toLowerCase()) || 
        e.key.startsWith('Arrow')) {
        const key = (e.key === 'b' || e.key === 'a') ? e.key.toLowerCase() : e.key;
        if (key === konamiCode[konamiIndex]) {
            konamiIndex++;
            if (konamiIndex === konamiCode.length) {
                konamiIndex = 0;
                triggerKonamiEasterEgg();
                e.preventDefault();
                return;
            }
        } 
        else {
            konamiIndex = 0;
        }
  }
  
  // Easter egg: video casuali
  if (e.key.toLowerCase() === 'v') {
    clearTimeout(videoTapTimer);
    videoTapCount++;
    if (videoTapCount >= 3) {
      videoTapCount = 0;
      openRandomVideo();
    } else {
      videoTapTimer = setTimeout(() => { videoTapCount = 0; }, 1000);
    }
    e.preventDefault();
    return;
  }
  
  // Ctrl + Alt + R → modalità pixel
  if (e.ctrlKey && e.altKey && e.key === 'r') {
  e.preventDefault();
  const season = document.getElementById('filter-season')?.value;
  if (season === '4') {
    toggleRetroMode();
  } else {
    showToast('📌 Retro mode available only in Season 4 (Override)');
   }
  }
  
  // Tasto ? → mostra/nascondi il modal delle shortcut
  if (e.key === '?') {
    toggleShortcutsModal();
    e.preventDefault();
    return;
  }
 
  // J → Giardino (Sprite Garden)
  if (e.key.toLowerCase() === 'j') {
    e.preventDefault();
    toggleGarden();
    return;
  }

  // Esc → chiudi il modal se aperto
  if (e.key === 'Escape') {
  
      // Chiudi codici
	  const codesModal = document.getElementById('codes-modal');
	  if (codesModal.style.display === 'flex') {
		codesModal.style.display = 'none';
		codesModal.setAttribute('aria-hidden', 'true');
		e.preventDefault();
		return;
	  }
  
	  // Chiudi mappa
	  const mapModal = document.getElementById('map-modal');
	  if (mapModal.style.display === 'flex') {
		closeMapModal();
		e.preventDefault();
		return;
	  }
	  
	  // Chiudi Mastery Pod
      const podOverlay = document.getElementById('pod-overlay');
      if (podOverlay.style.display === 'flex') {
        podOverlay.style.display = 'none';
        podOverlay.classList.remove('active');
        e.preventDefault();
        return;
      }
	  
	  // Chiudi calcolatrice
	  const plannerModal = document.getElementById('planner-modal');
		  if (plannerModal.classList.contains('active')) {
		  plannerModal.classList.remove('active');
		  plannerModal.setAttribute('aria-hidden', 'true');
		  e.preventDefault();
		  return;
	  }
	  
	  // Chiudi video overlay
	  const videoOverlay = document.getElementById('video-overlay');
	  if (videoOverlay.style.display === 'flex') {
		  closeVideoOverlay();
		  e.preventDefault();
		  return;
	  }
	  
	  // Chiudi le impostazioni
	  const settingsModal = document.getElementById('settings-modal');
	  if (settingsModal.style.display === 'flex') {
			settingsModal.style.display = 'none';
			settingsModal.setAttribute('aria-hidden', 'true');
			e.preventDefault();
			return;
	  }
	  
	  // Shortcuts modal
	  const modal = document.getElementById('shortcuts-modal');
	  if (modal.style.display === 'flex') {
		modal.style.display = 'none';
		modal.setAttribute('aria-hidden', 'true');
		e.preventDefault();
		return;
	  }
	  
	  // Export modal
	  const exportModal = document.getElementById('modal-backdrop');
	  if (exportModal.style.display === 'flex') {
		exportModal.style.display = 'none';
		exportModal.setAttribute('aria-hidden', 'true');
		e.preventDefault();
		return;
	  }
	  
	  // Stats modal
	  const statsModal = document.getElementById('stats-modal');
	  if (statsModal.style.display === 'flex') {
		statsModal.style.display = 'none';
		statsModal.setAttribute('aria-hidden', 'true');
		e.preventDefault();
		return;
	  }
  }

  // Spazio → toggla la variante selezionata
  if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Space') {
    e.preventDefault();
    const sp = SPRITES[currentIndex];
    
    // ---- CONTROLLO SPRITE UNRELEASED ----
    if (sp.unreleased) {
        showToast("This sprite is not released yet.");
        return;
    }

    const st = loadState();
    const selectedVariantKey = loadSelectedVariant(sp.id);
    if (selectedVariantKey && sp.variants.includes(selectedVariantKey)) {
        
        // ---- CONTROLLO VARIANTE UNRELEASED ----
        if (sp.unreleasedVariants && sp.unreleasedVariants.includes(selectedVariantKey)) {
            showToast("This variant is not available yet.");
            return;
        }

        const variant = selectedVariantKey;
        const newState = !st[sp.id].variants[variant];
        st[sp.id].variants[variant] = newState;
        if (!newState) {
			st[sp.id].variantsMastered[variant] = false;
			st[sp.id].variantsLevel[variant] = 1;
        }
		// Ricalcola mastered dello sprite
        const released = getReleasedVariants(sp);
        const allMastered = released.every(v => st[sp.id].variants[v] && st[sp.id].variantsMastered[v]);
        st[sp.id].mastered = allMastered;
        st[sp.id].lastUpdated = new Date().toISOString();
        saveState(st);
        state = loadState();
        updateGlobalProgress();
        // Ricarica UI
        selectIndex(currentIndex, true);
        // Aggiorna il pulsante della variante
        const btn = document.querySelector(`.variant-btn[data-variant="${variant}"]`);
        if (btn) {
            if (newState) createSparkles(btn);
            const st2 = state[sp.id];
            let target = newState ? variant : 'basic';
            if (!newState) {
                for (const v of sp.variants) {
                    if (st2.variants[v]) { target = v; break; }
                }
            }
            selectVariant(sp.id, target);
            renderSidebar();
            showToast(newState ? `${variant.toUpperCase()} acquired` : `${variant.toUpperCase()} removed`);
		}
	}
	return;
  }

  // S → focus sulla search
  if (e.key.toLowerCase() === 's') {
    e.preventDefault();
    document.getElementById('sidebar-search').focus();
    return;
  }  


  // Frecce: seguono l'ordine filtrato/ordinato come i pulsanti Prev/Next
  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
    const list = getFilteredAndSortedSprites();
    if (list.length === 0) return;
    const currentSp = SPRITES[currentIndex];
    const idx = list.findIndex(sp => sp.id === currentSp.id);
    if (idx === -1) {
      // Se lo sprite corrente non è nella lista (es. filtrato), seleziona il primo
      selectIndex(SPRITES.indexOf(list[0]));
      return;
    }
    let newSp;
    if (e.key === 'ArrowLeft') {
      newSp = idx > 0 ? list[idx - 1] : list[list.length - 1];
    } else { // ArrowRight
      newSp = idx < list.length - 1 ? list[idx + 1] : list[0];
    }
    selectIndex(SPRITES.indexOf(newSp));
    e.preventDefault(); // evita lo scroll della pagina
  }
  
  // G → grid toggle
  if (e.key.toLowerCase() === 'g') {
    document.getElementById('btn-grid-toggle').click();
    e.preventDefault();
    return;
  }

  // M → musica (toggle)
  if (e.key.toLowerCase() === 'm' && !e.shiftKey) {
    e.preventDefault();
    document.getElementById('music-toggle').click();
    return;
  }

  // Shift+M → All variants mastered toggle
  if (e.key.toLowerCase() === 'm' && e.shiftKey) {
    mainMastered.click();
    e.preventDefault();
    return;
  }
 
  // I → Stats
  if (e.key.toLowerCase() === 'i') {
    e.preventDefault();
    document.getElementById('btn-stats').click();
    return;
  }
  
  // E → export menu
  if (e.key.toLowerCase() === 'e') {
    e.preventDefault();
    document.getElementById('btn-menu').click();
    return;
  }
  
  // K → mappa
  if (e.key.toLowerCase() === 'k') {
	e.preventDefault();
	openMapModal();
	return;
  }
  
  // P → Mastery Pod
  if (e.key.toLowerCase() === 'p') {
    e.preventDefault();
    togglePod();
    return;
  }
  
  // C → calcolatrice dust
  if (e.key.toLowerCase() === 'c') {
	  e.preventDefault();
	  openPlanner();
	  return;
   }
});

// Shortcuts mobile ---------------------------------------------
// ===== TOUCH HANDLER PER MAIN-ART =====
let touchStartX = 0;
let touchStartY = 0;
let touchStartTime = 0;
let isSwiping = false;
let doubleTapCount = 0;
let doubleTapTimer = null;

const mainArt = document.getElementById('main-art');
mainArt.addEventListener('touchstart', (e) => {
  // Impedisce qualsiasi comportamento predefinito (zoom, lente, menu)
  e.preventDefault();
  
  const touch = e.touches[0];
  touchStartX = touch.screenX;
  touchStartY = touch.screenY;
  touchStartTime = Date.now();
  isSwiping = false;
  
  // Se il tocco dura più di 400 ms, resetta il contatore del doppio tap
  clearTimeout(doubleTapTimer);
  doubleTapTimer = setTimeout(() => {
    doubleTapCount = 0;
  }, 400);
}, { passive: false }); // <-- importante: passive: false per poter fare preventDefault

mainArt.addEventListener('touchmove', (e) => {
  // Se il dito si sposta oltre una certa soglia, considera uno swipe
  const touch = e.touches[0];
  const deltaX = touch.screenX - touchStartX;
  const deltaY = touch.screenY - touchStartY;
  
  if (Math.abs(deltaX) > 20 || Math.abs(deltaY) > 20) {
    isSwiping = true;
    // Resetta il contatore del doppio tap perché è uno swipe
    doubleTapCount = 0;
    clearTimeout(doubleTapTimer);
  }
}, { passive: true });

mainArt.addEventListener('touchend', (e) => {
  if (isSwiping) {
    // Gestisce lo swipe
    const deltaX = e.changedTouches[0].screenX - touchStartX;
    if (Math.abs(deltaX) > 50) {
      if (deltaX < 0) {
        document.getElementById('next').click(); // swipe sinistra → next
      } else {
        document.getElementById('prev').click(); // swipe destra → prev
      }
    }
    isSwiping = false;
    return;
  }
  
  // Se non è uno swipe, è un tap (o doppio tap)
  const elapsed = Date.now() - touchStartTime;
  if (elapsed > 300) {
    // Tap lungo (long press) – resetta e non fare nulla
    doubleTapCount = 0;
    clearTimeout(doubleTapTimer);
    return;
  }
  
  // Doppio tap
  doubleTapCount++;
  if (doubleTapCount === 1) {
    doubleTapTimer = setTimeout(() => {
      // Singolo tap – non fare nulla (o eventualmente apri dettagli)
      doubleTapCount = 0;
    }, 300);
  } else if (doubleTapCount >= 2) {
    clearTimeout(doubleTapTimer);
    doubleTapCount = 0;
    // Simula la pressione di Space (toggle variante)
    document.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
  }
}, { passive: false });

// Giardino (logo dello spiritello)
// ---------- TAP SUL LOGO (doppio tap = giardino) ----------
const brandContainer = document.querySelector('.brand');
if (brandContainer) {
  let tapCountLogo = 0;
  let tapTimerLogo = null;
  let lastTapTimeLogo = 0;

  const handleTapLogo = (e) => {
    // Ignora se il click non è sul logo o sul contenitore
    if (!e.target.closest('img.site-logo') && e.target !== brandContainer) return;

    e.stopPropagation();
    e.preventDefault(); // evita doppi eventi su mobile

    const now = Date.now();
    if (now - lastTapTimeLogo > 600) tapCountLogo = 0;
    lastTapTimeLogo = now;
    tapCountLogo++;

    if (tapCountLogo === 2) {
      tapCountLogo = 0;
      toggleGarden();
      showToast('🌱 Garden opened');
      return;
    }

    clearTimeout(tapTimerLogo);
    tapTimerLogo = setTimeout(() => {
      tapCountLogo = 0;
    }, 600);
  };

  brandContainer.addEventListener('click', handleTapLogo);
  brandContainer.addEventListener('touchend', handleTapLogo);
}

// Ricerca sprite
const bannerTitle = document.querySelector('.banner .title div:last-child');
if (bannerTitle) {
  let searchDoubleTapTimer = null;
  let searchTapCount = 0;

  bannerTitle.addEventListener('click', (e) => {
    e.stopPropagation();
    searchTapCount++;
    if (searchTapCount === 1) {
      searchDoubleTapTimer = setTimeout(() => {
        searchTapCount = 0;
      }, 400);
    } else if (searchTapCount === 2) {
      clearTimeout(searchDoubleTapTimer);
      searchTapCount = 0;
      // Apri sidebar (se chiusa) e focus sulla search
      const sidebar = document.querySelector('.sidebar');
      const toggleBtn = document.getElementById('sidebar-toggle');
      if (window.innerWidth <= 1100 && !sidebar.classList.contains('open')) {
        toggleBtn.click();
      }
      setTimeout(() => {
        document.getElementById('sidebar-search').focus();
        document.getElementById('sidebar-search').select();
      }, 300);
      showToast('🔍 Search focused');
    }
  });
}

document.getElementById('acquire-all').addEventListener('click', ()=>{
  const sp = SPRITES[currentIndex];
  if (sp.unreleased) {
    showToast("This sprite is not released yet.");
    return;
  }
  const releasedVariants = getReleasedVariants(sp);
  const st = loadState();
  
  const wasComplete = isSpriteComplete(sp); // prima

  releasedVariants.forEach(v=>{ st[sp.id].variants[v] = true; });
  st[sp.id].lastUpdated = new Date().toISOString();
  saveState(st);
  state = loadState();
  updateGlobalProgress();

  // --- NUOVO CONTROLLO ---
  if (!wasComplete && isSpriteComplete(sp)) {
    triggerSpriteVariantsRain(sp.id);
	if (sp.id === 'sonic') {
		triggerSonicRings(sp.id);
	}
  }

  renderSidebar();
  selectIndex(currentIndex);
  showToast('All released variants acquired');
});

document.getElementById('clear-variants').addEventListener('click', async ()=>{
  const ok = await showConfirm('Are you sure you want to remove all the variants you collected for this Sprite?');
  if(!ok) return;
  const sp = SPRITES[currentIndex];
  const st = loadState();
  sp.variants.forEach(v=> st[sp.id].variants[v]=false);
  sp.variants.forEach(v=> {
    st[sp.id].variants[v] = false;
    st[sp.id].variantsMastered[v] = false;
    st[sp.id].variantsLevel[v] = 1;
  });
  st[sp.id].mastered = false;
  st[sp.id].lastUpdated=new Date().toISOString();
  saveState(st);
  state = loadState();
  updateGlobalProgress();
  renderSidebar();
  selectIndex(currentIndex);
  showToast('Variants cleared');
});

/* ---------- GRID VIEW ---------- */
async function buildGridView() {
  const panel = document.querySelector('.panel');
  const filtered = getFilteredAndSortedSprites();
  const grid = document.createElement('div');
  grid.style.display='grid';
  grid.style.gridTemplateColumns='repeat(auto-fill,minmax(260px,1fr))';
  grid.style.gap='12px';
  grid.style.width='100%';
  
  for (const sp of filtered) {
    const st = state[sp.id];
    const releasedVariants = getReleasedVariants(sp);
    const owned = releasedVariants.reduce((a,v)=> a + (st.variants[v] ? 1 : 0), 0);
    const total = releasedVariants.length;
    const percent = total === 0 ? 0 : Math.round((owned/total)*100);

    const card = document.createElement('div');
    card.className = `grid-card rarity-${sp.rarity}`;
    card.style.position = "relative";
    if(isSpriteMastered(sp)){
      const crown = document.createElement("img");
      crown.src = "assets/ui/mastered.png";
      crown.className = "grid-crown";
      card.appendChild(crown);
    }
    if (sp.unreleased) card.classList.add('unreleased');

    const art = document.createElement('div');
    art.className = 'grid-art';
    const rarityTag = document.createElement("div");
    rarityTag.className = `fortnite-rarity-tag ${sp.rarity}`;
    rarityTag.textContent = sp.rarity.toUpperCase();
    art.appendChild(rarityTag);

    const img = document.createElement('img');
    if (st.img) {
      img.src = st.img;
      await waitForImage(img);
      img.classList.add('loaded');
    } else {
      await loadImageWithFallback(img, ASSET_BASE, getImageIdForSprite(sp));
    }
    img.style.maxWidth='100%'; img.style.maxHeight='100%';
    img.onerror = ()=> img.src = placeholderSVG(sp.name);
    art.appendChild(img);

    const title = document.createElement('div');
    title.className = 'grid-title';
    if(isSpriteMastered(sp)){
      title.innerHTML = `<img src="assets/ui/mastered.png" class="grid-crown">${sp.name}`;
    }else{
      const translatedName = SPRITE_NAME_TRANSLATIONS[currentLang]?.[sp.name] || sp.name;
if (isSpriteMastered(sp)) {
    title.innerHTML = `<img src="assets/ui/mastered.png" class="grid-crown">${translatedName}`;
} else {
    title.textContent = translatedName;
}
    }
const seasonConfig = getSeasonConfig(sp.season);
const seasonBadge = document.createElement('span');
seasonBadge.style.cssText = `
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 8px;
  font-weight: 700;
  background: linear-gradient(135deg, ${seasonConfig.bg}dd, ${seasonConfig.bg}77);
  color: ${seasonConfig.textColor};
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  height: 16px;
  margin-left: 4px;
  letter-spacing: 0.2px;
`;
seasonBadge.textContent = `S${sp.season}`;
title.appendChild(seasonBadge);
    const mini = document.createElement('div');
    mini.className = 'grid-mini';
    mini.textContent = `${percent}% • ${owned}/${total}`;

    if (sp.unreleased) {
      const badge = document.createElement("div");
      badge.className = "grid-unreleased";
      badge.textContent = "UNRELEASED";
      card.appendChild(badge);
    }

    card.appendChild(art);
    card.appendChild(title);
    card.appendChild(mini);
    card.addEventListener('click', async () => {
      gridMode = false;
      const panel = document.querySelector('.panel');
      panel.innerHTML = '';
      panel.appendChild(originalLeftPanel);
      panel.appendChild(originalRightPanel);
      await renderSidebar();
      await selectIndex(SPRITES.indexOf(sp));
      showToast('Locker view');
    });
    grid.appendChild(card);
  }
  
  window.leftPanel = document.querySelector('.left-panel');
  window.rightPanel = document.querySelector('.right-panel');
  panel.innerHTML = '';
  panel.appendChild(grid);
}

document.getElementById('btn-grid-toggle').addEventListener('click', ()=>{
  gridMode = !gridMode;
  const panel = document.querySelector('.panel');
  if(gridMode){
    buildGridView();
    showToast('Grid view');
  } else {
    panel.innerHTML = '';
    panel.appendChild(originalLeftPanel);
    panel.appendChild(originalRightPanel);
    renderSidebar();
    selectIndex(currentIndex);
    showToast('Locker view');
  }
});

/* ---------- MODAL / EXPORT ---------- */
const modalBackdrop = document.getElementById("modal-backdrop");
document.getElementById('btn-menu').addEventListener('click', ()=> { modalBackdrop.style.display='flex'; modalBackdrop.setAttribute('aria-hidden','false'); showMenu(); });
document.getElementById("modal-close").onclick = ()=>{ modalBackdrop.style.display="none"; modalBackdrop.setAttribute("aria-hidden","true"); };
modalBackdrop.addEventListener('click', e=> { if(e.target===modalBackdrop){ modalBackdrop.style.display='none'; modalBackdrop.setAttribute('aria-hidden','true'); } });

function showMenu() {
    const lang = currentLang;
    document.getElementById('modal-title').textContent = TRANSLATIONS[lang]?.export_menu_title || "Export menu";
    document.getElementById('modal-description').textContent = TRANSLATIONS[lang]?.export_menu_subtitle || "Choose what to export";
    document.getElementById('modal-content').innerHTML = `
        <div style="margin-top:12px;font-weight:800">${TRANSLATIONS[lang]?.export_png || "🖼️ Export PNG"}</div>
        <div class="row">
            <div class="option" data-action="all">${TRANSLATIONS[lang]?.export_entire || "📁 Entire collection"}</div>
            <div class="option" data-action="missing">${TRANSLATIONS[lang]?.export_missing || "🔍 Missing only"}</div>
            <div class="option" data-action="current">${TRANSLATIONS[lang]?.export_current || "🎯 Current sprite"}</div>
        </div>
        <div style="margin-top:12px;font-weight:800">${TRANSLATIONS[lang]?.export_data || "💾 Data"}</div>
        <div class="row">
            <div class="option" data-action="export-json">${TRANSLATIONS[lang]?.export_json || "📤 Export JSON"}</div>
            <div class="option" data-action="import-json">${TRANSLATIONS[lang]?.export_import || "📥 Import JSON"}</div>
        </div>
        <div style="margin-top:12px;font-weight:800">${TRANSLATIONS[lang]?.export_community || "🌐 Community"}</div>
        <div class="row">
            <div class="option" data-action="share-link">${TRANSLATIONS[lang]?.export_share || "🔗 Copy share link"}</div>
            <div class="option" data-action="qr">${TRANSLATIONS[lang]?.export_qr || "📱 QR Code"}</div>
            <div class="option" data-action="support">${TRANSLATIONS[lang]?.export_support || "❤️ Support me"}</div>
            <div class="option" data-action="github">
                <img src="assets/icons/github.png" style="width:18px;height:18px;display:inline-block;vertical-align:middle;margin-right:6px;"> ${TRANSLATIONS[lang]?.export_github || "View on GitHub"}
            </div>
        </div>
    `;
    document.getElementById('modal-close').textContent = TRANSLATIONS[lang]?.export_close || "Close";
    attachMenuEvents();
}

function attachMenuEvents(){
  document.querySelectorAll(".option").forEach(option=>{
    option.onclick = async ()=>{
      const action = option.dataset.action;
      if(action==="all") await exportFiltered("all");
      else if(action==="missing") await exportFiltered("missing");
      else if(action==="current") await exportFiltered("current");
      else if(action==="export-json") exportJSON();
      else if(action==="import-json") document.getElementById("file-import").click();
      else if(action==="share-link") await shareCollection();
      else if(action==="qr") showQR();
      else if(action==="support") showSupport();
      else if(action==="github") window.open("https://github.com/mrpaulgaming/fnspritelocker", "_blank");
    };
  });
}

async function promptAndAttachLocalFiles(){
  return new Promise((resolve)=>{
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.multiple = true;
    input.style.display = 'none';
    document.body.appendChild(input);
    input.addEventListener('change', async (e) => {
      const files = Array.from(e.target.files || []);
      if(files.length === 0){ input.remove(); resolve(false); return; }
      const s = loadState();
      await Promise.all(files.map(file => new Promise((res)=>{
        const reader = new FileReader();
        reader.onload = function(ev){
          try{
            const dataUrl = ev.target.result;
            const name = file.name.replace(/\.[^/.]+$/, '').trim().toLowerCase();
            const match = SPRITES.find(sp => {
              if(sp.id.toLowerCase() === name) return true;
              const norm = sp.id.toLowerCase().replace(/[^a-z0-9]/g,'');
              const nname = name.replace(/[^a-z0-9]/g,'');
              return norm === nname;
            });
            if(match){ s[match.id].img = dataUrl; s[match.id].lastUpdated = new Date().toISOString(); }
            else {
              const prefixMatch = SPRITES.find(sp => name.startsWith(sp.id.toLowerCase()));
              if(prefixMatch){ s[prefixMatch.id].img = dataUrl; s[prefixMatch.id].lastUpdated = new Date().toISOString(); }
            }
          }catch(err){ console.warn('attach file error', err); }
          res();
        };
        reader.onerror = ()=> res();
        reader.readAsDataURL(file);
      })));
      saveState(s);
	  renderSidebar();
	  selectIndex(0);
	  updateSidebarStats();
      input.remove();
      resolve(true);
    });
    input.click();
  });
}

// --- FUNZIONE EXPORTFILTERED ---
async function exportFiltered(mode) {
  const s = loadState();
  const lang = currentLang;
  const seasonFilter = document.getElementById('filter-season').value;
  
  // --- CONTAINER ---
  const container = document.createElement('div');
  container.style.padding = '24px';
  container.style.width = '1200px';
  container.style.maxWidth = '1200px';
  container.style.background = `
    linear-gradient(180deg, rgba(7,16,26,0.92), rgba(7,16,26,0.98)),
    url('assets/ui/background.png')
  `;
  container.style.backgroundSize = 'cover';
  container.style.backgroundPosition = 'center';
  container.style.borderRadius = '16px';
  container.style.boxShadow = '0 24px 80px rgba(0,0,0,0.7)';
  container.style.display = 'grid';
  container.style.gridTemplateColumns = 'repeat(auto-fill, minmax(520px, 1fr))';
  container.style.gap = '16px';
  container.style.alignItems = 'start';
  container.style.position = 'relative';

  // --- HEADER (tradotto) ---
  const titleMap = {
    all: TRANSLATIONS[lang]?.export_entire || '📁 Entire Collection',
    missing: TRANSLATIONS[lang]?.export_missing || '🔍 Missing Sprites',
    current: TRANSLATIONS[lang]?.export_current || '🎯 Current Sprite'
  };
  const subtitleMap = {
    all: TRANSLATIONS[lang]?.export_subtitle_all || 'All my collected and missing sprites',
    missing: TRANSLATIONS[lang]?.export_subtitle_missing || 'Sprites with variants still to collect',
    current: (TRANSLATIONS[lang]?.export_subtitle_current || 'Currently viewing: {sprite}').replace('{sprite}', SPRITE_NAME_TRANSLATIONS[lang]?.[SPRITES[currentIndex].name] || SPRITES[currentIndex].name)
  };
  const badgeMap = {
    all: TRANSLATIONS[lang]?.badge_entire || '📁 Full collection',
    missing: TRANSLATIONS[lang]?.badge_missing || '🔍 Missing variants',
    current: TRANSLATIONS[lang]?.badge_current || '🎯 Single sprite'
  };

  const header = document.createElement('div');
  header.style.cssText = `
    grid-column: 1 / -1;
    padding: 16px 24px;
    background: rgba(255,255,255,0.04);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  `;
  const seasonLabel = seasonFilter === 'all' ? '' : ` (${getSeasonConfig(parseInt(seasonFilter)).label})`;

  header.innerHTML = `
    <div>
        <div style="font-size:24px;font-weight:900;color:#fff;letter-spacing:0.5px;font-family:Montserrat,sans-serif;">
            ${titleMap[mode]}${seasonLabel}
        </div>
        <div style="font-size:14px;color:var(--muted, #9aa6b2);margin-top:4px;">
            ${subtitleMap[mode]}
        </div>
    </div>
    <div style="...">
        ${badgeMap[mode]} ${seasonFilter !== 'all' ? `· S${seasonFilter}` : ''}
    </div>
`;
  container.appendChild(header);

  // --- FILTRA ITEMS ---
  const items = SPRITES.filter(sp => {
    if (sp.unreleased) return false;
    if (seasonFilter !== 'all' && sp.season != seasonFilter) return false;
    if (mode === 'all') return true;
    if (mode === 'missing') {
        const released = getReleasedVariants(sp);
        return released.some(v => !s[sp.id].variants[v]);
    }
    if (mode === 'mastered') return s[sp.id].mastered;
    if (mode === 'current') return sp === SPRITES[currentIndex];
    return true;
  });

  const rarityColors = {
    rare: '#4FC3FF',
    epic: '#A855F7',
    legendary: '#FF6B3D',
    mythic: '#FFD34D'
  };
  const rarityBg = {
    rare: 'rgba(79,195,255,0.12)',
    epic: 'rgba(168,85,247,0.12)',
    legendary: 'rgba(255,107,61,0.12)',
    mythic: 'rgba(255,211,77,0.12)'
  };
  const rarityTextColor = {
    rare: '#4FC3FF',
    epic: '#A855F7',
    legendary: '#FF6B3D',
    mythic: '#FFD34D'
  };

  // --- LOOP PER LE CARD ---
  for (const sp of items) {
    const st = s[sp.id];
    const releasedVariants = getReleasedVariants(sp);

    const card = document.createElement('div');
    card.style.cssText = `
      display: flex;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 12px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.04);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      align-items: flex-start;
      width: 560px;
      max-width: 560px;
    `;

    // --- IMMAGINE ---
    const img = document.createElement('img');
    if (st.img) {
      img.src = st.img;
      await waitForImage(img);
    } else {
      await loadImageWithFallback(img, ASSET_BASE, getImageIdForSprite(sp));
      if (!img.complete || img.naturalWidth === 0) {
        img.src = placeholderSVG(sp.name);
        await waitForImage(img);
      }
    }
    img.style.width = '140px';
    img.style.height = '140px';
    img.style.objectFit = 'contain';
    img.style.borderRadius = '8px';
    img.style.background = 'rgba(255,255,255,0.02)';
    img.style.flexShrink = '0';
    img.onerror = () => img.src = placeholderSVG(sp.name);

    // --- METADATI ---
    const meta = document.createElement('div');
    meta.style.flex = '1';
    meta.style.minWidth = '0';
    meta.style.display = 'flex';
    meta.style.flexDirection = 'column';
    meta.style.gap = '4px';

    // Titolo + badge rarità
    const titleRow = document.createElement('div');
    titleRow.style.display = 'flex';
    titleRow.style.alignItems = 'center';
    titleRow.style.gap = '10px';
    titleRow.style.flexWrap = 'wrap';

    const nameSpan = document.createElement('span');
    const translatedName = SPRITE_NAME_TRANSLATIONS[lang]?.[sp.name] || sp.name;
    nameSpan.textContent = translatedName;
    nameSpan.style.fontWeight = '900';
    nameSpan.style.fontSize = '17px';
    nameSpan.style.color = '#fff';

    const rarityBadge = document.createElement('span');
    rarityBadge.textContent = sp.rarity.toUpperCase();
    rarityBadge.style.cssText = `
      background: ${rarityBg[sp.rarity] || 'rgba(255,255,255,0.05)'};
      color: ${rarityTextColor[sp.rarity] || '#fff'};
      font-size: 10px;
      padding: 2px 10px;
      border-radius: 999px;
      font-weight: 800;
      letter-spacing: 0.5px;
      border: 1px solid ${rarityColors[sp.rarity] || 'rgba(255,255,255,0.1)'};
    `;
    titleRow.appendChild(nameSpan);
    titleRow.appendChild(rarityBadge);

    // Passive – tradotta
    const passive = document.createElement('div');
    const passiveText = PASSIVE_TRANSLATIONS[lang]?.[sp.passive] || sp.passive;
    passive.textContent = passiveText;
    passive.style.color = '#cbd5e1';
    passive.style.fontSize = '13px';
    passive.style.lineHeight = '1.4';
    passive.style.marginBottom = '4px';

    // --- LISTA VARIANTI ---
    const variantsToShow = getReleasedVariants(sp).filter(v => {
      if (mode === 'missing') return !st.variants[v];
      return true;
    });

    const ul = document.createElement('ul');
    ul.style.margin = '6px 0 0 0';
    ul.style.color = '#e6f0f6';

    if (mode === 'missing') {
      ul.style.listStyleType = 'disc';
      ul.style.paddingLeft = '20px';
    } else {
      ul.style.listStyleType = 'none';
      ul.style.paddingLeft = '0';
    }

    variantsToShow.forEach(v => {
      const li = document.createElement('li');
      const owned = st.variants[v];
      const unreleased = sp.unreleasedVariants?.includes(v);
      li.style.padding = '2px 0';

      // Nome variante tradotto
      const variantName = (TRANSLATIONS[lang]?.['variant_'+v] || v).toUpperCase();

      if (mode === 'missing') {
        li.innerHTML = `
          ${variantName}
          ${unreleased ? `<span style="background:#d92d20; color:white; padding:1px 8px; border-radius:999px; font-size:9px; margin-left:8px; font-weight:700;">${TRANSLATIONS[lang]?.unreleased_badge || "UNRELEASED"}</span>` : ''}
        `;
        li.style.color = '#ff7ab6';
      } else {
        // 👑 manteniamo l'emoji, non la traduciamo
        const isMastered = st.variantsMastered?.[v] === true;
        let icon = owned ? '✔️ ' : '❌ ';
        let crownIcon = '';
        if (mode === 'all' && isMastered) {
          crownIcon = ' 👑'; // RIMASTA EMOJI, SENZA TESTO
        }
        li.innerHTML = `
          ${icon}
          ${variantName}
          ${crownIcon}
          ${unreleased ? `<span style="background:#d92d20; color:white; padding:1px 8px; border-radius:999px; font-size:9px; margin-left:8px; font-weight:700;">${TRANSLATIONS[lang]?.unreleased_badge || "UNRELEASED"}</span>` : ''}
        `;
        if (!owned) {
          li.style.color = '#ff7ab6';
        } else {
          li.style.color = '#4FC3FF';
        }
      }
      ul.appendChild(li);
    });

    meta.appendChild(titleRow);
    meta.appendChild(passive);
    meta.appendChild(ul);

    // --- IMAGE BOX CON CORONA (solo in "all") - invariata ---
    const imageBox = document.createElement('div');
    imageBox.style.display = 'flex';
    imageBox.style.flexDirection = 'column';
    imageBox.style.alignItems = 'center';
    imageBox.style.width = '140px';
    imageBox.style.flexShrink = '0';

    if (isSpriteMastered(sp) && mode === 'all') {
      const crown = document.createElement('img');
      crown.src = 'assets/ui/mastered.png';
      crown.style.width = '32px';
      crown.style.height = '32px';
      crown.style.marginBottom = '-8px';
      crown.style.filter = 'drop-shadow(0 0 8px rgba(255,211,77,0.3))';
      imageBox.appendChild(crown);
    }

    imageBox.appendChild(img);
    card.appendChild(imageBox);
    card.appendChild(meta);
    container.appendChild(card);
  }

  // --- EXPORT CON HTML2CANVAS (invariato) ---
  document.body.appendChild(container);
  const headerEl = document.querySelector('.header');
  const sidebarEl = document.querySelector('.sidebar');
  headerEl.style.visibility = 'hidden';
  sidebarEl.style.visibility = 'hidden';

  try {
    const allImgs = container.querySelectorAll('img');
    const loadPromises = Array.from(allImgs).map(img => {
      return new Promise((resolve) => {
        if (img.src.startsWith('data:')) {
          resolve();
          return;
        }
        if (!img.complete) {
          img.onload = () => resolve();
          img.onerror = () => resolve();
          setTimeout(resolve, 3000);
        } else {
          resolve();
        }
      });
    });
    await Promise.all(loadPromises);

    const convertPromises = Array.from(allImgs).map(img => {
      return new Promise((resolve) => {
        if (img.src.startsWith('data:')) {
          resolve();
          return;
        }
        try {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          const w = img.naturalWidth || img.width || 200;
          const h = img.naturalHeight || img.height || 200;
          canvas.width = w;
          canvas.height = h;
          ctx.drawImage(img, 0, 0, w, h);
          img.src = canvas.toDataURL('image/png');
          img.dataset._origSrc = img.src;
        } catch (e) {
          img.src = placeholderSVG(img.alt || 'No Image');
        }
        resolve();
      });
    });
    await Promise.all(convertPromises);

    let canvas;
    try {
      canvas = await html2canvas(container, {
        scale: 3,
        backgroundColor: '#07101a',
        useCORS: false,
        allowTaint: true,
        logging: false,
        width: 1200,
        height: container.scrollHeight      
    });
    } catch (err) {
      console.warn('html2canvas fallito, riprovo con opzioni di default', err);
      canvas = await html2canvas(container, {
        scale: 3,
        backgroundColor: '#07101a',
        width: Math.min(container.scrollWidth, 1600)
      });
    }

    await new Promise((resolve, reject) => {
      canvas.toBlob(blob => {
        if (!blob) { reject(new Error('toBlob failed')); return; }
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `sprite_export_${mode}.png`;
        document.body.appendChild(a);
        setTimeout(() => {
          try {
            a.click();
            setTimeout(() => { URL.revokeObjectURL(url); a.remove(); resolve(); }, 2000);
          } catch (err) {
            URL.revokeObjectURL(url);
            a.remove();
            reject(err);
          }
        }, 60);
      }, 'image/png');
    });

  } catch (err) {
    console.error('Export failed', err);
    showToast('Export failed: controlla console');
  } finally {
    container.querySelectorAll('img').forEach(img => {
      if (img.dataset && img.dataset._origSrc) {
        img.src = img.dataset._origSrc;
        delete img.dataset._origSrc;
      }
    });
    headerEl.style.visibility = 'visible';
    sidebarEl.style.visibility = 'visible';
    container.remove();
  }
  headerEl.style.visibility = 'visible';
  sidebarEl.style.visibility = 'visible';
  container.remove();
}

function exportJSON(){
  const s = loadState();
  const blob = new Blob([JSON.stringify(s,null,2)], {type:'application/json'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = 'sprite_collection.json';
  document.body.appendChild(a); a.click(); a.remove();
  setTimeout(()=> URL.revokeObjectURL(url),1500);
}

document.getElementById('file-import').addEventListener('change', e=>{
  const f = e.target.files[0]; if(!f) return;
  const r = new FileReader();
  r.onload = function(ev){
    try{
      const parsed = JSON.parse(ev.target.result);
      const base = defaultState();
      const keys = Object.keys(base);
      const parsedKeys = Object.keys(parsed);
      const ok = parsedKeys.some(k=> keys.includes(k));
      if(!ok){ showToast('JSON non valido'); return; }
      localStorage.setItem(STORAGE_KEY, JSON.stringify(parsed));
      state = loadState();
      renderSidebar();
      selectIndex(0);
      updateGlobalProgress();
      showToast('Import completato');
    }catch(err){ showToast('Errore parsing JSON'); }
  };
  r.readAsText(f);
});

// ----- SHARE COLLECTION -----
// Helper per base64 sicuro (gestisce caratteri Unicode)
function utf8ToBase64(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => 
        String.fromCharCode(parseInt(p1, 16))
    ));
}
function base64ToUtf8(str) {
    try {
        return decodeURIComponent(atob(str).split('').map(c => 
            '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
        ).join(''));
    } catch {
        return null;
    }
}

// ----- shareCollection aggiornata (esclude le immagini) -----
async function shareCollection() {
    const fullState = loadState();
    const cleanState = {};
    for (const [key, value] of Object.entries(fullState)) {
        cleanState[key] = {
            variants: value.variants || {},
            variantsMastered: value.variantsMastered || {},
			variantsLevel: value.variantsLevel || {},
            mastered: value.mastered || false
        };
    }
    const payload = { version: 3, collection: cleanState };
    const json = JSON.stringify(payload);
    const encoded = utf8ToBase64(json);
    const url = location.origin + location.pathname + "?c=" + encoded;
    await navigator.clipboard.writeText(url);

    const lang = currentLang;
    document.getElementById('modal-title').textContent = TRANSLATIONS[lang]?.share_title || "Share Collection";
    document.getElementById('modal-description').textContent = TRANSLATIONS[lang]?.share_description || "";
    document.getElementById('modal-content').innerHTML = `
        <div style="text-align:center">
            <div style="font-size:24px;margin-bottom:12px">📤</div>
            <div style="font-size:22px;font-weight:900">${TRANSLATIONS[lang]?.share_title || "Share Collection"}</div>
            <div style="margin-top:10px;color:var(--muted)">${TRANSLATIONS[lang]?.share_copied || "✔ Link copied successfully!"}</div>
            <div style="margin-top:6px;color:var(--muted)">${TRANSLATIONS[lang]?.share_anyone || "Anyone with this link can import your collection."}</div>
            <input id="share-url" readonly value="${url}" style="margin-top:20px;width:100%;padding:10px;border-radius:10px;background:#10131a;color:white;border:1px solid var(--border);">
            <div style="display:flex;gap:10px;margin-top:20px">
                <button class="btn-adaptive" id="copy-again" style="flex:1">${TRANSLATIONS[lang]?.share_copy_again || "Copy Again"}</button>
                <button class="btn-adaptive ghost" id="share-close" style="flex:1">${TRANSLATIONS[lang]?.share_close || "Close"}</button>
            </div>
        </div>
    `;
    document.getElementById("copy-again").onclick = async () => {
        await navigator.clipboard.writeText(url);
        showToast("Link copied!");
    };
    document.getElementById("share-close").onclick = () => { showMenu(); };
}

// ----- importFromHash aggiornata (supporta sia ?c= che #collection=) -----
(function importFromHash() {
    let encoded = null;
    const hash = window.location.hash;
    const search = window.location.search;

    if (search) {
        const params = new URLSearchParams(search);
        encoded = params.get('c');
    }
    if (!encoded && hash.startsWith('#collection=')) {
        encoded = hash.substring('#collection='.length);
    }
    if (!encoded) return;

    let json = base64ToUtf8(encoded);
    if (!json) {
        try {
            json = decodeURIComponent(atob(encoded));
        } catch (e) {
            console.warn('Share import: decodifica fallita');
            return;
        }
    }

    try {
        const data = JSON.parse(json);
        if (data.collection && data.version >= 2) {
            const currentState = loadState();
            const newState = data.collection;
            for (const [key, value] of Object.entries(newState)) {
                if (currentState[key]) {
                    currentState[key].variants = value.variants || {};
                    currentState[key].variantsMastered = value.variantsMastered || {};
					currentState[key].variantsLevel = value.variantsLevel || {};
                    currentState[key].mastered = value.mastered || false;
                }
            }
            localStorage.setItem(STORAGE_KEY, JSON.stringify(currentState));
            state = loadState();
            updateGlobalProgress();
            
            // Imposta un flag e lascia che init() faccia tutto
            window._importFromHashDone = true;
            
            showToast('Collection imported from share link');
            history.replaceState(null, '', window.location.pathname);
            
            // Forza il render solo se la pagina è già inizializzata
            if (isInitialized) {
                renderSidebar();
                selectIndex(0);
                saveState(state);
            }
        }
    } catch (e) {
        console.warn('Share import failed', e);
        showToast('Import fallito: link non valido');
    }
})();

function showSupport(){
    const lang = currentLang;
    document.getElementById('modal-title').textContent = TRANSLATIONS[lang]?.support_title || "Support the Project";
    document.getElementById('modal-description').textContent = TRANSLATIONS[lang]?.support_description || "Thank you for using Fortnite Sprite Locker!";
    document.getElementById('modal-content').innerHTML = `
        <div style="text-align:center">
            <div style="font-size:42px">❤️</div>
            <div style="margin-top:12px;font-size:15px;color:var(--muted)">${TRANSLATIONS[lang]?.support_text || "If you enjoy this tracker and want to support future updates, consider subscribing to my channel."}</div>
            <div style="display:flex;gap:10px;margin-top:24px">
                <button id="support-open" class="btn-adaptive" style="flex:1">${TRANSLATIONS[lang]?.support_youtube || "▶ YouTube"}</button>
                <button id="support-back" class="btn-adaptive ghost" style="flex:1">${TRANSLATIONS[lang]?.support_back || "← Back"}</button>
            </div>
        </div>
    `;
    document.getElementById("support-open").onclick = ()=>{ window.open("https://www.youtube.com/@MrPaulGaming", "_blank"); };
    document.getElementById("support-back").onclick = ()=>{ showMenu(); };
}

function showQR() {
     const qrImage = document.getElementById('qr-image');
    qrImage.src = 'qr-code.png';
    document.getElementById('qr-modal').style.display = 'flex';
}

/* ---------- ASSET BASE INPUT ---------- */
const assetInput = document.getElementById('asset-base-input');
const assetSaveBtn = document.getElementById('asset-base-save');
assetSaveBtn.addEventListener('click', ()=>{
  const v = assetInput.value.trim();
  if(!v){ showToast('Use a valid path'); return; }
  saveAssetBase(v);
  renderSidebar();
  selectIndex(currentIndex);
  showToast('File path saved');
});

(function populateAssetInput(){
  const saved = localStorage.getItem(ASSET_BASE_KEY);
  if(saved){ assetInput.value = saved; ASSET_BASE = normalizeBase(saved); }
  else if(ASSET_BASE){ assetInput.value = ASSET_BASE; }
  // Nascondi la barra di default e mostra il pulsante
  assetWrapper.classList.add('hidden');
  assetShowBtn.style.display = 'inline-flex';
})();

/* ---------- INIT ---------- */
(async function init(){
  state = loadState();
  migrateOldMastered();
  updateGlobalProgress();
  // --- Caricamento filtri e sprite salvato ---
  const savedFilters = loadFilterState();
  if (savedFilters) {
    document.getElementById('filter-rarity').value = savedFilters.rarity || 'all';
    document.getElementById('sort-order').value = savedFilters.sort || 'name-asc';
    document.getElementById('filter-season').value = savedFilters.season || 'all';
    document.getElementById('toggle-mastered').checked = savedFilters.hideMastered || false;
    document.getElementById('toggle-hide-unreleased').checked = savedFilters.hideUnreleased || false;
    document.getElementById('toggle-group-rarity').checked = savedFilters.groupRarity || false;
    if (localStorage.getItem('konami_override') === 'true') {
      document.getElementById('filter-season').value = '4';
      document.getElementById('filter-season').dispatchEvent(new Event('change'));
    }
  }

  populateCompanionSelector();

  // Evento cambio selettore
  document.getElementById('companion-select')?.addEventListener('change', function() {
    const spriteId = this.value;
    localStorage.setItem('companion_sprite_id', spriteId);
    updateCompanionImage(spriteId);
  });

  const lastSpriteId = localStorage.getItem('last_selected_sprite');
  const filteredList = getFilteredAndSortedSprites();
  let targetSprite = null;
  if (lastSpriteId) {
    targetSprite = filteredList.find(sp => sp.id === lastSpriteId);
  }
  if (!targetSprite && filteredList.length > 0) {
    targetSprite = filteredList[0];
  }

  // Prima renderizza la sidebar (così la lista è visibile)
  await renderSidebar();

  // Poi seleziona lo sprite target (o il primo)
  if (targetSprite) {
    await selectIndex(SPRITES.indexOf(targetSprite));
	updateVariantSelector(SPRITES[currentIndex].id);
  } 
  else {
    await selectIndex(0);
  }

  // Aggiorna le statistiche
  updateSidebarStats();
  const now = new Date().toLocaleString();
  document.getElementById('last-save').textContent = now;
  document.getElementById('footer-last-save').textContent = 'Last save: ' + now;
  setInterval(()=> updateSidebarStats(), 2000);
  try{ if(window.twemoji) twemoji.parse(document.body, {folder:'svg', ext:'.svg'}); }catch(e){console.warn(e);}
  isInitialized = true;
  // Assicura che il video sia nascosto all'avvio
  hideVideo();
  if (window._importFromHashDone) {
    await renderSidebar();
    await selectIndex(0);
    saveState(state);
  }
})();

document.addEventListener('error', e=>{
  const el=e.target;
  if(el && el.tagName==='IMG' && !el.dataset.fallbackApplied){
    el.dataset.fallbackApplied='1';
    el.src='data:image/svg+xml;utf8,'+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><rect width="100%" height="100%" rx="12" fill="#07101a"/><text x="50%" y="50%" fill="#2fb6ff" font-size="18" text-anchor="middle" dy=".35em">No Image</text></svg>');
  }
}, true);

function getFilteredAndSortedSprites() {
  const search = document.getElementById('sidebar-search').value.trim().toLowerCase();
  const rarity = document.getElementById('filter-rarity').value;
  const season = document.getElementById('filter-season').value;
  const hideMastered = document.getElementById('toggle-mastered').checked;
  const hideUnreleased = document.getElementById('toggle-hide-unreleased').checked;
  const grouped = document.getElementById('toggle-group-rarity').checked;
  const sortOrder = document.getElementById('sort-order').value;

  // --- 1. FILTRA ---
  let filtered = SPRITES.filter(sp => {
    if (search && !sp.name.toLowerCase().includes(search) && !sp.id.toLowerCase().includes(search)) return false;
    if (rarity !== 'all' && sp.rarity !== rarity) return false;
    if (season !== 'all' && sp.season != season) return false;
    if (hideMastered && isSpriteMastered(sp)) return false;
    if (hideUnreleased && sp.unreleased) return false;
    return true;
  });

  // --- 2. FUNZIONE DI ORDINAMENTO PRINCIPALE ---
  const rarityOrder = { rare: 0, epic: 1, legendary: 2, mythic: 3 };

  filtered.sort((a, b) => {
    // Se il raggruppamento è attivo, prima ordina per rarità
    if (grouped) {
      const rarityDiff = (rarityOrder[a.rarity] ?? 99) - (rarityOrder[b.rarity] ?? 99);
      if (rarityDiff !== 0) return rarityDiff;
      // Se stessa rarità, applica l'ordinamento scelto
    }

    // --- ORDINAMENTO SECONDARIO (sempre applicato) ---
    const stA = state[a.id];
    const stB = state[b.id];
    const releasedA = getReleasedVariants(a);
    const releasedB = getReleasedVariants(b);
    const ownedA = releasedA.filter(v => stA.variants[v]).length;
    const ownedB = releasedB.filter(v => stB.variants[v]).length;
    const totalA = releasedA.length;
    const totalB = releasedB.length;
    const progressA = totalA === 0 ? 0 : ownedA / totalA;
    const progressB = totalB === 0 ? 0 : ownedB / totalB;

    switch (sortOrder) {
      case 'name-asc':
        return a.name.localeCompare(b.name);
      case 'name-desc':
        return b.name.localeCompare(a.name);
      case 'rarity-desc':
        return (rarityOrder[a.rarity] ?? 99) - (rarityOrder[b.rarity] ?? 99);
      case 'rarity-asc':
        return (rarityOrder[b.rarity] ?? 99) - (rarityOrder[a.rarity] ?? 99);
      case 'progress-desc':
        return progressB - progressA;
      case 'progress-asc':
        return progressA - progressB;
      case 'updated-desc': {
        const dateA = stA.lastUpdated ? new Date(stA.lastUpdated) : new Date(0);
        const dateB = stB.lastUpdated ? new Date(stB.lastUpdated) : new Date(0);
        return dateB - dateA;
      }
      default:
        return 0;
    }
  });

  return filtered;
}

function updateSelectionAfterFilter() {
  const filteredList = getFilteredAndSortedSprites();
  if (filteredList.length === 0) return;

  const currentSp = SPRITES[currentIndex];
  const stillVisible = filteredList.some(sp => sp.id === currentSp.id);
    const firstSp = filteredList[0];
    selectIndex(SPRITES.indexOf(firstSp));
}

function saveFilterState() {
  const state = {
    rarity: document.getElementById('filter-rarity').value,
    sort: document.getElementById('sort-order').value,
    season: document.getElementById('filter-season').value,
    hideMastered: document.getElementById('toggle-mastered').checked,
    hideUnreleased: document.getElementById('toggle-hide-unreleased').checked,
    groupRarity: document.getElementById('toggle-group-rarity').checked
  };
  localStorage.setItem('sprite_filters', JSON.stringify(state));
}

function loadFilterState() {
  try {
    const raw = localStorage.getItem('sprite_filters');
    if (!raw) return null;
    return JSON.parse(raw);
  } catch { return null; }
}

function saveLastSelectedSprite(spId) {
  localStorage.setItem('last_selected_sprite', spId);
}

function createSparkles(element) {
  const rect = element.getBoundingClientRect();
  const colors = ['#FFD166', '#2FB6FF', '#FF6B3D', '#7B6BFF', '#FF7AB6', '#4FC3FF'];
  for (let i = 0; i < 12; i++) {
    const sparkle = document.createElement('div');
    const size = 6 + Math.random() * 10;
    const angle = Math.random() * 2 * Math.PI;
    const distance = 30 + Math.random() * 70;
    sparkle.style.cssText = `
      position: fixed;
      left: ${rect.left + rect.width/2}px;
      top: ${rect.top + rect.height/2}px;
      width: ${size}px;
      height: ${size}px;
      background: ${colors[Math.floor(Math.random() * colors.length)]};
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      opacity: 1;
      transition: all 0.7s cubic-bezier(.2,.8,.3,1);
      box-shadow: 0 0 10px ${colors[Math.floor(Math.random() * colors.length)]};
    `;
    document.body.appendChild(sparkle);
    requestAnimationFrame(() => {
      sparkle.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px) scale(0)`;
      sparkle.style.opacity = '0';
    });
    setTimeout(() => sparkle.remove(), 800);
  }
}

function isSpriteMastered(sp) {
  const st = state[sp.id];
  const released = getReleasedVariants(sp);
  
  // Lo sprite è masterato SOLO se tutte le varianti rilasciate sono possedute E masterate
  return released.every(v => st.variants[v] && st.variantsMastered?.[v] === true);
}

async function toggleVariantMaster(spriteId, variant) {
    const s = loadState();
    if (!s[spriteId].variants[variant]) {
        showToast("Acquire this variant first!");
        return;
    }
    if (!s[spriteId].variantsMastered) s[spriteId].variantsMastered = {};

    const sp = SPRITES.find(sp => sp.id === spriteId);
    const wasMastered = isSpriteMastered(sp); // prima del toggle

    const newState = !s[spriteId].variantsMastered[variant];
    s[spriteId].variantsMastered[variant] = newState;
	
	// 🔥 NUOVO: se è diventato masterato, imposta il livello a 5
	if (newState) {
        s[spriteId].variantsLevel[variant] = 5;
    } else {
        // Tolta la master: livello a 1
        s[spriteId].variantsLevel[variant] = 1;
    }
	
    const released = getReleasedVariants(sp);
    
	// Calcola se tutte le varianti rilasciate sono possedute E masterate
    const allMastered = released.every(v => 
        s[spriteId].variants[v] && s[spriteId].variantsMastered[v] === true
    );
    s[spriteId].mastered = allMastered;
    s[spriteId].lastUpdated = new Date().toISOString();
    saveState(s);
    state = loadState();
    updateGlobalProgress();

    if (newState) {
        const btn = document.querySelector(`.variant-btn[data-variant="${variant}"]`);
        if (btn) createSparkles(btn);
    }

    // Se lo sprite è diventato masterato ora (e prima non lo era)
    if (!wasMastered && isSpriteMastered(sp)) {
        triggerSpriteVariantsRain(sp.id);
		if (sp.id === 'sonic') {
			triggerSonicRings(sp.id);
		}
    }

    await selectIndex(currentIndex, true);
    await renderSidebar();
    showToast(newState ? `${variant.toUpperCase()} mastered! 👑` : `${variant.toUpperCase()} unmastered`);
}

function toggleShortcutsModal() {
  const modal = document.getElementById('shortcuts-modal');
  const isOpen = modal.style.display === 'flex';
  if (isOpen) {
    modal.style.display = 'none';
    modal.setAttribute('aria-hidden', 'true');
  } else {
    modal.style.display = 'flex';
    modal.setAttribute('aria-hidden', 'false');
  }
}

// ========== SPRITE GARDEN ==========

// Posizioni predefinite per gli sprite (percentuali relative al contenitore)
const GARDEN_POSITIONS = {
    // --------- SEASON 3 - RUNNERS ---------
    water: { x: 8, y: 45, rot: 0 },
    earth: { x: 22, y: 25, rot: 5 },
    fire: { x: 35, y: 48, rot: -3 },
    duck: { x: 48, y: 20, rot: 8 },
    ghost: { x: 62, y: 42, rot: -5 },
    dream: { x: 75, y: 28, rot: 3 },
    demon: { x: 15, y: 68, rot: -2 },
    punk: { x: 30, y: 72, rot: 6 },
    king: { x: 48, y: 65, rot: -4 },
    zeropoint: { x: 62, y: 70, rot: 2 },
    burntpeanut: { x: 78, y: 60, rot: -6 },
    fishy: { x: 88, y: 48, rot: 4 },
    striker: { x: 6, y: 85, rot: -3 },
    aura: { x: 22, y: 88, rot: 5 },
    boss: { x: 40, y: 85, rot: -2 },
    grim: { x: 55, y: 82, rot: 7 },
    air: { x: 70, y: 88, rot: -4 },
    seven: { x: 85, y: 78, rot: 3 },
    batman: { x: 92, y: 35, rot: -5 },
    pollo: { x: 5, y: 55, rot: 8 },
    vini: { x: 95, y: 65, rot: -2 },
    llama: { x: 42, y: 35, rot: 4 },
    peely: { x: 58, y: 50, rot: -6 },
    ironmouse: { x: 20, y: 38, rot: 3 },
    johnwick: { x: 82, y: 18, rot: -4 },

    // --------- SEASON 4 - OVERRIDE ---------
    sonic: { x: 12, y: 18, rot: 3 },
    tails: { x: 28, y: 14, rot: -4 },
    shadow: { x: 45, y: 12, rot: 5 },
    adventure: { x: 62, y: 16, rot: -2 },
    bush: { x: 78, y: 10, rot: 4 },
    jonesy: { x: 90, y: 22, rot: -3 },
    "8bit": { x: 10, y: 32, rot: 6 },
    stormking: { x: 25, y: 50, rot: -5 },
    killswitch: { x: 40, y: 55, rot: 2 },
    jackrabbit: { x: 55, y: 30, rot: -4 },
    klombo: { x: 72, y: 38, rot: 3 },
    crown: { x: 88, y: 40, rot: -2 },
    xray: { x: 15, y: 95, rot: 2 },
    pond: { x: 32, y: 95, rot: -3 },
    honey: { x: 50, y: 95, rot: 5 },
    dumpster: { x: 68, y: 95, rot: -4 },
    bullet: { x: 85, y: 95, rot: 3 },
};

function getGardenProgress() {
    const s = loadState();
    const releasedSprites = SPRITES.filter(sp => !sp.unreleased);
    let total = 0, owned = 0, mastered = 0;
    releasedSprites.forEach(sp => {
        const released = getReleasedVariants(sp);
        const ownedCount = released.filter(v => s[sp.id].variants[v]).length;
        if (ownedCount > 0) owned++;
        if (isSpriteMastered(sp)) mastered++;
        total++;
    });
    return { total, owned, mastered, percent: total === 0 ? 0 : Math.round((owned / total) * 100) };
}

function getGardenDecorations(percent) {
    const base = [];
    // Sempre presenti: alcuni alberi e rocce
    base.push(
        { emoji: '🌳', x: 5, y: 5, class: 'tree' },
        { emoji: '🌳', x: 92, y: 8, class: 'tree' },
        { emoji: '🪨', x: 2, y: 50, class: 'rock' },
        { emoji: '🪨', x: 95, y: 55, class: 'rock' }
    );
    
    if (percent >= 25) {
        base.push(
            { emoji: '🌳', x: 20, y: 6, class: 'tree' },
            { emoji: '🌳', x: 78, y: 4, class: 'tree' },
            { emoji: '🌸', x: 15, y: 30, class: 'flower' },
            { emoji: '🌸', x: 85, y: 28, class: 'flower' }
        );
    }
    
    if (percent >= 50) {
        base.push(
            { emoji: '💧', x: 45, y: 70, class: 'water' },
            { emoji: '🌸', x: 35, y: 55, class: 'flower' },
            { emoji: '🌸', x: 65, y: 58, class: 'flower' }
        );
    }
    
    if (percent >= 75) {
        base.push(
            { emoji: '🌸', x: 8, y: 70, class: 'flower' },
            { emoji: '🌸', x: 92, y: 72, class: 'flower' },
            { emoji: '✨', x: 50, y: 15, class: 'star' },
            { emoji: '✨', x: 25, y: 40, class: 'star' },
            { emoji: '✨', x: 75, y: 42, class: 'star' }
        );
    }
    
    if (percent >= 100) {
    for (let i = 0; i < 10; i++) { // da 20 a 10
        base.push({
            emoji: '✨',
            x: 3 + Math.random() * 94,
            y: 3 + Math.random() * 94,
            class: 'star'
        });
    }
}
    
    return base;
}

function renderGarden() {
    const container = document.getElementById('garden-container');
    const statsEl = document.getElementById('garden-stats');
    const particlesEl = document.getElementById('garden-particles');
    
    // Pulisci container (mantieni solo particelle)
    container.innerHTML = '';
    
    const progress = getGardenProgress();
    const lang = currentLang;
    
    // Aggiorna statistiche
    const masteredText = TRANSLATIONS[lang]?.mastered || 'Mastered';
    statsEl.innerHTML = `
        <strong>${progress.owned}</strong> / ${progress.total} sprites · 
        <strong>${progress.mastered}</strong> ${masteredText} · 
        <span style="color:${progress.percent === 100 ? '#FFD34D' : 'var(--primary)'}">${progress.percent}%</span>
    `;
    
    // Aggiungi decorazioni
    const decorations = getGardenDecorations(progress.percent);
    decorations.forEach(dec => {
        const el = document.createElement('div');
        el.className = `garden-decoration ${dec.class || ''}`;
        el.textContent = dec.emoji;
        el.style.left = dec.x + '%';
        el.style.top = dec.y + '%';
        el.style.transform = 'translate(-50%, -50%)';
        if (dec.class === 'star') {
            el.style.animationDelay = (Math.random() * 3) + 's';
        }
        container.appendChild(el);
    });
	
	// --- BACCA DRAGGABILE ---
	const berry = document.createElement('div');
	berry.className = 'garden-berry';
	berry.textContent = '🍇';
	berry.draggable = true;
	berry.style.cssText = `
	  position: absolute;
	  left: 1%;
	  bottom: 10%;
	  font-size: 48px;
	  cursor: grab;
	  z-index: 10;
	  filter: drop-shadow(0 0 16px rgba(255,200,0,0.5));
	  user-select: none;
	  transition: transform 0.2s ease;
	  background: rgba(0,0,0,0.2);
	  border-radius: 50%;
	  padding: 8px;
	  border: 2px solid rgba(255,200,0,0.3);
	`;

	// Eventi drag
	berry.addEventListener('dragstart', (e) => {
	  e.dataTransfer.setData('text/plain', 'berry');
	  berry.style.transform = 'scale(1.4)';
	  berry.style.cursor = 'grabbing';
	});
	berry.addEventListener('dragend', () => {
	  berry.style.transform = 'scale(1)';
	  berry.style.cursor = 'grab';
	});

	container.appendChild(berry);
    
    // Aggiungi sprite
    const s = loadState();
    const releasedSprites = SPRITES.filter(sp => !sp.unreleased);
    
    // Filtra solo quelli posseduti (almeno una variante)
    const ownedSprites = releasedSprites.filter(sp => {
        return sp.variants.some(v => s[sp.id].variants[v]);
    });
    
    if (ownedSprites.length === 0) {
        const empty = document.createElement('div');
        empty.style.cssText = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--muted);text-align:center;font-size:18px;';
        empty.innerHTML = `
            <div style="font-size:48px;margin-bottom:12px;">🌱</div>
            <div>No sprites collected yet...</div>
            <div style="font-size:13px;margin-top:6px;opacity:0.6;">Collect your first sprite to grow the garden!</div>
        `;
        container.appendChild(empty);
        return;
    }
    
    ownedSprites.forEach(sp => {
        const st = s[sp.id];
        const pos = GARDEN_POSITIONS[sp.id] || { x: 10 + Math.random() * 80, y: 10 + Math.random() * 80, rot: 0 };
        const isMastered = isSpriteMastered(sp);
        const variant = loadSelectedVariant(sp.id) || 'basic';
        
        // Randomizzazione leggera della posizione
        const xOffset = (Math.random() - 0.5) * 6;
        const yOffset = (Math.random() - 0.5) * 6;
        const rotOffset = (Math.random() - 0.5) * 4;
        
        const card = document.createElement('div');
        card.className = `garden-sprite${isMastered ? ' mastered' : ''}`;
        card.style.left = (pos.x + xOffset) + '%';
        card.style.top = (pos.y + yOffset) + '%';
        card.style.transform = 'translate(-50%, -50%)';
        card.style.setProperty('--rot-start', (pos.rot + rotOffset - 2) + 'deg');
        card.style.setProperty('--rot-end', (pos.rot + rotOffset + 2) + 'deg');
        card.style.setProperty('--float-y', (-8 - Math.random() * 8) + 'px');
        
        // Animazione differenziata
        const duration = 2.5 + Math.random() * 2;
        const delay = Math.random() * 2;
        card.style.animation = `gardenFloat ${duration}s ease-in-out ${delay}s infinite alternate`;
        card.addEventListener('mouseenter', () => {
			card.style.animationPlayState = 'paused';
		});
		card.addEventListener('mouseleave', () => {
			card.style.animationPlayState = 'running';
		});
		
				card.addEventListener('dragover', (e) => {
			  e.preventDefault();
			  card.style.transform = 'scale(1.15) rotate(-3deg)';
			  card.style.borderColor = 'rgba(255,200,0,0.6)';
			  card.style.boxShadow = '0 0 30px rgba(255,200,0,0.2)';
			});

			card.addEventListener('dragleave', () => {
			  card.style.transform = '';
			  card.style.borderColor = '';
			  card.style.boxShadow = '';
			});

			card.addEventListener('drop', (e) => {
			  e.preventDefault();
			  const data = e.dataTransfer.getData('text/plain');
			  if (data === 'berry') {
				// Animazione di "nutrimento"
				card.style.transform = 'scale(1.2) rotate(-5deg)';
				
				// Crea cuori volanti
				for (let i = 0; i < 6; i++) {
				  const heart = document.createElement('div');
				  heart.textContent = '❤️';
				  heart.style.cssText = `
					position: absolute;
					font-size: ${20 + Math.random() * 20}px;
					pointer-events: none;
					animation: heartFloat ${1.2 + Math.random() * 0.8}s ease-out forwards;
					animation-delay: ${Math.random() * 0.3}s;
					left: ${20 + Math.random() * 60}%;
					top: ${10 + Math.random() * 40}%;
					z-index: 30;
				  `;
				  card.appendChild(heart);
				  setTimeout(() => heart.remove(), 2000);
				}

				// Ripristina stile dopo l'animazione
				setTimeout(() => {
				  card.style.transform = '';
				  card.style.borderColor = '';
				  card.style.boxShadow = '';
				}, 600);

				// Messaggio (toast)
				const spriteName = SPRITE_NAME_TRANSLATIONS[currentLang]?.[sp.name] || sp.name;
				showToast(`🍇 ${spriteName} has been fed! +10 XP`);
			  }
		});
        // Immagine
        const img = document.createElement('img');
        const imgId = getVariantImageId(sp, variant);
        loadImageWithFallback(img, ASSET_BASE, imgId);
        img.alt = sp.name;
        img.loading = 'lazy';
        img.onerror = () => img.src = placeholderSVG(sp.name);
        
        // Nome
        const nameEl = document.createElement('div');
        nameEl.className = 'garden-name';
        nameEl.textContent = SPRITE_NAME_TRANSLATIONS[lang]?.[sp.name] || sp.name;
        
        card.appendChild(img);
        card.appendChild(nameEl);
        
        // Corona se mastered
        if (isMastered) {
            const crown = document.createElement('div');
            crown.className = 'garden-crown';
            crown.textContent = '👑';
            card.appendChild(crown);
        }
        
        // Tooltip con info
        const released = getReleasedVariants(sp);
        const ownedCount = released.filter(v => st.variants[v]).length;
        const masteredCount = released.filter(v => st.variantsMastered?.[v]).length;
        card.title = `${sp.name} · ${ownedCount}/${released.length} variants · ${masteredCount} mastered`;
        
        // Click → chiudi giardino e vai allo sprite
        card.addEventListener('click', () => {
            closeGarden();
            const idx = SPRITES.indexOf(sp);
            if (idx !== -1) {
                // Assicurati che la grid sia disattivata
                if (gridMode) {
                    gridMode = false;
                    const panel = document.querySelector('.panel');
                    panel.innerHTML = '';
                    panel.appendChild(originalLeftPanel);
                    panel.appendChild(originalRightPanel);
                }
                selectIndex(idx);
                renderSidebar();
            }
        });
        
        container.appendChild(card);
    });
    
    // Particelle per giardino segreto (100%)
    particlesEl.innerHTML = '';
    if (progress.percent >= 100) {
        for (let i = 0; i < 20; i++) {
            const p = document.createElement('div');
            p.className = 'particle';
            p.style.left = Math.random() * 100 + '%';
            p.style.width = (2 + Math.random() * 4) + 'px';
            p.style.height = p.style.width;
            p.style.animationDuration = (4 + Math.random() * 6) + 's';
            p.style.animationDelay = (Math.random() * 5) + 's';
            p.style.background = `rgba(255, 211, 77, ${0.1 + Math.random() * 0.3})`;
            particlesEl.appendChild(p);
        }
    }
}

function openGarden() {
    const overlay = document.getElementById('garden-overlay');
    overlay.classList.add('active');
    overlay.style.display = 'block';
    renderGarden();
}

function closeGarden() {
    const overlay = document.getElementById('garden-overlay');
    overlay.classList.remove('active');
    overlay.style.display = 'none';
    if (window._gardenInterval) {
        clearInterval(window._gardenInterval);
        window._gardenInterval = null;
    }
}

// Toggle garden
function toggleGarden() {
    const overlay = document.getElementById('garden-overlay');
    if (overlay.classList.contains('active')) {
        closeGarden();
    } else {
        openGarden();
    }
}

// Listener per il pulsante di chiusura
document.getElementById('garden-close').addEventListener('click', closeGarden);

// Chiudi giardino con Esc
document.addEventListener('keydown', function gardenEsc(e) {
    if (e.key === 'Escape') {
        const overlay = document.getElementById('garden-overlay');
        if (overlay.classList.contains('active')) {
            closeGarden();
            e.preventDefault();
        }
    }
});

// Chiudi giardino cliccando fuori dal container (sullo sfondo)
document.getElementById('garden-overlay').addEventListener('click', function(e) {
    if (e.target === this) {
        closeGarden();
    }
});

function showSeasonModal(season) {
    const modal = document.getElementById('override-modal');
    const chapter = modal.querySelector('.chapter-season');
    const title = modal.querySelector('.override-title');
    const slogan = modal.querySelector('.slogan');

    modal.classList.remove('season-3', 'season-4');

    // Leggi la lingua corrente
    const lang = currentLang;

    // Mappa delle configurazioni con traduzioni
    const configs = {
        3: {
            chapter: TRANSLATIONS[lang]?.season3_chapter || 'CHAPTER 7 • SEASON 3',
            title: TRANSLATIONS[lang]?.season3_title || 'RUNNERS',
            slogan: 'BACK TO THE PAST · RELIVE THE MOMENTS',
            class: 'season-3'
        },
        4: {
            chapter: TRANSLATIONS[lang]?.season4_chapter || 'CHAPTER 7 • SEASON 4',
            title: TRANSLATIONS[lang]?.season4_title || 'OVERRIDE',
            slogan: 'BREAK THE RULES · CHANGE THE GAME',
            class: 'season-4'
        }
    };

    const config = configs[season];
    if (!config) return;

    modal.classList.add(config.class);
    chapter.textContent = config.chapter;
    title.textContent = config.title;
    slogan.textContent = config.slogan;

    modal.classList.add('active');
    modal.style.display = 'flex';
    modal.style.alignItems = 'center';
    modal.style.justifyContent = 'center';

    clearTimeout(window.seasonModalTimeout);
    window.seasonModalTimeout = setTimeout(() => {
        modal.classList.remove('active');
        modal.style.display = 'none';
    }, 3000);
}

function triggerKonamiEasterEgg() {
    // Legge il filtro attuale
    const filterSelect = document.getElementById('filter-season');
    const currentFilter = filterSelect.value;

    let nextSeason;

    // Decide la prossima stagione in base al filtro attuale
    if (currentFilter === 'all') {
        // Se è su "All Seasons", va alla Season 3
        nextSeason = 3;
    } 
    else if (currentFilter === '3') {
        nextSeason = 4;
    } 
    else if (currentFilter === '4') {
        nextSeason = 3;
    } 
    else {
        // Fallback: se per qualche motivo il valore è diverso, vai a 3
        nextSeason = 3;
    }

    // Applica il filtro
    filterSelect.value = nextSeason;
    filterSelect.dispatchEvent(new Event('change'));

    // Salva la stagione nel localStorage per future sessioni
    localStorage.setItem('current_season', nextSeason);
    localStorage.setItem('konami_unlocked', 'true');
    localStorage.setItem('konami_override', 'true');

    // Mostra il modal
    showSeasonModal(nextSeason);
}

function toggleRetroMode() {
  const season = document.getElementById('filter-season')?.value;
  
  // Se non siamo in Season 4, disattiva e avvisa
  if (season !== '4') {
    if (retroModeActive) {
      retroModeActive = false;
      document.body.classList.remove('retro-mode');
      // Ripristina le immagini
      document.querySelectorAll('img:not(.no-retro)').forEach(img => {
        if (img.dataset.origSrc) {
          img.src = img.dataset.origSrc;
          delete img.dataset.origSrc;
          delete img.dataset.pixelated;
        }
      });
      showToast('🕹️ Retro mode disabled (only available in Season 4)');
    } else {
      showToast('📌 Retro mode available only in Season 4 (Override)');
    }
    return;
  }

  // Se siamo in Season 4, esegui il toggle normale
  retroModeActive = !retroModeActive;
  document.body.classList.toggle('retro-mode', retroModeActive);
  
  const imgs = document.querySelectorAll('img:not(.no-retro)');
  imgs.forEach(img => {
    if (retroModeActive) {
      if (!img.dataset.origSrc) img.dataset.origSrc = img.src;
      pixelateIfRetro(img, 12);
    } else {
      if (img.dataset.origSrc) {
        img.src = img.dataset.origSrc;
        delete img.dataset.origSrc;
        delete img.dataset.pixelated;
      }
    }
  });
  showToast(retroModeActive ? '🕹️ Retro mode ON' : '🕹️ Retro mode OFF');
}

function openMapModal() {
    const season = document.getElementById('filter-season').value;
    const img = document.getElementById('map-image');
    const title = document.getElementById('map-title');
    const modal = document.getElementById('map-modal');
    const lang = currentLang;

    // ---- Imposta immagine e titolo ----
    if (season === '4') {
        img.src = 'assets/ui/season4_map.png';
        title.textContent = TRANSLATIONS[lang]?.map_title_season4 || 'Season 4 - OVERRIDE';
    } else {
        img.src = 'assets/ui/season3_map.png';
        title.textContent = TRANSLATIONS[lang]?.map_title_season3 || 'Season 3 - RUNNERS';
    }

    // ---- Pulisci contenitori precedenti ----
    const oldContainer = document.getElementById('map-marker-container');
    if (oldContainer) oldContainer.remove();
    const oldToggle = document.getElementById('marker-toggle-btn');
    if (oldToggle) oldToggle.remove();
    const oldLegend = document.getElementById('map-legend-custom');
    if (oldLegend) oldLegend.remove();

    // ---- Wrapper ----
    const wrapper = img.parentElement;
    if (window.getComputedStyle(wrapper).position === 'static') {
        wrapper.style.position = 'relative';
    }

    // ---- Legenda ----
    const legendContainer = document.createElement('div');
    legendContainer.id = 'map-legend-custom';
    legendContainer.style.cssText = `
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 10px;
        flex-wrap: wrap;
        color: var(--muted);
        font-size: 13px;
    `;

    // Crea l'elemento per la legenda
    const legendText = document.createElement('span');
    legendText.id = 'map-legend-text';
    legendText.textContent = season === '4' 
        ? TRANSLATIONS[lang]?.map_legend_season4 || '🔵 Cheat Code Locator · 18 codes available'
        : TRANSLATIONS[lang]?.map_legend_season3 || '🟡 Sprite Chest · 🟢 Normal Chest';
    legendContainer.appendChild(legendText);

    // Inserisci la legenda sotto l'immagine
    wrapper.parentElement.insertBefore(legendContainer, wrapper.nextSibling);

    // ---- Contenitore marker ----
    const markerContainer = document.createElement('div');
    markerContainer.id = 'map-marker-container';
    markerContainer.style.cssText = `
        position: absolute;
        inset: 0;
        pointer-events: none;
    `;
    wrapper.appendChild(markerContainer);

    // ---- Dati: coordinate pixel e label ----
    let positions = [];
    if (season === '4') {
        positions = [
            { px: 735, py: 207, label: '47' },
            { px: 1433, py: 297, label: '13' },
            { px: 931, py: 300, label: '46' },
            { px: 559, py: 344, label: '2' },
            { px: 1762, py: 422, label: '59' },
            { px: 1162, py: 446, label: '50' },
            { px: 740, py: 500, label: '2' },
            { px: 1611, py: 585, label: '32' },
            { px: 326, py: 698, label: '9' },
            { px: 818, py: 703, label: '54' },
            { px: 1398, py: 761, label: '77' },
            { px: 1142, py: 773, label: '44' },
            { px: 313, py: 903, label: '39' },
            { px: 1623, py: 903, label: '45' },
            { px: 572, py: 954, label: '55' },
            { px: 1121, py: 971, label: '76' },
            { px: 813, py: 1035, label: '49' },
            { px: 1395, py: 1096, label: '105' }
        ];
    } else {
        positions = [
            { px: 390, py: 178, label: '12' },
            { px: 1162, py: 437, label: '12' },
            { px: 908, py: 524, label: '12' },
            { px: 571, py: 529, label: '12' },
            { px: 1574, py: 557, label: '12' },
            { px: 1031, py: 568, label: '13' },
            { px: 1443, py: 582, label: '13' },
            { px: 424, py: 619, label: '12' },
            { px: 847, py: 621, label: '12' },
            { px: 215, py: 697, label: '12' },
            { px: 758, py: 727, label: '12' },
            { px: 440, py: 738, label: '12' }
        ];
    }

    // ---- Dimensioni fisse (1920x1920) ----
    const IMG_WIDTH = 1920;
    const IMG_HEIGHT = 1920;

    const color = season === '4' ? '#00D4FF' : '#FFD34D';
    let markersVisible = false;

    positions.forEach(pos => {
        const x = (pos.px / IMG_WIDTH) * 100;
        const y = (pos.py / IMG_HEIGHT) * 100;
        const dot = document.createElement('div');
        dot.className = 'map-marker';
        dot.style.cssText = `
            position: absolute;
            left: ${x}%;
            top: ${y}%;
            transform: translate(-50%, -50%);
            width: 28px;
            height: 28px;
            background: ${color};
            border-radius: 50%;
            border: 2px solid white;
            box-shadow: 0 0 24px ${color}80, 0 0 60px ${color}40;
            display: none;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 900;
            font-size: 14px;
            pointer-events: none;
            z-index: 10;
            text-shadow: 0 0 8px rgba(0,0,0,0.8);
        `;
        dot.textContent = pos.label;
        markerContainer.appendChild(dot);
    });

    // ---- Pulsante toggle ----
    const toggleBtn = document.createElement('button');
    toggleBtn.id = 'marker-toggle-btn';
    toggleBtn.className = 'btn-adaptive ghost';
    toggleBtn.textContent = '👁️ Show Markers';
    toggleBtn.style.fontSize = '13px';
    toggleBtn.style.padding = '6px 14px';
    legendContainer.appendChild(toggleBtn);

    toggleBtn.addEventListener('click', function() {
        markersVisible = !markersVisible;
        const markers = markerContainer.querySelectorAll('.map-marker');
        markers.forEach(m => {
            m.style.display = markersVisible ? 'flex' : 'none';
        });
        this.textContent = markersVisible ? '👁️ Hide Markers' : '👁️ Show Markers';
    });

    // ---- Mostra il modal ----
    modal.style.display = 'flex';
    modal.setAttribute('aria-hidden', 'false');
}

// Event listener per il pulsante di chiusura della mappa
const mapClose = document.getElementById('map-close');
if (mapClose) {
    mapClose.addEventListener('click', closeMapModal);
}

// Chiudi cliccando fuori dall'immagine della mappa
const mapModal = document.getElementById('map-modal');
if (mapModal) {
    mapModal.addEventListener('click', function(e) {
        if (e.target === this) closeMapModal();
    });
}

function closeMapModal() {
    const modal = document.getElementById('map-modal');
    modal.style.display = 'none';
    modal.setAttribute('aria-hidden', 'true');
}

// Listener per aprire il Pod
const btnPod = document.getElementById('btn-pod');
if (btnPod) {
    btnPod.addEventListener('click', togglePod);
}

// Giardino
document.getElementById('btn-garden').addEventListener('click', function() {
  toggleGarden();
  document.getElementById('more-menu').style.display = 'none'; // chiude il menu
});

// Calcolatrice
document.getElementById('btn-planner').addEventListener('click', function() {
  openPlanner();
  document.getElementById('more-menu').style.display = 'none'; // chiude il menu
});

// Dropdown "Altro"
const btnMore = document.getElementById('btn-more');
const moreMenu = document.getElementById('more-menu');

// CONTROLLO DI SICUREZZA: verifica che gli elementi esistano
if (btnMore && moreMenu) {
    btnMore.addEventListener('click', (e) => {
        e.stopPropagation(); // Evita che il click chiuda subito il menu
        moreMenu.style.display = moreMenu.style.display === 'none' ? 'block' : 'none';
    });

    // Chiudi il menu quando clicchi fuori
    document.addEventListener('click', (e) => {
        if (!moreMenu.contains(e.target) && e.target !== btnMore) {
            moreMenu.style.display = 'none';
        }
    });
}

// ---------- PLANNER (Sprite Dust Calculator) ----------
let plannerSelections = {}; // { spriteId: Set(variant) }

function openPlanner() {
  const modal = document.getElementById('planner-modal');
  const spriteInput = document.getElementById('planner-sprite-input');
  const datalist = document.getElementById('planner-sprite-datalist');
  const variantsList = document.getElementById('planner-variants-list');
  const dustInput = document.getElementById('planner-dust-input');

  // Rimuovi formattazione quando l'utente entra nel campo
  dustInput.addEventListener('focus', function() {
	  const raw = cleanNumberInput(this.value);
	  if (raw) this.value = raw;
  });

  // Quando esce dal campo, formatta in base alla lingua
  dustInput.addEventListener('blur', function() {
  const raw = cleanNumberInput(this.value);
  if (raw) {
    const num = parseInt(raw, 10);
    this.value = formatNumber(num);
    localStorage.setItem('planner_dust_value', this.value);
  }
  });

  // Aggiorna il deficit quando l'utente digita
  dustInput.addEventListener('input', updateSummary);

  // Popola il datalist con tutti gli sprite non unreleased
  datalist.innerHTML = '';
  SPRITES.filter(sp => !sp.unreleased).forEach(sp => {
    const option = document.createElement('option');
    const translated = SPRITE_NAME_TRANSLATIONS[currentLang]?.[sp.name] || sp.name;
    option.value = translated;
    option.dataset.id = sp.id;
    datalist.appendChild(option);
  });

  let currentSpriteId = null;

  // --- Funzioni interne ---
  function loadVariants(spriteId) {
    if (!spriteId) return;
    const sp = SPRITES.find(s => s.id === spriteId);
    if (!sp) return;

    if (!plannerSelections[spriteId]) {
      plannerSelections[spriteId] = new Set();
    }

    variantsList.innerHTML = '';
    const released = getReleasedVariants(sp);
    const currentSelections = plannerSelections[spriteId];

    released.forEach(variant => {
      const label = document.createElement('label');
      label.className = 'variant-check';

      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.value = variant;
      checkbox.checked = currentSelections.has(variant);

      checkbox.addEventListener('change', () => {
        if (checkbox.checked) {
          currentSelections.add(variant);
        } else {
			  currentSelections.delete(variant);
			  }
			updateSummary();
      });

      const variantKey = 'variant_' + variant;
      const variantName = TRANSLATIONS[currentLang]?.[variantKey] || variant;

      const colorMap = {
        gold: '#FFD166',
        gummy: '#FF7AB6',
        galaxy: '#9B6BFF',
        holofoil: '#7EF0FF',
        cube: '#4A00FF',
        gem: '#D9D9D9',
        quack: '#A855F7',
        cheat: '#00E676',
        basic: '#6B7280'
      };
      const dot = document.createElement('span');
      dot.style.cssText = `display:inline-block; width:12px; height:12px; border-radius:3px; background:${colorMap[variant] || '#6B7280'}; margin-right:6px;`;

      const span = document.createElement('span');
      span.appendChild(dot);
      span.appendChild(document.createTextNode(variantName));

      label.appendChild(checkbox);
      label.appendChild(span);
      variantsList.appendChild(label);
    });

    updateSummary();
  }

  function updateSummary() {
    let totalCost = 0;
    let count = 0;
    const items = [];

    for (const [spriteId, variantsSet] of Object.entries(plannerSelections)) {
      if (variantsSet.size === 0) continue;
      const sp = SPRITES.find(s => s.id === spriteId);
      if (!sp) continue;
      const spriteName = SPRITE_NAME_TRANSLATIONS[currentLang]?.[sp.name] || sp.name;

      const variantNames = [];
      let spriteTotal = 0;
      variantsSet.forEach(variant => {
        const cost = variant === 'basic'
          ? RARITY_COST[sp.season][sp.rarity].base
          : RARITY_COST[sp.season][sp.rarity].special;
        spriteTotal += cost;
        totalCost += cost;
        count++;
        const variantKey = 'variant_' + variant;
        const variantName = TRANSLATIONS[currentLang]?.[variantKey] || variant;
        variantNames.push(variantName);
      });

      if (variantNames.length > 0) {
        items.push({
          sprite: spriteName,
          variants: variantNames,
          total: spriteTotal
        });
      }
    }

    const dustIcon = '<img src="assets/ui/sprite-dust.png" style="width:20px; height:20px; object-fit:contain; vertical-align:middle; margin-left:4px;">';
    document.getElementById('planner-count').textContent = count;

    const summaryDiv = document.getElementById('planner-selected-list');
    if (items.length === 0) {
	  summaryDiv.innerHTML = '<div style="color:var(--muted); font-size:13px;">No variants selected yet.</div>';
	  summaryDiv.classList.remove('show');
	} else {
	  let html = '<div style="display:flex; flex-direction:column; gap:6px;">';
	  items.forEach(item => {
		html += `<div style="display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.04);">`;
		html += `<span style="font-weight:700; color:#e6f0f6;">${item.sprite}</span>`;
		html += `<span style="color:var(--muted); font-size:13px; flex:1; text-align:center; margin:0 8px;">${item.variants.join(', ')}</span>`;
		html += `<span style="color:#FFD166; font-weight:700;">${formatNumber(item.total)} ${dustIcon}</span>`;
		html += `</div>`;
	  });
	  html += '</div>';
	  summaryDiv.innerHTML = html;
	  summaryDiv.classList.add('show');
	}

    const cleaned = cleanNumberInput(dustInput.value);
	const currentDust = parseInt(cleaned || 0);
    const deficit = totalCost - currentDust;
    const deficitEl = document.getElementById('planner-deficit');
    document.getElementById('planner-total').innerHTML = formatNumber(totalCost) + dustIcon;
    deficitEl.innerHTML = (deficit > 0 ? formatNumber(deficit) : '0') + dustIcon;
    deficitEl.style.color = deficit > 0 ? '#FF6B3D' : '#00E676';
  }
  
  // Aggiorna il deficit quando l'utente modifica la polvere attuale
  dustInput.addEventListener('input', updateSummary);

  // --- Eventi del selettore ---
  spriteInput.addEventListener('input', function() {
    const value = this.value.trim();
    let found = false;
    for (let opt of datalist.options) {
      if (opt.value === value) {
        currentSpriteId = opt.dataset.id;
        found = true;
        break;
      }
    }
    if (found) {
      loadVariants(currentSpriteId);
    } else {
      currentSpriteId = null;
      variantsList.innerHTML = '';
      updateSummary();
    }
  });

  spriteInput.addEventListener('change', function() {
    const value = this.value.trim();
    let found = false;
    for (let opt of datalist.options) {
      if (opt.value === value) {
        currentSpriteId = opt.dataset.id;
        found = true;
        break;
      }
    }
    if (found) {
      loadVariants(currentSpriteId);
    }
  });

  // --- Pulsante Clear ---
  document.getElementById('planner-clear').addEventListener('click', function() {
    plannerSelections = {};
    const firstOption = datalist.options[0];
    if (firstOption) {
      currentSpriteId = firstOption.dataset.id;
      spriteInput.value = firstOption.value;
      plannerSelections[currentSpriteId] = new Set();
      loadVariants(currentSpriteId);
    } else {
      variantsList.innerHTML = '';
      updateSummary();
    }
  });

  // --- Inizializza con il primo sprite ---
  const firstOption = datalist.options[0];
  if (firstOption) {
    currentSpriteId = firstOption.dataset.id;
    spriteInput.value = firstOption.value;
    if (!plannerSelections[currentSpriteId]) {
      plannerSelections[currentSpriteId] = new Set();
    }
    loadVariants(currentSpriteId);
  } else {
    variantsList.innerHTML = '<div style="color:var(--muted);">No sprites available.</div>';
    updateSummary();
  }

  // --- Apertura modale con transizione ---
  modal.classList.add('active');
  modal.setAttribute('aria-hidden', 'false');
}

// Listener di chiusura (fuori da openPlanner)
document.getElementById('planner-modal').addEventListener('click', function(e) {
  if (e.target === this) {
    this.classList.remove('active');
    this.setAttribute('aria-hidden', 'true');
  }
});

document.getElementById('planner-close').addEventListener('click', function() {
  const modal = document.getElementById('planner-modal');
  modal.classList.remove('active');
  modal.setAttribute('aria-hidden', 'true');
});

document.getElementById('planner-close-footer').addEventListener('click', function() {
  const modal = document.getElementById('planner-modal');
  modal.classList.remove('active');
  modal.setAttribute('aria-hidden', 'true');
});

// Funzione per video casuali ---------------------------------------------
const videoList = [
  'assets/videos/Choose Your Sprite.mp4',
  'assets/videos/Meet The Sprites.mp4',
  'assets/videos/Override Battle Pass.mp4',
  'assets/videos/Override Trailer.mp4',
  'assets/videos/Runners - Gameplay Trailer.mp4',
  'assets/videos/Runners.mp4',
  'assets/videos/Sprite Extractions.mp4',
  'assets/videos/Sprite Session.mp4',
  'assets/videos/Striker Sprites Trailer.mp4',
  'assets/videos/The Burnt Peanut Sprite.mp4',
  'assets/videos/The Simpsons x Fortnite Reload.mp4'
];

function openRandomVideo() {
  if (videoList.length === 0) return;
  if (isVideoSequenceActive) return;

  // Se abbiamo già finito tutti i video, ricomincia da 0
  if (currentVideoIndex >= videoList.length) {
    currentVideoIndex = 0;
  }

  isVideoSequenceActive = true;
  playNextVideo();
}

function playNextVideo() {
  const overlay = document.getElementById('video-overlay');
  const video = document.getElementById('easter-video');

  if (currentVideoIndex >= videoList.length) {
    closeVideoOverlay();
    return;
  }

  const src = videoList[currentVideoIndex];
  video.src = src;
  video.load();
  
  const currentVol = parseFloat(localStorage.getItem('sfx_volume')) || 0.1;
  video.volume = currentVol;

  video.onended = function() {
    currentVideoIndex++;
    playNextVideo();
  };

  video.onerror = function() {
    currentVideoIndex++;
    playNextVideo();
  };

  overlay.style.display = 'flex';

  video.play().catch(err => {
    console.warn('Autoplay bloccato, attendi interazione utente', err);
  });
}

function closeVideoOverlay() {
  const overlay = document.getElementById('video-overlay');
  const video = document.getElementById('easter-video');
  video.pause();
  video.currentTime = 0;
  video.onended = null;
  video.onerror = null;
  overlay.style.display = 'none';
  isVideoSequenceActive = false;

  // AVANZA AL PROSSIMO VIDEO
  currentVideoIndex++;
  if (currentVideoIndex >= videoList.length) {
    currentVideoIndex = 0;    // se era l’ultimo, ricomincia dal primo
  }
}

// Chiusura
document.getElementById('video-close').addEventListener('click', () => {
  const overlay = document.getElementById('video-overlay');
  const video = document.getElementById('easter-video');
  video.pause();
  video.currentTime = 0;
  overlay.style.display = 'none';
});

document.getElementById('video-close').addEventListener('click', closeVideoOverlay);

function cleanNumberInput(value) {
  // Rimuove tutto ciò che non è un numero (0-9)
  return value.replace(/[^0-9]/g, '');
}

function getObtainDisplay(sp, variant) {
    const lang = currentLang;
    let html = '—';
    let cls = 'badge-default';

    if (sp.obtain && sp.obtain[variant]) {
        const method = sp.obtain[variant];
        if (method === 'lobby') {
            html = TRANSLATIONS[lang]?.obtain_lobby_code || '🎮 Lobby Code';
            cls = 'badge-code';
        } else if (method === 'code') {
            const icon = `<img src="assets/ui/cheat-code.png" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" alt="Cheat Code">`;
            html = `${icon} ${TRANSLATIONS[lang]?.obtain_cheat_locator || 'Cheat Code'}`;
            // Usa una badge specifica per rarità o una generica
            cls = `badge-cheat-${sp.rarity}`; // o 'badge-locator'
        } else if (method === 'chest') {
            const icon = `<img src="assets/ui/sprite-chest.png" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" alt="Sprite Chest">`;
            html = `${icon} ${TRANSLATIONS[lang]?.obtain_sprite_chest || 'Sprite Chest'}`;
            cls = 'badge-sprite-chest';
        } else {
            html = method;
            cls = 'badge-default';
        }
    }
    return { text: html, cls };
}

function restartVideoForSprite(sp) {
    if (!animationsEnabled) { hideVideo(); return; }
    videoIndex[sp.id] = 0;
    loadVideoForSprite(sp);
}

function loadVideoForSprite(sp) {
    const video = document.getElementById('main-video');
    const img = document.getElementById('main-img');
    if (!animationsEnabled) {
        hideVideo();
        return;
    }
    const videos = SPRITE_VIDEOS[sp.id];
    if (!videos || videos.length === 0) {
        hideVideo();
        return;
    }
    if (videoIndex[sp.id] === undefined) videoIndex[sp.id] = 0;
    const idx = videoIndex[sp.id];
    if (idx >= videos.length) {
        return;
    }
    const src = videos[idx];
    if (currentVideoSrc === src && video.style.display !== 'none') {
		return;
    }
    currentVideoSrc = src;
    video.src = src;
    video.load();
	
	// Applico il volume selezionato nelle impostazioni
	const currentVol = parseFloat(localStorage.getItem('sfx_volume')) || 0.1;
    video.volume = currentVol;
	
    img.style.display = 'none';
    video.style.display = 'block';
    video.play().catch(err => console.warn('Autoplay bloccato', err));
    video.onended = function() {
        videoIndex[sp.id] = idx + 1;
        if (videoIndex[sp.id] < videos.length) {
            loadVideoForSprite(sp);
        }
    };
    video.onerror = function(e) {
        console.error('[VIDEO] Errore caricamento video:', src, e);
        videoIndex[sp.id] = idx + 1;
        if (videoIndex[sp.id] < videos.length) {
            loadVideoForSprite(sp);
        } else {
            hideVideo();
        }
    };
}

function hideVideo() {
    const video = document.getElementById('main-video');
    const img = document.getElementById('main-img');
    video.pause();
    video.style.display = 'none';
    img.style.display = 'block';
    currentVideoSrc = null;
}

// --- COMPAGNO SPRITE (creazione e toggle) ---
companionEl.id = 'companion-sprite';
document.body.appendChild(companionEl);

// Gestione toggle (mostra/nascondi) – DI DEFAULT DISATTIVATO
if (companionToggle) {
    // Se non c'è valore salvato, companionOn = false (disattivato)
    const companionOn = localStorage.getItem('companion_enabled') === 'true';
    companionToggle.checked = companionOn;
    companionEl.style.display = companionOn ? 'block' : 'none';

    companionToggle.addEventListener('change', function() {
        const checked = this.checked;
        companionEl.style.display = checked ? 'block' : 'none';
        localStorage.setItem('companion_enabled', checked ? 'true' : 'false');
    });
}

// --- POPOLA IL SELECTOR E CARICA L'IMMAGINE ---
function populateCompanionSelector() {
    const select = document.getElementById('companion-select');
    if (!select) return;
    select.innerHTML = '';
    const releasedSprites = SPRITES.filter(sp => !sp.unreleased);
    releasedSprites.forEach(sp => {
        const opt = document.createElement('option');
        opt.value = sp.id;
        const translatedName = SPRITE_NAME_TRANSLATIONS[currentLang]?.[sp.name] || sp.name;
        opt.textContent = translatedName;
        select.appendChild(opt);
    });
    const saved = localStorage.getItem('companion_sprite_id') || 'water';
    if (select.querySelector(`option[value="${saved}"]`)) {
        select.value = saved;
    } else {
        select.value = releasedSprites[0]?.id || 'water';
    }
    updateCompanionImage(select.value);
}

function updateCompanionImage(spriteId) {
    if (!companionEl) return;
    const imgPath = `${ASSET_BASE}${spriteId}_basic.png`;
    companionEl.style.backgroundImage = `url('${imgPath}')`;
    companionEl.style.backgroundSize = 'contain';
    companionEl.style.backgroundRepeat = 'no-repeat';
    companionEl.style.backgroundPosition = 'center';
}
</script>
</body>
</html>