.tile{animation-duration:.3s;background-color:#ffffff0d;border-color:#ffffff1a;border-width:1px;display:block;overflow:hidden;position:relative;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.tile:hover{border-color:#ffffff4d}.image-wrapper{aspect-ratio:1/1;overflow:hidden;position:relative}.image,.image-wrapper{width:100%}.image{animation-duration:.5s;height:100%;inset:0;-o-object-fit:cover;object-fit:cover;position:absolute;transition-duration:.5s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tile:hover .image{--tw-scale-x:1.1;--tw-scale-y:1.1;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))}.placeholder{align-items:center;background-color:#ffffff0d;display:flex;inset:0;justify-content:center;position:absolute}.placeholder-icon{color:rgb(var(--text-secondary)/.6);height:2.5rem;width:2.5rem}.play-overlay{align-items:center;animation-duration:.3s;background:#0000004d;display:flex;inset:0;justify-content:center;opacity:0;position:absolute;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tile:hover .play-overlay{opacity:1}.play-icon{align-items:center;background-color:#fff3;border-radius:9999px;display:flex;height:2.5rem;justify-content:center;width:2.5rem;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));--tw-backdrop-blur:blur(4px);animation-duration:.3s;-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);border:2px solid hsla(0,0%,100%,.5);transition-duration:.3s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tile:hover .play-icon{--tw-scale-x:1;--tw-scale-y:1;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))}.play-icon svg{height:1rem;margin-left:.125rem;width:1rem}.title-bar{bottom:0;left:0;position:absolute;right:0;--tw-translate-y:100%;animation-duration:.3s;background:linear-gradient(0deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.5) 70%,transparent);opacity:0;padding:.75rem;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tile:hover .title-bar,.title-bar{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))}.tile:hover .title-bar{--tw-translate-y:0px;opacity:1}.title-text{display:block;font-size:.875rem;font-weight:500;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.glow-effect{animation-duration:.3s;border-radius:.75rem;box-shadow:0 0 30px #ffffff26,inset 0 0 30px #ffffff0d;inset:0;opacity:0;pointer-events:none;position:absolute;transition-duration:.3s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tile:hover .glow-effect{opacity:1}.game-grid{padding:1rem .75rem;position:relative;width:100%}@media(min-width:768px){.game-grid{padding-left:1rem;padding-right:1rem}}.game-grid-list{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}@media(min-width:640px){.game-grid-list{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(min-width:768px){.game-grid-list{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(min-width:1024px){.game-grid-list{grid-template-columns:repeat(8,minmax(0,1fr))}}@media(min-width:1280px){.game-grid-list{grid-template-columns:repeat(10,minmax(0,1fr))}}.game-grid-item,.game-grid-item-featured{aspect-ratio:1/1;background-color:#ffffff1a;border-radius:1.5rem;overflow:hidden}.game-grid-item-featured{grid-column:span 2/span 2;grid-row:span 2/span 2}.game-grid-animation{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.skeleton-grid{margin-left:auto;margin-right:auto;width:100%}.skeleton-grid{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.skeleton-grid>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.skeleton-grid{padding:2rem 1rem}.skeleton-items{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}@media(min-width:640px){.skeleton-items{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(min-width:768px){.skeleton-items{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(min-width:1024px){.skeleton-items{grid-template-columns:repeat(8,minmax(0,1fr))}}@media(min-width:1280px){.skeleton-items{grid-template-columns:repeat(10,minmax(0,1fr))}}.skeleton-item,.skeleton-item-featured{aspect-ratio:1/1;border-radius:1.5rem}.skeleton-item-featured{grid-column:span 2/span 2;grid-row:span 2/span 2}.empty-container{justify-content:center;padding-bottom:5rem;padding-top:5rem;width:100%}.empty-container,.empty-content{align-items:center;display:flex}.empty-content{flex-direction:column;max-width:28rem;padding-left:1rem;padding-right:1rem;text-align:center}.empty-icon-wrapper{margin-bottom:2rem;position:relative}.empty-icon-outer{align-items:center;background-image:linear-gradient(to bottom right,var(--tw-gradient-stops));border-radius:9999px;display:flex;height:6rem;justify-content:center;width:6rem;--tw-gradient-from:rgb(var(--primary)/.2) var(--tw-gradient-from-position);--tw-gradient-to:rgb(var(--primary)/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:transparent var(--tw-gradient-to-position)}.empty-icon-inner{display:flex;height:5rem;width:5rem}@keyframes pulse{50%{opacity:.5}}.empty-icon-inner{align-items:center;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;background-image:linear-gradient(to bottom right,var(--tw-gradient-stops));border-radius:9999px;justify-content:center;--tw-gradient-from:rgb(var(--primary)/.1) var(--tw-gradient-from-position);--tw-gradient-to:rgb(var(--primary)/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:transparent var(--tw-gradient-to-position)}.empty-icon{color:rgb(var(--primary));height:2.5rem;width:2.5rem}.empty-emoji{display:flex;height:2rem;position:absolute;right:-.5rem;top:-.5rem;width:2rem}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}.empty-emoji{align-items:center;animation:bounce 1s infinite;background-image:linear-gradient(to bottom right,var(--tw-gradient-stops));border-radius:9999px;justify-content:center;--tw-gradient-from:rgb(var(--primary)/.3) var(--tw-gradient-from-position);--tw-gradient-to:rgb(var(--primary)/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:rgb(var(--primary)/.1) var(--tw-gradient-to-position)}.empty-glow{inset:0;margin:-.5rem;position:absolute}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}.empty-glow{animation:ping 1s cubic-bezier(0,0,.2,1) infinite;border-color:rgb(var(--primary)/.2);border-radius:9999px;border-width:1px;opacity:.2}.empty-title{color:rgb(var(--primary));font-size:1.25rem;font-weight:700;letter-spacing:.025em;line-height:1.75rem;margin-bottom:.75rem}.empty-desc{color:rgb(var(--text-secondary)/.6);font-size:.875rem;line-height:1.25rem;line-height:1.625;margin-bottom:1.5rem}.empty-btn{align-items:center;animation-duration:.3s;border-radius:.75rem;display:inline-flex;gap:.5rem;overflow:hidden;padding:.75rem 1.5rem;position:relative;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.empty-btn:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;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))}.empty-btn-bg{background-image:linear-gradient(to right,var(--tw-gradient-stops));--tw-gradient-from:rgb(var(--primary)/.2) var(--tw-gradient-from-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:rgb(var(--primary)/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgb(var(--primary)/.1) var(--tw-gradient-via-position),var(--tw-gradient-to);--tw-gradient-to:transparent var(--tw-gradient-to-position)}.empty-btn-bg,.empty-btn-border{inset:0;position:absolute}.empty-btn-border{border-color:rgb(var(--primary)/.3);border-radius:.75rem;border-width:1px}.empty-btn-text{align-items:center;color:rgb(var(--primary));display:flex;font-size:.875rem;font-weight:500;gap:.5rem;line-height:1.25rem;position:relative}.empty-btn-icon{animation-duration:.3s;height:1rem;transition-duration:.3s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);width:1rem}.page-wrapper{width:100%}
