:root{--bg-dark:#0f1115;--bg-panel:#1a1d24;--bg-hover:#262b35;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-gold:gold;--accent-blue:#3b82f6;--danger:#ef4444;--nav-height:70px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-primary);min-height:100vh;font-family:Inter,sans-serif}.app-container{flex-direction:column;height:100vh;display:flex}.navbar{height:var(--nav-height);background-color:var(--bg-panel);border-bottom:1px solid #333;justify-content:space-between;align-items:center;padding:0 2rem;display:flex}.nav-left,.nav-right,.social-links{align-items:center;gap:1rem;display:flex}.logo-container{align-items:center;margin-right:20px;display:flex}.brand-text{color:var(--accent-gold);letter-spacing:1px;font-weight:900}.search-bar{align-items:center;display:flex;position:relative}.search-icon{color:var(--text-secondary);position:absolute;left:10px}.search-bar input{background:var(--bg-dark);color:#fff;border:1px solid #333;border-radius:20px;outline:none;width:300px;padding:.5rem 1rem .5rem 2.5rem}.social-btn{color:var(--text-primary);background:#333;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:6px;text-decoration:none;transition:all .2s;display:flex}.social-btn:hover{transform:translateY(-2px)}.social-btn.yt:hover{background:red}.social-btn.tk:hover{color:#000;background:#00f2fe}.social-btn.tw:hover{background:#9146ff}.social-btn.ki:hover{color:#000;background:#53fc18}.btn-market,.btn-login{border:1px solid var(--accent-gold);color:var(--accent-gold);cursor:pointer;background:0 0;border-radius:6px;align-items:center;gap:8px;padding:.5rem 1rem;font-weight:700;display:flex}.btn-market:hover{background:#ffd7001a}.btn-login{color:#fff;border-color:#333}.btn-login:hover{background:#222}.user-profile{cursor:pointer;align-items:center;display:flex}.avatar{border:2px solid var(--accent-gold);object-fit:cover;border-radius:50%;width:36px;height:36px}.profile-dropdown{background:var(--bg-hover);z-index:200;border:1px solid #444;border-radius:8px;min-width:160px;position:absolute;top:50px;right:0;overflow:hidden;box-shadow:0 10px 20px #00000080}.dropdown-item{color:var(--text-primary);cursor:pointer;border-bottom:1px solid #333;padding:12px 15px;transition:all .2s}.dropdown-item:hover{color:var(--accent-gold);background:#333}.dropdown-item.logout:hover{color:var(--danger)}.dropdown-item:last-child{border-bottom:none}.main-layout{flex:1;display:flex;position:relative;overflow:hidden}.sidebar{background:var(--bg-panel);border-right:1px solid #333;width:250px;padding:1.5rem;transition:transform .3s;overflow-y:auto}.mobile-menu-btn{display:none}.dashboard-content{flex:1;padding:2rem;overflow-y:auto}.section-title{color:var(--text-secondary);align-items:center;gap:8px;margin-bottom:1rem;font-size:.9rem;display:flex}.scroll-index{max-height:30vh;padding-right:5px;overflow-y:auto}.scroll-index::-webkit-scrollbar{width:4px}.scroll-index::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.index-item{cursor:pointer;border-radius:6px;margin-bottom:2px;padding:8px;font-size:.9rem;transition:all .2s}.index-item:hover{background:var(--bg-hover);color:var(--accent-gold)}.empty-text{color:#666;font-size:.8rem;font-style:italic}.section-header{border-bottom:2px solid var(--accent-gold);margin-bottom:2rem;padding-bottom:5px;font-size:1.5rem;display:inline-block}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2rem;margin-bottom:3rem;display:grid}.flip-card{perspective:1000px;cursor:pointer;background-color:#0000;width:100%;height:320px}.flip-card-inner{text-align:center;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s;position:relative}.flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{backface-visibility:hidden;border-radius:12px;width:100%;height:100%;position:absolute;overflow:hidden;box-shadow:0 4px 15px #00000080}.flip-card-front{background-color:#000;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border:1px solid #222}.card-front-overlay{text-align:left;background:linear-gradient(#0000 0%,#0006 50%,#000000f2 100%);width:100%;padding:1.5rem 1rem;position:absolute;bottom:0}.rarity-badge{text-transform:uppercase;border-radius:12px;margin-bottom:8px;padding:4px 10px;font-size:.7rem;font-weight:700;display:inline-block}.rarity-platino,.rarity-completo{color:#38bdf8;background:#38bdf833;border:1px solid #38bdf8}.rarity-oro,.rarity-inusual{color:var(--accent-gold);border:1px solid var(--accent-gold);background:#ffd70033}.rarity-plata,.rarity-normal{color:#e2e8f0;background:#c0c0c033;border:1px solid #e2e8f0}.rarity-bronce{color:#cd7f32;background:#cd7f3233;border:1px solid #cd7f32}.badge-plat{text-transform:uppercase;border:1px solid;border-radius:12px;margin-bottom:8px;margin-left:5px;padding:4px 10px;font-size:.7rem;font-weight:700;display:inline-block}.badge-plat.playstation{color:#fff;text-shadow:none;background:#00439cd9;border-color:#2e8eff}.badge-plat.xbox{color:#fff;text-shadow:none;background:#107c10d9;border-color:#10c610}.badge-plat.pc{color:#fff;text-shadow:none;background:#646464cc;border-color:#aaa}.card-title{text-shadow:1px 1px 2px #000;margin-bottom:2px;font-size:1.1rem}.card-game{color:var(--text-secondary);text-shadow:1px 1px 2px #000;font-size:.8rem}.flip-card-back{background-color:var(--bg-hover);border:2px solid #555;flex-direction:column;justify-content:space-between;align-items:center;padding:1.5rem 1rem;display:flex;transform:rotateY(180deg)}.flip-card-back.back-bronce{border-color:#cd7f32;box-shadow:inset 0 0 20px #cd7f3233}.flip-card-back.back-plata,.flip-card-back.back-normal{border-color:#e2e8f0;box-shadow:inset 0 0 20px #e2e8f033}.flip-card-back.back-oro,.flip-card-back.back-inusual{border-color:var(--accent-gold);box-shadow:inset 0 0 20px #ffd70033}.flip-card-back.back-platino,.flip-card-back.back-completo{border-color:#38bdf8;box-shadow:inset 0 0 20px #38bdf833}.card-title-back{color:var(--accent-gold);text-align:center;width:100%;margin-bottom:10px;font-size:1.1rem}.card-desc{color:#ccc;text-align:center;flex:1;margin-bottom:1rem;padding:0 5px;font-size:.85rem;overflow-y:auto}.card-desc::-webkit-scrollbar{width:2px}.card-desc::-webkit-scrollbar-thumb{background:var(--accent-gold)}.card-actions{flex-direction:column;gap:8px;width:100%;display:flex}.btn-action{color:#fff;cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;gap:8px;width:100%;padding:10px;font-size:.85rem;font-weight:700;text-decoration:none;transition:all .2s;display:flex}.btn-action:hover{filter:brightness(1.2);transform:translateY(-1px)}.btn-action.yt{background:red}.btn-action.info{border:1px solid var(--text-secondary);color:var(--text-primary);background:0 0}.btn-action.info:hover{background:#ffffff1a}@keyframes attract-pulse{0%{transform:scale(1);box-shadow:0 0 #fff6}50%{transform:scale(1.03);box-shadow:0 0 0 10px #fff0}to{transform:scale(1);box-shadow:0 0 #fff0}}.flip-card-back.back-bronce .card-title-back,.flip-card-back.back-bronce .btn-action.info{color:#cd7f32;border-color:#cd7f32}.flip-card-back.back-bronce .btn-action.tiktok{color:#fff;background:#ab6624;animation:1.8s infinite attract-pulse}.flip-card-back.back-plata .card-title-back,.flip-card-back.back-plata .btn-action.info,.flip-card-back.back-normal .card-title-back,.flip-card-back.back-normal .btn-action.info{color:#e2e8f0;border-color:#e2e8f0}.flip-card-back.back-plata .btn-action.tiktok,.flip-card-back.back-normal .btn-action.tiktok{color:#111;background:#e2e8f0;animation:1.8s infinite attract-pulse}.flip-card-back.back-oro .card-title-back,.flip-card-back.back-oro .btn-action.info,.flip-card-back.back-inusual .card-title-back,.flip-card-back.back-inusual .btn-action.info{color:var(--accent-gold);border-color:var(--accent-gold)}.flip-card-back.back-oro .btn-action.tiktok,.flip-card-back.back-inusual .btn-action.tiktok{background:var(--accent-gold);color:#111;animation:1.8s infinite attract-pulse}.flip-card-back.back-platino .card-title-back,.flip-card-back.back-platino .btn-action.info,.flip-card-back.back-completo .card-title-back,.flip-card-back.back-completo .btn-action.info{color:#38bdf8;border-color:#38bdf8}.flip-card-back.back-platino .btn-action.tiktok,.flip-card-back.back-completo .btn-action.tiktok{color:#111;background:#38bdf8;animation:1.8s infinite attract-pulse}.games-flex{flex-wrap:wrap;gap:1rem;display:flex}.game-box{background:var(--bg-panel);cursor:pointer;text-align:center;min-width:150px;color:var(--text-secondary);border:1px solid #333;border-radius:8px;padding:1rem 2rem;font-weight:700;transition:all .2s}.game-box:hover{border-color:var(--accent-gold);color:var(--accent-gold);transform:translateY(-3px)}.switch{width:60px;height:34px;margin-left:1rem;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#333;border:1px solid #555;border-radius:34px;transition:all .4s;position:absolute;inset:0}.slider:before{content:"";background-color:var(--text-secondary);border-radius:50%;width:26px;height:26px;transition:all .4s;position:absolute;bottom:3px;left:3px}input:checked+.slider{background-color:#10b981;border-color:#10b981;box-shadow:0 0 15px #10b9814d}input:checked+.slider:before{background-color:#fff;transform:translate(26px)}@media (width<=768px){.app-container{height:auto;min-height:100vh}.navbar{flex-wrap:wrap;justify-content:center;gap:1rem;height:auto;padding:1rem}.nav-right{flex-wrap:wrap;justify-content:center;width:100%}.search-bar{width:100%}.search-bar input{width:100%;min-width:0}.main-layout{flex-direction:column;overflow:visible}.mobile-menu-btn{display:block}.sidebar{top:var(--nav-height);z-index:1000;width:250px;height:calc(100vh - var(--nav-height));position:fixed;bottom:0;left:0;transform:translate(-100%);box-shadow:10px 0 20px #000c}.sidebar.open{transform:translate(0)}.dashboard-content{padding:1rem;overflow-y:visible}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.section-header{margin-bottom:1rem;font-size:1.2rem}.flip-card{height:260px}.card-title{font-size:.9rem}.card-game{font-size:.7rem}.card-front-overlay{padding:1rem .5rem}.btn-action{padding:8px;font-size:.75rem}.games-flex{justify-content:center}}