.sort-option{display:flex;width:100%;align-items:center;gap:.5rem;padding:.625rem .75rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sort-option:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.sort-option:hover:is(.dark *){background-color:#ffffff1a}@media (min-width: 640px){.sort-option{gap:.75rem;padding:.5rem 1rem}}.sort-option svg{height:1rem;width:1rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sort-option svg:is(.dark *){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.sort-option span{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@media (max-width: 640px){.game-card .sort-option span{font-size:.625rem}}.sort-option span:is(.dark *){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.sort-option span{font-size:.875rem;line-height:1.25rem}}.sort-option-active{background-color:#f3631c1a}.sort-option-active svg{--tw-text-opacity: 1;color:rgb(243 99 28 / var(--tw-text-opacity, 1))}.sort-option-active span{--tw-text-opacity: 1;color:rgb(243 99 28 / var(--tw-text-opacity, 1))}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes glowPulse{0%,to{box-shadow:0 0 20px #f3631c4d}50%{box-shadow:0 0 30px #f3631c99}}.page-enter{animation:fadeIn .5s ease-out}.category-card{animation:slideInUp .6s ease-out}.category-card:hover{animation:glowPulse 2s infinite}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:linear-gradient(to bottom,#f8fafc,#e2e8f0)}::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#f3631c,#441170);border-radius:5px;border:2px solid #f8fafc}::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom,#ff7a3d,#5a1a8a)}.dark ::-webkit-scrollbar-track{background:linear-gradient(to bottom,#1a1a2e,#16213e)}.dark ::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#f3631c,#441170);border-radius:5px;border:2px solid #1a1a2e}.dark ::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom,#ff7a3d,#5a1a8a)}.loading-skeleton{background:linear-gradient(90deg,#4411701a 25%,#f3631c33,#4411701a 75%);background-size:200% 100%;animation:loading 1.5s infinite}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}@media (max-width: 640px){.category-grid{grid-template-columns:repeat(1,1fr)}.category-list{gap:1rem}#sortMenu{z-index:9999!important;position:fixed;top:auto;bottom:auto;left:50%;transform:translate(-50%) translateZ(0);width:calc(100vw - 2rem);max-width:300px}#sortDropdown{z-index:9998!important}#searchInputContainer{transition:all .3s ease-in-out}#searchInputContainer.hidden{opacity:0;transform:translateY(-10px);pointer-events:none}#searchInputContainer.block{opacity:1;transform:translateY(0);pointer-events:auto}#mobileSearchBtn{transition:all .3s ease-in-out;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#mobileSearchBtn:hover{transform:scale(1.02);box-shadow:0 8px 25px #f3631c33}#mobileSearchBtn:active{transform:scale(.98)}#mobileSearchBtn:focus{outline:none;box-shadow:0 0 0 3px #f3631c4d}#mobileSortMenu{z-index:9999!important;position:absolute;top:100%;right:0;left:auto;transform:translateZ(0);will-change:transform}.mobile-sort-option{transition:all .2s ease-in-out}.mobile-sort-option:hover{background-color:#f3631c1a}.mobile-sort-option.sort-option-active{background-color:#f3631c26;color:#f3631c}}@media (min-width: 641px) and (max-width: 1024px){.category-grid{grid-template-columns:repeat(2,1fr)}}.custom-input{border-radius:1.5rem;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));background-color:#fffc;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1));--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.custom-input:focus{--tw-border-opacity: 1;border-color:rgb(243 99 28 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(243 99 28 / .2)}.custom-input:is(.dark *){border-color:#fff3;background-color:#ffffff1a;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.custom-input:hover{border-color:#f3631c80}.toast{position:fixed;bottom:1rem;right:1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:1.5rem;padding:.75rem 1.5rem;--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.toast-success{border-width:1px;border-color:#f3631c4d;background-image:linear-gradient(to right,var(--tw-gradient-stops));--tw-gradient-from: #f3631c var(--tw-gradient-from-position);--tw-gradient-to: rgb(243 99 28 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to: rgb(243 99 28 / .8) var(--tw-gradient-to-position);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.game-card .toast-success{background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}.toast-error{border-width:1px;border-color:#f871714d;background-image:linear-gradient(to right,var(--tw-gradient-stops));--tw-gradient-from: #ef4444 var(--tw-gradient-from-position);--tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to: #dc2626 var(--tw-gradient-to-position);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.game-card .toast-error{background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}@media (prefers-color-scheme: dark){.loading-skeleton{background:linear-gradient(90deg,#f3631c1a 25%,#44117033,#f3631c1a 75%)}input:focus,select:focus{box-shadow:0 0 0 4px #f3631c33}}.game-card{position:relative;background:linear-gradient(145deg,#fff,#f8fafc);border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 20px #0000001a;transform-style:preserve-3d;transition:all .5s cubic-bezier(.4,0,.2,1);overflow:hidden}.game-card:hover{transform:scale(1.08) rotateY(8deg);box-shadow:0 25px 50px #f3631c33;border-color:#f3631c66}.game-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(243,99,28,.1) 50%,transparent 70%);opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:1}.game-card:hover:before{opacity:1}.dark .game-card{background:linear-gradient(145deg,#1a1a2e,#16213e);border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 20px #0006}.dark .game-card:hover{box-shadow:0 25px 50px #f3631c66;border-color:#f3631c99}.dark .game-card:before{background:linear-gradient(45deg,transparent 30%,rgba(243,99,28,.15) 50%,transparent 70%)}.game-card .aspect-\[5\/8\]{position:relative;overflow:hidden;background:linear-gradient(145deg,#f8fafc,#e2e8f0)}.dark .game-card .aspect-\[5\/8\]{background:linear-gradient(145deg,#1a1a2e,#16213e)}.game-card img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:all .7s cubic-bezier(.4,0,.2,1)}.game-card .first-image{transform:translateY(0);transition:all .7s cubic-bezier(.4,0,.2,1)}.game-card:hover .first-image{transform:translateY(100%) scale(1)}.game-card .hover-image{transform:translateY(-100%) scale(1);transition:all .7s cubic-bezier(.4,0,.2,1)}.game-card:hover .hover-image{transform:translateY(0) scale(1.15);filter:brightness(1.1) contrast(1.1) saturate(1.1) hue-rotate(20deg)}.game-card .w-6.h-6{animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 0 #f3631cb3}50%{transform:scale(1.1);box-shadow:0 0 0 10px #f3631c00}}.game-card .aspect-\[4\/3\]:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(243,99,28,.1) 50%,transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:5}.game-card:hover .aspect-\[4\/3\]:after{opacity:1}.game-card .inline-flex{background:linear-gradient(135deg,#f3631c,#ff7a3d);box-shadow:0 2px 8px #f3631c66;border:1px solid rgba(255,255,255,.2)}.game-card .w-12.h-12{background:#0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.2);box-shadow:0 4px 15px #0000001a;transition:all .3s ease}.game-card:hover .w-12.h-12{background:#f3631c33;border-color:#f3631c80;transform:scale(1.1)}.dark .game-card .w-12.h-12{background:#ffffff26;border:1px solid rgba(255,255,255,.3);box-shadow:0 4px 15px #0000004d}.game-card .bg-gradient-to-t{background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 50%,transparent 100%)}.game-card .bg-gradient-to-r{background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}.game-card .border-2{border-color:transparent;transition:border-color .3s ease}.game-card:hover .border-2{border-color:#f3631c99;box-shadow:0 0 20px #f3631c4d}.gradient-text{background:linear-gradient(135deg,#f3631c,#441170);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glass-effect{background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.1)}.dark .glass-effect{background:#ffffff0d;border:1px solid rgba(255,255,255,.1)}.hover-lift{transition:all .3s ease}.hover-lift:hover{transform:translateY(-8px);box-shadow:0 20px 40px #f3631c33}.dark .hover-lift:hover{box-shadow:0 20px 40px #f3631c66}.btn-primary{background:linear-gradient(135deg,#f3631c,#441170);border:none;padding:12px 24px;border-radius:12px;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #f3631c4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #f3631c66;background:linear-gradient(135deg,#ff7a3d,#5a1a8a)}.animated-border{position:relative;overflow:hidden}.animated-border:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:2px;background:linear-gradient(90deg,transparent,#f3631c,transparent);animation:borderSlide 2s infinite}@keyframes borderSlide{0%{left:-100%}to{left:100%}}.category-list{display:grid;gap:.75rem}@media (max-width: 640px){.category-list{grid-template-columns:repeat(3,1fr);gap:.5rem}.game-card{font-size:.75rem}.game-card .text-xs{font-size:.625rem}.game-card .text-\[10px\]{font-size:.5rem}}.product-card .aspect-\[5\/6\]{position:relative;overflow:hidden;background:linear-gradient(145deg,#f8fafc,#e2e8f0)}.dark .product-card .aspect-\[5\/6\]{background:linear-gradient(145deg,#1a1a2e,#16213e)}
