@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");:root{--primary:#4f46e5;--primary-hover:#4338ca;--bg-color:#f9fafb;--card-bg:#ffffff;--text-primary:#111827;--text-secondary:#6b7280;--easy-color:#10b981;--medium-color:#f59e0b;--hard-color:#ef4444;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);--radius:0.75rem}body{font-family:Inter,sans-serif;background-color:var(--bg-color);margin:0;padding:0}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem}.game-card{background-color:var(--card-bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;height:100%;position:relative;isolation:isolate;border:1px solid rgba(229,231,235,.5);min-height:auto}.game-card:hover{box-shadow:var(--shadow-xl)}.game-image{height:180px;background-position:50%;background-size:cover;position:relative;overflow:hidden}.game-content{padding:1.5rem;flex-grow:1;display:flex;flex-direction:column;position:relative;background-color:var(--card-bg)}.game-description{font-size:.95rem;color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem;flex-grow:1}.play-button{background-color:var(--primary);color:white;padding:.75rem 1.25rem;border-radius:var(--radius);font-weight:600;font-size:.95rem;text-align:center;cursor:pointer;border:none;position:relative;overflow:hidden;box-shadow:0 4px 6px -1px rgba(79,70,229,.3)}.fixed-height-btn,.play-button{display:inline-flex;align-items:center;justify-content:center}.fixed-height-btn{height:2.75rem}.fixed-height-btn span{flex-grow:0;display:inline-block;white-space:nowrap}.difficulty-badge{position:absolute;top:12px;right:12px;padding:.3rem .8rem;border-radius:9999px;font-size:.75rem;font-weight:600;color:white;box-shadow:0 2px 4px rgba(0,0,0,.1);z-index:10}.difficulty-easy{background-color:var(--easy-color)}.difficulty-medium{background-color:var(--medium-color)}.difficulty-hard{background-color:var(--hard-color)}.benefit-tag{display:inline-flex;align-items:center;padding:.2rem .6rem;background-color:rgba(79,70,229,.1);color:var(--primary);border-radius:4px;font-size:.7rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.search-input{width:100%;padding:.75rem 1rem .75rem 2.5rem;border-radius:var(--radius);border:2px solid transparent;background-color:white;font-size:.95rem;box-shadow:var(--shadow-sm)}.search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.2)}.filter-button{padding:.5rem 1rem;border-radius:9999px;font-size:.85rem;font-weight:500;cursor:pointer;border:1px solid transparent}.filter-button.active{background-color:var(--primary);color:white;box-shadow:0 2px 5px rgba(79,70,229,.4)}.filter-button:not(.active){background-color:white;color:var(--text-secondary);border-color:#e5e7eb}@media (max-width:768px){.games-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.5rem}.game-header h1{font-size:1.75rem}.game-header p{font-size:1rem}.game-image{height:140px}}@media (max-width:640px){.games-container{padding:1rem}.games-grid{grid-template-columns:1fr;gap:1.25rem}}@media (min-width:480px) and (max-width:639px){.games-grid{grid-template-columns:repeat(2,1fr);gap:1rem}}@media (max-width:480px){.game-card{border-radius:1rem}}.spinner{width:40px;height:40px;border-radius:50%;border:4px solid rgba(79,70,229,.2);border-top:4px solid var(--primary)}.header-title{background:linear-gradient(90deg,#4f46e5,#8b5cf6,#ec4899);-webkit-background-clip:text;color:transparent}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 0 0 rgba(99,102,241,.4)}50%{box-shadow:0 0 20px 5px rgba(99,102,241,.2)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes bounce-in{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes wiggle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}.game-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 50%,rgba(255,255,255,.1));opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1}.game-card:hover:before{opacity:1}.game-card:after{content:"";position:absolute;top:0;left:0;right:0;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3) 50%,transparent);background-size:200% 100%;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:2}.game-card:hover:after{opacity:1;animation:shimmer 1.5s infinite}.game-card:hover .play-btn-pulse{animation:pulse-glow 1.5s infinite}.game-card:hover .emoji-float{animation:float 2s ease-in-out infinite}.badge-new{position:absolute;top:-8px;left:-8px;background:linear-gradient(135deg,#ef4444,#f97316);color:white;padding:4px 12px;font-size:10px;font-weight:800;border-radius:4px;transform:rotate(-12deg);box-shadow:0 2px 8px rgba(239,68,68,.4);z-index:20;animation:wiggle 1s ease-in-out infinite}.animate-bounce-in{animation:bounce-in .5s ease-out forwards}@keyframes particle-float{0%{transform:translateY(0) rotate(0deg);opacity:1}to{transform:translateY(-100px) rotate(1turn);opacity:0}}.particle{animation:particle-float 1.5s ease-out forwards}@media (prefers-color-scheme:dark){.game-card{border-color:rgba(99,102,241,.2)}.game-card:hover{box-shadow:0 20px 40px -10px rgba(99,102,241,.3)}}