@layer components{.game-cards-grid{gap:var(--space-10);margin-bottom:var(--space-16);grid-template-columns:1fr;display:grid;container-type:inline-size;@container (width>=520px){gap:var(--space-8);grid-template-columns:repeat(2,1fr)}@container (width>=860px){grid-template-columns:repeat(3,1fr)}@container (width<=480px){gap:var(--space-6)}}.game-card{grid-row:span 3;grid-template-rows:subgrid;background:var(--color-surface-raised);border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:var(--shadow-md);padding:var(--space-8);text-align:center;transition:transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-theme);align-items:start;display:grid;position:relative;overflow:hidden;&:before{content:"";transition:translate var(--transition-slow);background:linear-gradient(90deg,#0000,oklch(100% 0 0/.08),#0000);position:absolute;inset:0;translate:-100%}&:hover{box-shadow:var(--shadow-xl);transform:translateY(-6px)scale(1.01);&:before{translate:100%}& .game-icon{transform:rotate(5deg)scale(1.1)}}&:has(.btn-category:hover){box-shadow:var(--shadow-xl)}&:focus-within{outline:2px solid rgb(from var(--color-brand) r g b / 50%);outline-offset:2px}transition:opacity .4s, translate .4s var(--ease-spring), transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-theme);@starting-style{opacity:0;translate:0 1rem}@container (width<=519px){padding:var(--space-6)}@container (width<=380px){padding:var(--space-4)}}.game-icon{width:6.25rem;height:6.25rem;margin-bottom:var(--space-4);color:var(--color-brand);transition:transform var(--transition-normal), color var(--transition-normal);flex-shrink:0;place-self:center;@container (width<=519px){width:5rem;height:5rem}@container (width<=380px){width:4.375rem;height:4.375rem}}.game-card.category-puzzle .game-icon{color:var(--color-cat-puzzle)}.game-card.category-card .game-icon{color:var(--color-cat-card)}.game-card.category-action .game-icon{color:var(--color-cat-action)}.game-card.category-kids .game-icon{color:var(--color-cat-kids)}.game-card.category-sports .game-icon{color:var(--color-cat-sports)}.game-card.category-multiplayer .game-icon{color:var(--color-cat-multiplayer)}.game-title{font-size:var(--text-3xl);margin-bottom:var(--space-3);color:var(--color-text);font-weight:700;@container (width<=519px){font-size:var(--text-2xl)}@container (width<=380px){font-size:var(--text-xl);margin-bottom:var(--space-2)}}.game-description{color:var(--color-text-muted);margin-bottom:var(--space-6);line-height:1.6;& p{margin:0}@container (width<=519px){font-size:var(--text-base)}@container (width<=380px){font-size:var(--text-sm);margin-bottom:var(--space-4)}}.game-card-button{align-self:end;margin-top:auto}.game-card.featured:after{content:"FEATURED";top:var(--space-4);right:calc(var(--space-4) * -1);background:linear-gradient(45deg, var(--color-warning), color-mix(in oklch, var(--color-warning), oklch(0% 0 0) 15%));color:oklch(15% .01 90);padding:var(--space-1) var(--space-8);font-size:var(--text-sm);box-shadow:var(--shadow-md);font-weight:700;position:absolute;transform:rotate(45deg)}.game-card.loading{opacity:.7;pointer-events:none;& .game-icon{animation:1.5s ease-in-out infinite card-pulse}}.theme-power-up .game-card{position:relative;&:after{content:"";background:repeating-linear-gradient(45deg, transparent, transparent 20px, rgb(from var(--color-brand) r g b / 2%) 20px, rgb(from var(--color-brand) r g b / 2%) 40px);pointer-events:none;opacity:0;transition:opacity var(--transition-normal);position:absolute;inset:0}&:hover:after{opacity:1}}.theme-sparkle-play .game-card{&:before{background:linear-gradient(90deg, transparent, rgb(from var(--color-brand) r g b / 10%), transparent)}&:hover{animation:.6s ease-out sparkle-card}}@media print{.game-card{break-inside:avoid;box-shadow:none;border:1px solid var(--color-border);margin-bottom:var(--space-6)}.game-cards-grid{display:block}}}@keyframes card-pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes sparkle-card{0%{box-shadow:var(--shadow-md)}50%{box-shadow:var(--shadow-xl), 0 0 20px rgb(from var(--color-brand) r g b / 20%)}to{box-shadow:var(--shadow-md)}}