@layer components{.theme-selector-section{container-type:inline-size;text-align:center;margin-bottom:var(--space-16);padding:var(--space-8);background:var(--color-surface-raised);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);border:1px solid var(--color-border);position:relative;overflow:hidden;transition:background var(--transition-theme),border-color var(--transition-theme);&:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,rgb(from var(--color-brand) r g b / 2%),rgb(from var(--color-accent) r g b / 2%),rgb(from var(--color-brand) r g b / 2%));animation:rotate-gradient 10s linear infinite;pointer-events:none}@container (max-width: 640px){padding:var(--space-6);margin-bottom:var(--space-12)}@media print{display:none}}.theme-selector-title{font-size:var(--text-2xl);font-weight:700;color:var(--color-brand);margin-bottom:var(--space-4);position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--space-2);transition:color var(--transition-theme);&:before{content:"🎨";font-size:var(--text-xl);animation:palette-bounce 2s ease-in-out infinite}@container (max-width: 640px){font-size:var(--text-xl);margin-bottom:var(--space-3)}}.theme-buttons-container{display:flex;justify-content:center;gap:var(--space-4);flex-wrap:wrap;position:relative;z-index:1;@container (max-width: 640px){flex-direction:column;align-items:center;gap:var(--space-3)}}.theme-button{color:#fff;font-weight:700;padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);box-shadow:var(--shadow-md);border:none;cursor:pointer;font-size:var(--text-base);position:relative;overflow:hidden;min-width:7.5rem;text-transform:uppercase;letter-spacing:.05em;transition:transform var(--transition-normal),box-shadow var(--transition-normal),background var(--transition-normal),font-family var(--transition-theme);&:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,oklch(100% 0 0 / 20%),transparent);translate:-100% 0;transition:translate var(--transition-slow)}&:hover{transform:translateY(-2px) scale(1.05);box-shadow:var(--shadow-xl);&:before{translate:100% 0}}&:active{transform:translateY(0) scale(.98);transition-duration:.1s}&:focus-visible{outline:2px solid oklch(100% 0 0 / 80%);outline-offset:2px}&.active{transform:translateY(-2px) scale(1.05);box-shadow:var(--shadow-xl);&:after{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,oklch(62% .19 220),#793afa,#e10195,oklch(72% .17 80));background-size:400% 400%;border-radius:var(--radius-full);z-index:-1;animation:active-gradient 2s ease infinite}}&.loading{pointer-events:none;opacity:.7;&:before{content:"";position:absolute;inset:0;translate:0;background:none;border:2px solid oklch(100% 0 0 / 30%);border-top-color:#fff;border-radius:50%;width:1rem;height:1rem;margin:auto;animation:spin 1s linear infinite}}@container (max-width: 640px){min-width:8.75rem;padding:var(--space-3) var(--space-4);font-size:var(--text-sm)}@container (max-width: 480px){min-width:7.5rem;padding:var(--space-2) var(--space-4)}}.theme-button-pro-play{background:linear-gradient(135deg,#414853,#272e38);&:after{content:"⚡";position:absolute;top:50%;right:var(--space-2);translate:0 -50%;font-size:var(--text-sm);opacity:.7}&:hover{background:linear-gradient(135deg,#272e38,#141b24)}@container (max-width: 480px){&:after{display:none}}}.theme-button-power-up{background:linear-gradient(135deg,#2d5ed4,#1844b9);&:after{content:"🚀";position:absolute;top:50%;right:var(--space-2);translate:0 -50%;font-size:var(--text-sm);opacity:.8}&:hover{background:linear-gradient(135deg,#1844b9,#04299e)}@container (max-width: 480px){&:after{display:none}}}.theme-button-sparkle-play{background:linear-gradient(135deg,#e8179b,oklch(54% .25 350));&:after{content:"✨";position:absolute;top:50%;right:var(--space-2);translate:0 -50%;font-size:var(--text-sm);animation:sparkle-twinkle 1.5s ease-in-out infinite}&:hover{background:linear-gradient(135deg,oklch(54% .25 350),oklch(46% .25 350))}@container (max-width: 480px){&:after{display:none}}}.theme-button-label{display:block;font-size:var(--text-xs);opacity:.9;margin-top:var(--space-1);font-weight:400;text-transform:none;letter-spacing:normal}.theme-power-up{.theme-selector-title,.theme-button{font-family:var(--font-display-power)}.theme-selector-title{text-transform:uppercase;letter-spacing:.1em}.theme-button{font-size:var(--text-lg)}.theme-selector-section: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;z-index:0}}.theme-sparkle-play{.theme-selector-title,.theme-button{font-family:var(--font-display-sparkle)}.theme-button{text-transform:none;letter-spacing:normal}.theme-selector-section:after{content:"🌟💫⭐";position:absolute;top:var(--space-4);right:var(--space-4);font-size:var(--text-lg);opacity:.2;animation:sparkle-float 3s ease-in-out infinite;z-index:0}}}@keyframes rotate-gradient{to{transform:rotate(360deg)}}@keyframes palette-bounce{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(5deg)}}@keyframes active-gradient{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes sparkle-twinkle{0%,to{opacity:.8;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.2)}}@keyframes sparkle-float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(10deg)}}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@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)}}