@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--primary-50: #e6f2ff;--primary-100: #b3d9ff;--primary-200: #80bfff;--primary-300: #4da6ff;--primary-400: #1a8cff;--primary-500: #0073e6;--primary-600: #005bb3;--primary-700: #004280;--primary-800: #002a4d;--primary-900: #00131a;--accent-light: #60a5fa;--accent-main: #3b82f6;--accent-dark: #2563eb;--accent-glow: rgba(59, 130, 246, .4);--white: #ffffff;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-hero: linear-gradient(135deg, #1e3a5f 0%, #0d1f33 50%, #0a1929 100%);--gradient-card: linear-gradient(145deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .05) 100%);--gradient-button: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);--gradient-button-hover: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-glow: 0 0 30px rgba(59, 130, 246, .3);--shadow-card: 0 8px 32px rgba(0, 0, 0, .12);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 24px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--gray-800);background:linear-gradient(180deg,var(--gray-50) 0%,var(--white) 100%);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--gray-100)}::-webkit-scrollbar-thumb{background:var(--primary-400);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--primary-500)}::selection{background:var(--primary-300);color:var(--white)}a{color:var(--primary-500);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--primary-600)}.container{width:100%;max-width:1400px;margin:0 auto;padding:0 1.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:600;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:.5px}.btn-primary{background:var(--gradient-button);color:var(--white);box-shadow:0 4px 14px #3b82f666}.btn-primary:hover{background:var(--gradient-button-hover);transform:translateY(-2px);box-shadow:0 6px 20px #3b82f680}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--white);color:var(--primary-600);border:2px solid var(--primary-300)}.btn-secondary:hover{background:var(--primary-50);border-color:var(--primary-400)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-fade-in{animation:fadeIn .5s ease forwards}.animate-slide-up{animation:slideUp .5s ease forwards}.animate-scale-in{animation:scaleIn .3s ease forwards}.skeleton{background:linear-gradient(90deg,var(--gray-200) 25%,var(--gray-100) 50%,var(--gray-200) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}.header{position:sticky;top:0;z-index:100;background:#fffffff2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-200);padding:.75rem 0;transition:all var(--transition-normal)}.header-content{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto;padding:0 1rem}.logo{display:flex;align-items:center;gap:.5rem}.logo-icon{width:40px;height:40px;background:var(--gradient-button);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}.logo-icon svg{width:22px;height:22px;color:var(--white)}.logo-text{font-size:var(--font-size-xl);font-weight:800;background:var(--gradient-button);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media(min-width:768px){.header{padding:1rem 0}.header-content{padding:0 1.5rem}.logo-icon{width:48px;height:48px;border-radius:var(--radius-lg)}.logo-icon svg{width:28px;height:28px}.logo-text{font-size:var(--font-size-2xl)}}.hero{background:var(--gradient-hero);padding:2rem 0;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(59,130,246,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(96,165,250,.1) 0%,transparent 50%);pointer-events:none}.hero-content{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:0 1rem;text-align:center}.hero-title{font-size:var(--font-size-2xl);font-weight:800;color:var(--white);margin-bottom:.75rem;line-height:1.2}.hero-title span{background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:var(--font-size-sm);color:var(--gray-300);margin-bottom:1.5rem;max-width:600px;margin-left:auto;margin-right:auto}.hero-stats{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}.stat-item{text-align:center}.stat-number{font-size:var(--font-size-xl);font-weight:700;color:var(--accent-light)}.stat-label{font-size:var(--font-size-xs);color:var(--gray-400);text-transform:uppercase;letter-spacing:1px}@media(min-width:768px){.hero{padding:3rem 0}.hero-content{padding:0 1.5rem}.hero-title{font-size:var(--font-size-3xl)}.hero-subtitle{font-size:var(--font-size-base);margin-bottom:2rem}.hero-stats{gap:2rem}.stat-number{font-size:var(--font-size-2xl)}.stat-label{font-size:var(--font-size-sm)}}@media(min-width:1024px){.hero{padding:4rem 0}.hero-title{font-size:var(--font-size-5xl)}.hero-subtitle{font-size:var(--font-size-xl)}.hero-stats{gap:3rem;margin-top:2rem}.stat-number{font-size:var(--font-size-3xl)}}.categories-section{padding:1rem 0;background:var(--white);border-bottom:1px solid var(--gray-200)}.categories-content{max-width:1400px;margin:0 auto;padding:0 1rem}.categories-header{display:flex;flex-direction:column;gap:1rem}.categories-buttons{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;order:2;justify-content:center}.category-btn{padding:.5rem .875rem;font-size:var(--font-size-xs);font-weight:600;color:var(--gray-600);background:var(--gray-100);border:2px solid transparent;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-normal)}.category-btn:hover{background:var(--primary-50);color:var(--primary-600);border-color:var(--primary-200)}.category-btn.active{background:var(--gradient-button);color:var(--white);border-color:transparent;box-shadow:0 4px 12px #3b82f64d}.search-wrapper{position:relative;display:flex;align-items:center;order:1;width:100%}.search-input{width:100%;padding:.625rem 1rem .625rem 2.25rem;font-size:var(--font-size-sm);font-family:var(--font-family);border:2px solid var(--gray-200);border-radius:var(--radius-full);background:var(--white);transition:all var(--transition-normal)}.search-input:focus{outline:none;border-color:var(--primary-400);box-shadow:0 0 0 3px #3b82f61a}.search-input::placeholder{color:var(--gray-400)}.search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--gray-400);width:16px;height:16px;display:flex;align-items:center;justify-content:center}.search-icon svg{width:16px;height:16px}@media(min-width:768px){.categories-section{padding:1.5rem 0}.categories-content{padding:0 1.5rem}.categories-header{flex-direction:row;align-items:center;justify-content:space-between}.categories-buttons{order:1;justify-content:flex-start;gap:.75rem}.category-btn{padding:.625rem 1.25rem;font-size:var(--font-size-sm)}.search-wrapper{order:2;width:auto;flex-shrink:0}.search-input{width:240px}}@media(min-width:1024px){.categories-section{padding:2rem 0}}.games-section{padding:1.5rem 0 2rem;min-height:60vh}.games-content{max-width:1400px;margin:0 auto;padding:0 1rem}.games-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.games-title{font-size:var(--font-size-lg);font-weight:700;color:var(--gray-800)}.games-count{font-size:var(--font-size-xs);color:var(--gray-500)}@media(min-width:768px){.games-section{padding:2rem 0 3rem}.games-content{padding:0 1.5rem}.games-header{margin-bottom:1.5rem}.games-title{font-size:var(--font-size-2xl)}.games-count{font-size:var(--font-size-sm)}}@media(min-width:1024px){.games-section{padding:3rem 0 4rem}.games-header{margin-bottom:2rem}}.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}@media(min-width:480px){.games-grid{gap:1rem}}@media(min-width:600px){.games-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}}@media(min-width:900px){.games-grid{grid-template-columns:repeat(4,1fr)}}@media(min-width:1200px){.games-grid{grid-template-columns:repeat(5,1fr);gap:1.5rem}}@media(min-width:1400px){.games-grid{grid-template-columns:repeat(6,1fr)}}.game-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--white);box-shadow:var(--shadow-md);transition:all var(--transition-normal);cursor:pointer;animation:slideUp .5s ease forwards;animation-delay:calc(var(--index, 0) * 50ms);opacity:0}.game-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.game-card-image{position:relative;aspect-ratio:4 / 3;overflow:hidden}.game-card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.game-card:hover .game-card-image img{transform:scale(1.05)}.game-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.3) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:.75rem;opacity:0;transition:opacity var(--transition-normal)}.game-card:hover .game-card-overlay{opacity:1}@media(hover:none){.game-card-overlay{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.2) 60%,transparent 100%)}}.game-card-title{font-size:var(--font-size-xs);font-weight:600;color:var(--white);margin-bottom:.25rem;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-card-categories{display:none;flex-wrap:wrap;gap:.25rem;margin-bottom:.5rem}.game-category-tag{font-size:.5rem;font-weight:600;color:var(--white);background:#3b82f6cc;padding:.15rem .4rem;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px}.play-button{width:100%;padding:.5rem;font-size:var(--font-size-xs);font-weight:700;color:var(--white);background:var(--gradient-button);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:.5px}.play-button:hover{background:var(--gradient-button-hover);box-shadow:0 4px 15px #3b82f680}.game-card-info{padding:.5rem .75rem;background:var(--white);border-top:1px solid var(--gray-100)}.game-card-info-title{font-size:var(--font-size-xs);font-weight:600;color:var(--gray-800);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:768px){.game-card{border-radius:var(--radius-xl)}.game-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl),var(--shadow-glow)}.game-card:hover .game-card-image img{transform:scale(1.1)}.game-card-overlay{padding:1rem}.game-card-title{font-size:var(--font-size-sm);margin-bottom:.5rem}.game-card-categories{display:flex}.game-category-tag{font-size:.625rem;padding:.2rem .5rem}.play-button{padding:.75rem;font-size:var(--font-size-sm);border-radius:var(--radius-lg);letter-spacing:1px}.game-card-info{padding:.75rem 1rem}.game-card-info-title{font-size:var(--font-size-sm)}}.no-results{grid-column:1 / -1;text-align:center;padding:2rem 1rem;background:var(--gray-50);border-radius:var(--radius-lg);border:2px dashed var(--gray-300)}.no-results-icon{font-size:3rem;margin-bottom:.75rem}.no-results-text{font-size:var(--font-size-base);color:var(--gray-600);font-weight:500}@media(min-width:768px){.no-results{padding:4rem 2rem;border-radius:var(--radius-xl)}.no-results-icon{font-size:4rem;margin-bottom:1rem}.no-results-text{font-size:var(--font-size-lg)}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:1rem}.loading-spinner{width:40px;height:40px;border:3px solid var(--gray-200);border-top-color:var(--primary-500);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:var(--font-size-base);color:var(--gray-600);font-weight:500}@media(min-width:768px){.loading-container{min-height:400px;gap:1.5rem}.loading-spinner{width:48px;height:48px;border-width:4px}.loading-text{font-size:var(--font-size-lg)}}.modal-overlay{position:fixed;inset:0;background:#000000e6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:0;animation:fadeIn .2s ease}.modal-content{position:relative;width:100%;height:100%;max-width:none;background:var(--gray-900);border-radius:0;overflow:hidden;animation:scaleIn .3s ease}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:linear-gradient(135deg,var(--primary-600) 0%,var(--primary-800) 100%);color:var(--white)}.modal-title{font-size:var(--font-size-base);font-weight:600;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 50px)}.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#fff3;border:none;border-radius:var(--radius-full);color:var(--white);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.modal-close:hover{background:#ffffff4d}.modal-close svg{width:18px;height:18px}.modal-body{position:relative;width:100%;height:calc(100% - 50px)}.modal-iframe{width:100%;height:100%;border:none}.modal-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem;color:var(--white)}.modal-loading p{font-size:var(--font-size-base);font-weight:500}.modal-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem;color:var(--white);text-align:center;padding:1.5rem}.modal-error p{font-size:var(--font-size-base);color:#f87171}.modal-error button{padding:.625rem 1.5rem;font-size:var(--font-size-sm);font-weight:600;color:var(--white);background:var(--gradient-button);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal)}@media(min-width:768px){.modal-overlay{padding:1rem}.modal-content{width:100%;height:auto;max-width:900px;border-radius:var(--radius-xl);box-shadow:0 25px 50px -12px #00000080}.modal-header{padding:1rem 1.5rem}.modal-title{font-size:var(--font-size-lg)}.modal-close{width:36px;height:36px}.modal-close:hover{transform:scale(1.1)}.modal-body{height:70vh;min-height:400px}.modal-loading p,.modal-error p{font-size:var(--font-size-lg)}.modal-error{padding:2rem;gap:1.5rem}.modal-error button{padding:.75rem 2rem}.modal-error button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3b82f666}}@media(min-width:1024px){.modal-content{max-width:1000px}}.footer{background:var(--gradient-hero);padding:2rem 0 1rem;color:var(--white)}.footer-content{max-width:1400px;margin:0 auto;padding:0 1rem}.footer-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:1.5rem;text-align:center}.footer-brand .logo{margin-bottom:.75rem;justify-content:center}.footer-brand .logo-text{color:var(--white);-webkit-text-fill-color:var(--white)}.footer-description{color:var(--gray-400);line-height:1.7;font-size:var(--font-size-sm)}.footer-section-title{font-size:var(--font-size-base);font-weight:600;color:var(--white);margin-bottom:.75rem}.footer-links{list-style:none}.footer-links li{margin-bottom:.4rem}.footer-links a{color:var(--gray-400);font-size:var(--font-size-sm);transition:color var(--transition-fast)}.footer-links a:hover{color:var(--accent-light)}.footer-bottom{padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);text-align:center}.footer-copyright{font-size:var(--font-size-xs);color:var(--gray-500)}@media(min-width:768px){.footer{padding:2.5rem 0 1.5rem}.footer-content{padding:0 1.5rem}.footer-grid{grid-template-columns:1fr 1fr;gap:2rem;text-align:left}.footer-brand{grid-column:1 / -1;text-align:center}.footer-section-title{margin-bottom:1rem}.footer-links li{margin-bottom:.5rem}.footer-bottom{padding-top:1.5rem}.footer-copyright{font-size:var(--font-size-sm)}}@media(min-width:1024px){.footer{padding:3rem 0 1.5rem}.footer-grid{grid-template-columns:1.5fr 1fr 1fr;gap:3rem;margin-bottom:2rem}.footer-brand{grid-column:auto;text-align:left}.footer-brand .logo{justify-content:flex-start;margin-bottom:1rem}}.error-container{text-align:center;padding:2rem 1rem}.error-icon{font-size:3rem;margin-bottom:.75rem}.error-text{font-size:var(--font-size-base);color:var(--gray-600);margin-bottom:1rem}.retry-button{padding:.625rem 1.5rem;font-size:var(--font-size-sm);font-weight:600;color:var(--white);background:var(--gradient-button);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal)}.retry-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3b82f666}@media(min-width:768px){.error-container{padding:4rem 2rem}.error-icon{font-size:4rem;margin-bottom:1rem}.error-text{font-size:var(--font-size-lg)}.retry-button{padding:.75rem 2rem}}