:root{--primary-color: #646cff;--secondary-color: #535bf2;--background-color: #ffffff;--text-color: #333333;--header-height: 70px;--header-bg: rgba(255, 255, 255, .95);--shadow-color: rgba(0, 0, 0, .1);--card-bg: #ffffff}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;background-color:var(--background-color);color:var(--text-color)}.header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background-color:var(--header-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:space-between;align-items:center;padding:0 2rem;box-shadow:0 2px 10px var(--shadow-color);z-index:1000}.logo-container{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:8px;transition:transform .3s ease}.logo-container:hover{transform:scale(1.05)}.logo{height:36px;width:36px;filter:invert(1)}.logo-container h1{font-size:1.75rem;font-weight:800;color:var(--text-color);letter-spacing:-.5px}.logo-container h1 span{color:var(--primary-color)}.nav-menu ul{display:flex;list-style:none;gap:2rem}.nav-menu a{color:var(--text-color);text-decoration:none;font-weight:500;font-size:1rem;transition:color .3s ease;padding:.5rem 1rem;border-radius:4px}.nav-menu a:hover,.nav-menu a.active{color:var(--primary-color);background-color:#646cff1a}.mobile-menu{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:4px}.mobile-menu span{width:30px;height:2px;background-color:var(--text-color);transition:all .3s ease}.mobile-menu.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px)}.mobile-menu.active span:nth-child(2){opacity:0}.mobile-menu.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}main{margin-top:var(--header-height);padding:1rem;background-color:#f5f5f5}.welcome-section{background:linear-gradient(135deg,#f6f8ff,#f0f2ff);padding:4rem 1rem;margin-bottom:0rem}.welcome-container{max-width:1200px;margin:0 auto}.welcome-title{font-size:2.5rem;font-weight:800;color:var(--text-color);text-align:center;margin-bottom:2rem;line-height:1.2}.welcome-intro{max-width:800px;margin:0 auto 3rem;text-align:center;font-size:1.1rem;color:#666;line-height:1.6}.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-bottom:3rem}.feature-card{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 20px #0000000d;transition:transform .3s ease}.feature-card:hover{transform:translateY(-5px)}.feature-card h2{font-size:1.5rem;margin-bottom:1rem;color:var(--text-color)}.feature-card ul{list-style:none;margin-left:0}.feature-card ul li{margin-bottom:.75rem;padding-left:1.5rem;position:relative}.feature-card ul li:before{content:"→";position:absolute;left:0;color:var(--primary-color)}.hot-picks li{padding:.5rem 0;border-bottom:1px solid #eee}.hot-picks li:last-child{border-bottom:none}.eco-friendly{background:linear-gradient(135deg,#e6ffe6,#f0fff0)}.community-section,.cta-section{text-align:center;padding:2rem;margin-bottom:2rem;background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000000d}.cta-section{background:linear-gradient(135deg,#646cff,#535bf2);color:#fff}.cta-section h2{color:#fff;margin-bottom:1rem}.cta-tagline{font-size:1.25rem;font-weight:700;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}.games-container{max-width:1200px;margin:0 auto;padding:1rem .5rem}.section-title{font-size:1.5rem;font-weight:800;margin-bottom:1.5rem;color:var(--text-color);position:relative;display:inline-block;margin-top:1.5rem;padding-bottom:.5rem}.section-title:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#ff6b6b,#feca57,#48dbfb,#1dd1a1,#ff9ff3);border-radius:2px}.games-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}.game-card{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);transition:transform .3s ease;background:var(--card-bg)}.game-card:hover{transform:translateY(-3px)}.game-card a{text-decoration:none;color:inherit}.game-card img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .3s ease;display:block}.game-card:hover img{transform:scale(1.1)}.game-title{position:absolute;bottom:0;left:0;right:0;background:#fffffff2;padding:.75rem;font-size:.9rem;font-weight:600;text-align:center;transform:translateY(100%);transition:transform .3s ease}.game-card:hover .game-title{transform:translateY(0)}.footer{background:#fff;padding:2rem 0;margin-top:0rem;border-top:1px solid #eee}.footer-container{max-width:1200px;margin:0 auto;text-align:center}.footer-logo{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.footer-logo img{height:32px;width:32px}.footer-logo h2{font-size:1.5rem;font-weight:600;color:#333}.footer-logo span{color:var(--primary-color)}.footer-menu{margin:1.5rem 0}.footer-menu ul{list-style:none;display:flex;justify-content:center;gap:2rem;padding:0}.footer-menu a{color:#666;text-decoration:none;font-size:.9rem;transition:color .2s ease}.footer-menu a:hover{color:var(--primary-color)}.footer-bottom{margin-top:1.5rem;color:#666;font-size:.9rem}@media (max-width: 1024px){.games-grid,.features-grid{grid-template-columns:repeat(2,1fr)}.welcome-title{font-size:2rem}.footer-container{grid-template-columns:repeat(2,1fr);gap:2rem}}@media (max-width: 768px){.header{padding:0 1rem}.logo{height:32px;width:32px}.logo-container h1{font-size:1.5rem}.nav-menu{position:fixed;top:var(--header-height);left:0;right:0;background-color:var(--header-bg);padding:1rem;transform:translateY(-150%);transition:transform .3s ease;box-shadow:0 2px 10px var(--shadow-color)}.nav-menu.active{transform:translateY(0)}.nav-menu ul{flex-direction:column;align-items:center;gap:1rem}.mobile-menu{display:flex}.section-title{font-size:1.25rem}.games-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.features-grid{grid-template-columns:1fr}.welcome-title{font-size:1.75rem}.footer-menu ul{flex-direction:column;gap:1rem}}@media (max-width: 480px){.games-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}.game-title{font-size:.85rem;padding:.5rem}.welcome-title{font-size:1.5rem}.feature-card{padding:1.5rem}}@media (max-width: 380px){.logo-container h1{font-size:1.25rem}.logo{height:28px;width:28px}}