:root{font-family:monospace;line-height:1.5;font-weight:400;--bg-color: #202021;--color-accent: #fe04ff;--text-color: #000000;--bg-light-color: rgb(219, 217, 217);--sidebar-bg: #f4f4f4}*{box-sizing:border-box;margin:0;padding:0;list-style:none;transition:background-color .4s ease,color .4s ease}body.light{background-color:#fff;color:#000;--sidebar-bg: #f4f4f4}body.dark{background-color:#202021;color:#fff;--sidebar-bg: var(--bg-color)}html{scroll-behavior:smooth}a{text-decoration:none;color:inherit}#game-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;padding:1rem}.layout{display:flex;align-items:flex-start;min-height:100vh}.main-content{flex:1;padding:1rem;max-width:1200px;margin:0 auto}h2{font-size:3.5rem;padding:2rem}p{font-size:1.2rem;padding:1rem;margin-bottom:1rem}select{padding:.5rem;border-radius:.5rem;border:none;font-size:1rem;cursor:pointer}select:hover{background-color:var(--bg-light-color)}select:focus{outline:none}body.dark select{background-color:#272626;color:#fff}body.light select{background-color:#f0f0f0;color:#000}.detail-view{display:flex;width:100%;flex-direction:column;justify-content:center;gap:2rem;padding:2rem;margin:3rem auto}.platforms{display:flex;gap:2rem;justify-content:center}.detail-view img{width:100%;max-height:auto;object-fit:fill;border-radius:2rem}.detail-info{display:flex;flex-direction:column;font-size:2rem}.meta{display:flex;flex-direction:column;gap:.5rem;font-size:.95rem}.meta span{display:flex;align-items:center;gap:.5rem}.back-btn{margin-top:2rem;align-self:center;background:linear-gradient(to right,#6a11cb,#2575fc);color:#fff;padding:.8rem 2rem;border:none;border-radius:.6rem;font-size:1rem;cursor:pointer;transition:background .3s ease}.back-btn:hover{background:linear-gradient(to right,#2575fc,#6a11cb)}.auth-form{max-width:400px;margin:4rem auto;padding:2rem;border-radius:12px;box-shadow:0 0 20px #0009;display:flex;flex-direction:column;gap:1rem;animation:fadeIn .3s ease-in-out}.auth-form h2{text-align:center;font-size:1.8rem}.auth-form input{padding:.75rem;border:none;border-radius:6px;font-size:1rem;transition:background-color .5s ease-in-out}.auth-form button{padding:.75rem;border:none;border-radius:6px;background:linear-gradient(to right,var(--color-accent),#2575fc);color:#fff;font-weight:700;cursor:pointer;transition:background .3s}.auth-form button:hover{background:linear-gradient(to right,#2575fc,var(--color-accent));border:1px solid black}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:9999}.spinner{border:8px solid #eee;border-top:8px solid var(--color-accent);border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.genres{margin-top:1rem}@media (max-width: 1100px){.main-content{padding:1.5rem}h2{font-size:3rem}p,.description{font-size:1.1rem}.detail-info{font-size:1.4rem}.detail-info h2{font-size:2.2rem}.detail-view{padding:1.5rem}.platforms{gap:1rem;flex-wrap:wrap}.auth-form{margin:3rem auto;padding:1.5rem}}@media (max-width: 830px){.main-content{width:100%;padding:1rem}h2{font-size:2.5rem}p{width:80%}p,.description{font-size:1rem}.detail-info{font-size:1.2rem}.detail-info h2{font-size:1.8rem}}.filters{padding:1rem}.meta strong{color:var(--color-accent)}.meta a{margin-right:10px;text-decoration:none;font-weight:500}.meta a i{margin-right:6px}.meta a:hover{color:var(--color-accent)}.meta a:hover i{color:#fff}@media (max-width: 768px){#game-list{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}@media (max-width: 1100px){.custom-swal-popup{max-width:275px;height:200px;border-radius:12px;box-shadow:0 0 20px #666466}}.switch{display:inline-block;position:relative}.switch__input{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.switch__label{position:relative;display:inline-block;width:60px;height:30px;background-color:#2b2b2b;border:2.5px solid #5b5b5b;border-radius:9999px;cursor:pointer;transition:all .4s cubic-bezier(.46,.03,.52,.96)}.switch__indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translate(-36%);display:block;width:20px;height:20px;background-color:#7b7b7b;border-radius:9999px;box-shadow:5px 0 #0003 inset;transition:all .4s cubic-bezier(.46,.03,.52,.96)}.switch__indicator:before,.switch__indicator:after{position:absolute;content:"";display:block;background-color:#fff;border-radius:9999px;transition:all .4s cubic-bezier(.46,.03,.52,.96)}.switch__indicator:before{top:3px;left:3px;width:4.5px;height:4.5px;opacity:.6}.switch__indicator:after{bottom:3px;right:3px;width:7px;height:7px;opacity:.8}.switch__decoration{position:absolute;top:65%;left:50%;display:block;width:2.5px;height:2.5px;background-color:#fff;border-radius:9999px;animation:twinkle .8s infinite -.6s}.switch__decoration:before,.switch__decoration:after{position:absolute;display:block;content:"";width:2.5px;height:2.5px;background-color:#fff;border-radius:9999px}.switch__decoration:before{top:-10px;left:4px;opacity:1;animation:twinkle .6s infinite}.switch__decoration:after{top:-4px;left:14px;animation:twinkle .6s infinite -.2s}@keyframes twinkle{50%{opacity:.2}}.switch__input:checked+.switch__label{background-color:#73cee5;border-color:#1f89a1}.switch__input:checked+.switch__label .switch__indicator{background-color:#ecd21f;box-shadow:none;transform:translate(-50%,-50%) translate(36%)}.switch__input:checked+.switch__label .switch__indicator:before,.switch__input:checked+.switch__label .switch__indicator:after{display:none}.switch__input:checked+.switch__label .switch__decoration{top:50%;transform:translateY(-50%);animation:cloud 8s linear infinite;width:10px;height:10px;border-radius:9999px 9999px 0 0}.switch__input:checked+.switch__label .switch__decoration:before{width:5px;height:5px;top:auto;bottom:0;left:-4px;animation:none;border-radius:9999px 9999px 0 0}.switch__input:checked+.switch__label .switch__decoration:after{width:7px;height:7px;top:auto;bottom:0;left:8px;animation:none;border-radius:9999px 9999px 9999px 0}@keyframes cloud{0%{transform:translateY(-50%)}50%{transform:translate(-50%,-50%)}to{transform:translateY(-50%)}}@media (max-width: 950px){.switch__label{width:50px;height:25px}.switch__indicator{width:15px;height:15px}.switch__decoration{width:2px;height:2px}}@media (max-width: 600px){.switch__label{width:40px;height:20px}.switch__indicator{width:12px;height:12px}.switch__decoration{width:1.5px;height:1.5px}}nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:1rem 2rem;height:auto;font-weight:700}.logo{width:13rem;cursor:pointer}.nav-links{display:flex;align-items:center;flex-wrap:wrap;gap:2rem;flex:1;justify-content:flex-end;list-style:none;margin:0;padding:0}.search-container{flex:1 1 400px}.search-wrapper{position:relative;width:100%}.header__search__input{width:100%;max-width:100%;height:3em;border-radius:1em;padding:.5em .5em .5em 2.5em;background-color:#272626;color:#fff;border:none;transition:background-color .5s ease-in-out}.header__search__input::placeholder{font-style:italic}.search-wrapper:before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:17px;height:17px;background-image:url(/images/lupita.png);background-size:contain;background-repeat:no-repeat;filter:invert(1);pointer-events:none}input:hover{background-color:#535151}.navlink{padding:.4em .3em;text-decoration:none;color:inherit;transition:.3s ease-in-out}.navlink:hover,.navlink.active,body.light .navlink:hover{text-decoration:underline;font-weight:700}body.light input{background-color:#f1f1f1;color:#111}body.light input:hover{background-color:#bbb}body.light input::placeholder{color:#666}body.light .search-wrapper:before{filter:invert(0)}body.dark input{background-color:#272626;color:#fff}body.dark input:hover{background-color:#3a3a3a}body.dark input::placeholder{color:#ccc}@media screen and (max-width: 909px){nav{flex-direction:column}.logo{width:17rem}.nav-links{justify-content:center;gap:2rem}}.hamburger-btn{display:none}@media screen and (max-width: 909px){.hamburger-btn{display:block;background:none;border:none;color:var(--primary-color);font-size:2rem;cursor:pointer}.sidebar-container{position:fixed;top:0;left:0;width:250px;height:100vh;background-color:#111;z-index:999;transform:translate(-100%);transition:transform .3s ease-in-out;box-shadow:2px 0 8px #0006}.sidebar-container.active{transform:translate(0)}}.sidebar-nav{padding:1.5em;height:auto;top:0;font-weight:700;font-size:.9em;color:var(--color-accent);margin-top:1.5em;margin-bottom:.5em;text-transform:uppercase}.sidebar-nav ul{list-style:none;padding:1rem;display:flex;flex-direction:column;align-items:start;gap:1em}.sidebar-nav a{text-decoration:none;color:#fff;font-size:1.2rem;display:flex;align-items:center;gap:.6em;padding:.6em .5em;transition:color .5s ease-in-out}.sidebar-nav a:hover{background-color:#aaa7a7;border-radius:10px;transition:background-color .3s ease-in-out}.sidebar-nav a:hover i{color:var(--color-accent);transition:color .3s ease,transform .3s ease;transform:scale(1.2)}body.light .sidebar-nav a{color:#000;transition:color .3s ease-in-out}body.light .sidebar-nav a:hover{background-color:#dbd9d9}.section-title{font-size:2rem}@media screen and (max-width: 1024px){.sidebar-nav{padding:1.2em;font-size:.85em}.sidebar-nav ul{padding:.8rem;gap:.9em}.sidebar-nav a{font-size:1.1rem;padding:.5em .4em}.section-title{font-size:1.8rem}}@media screen and (max-width: 768px){.sidebar-nav{padding:1em;font-size:.8em}.sidebar-nav ul{padding:.6rem;gap:.8em}.sidebar-nav a{font-size:1rem;padding:.4em}.section-title{font-size:1.5rem}}@media screen and (max-width: 777px){.sidebar-nav{padding:.8em;font-size:.75em}.sidebar-nav ul{gap:.6em}.sidebar-nav a{font-size:.95rem;padding:.35em .3em}.section-title{font-size:1.3rem}}.close-sidebar-btn{display:none}@media screen and (max-width: 909px){.close-sidebar-btn{display:block;position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.8rem;color:var(--primary-color);cursor:pointer;z-index:1001}.sidebar-container{position:fixed;top:0;left:0;width:250px;height:100vh;background-color:var(--sidebar-bg);transform:translate(-100%);transition:transform .3s ease-in-out;z-index:999;box-shadow:2px 0 8px #0006;overflow-y:auto}.sidebar-container.active{transform:translate(0)}}.game-card{border-radius:20px;box-shadow:0 4px 12px #0006;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column;width:250px;min-width:140px;cursor:pointer}.game-card:hover{transform:scale(1.03);box-shadow:0 6px 20px #0009}.game-card img{width:100%;height:160px;object-fit:cover}.game-info{padding:15px;display:flex;flex-direction:column;gap:10px}.platform-icons{font-size:1.2rem;display:flex;align-items:center;justify-content:space-between}.game-info h3{font-size:1.5rem;font-weight:700;margin:0;cursor:pointer}.wishlist-btn{background:linear-gradient(to right,#7f00ff,#00bfff);border:none;padding:.6rem 1.2rem;font-size:1rem;border-radius:12px;cursor:pointer;font-weight:600;color:#fff;display:block;width:100%;gap:.5rem;transition:transform .2s ease,box-shadow .2s ease}.wishlist-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #00bfff4d}@media (max-width: 716px){.game-card{width:100%;margin:1rem 0;padding:1rem;border-radius:1rem;box-shadow:0 0 10px #0003;display:flex;flex-direction:column;align-items:center}.game-card img{width:100%;height:auto;border-radius:.5rem}.game-card .platform-icons,.game-card .rating,.game-card .release-date,.game-card .game-title{text-align:center;margin-top:.5rem}.game-card button{width:90%;font-size:1rem;margin-top:1rem}}