@layer components{.game-cards-grid{container-type:inline-size;display:grid;grid-template-columns:1fr;gap:var(--space-10);margin-bottom:var(--space-16);@container (min-width: 520px){grid-template-columns:repeat(2,1fr);gap:var(--space-8)}@container (min-width: 860px){grid-template-columns:repeat(3,1fr)}@container (max-width: 480px){gap:var(--space-6)}}.game-card{grid-row:span 3;display:grid;grid-template-rows:subgrid;align-items:start;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;position:relative;overflow:hidden;transition:transform var(--transition-normal),box-shadow var(--transition-normal),background var(--transition-theme);&:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,oklch(100% 0 0 / 8%),transparent);translate:-100% 0;transition:translate var(--transition-slow)}&:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--shadow-xl);&:before{translate:100% 0}.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 (max-width: 519px){padding:var(--space-6)}@container (max-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;align-self:center;justify-self:center;@container (max-width: 519px){width:5rem;height:5rem}@container (max-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);font-weight:700;margin-bottom:var(--space-3);color:var(--color-text);@container (max-width: 519px){font-size:var(--text-2xl)}@container (max-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 (max-width: 519px){font-size:var(--text-base)}@container (max-width: 380px){font-size:var(--text-sm);margin-bottom:var(--space-4)}}.game-card-button{margin-top:auto;align-self:end}.game-card.featured:after{content:"FEATURED";position:absolute;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:#0d0b07;padding:var(--space-1) var(--space-8);font-size:var(--text-sm);font-weight:700;transform:rotate(45deg);box-shadow:var(--shadow-md)}.game-card.loading{opacity:.7;pointer-events:none;.game-icon{animation:card-pulse 1.5s ease-in-out infinite}}.theme-power-up .game-card{position:relative;&:after{content:"";position:absolute;inset:0;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)}&: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:sparkle-card .6s ease-out}}@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)}}