:root{--font-family:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-gradient:radial-gradient(circle at 0% 0%, #8b5cf6e6 0%, #10b981cc 100%);--glass-bg:#ffffff73;--glass-bg-hover:#fff9;--glass-border:#fff6;--glass-shadow:0 8px 32px 0 #1f268726;--text-primary:#1e1b4b;--text-secondary:#475569;--text-light:#fff;--color-common:#64748b;--color-rare:#3b82f6;--color-epic:#a855f7;--color-legendary:#f59e0b;--border-radius:20px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background:var(--bg-gradient);min-height:100vh;color:var(--text-primary);background-attachment:fixed;justify-content:center;display:flex;overflow-x:hidden}#root{flex-direction:column;width:100%;min-height:100vh;padding-top:96px;padding-bottom:100px;display:flex}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--border-radius);box-shadow:var(--glass-shadow);transition:all .3s cubic-bezier(.4,0,.2,1)}.app-header{border-radius:0 0 var(--border-radius) var(--border-radius);z-index:100;border-top:none;border-left:none;border-right:none;justify-content:center;align-items:center;width:100%;height:80px;padding:0 1rem;animation:.4s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}.logo-container{justify-content:center;align-items:center;height:100%;display:flex}.logo-image{object-fit:contain;height:70px}.app-navbar{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--border-radius);z-index:100;width:90%;max-width:500px;padding:.4rem;display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.nav-active-bg{border-radius:calc(var(--border-radius) - 4px);z-index:1;pointer-events:none;background:#fff;width:calc(33.3333% - .266667rem);transition:transform .25s cubic-bezier(.4,0,.2,1);position:absolute;top:.4rem;bottom:.4rem;left:.4rem;box-shadow:0 4px 12px #00000014}.nav-button{font-family:var(--font-family);color:var(--text-secondary);cursor:pointer;border-radius:calc(var(--border-radius) - 4px);z-index:2;-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;flex-direction:column;flex:1;align-items:center;gap:.25rem;padding:.6rem;font-size:.85rem;font-weight:600;transition:color .25s;display:flex;position:relative}.nav-button:focus,.nav-button:active{box-shadow:none;background:0 0;outline:none}.nav-button:hover{color:var(--text-primary)}.nav-button.active{color:#8b5cf6}.nav-icon{justify-content:center;align-items:center;width:20px;height:20px;display:flex}.nav-label{font-size:.75rem;font-weight:600}.main-content{flex-grow:1;width:100%;max-width:1200px;margin:0 auto;padding:1.5rem 1rem;animation:.3s cubic-bezier(.215,.61,.355,1) both viewFadeIn}.showroom-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem;width:100%;display:grid}.character-card{text-align:center;cursor:pointer;border-radius:var(--border-radius);flex-direction:column;align-items:center;padding:1.25rem;display:flex;position:relative}.character-card:hover{background:var(--glass-bg-hover);transform:translateY(-5px);box-shadow:0 12px 40px #1f268733}.card-counter{color:#fff;background:#1e1b4b;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:.75rem;font-weight:700;display:flex;position:absolute;top:12px;right:12px;box-shadow:0 2px 6px #00000026}.character-avatar{border-radius:var(--border-radius);color:#00000026;background:linear-gradient(135deg,#fffc,#fff6);border:2px dashed #ffffffb3;justify-content:center;align-items:center;width:110px;height:110px;margin-bottom:1rem;display:flex}.character-id{color:var(--text-primary);margin-bottom:.5rem;font-size:1.15rem;font-weight:700}.rarity-badge{text-transform:uppercase;letter-spacing:.05em;border:1px solid #ffffff4d;border-radius:20px;margin-bottom:.75rem;padding:.25rem .6rem;font-size:.65rem;font-weight:800}.rarity-badge.common{color:var(--color-common);background:#64748b26}.rarity-badge.rare{color:var(--color-rare);background:#3b82f626}.rarity-badge.epic{color:var(--color-epic);background:#a855f726}.rarity-badge.legendary{color:var(--color-legendary);background:#f59e0b26}.tags-container{flex-wrap:wrap;justify-content:center;gap:.25rem;display:flex}.tag-item{color:var(--text-secondary);background:#fff6;border-radius:6px;padding:.15rem .45rem;font-size:.7rem;font-weight:500}.empty-view{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:4rem 2rem;display:flex}.empty-icon{opacity:.75;margin-bottom:1.5rem;font-size:4rem}.empty-title{color:var(--text-primary);margin-bottom:.5rem;font-size:1.75rem;font-weight:700}.empty-text{color:var(--text-secondary);max-width:400px;margin-bottom:1.5rem;font-size:1rem}.store-container{flex-direction:column;align-items:center;gap:2rem;padding:2rem 1rem;display:flex}.pack-wrapper{perspective:1000px}.pack-card{cursor:pointer;border-radius:var(--border-radius);width:300px;height:440px;transform-style:preserve-3d;flex-direction:column;justify-content:space-between;align-items:center;padding:1.5rem;transition:transform .6s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.pack-card:hover{transform:translateY(-8px)scale(1.02)}.pack-glow{opacity:.5;border-radius:var(--border-radius);pointer-events:none;background:radial-gradient(circle,#fff9 0%,#0000 70%);position:absolute;inset:0}.pack-title-top{color:var(--text-primary);text-align:center;margin-top:.25rem;font-size:1.5rem;font-weight:800}.pack-graphic{justify-content:center;align-items:center;width:100%;margin:.5rem 0;display:flex}.pack-image{object-fit:contain;filter:drop-shadow(0 10px 15px #0000002e);width:240px;height:240px;animation:3.5s ease-in-out infinite floatAnimation}@keyframes floatAnimation{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-8px)rotate(1deg)}to{transform:translateY(0)rotate(0)}}.pack-action{justify-content:center;width:100%;margin-bottom:.25rem;display:flex}.btn-buy-pack{color:#fff;font-family:var(--font-family);border-radius:calc(var(--border-radius) - 4px);cursor:pointer;-webkit-tap-highlight-color:transparent;background:linear-gradient(135deg,#7c3aed 0%,#6d28d9 100%);border:none;outline:none;width:100%;padding:.85rem 1.75rem;font-size:1.05rem;font-weight:700;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #7c3aed4d}.btn-buy-pack:hover{background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);transform:translateY(-2px);box-shadow:0 6px 20px #7c3aed73}.btn-buy-pack:active{transform:translateY(0);box-shadow:0 4px 12px #7c3aed33}.btn-buy-pack.loading{opacity:.75;cursor:not-allowed}.btn-primary{color:#fff;border-radius:var(--border-radius);cursor:pointer;background:#1e1b4b;border:none;padding:.75rem 2rem;font-size:1rem;font-weight:700;transition:all .2s;box-shadow:0 4px 12px #00000026}.btn-primary:hover{background:#312e81;transform:translateY(-2px);box-shadow:0 6px 16px #0003}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes viewFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){.app-header{text-align:center;flex-direction:column;gap:1rem;padding:1rem}.header-stats{justify-content:center;width:100%}.nav-button{padding:.6rem 1.25rem;font-size:.9rem}.showroom-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}.character-card{padding:1rem}.character-avatar{border-radius:18px;width:80px;height:80px}}.character-avatar-image{object-fit:contain;width:100%;height:100%;padding:.2rem}.pack-image.opening-burst{animation:1.2s cubic-bezier(.34,1.56,.64,1) both packOpenBurst}@keyframes packOpenBurst{0%{transform:scale(1)rotate(0)}25%{transform:scale(1.15)rotate(-3deg)}50%{transform:scale(1.25)rotate(3deg)}75%{opacity:1;transform:scale(1.4)rotate(-2deg)}90%{opacity:.7;transform:scale(1.5)rotate(0)}to{opacity:0;transform:scale(0)rotate(0)}}.reveal-container{text-align:center;flex-direction:column;align-items:center;width:100%;padding:1rem 0;display:flex}.reveal-title{background:linear-gradient(135deg,#fff 0%,#cbd5e1 100%);-webkit-text-fill-color:transparent;text-shadow:0 4px 12px #0000001a;-webkit-background-clip:text;margin-bottom:.5rem;font-size:2.25rem;font-weight:800}.reveal-subtitle{color:var(--text-light);opacity:.9;margin-bottom:2.5rem;font-size:1.1rem}.reveal-grid{grid-template-columns:repeat(5,1fr);gap:1.25rem;width:100%;max-width:1200px;display:grid}.reveal-card{opacity:0;animation:.6s cubic-bezier(.34,1.56,.64,1) forwards cardPop;transform:scale(.8)translateY(20px)}@keyframes cardPop{to{opacity:1;transform:scale(1)translateY(0)}}@media (width<=1024px){.reveal-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=640px){.reveal-grid{grid-template-columns:repeat(2,1fr)}}