.cl-page{--cl-accent:var(--cp-accent,var(--color-accent,#f3631c));--cl-purple:var(--cp-purple,var(--color-primary,#441170));--cl-bg:var(--cp-bg,var(--color-brand-bg,var(--background,#f9fafb)));--cl-text:var(--cp-text,var(--color-brand-text,var(--foreground,#111827)));--cl-muted:var(--cp-text2,var(--color-text-muted,color-mix(in srgb,var(--cl-text) 55%,transparent)));--cl-surface:var(--cp-surface,var(--color-surface,var(--background,#ffffff)));--cl-surface2:var(--cp-surface2,color-mix(in srgb,var(--cl-surface) 92%,var(--cl-text) 8%));--cl-border:var(--cp-border,var(--color-border,color-mix(in srgb,var(--cl-text) 14%,transparent)));--cl-surface-glass:color-mix(in srgb,var(--cl-surface) 88%,transparent);--cl-card-from:var(--cl-surface);--cl-card-to:var(--cl-surface2);--cl-card-media-from:color-mix(in srgb,var(--cl-surface) 55%,var(--cl-purple) 45%);--cl-card-media-to:color-mix(in srgb,var(--cl-surface) 45%,var(--cl-text) 55%);min-height:50vh;color:var(--cl-text);background:linear-gradient(to top,color-mix(in srgb,var(--cl-purple) 10%,transparent),color-mix(in srgb,var(--cl-accent) 10%,transparent),var(--cl-bg));transition:background-color .3s,color .3s}.cl-container{width:100%;max-width:var(--container-width,1480px);margin-inline:auto;padding:.5rem 1rem 3rem}@media (min-width:640px){.cl-container{padding-inline:1.5rem}}.cl-toolbar{position:relative;z-index:30}.cl-toolbar--desktop{display:none}@media (min-width:640px){.cl-toolbar--desktop{display:flex;flex-direction:row;gap:1rem;margin:1rem 0 1.5rem;justify-content:space-between;align-items:center}}.cl-toolbar--mobile{display:flex;flex-direction:column;gap:.5rem;margin:.5rem 0 1rem}@media (min-width:640px){.cl-toolbar--mobile{display:none}}.cl-mobile-title-wrap,.cl-toolbar-title-wrap{display:flex;align-items:center;gap:.75rem}.cl-toolbar-title{font-size:1.5rem}.cl-mobile-title,.cl-toolbar-title{margin:0;font-weight:700;color:var(--cl-text)}.cl-mobile-title{font-size:1.125rem}.cl-count-badge{padding:.375rem .75rem;font-size:.875rem;font-weight:600;color:#fff;border-radius:999px;background:linear-gradient(to right,var(--cl-accent),color-mix(in srgb,var(--cl-accent) 80%,transparent));box-shadow:0 10px 15px -3px color-mix(in srgb,var(--cl-accent) 25%,transparent)}.cl-count-badge--sm{padding:.125rem .5rem;font-size:.75rem}.cl-search-wrap{position:relative;flex:1;max-width:28rem}.cl-search-input{width:100%;padding:.5rem 2.5rem;font-size:.875rem;color:var(--cl-text);background:var(--cl-surface-glass);backdrop-filter:blur(8px);border:1px solid var(--cl-border);border-radius:1rem;box-shadow:0 10px 15px -3px color-mix(in srgb,var(--cl-text) 8%,transparent);outline:none;transition:border-color .3s,box-shadow .3s,background .3s}.cl-search-input::placeholder{color:var(--cl-muted)}.cl-search-input:focus,.cl-search-input:hover{border-color:color-mix(in srgb,var(--cl-accent) 50%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--cl-accent) 20%,transparent)}.cl-search-input--mobile{border-radius:.5rem;padding-left:2rem;padding-right:2rem}.cl-search-icon{position:absolute;left:.5rem;top:50%;width:1.25rem;height:1.25rem;transform:translateY(-50%);color:var(--cl-muted);pointer-events:none}.cl-search-icon--mobile{width:1rem;height:1rem}.cl-search-clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);color:var(--cl-muted);transition:color .3s}.cl-search-clear:hover{color:var(--cl-accent)}.cl-sort-wrap{position:relative;flex-shrink:0;z-index:40}.cl-sort-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .625rem;font-size:.875rem;color:var(--cl-muted);background:var(--cl-surface-glass);backdrop-filter:blur(8px);border:1px solid var(--cl-border);border-radius:1rem;box-shadow:0 10px 15px -3px color-mix(in srgb,var(--cl-text) 8%,transparent);transition:border-color .3s,background .3s,color .3s}.cl-sort-btn:hover{border-color:color-mix(in srgb,var(--cl-accent) 50%,transparent);color:var(--cl-accent)}.cl-sort-btn--mobile{gap:.25rem;padding:.375rem .625rem;border-radius:.5rem;font-size:.75rem}.cl-sort-current{color:var(--cl-muted)}.cl-sort-btn:hover .cl-sort-current{color:var(--cl-accent)}.cl-sort-current--mobile{font-size:.75rem}.cl-sort-menu{position:absolute;right:0;top:calc(100% + .5rem);z-index:50;width:12rem;overflow:hidden;border-radius:1rem;background:color-mix(in srgb,var(--cl-surface) 95%,transparent);backdrop-filter:blur(16px);border:1px solid var(--cl-border);box-shadow:0 25px 50px -12px color-mix(in srgb,#000 20%,transparent)}.cl-sort-menu--mobile{width:8rem;border-radius:.5rem}.mobile-sort-option,.sort-option{display:flex;width:100%;align-items:center;gap:.75rem;padding:.5rem 1rem;font-size:.875rem;color:var(--cl-muted);text-align:left;transition:background .2s,color .2s}.mobile-sort-option{gap:.5rem;padding:.375rem .75rem;font-size:.75rem}.mobile-sort-option:hover,.sort-option:hover{background:color-mix(in srgb,var(--cl-text) 6%,transparent)}.sort-option-active{background:color-mix(in srgb,var(--cl-accent) 10%,transparent);color:var(--cl-accent)}.cl-mobile-top{display:flex;align-items:center;justify-content:space-between}.cl-mobile-search-btn{position:relative;display:block;width:100%;padding:.5rem .75rem .5rem 2rem;font-size:.875rem;text-align:left;color:var(--cl-muted);background:var(--cl-surface-glass);border:1px solid var(--cl-border);border-radius:.5rem;box-shadow:0 10px 15px -3px color-mix(in srgb,var(--cl-text) 8%,transparent);transition:border-color .3s,transform .3s,box-shadow .3s,background .3s}.cl-mobile-search-btn:hover{border-color:color-mix(in srgb,var(--cl-accent) 50%,transparent);transform:scale(1.02);box-shadow:0 8px 25px color-mix(in srgb,var(--cl-accent) 20%,transparent)}.category-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:3rem}@media (min-width:640px){.category-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:768px){.category-list{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1024px){.category-list{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (min-width:1280px){.category-list{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (min-width:1536px){.category-list{grid-template-columns:repeat(7,minmax(0,1fr))}}.game-card-wrapper{width:100%}.game-card{position:relative;display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;border-radius:.5rem;border:1px solid var(--cl-border);background:linear-gradient(145deg,var(--cl-card-from),var(--cl-card-to));box-shadow:0 6px 20px color-mix(in srgb,var(--cl-text) 10%,transparent);transform-style:preserve-3d;transition:all .5s cubic-bezier(.4,0,.2,1);text-decoration:none}.game-card:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 30%,color-mix(in srgb,var(--cl-accent) 10%,transparent) 50%,transparent 70%);opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:1}.game-card:hover{transform:scale(1.05);box-shadow:0 25px 50px color-mix(in srgb,var(--cl-accent) 40%,transparent);border-color:color-mix(in srgb,var(--cl-accent) 60%,transparent)}.game-card:hover:before{opacity:1}.game-card .aspect-\[5\/6\]{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--cl-card-media-from),var(--cl-card-media-to))}.game-card img{width:100%;height:100%;object-fit:cover;transition:all .7s cubic-bezier(.4,0,.2,1)}.game-card .first-image{transform:translateY(0)}.game-card:hover .first-image{transform:translateY(100%) scale(1.1)}.game-card .hover-image{transform:translateY(-100%) scale(1)}.game-card:hover .hover-image{transform:translateY(0) scale(1.15);filter:brightness(1.1) contrast(1.1) saturate(1.1) hue-rotate(20deg)}.game-card-badge{display:inline-flex;align-items:center;padding:.125rem .375rem;font-size:.75rem;font-weight:700;color:#fff;border-radius:.375rem;background:linear-gradient(to right,var(--cl-accent),color-mix(in srgb,var(--cl-accent) 90%,transparent));box-shadow:0 2px 8px color-mix(in srgb,var(--cl-accent) 40%,transparent);border:1px solid color-mix(in srgb,#fff 20%,transparent);backdrop-filter:blur(4px)}.game-card-foot{flex-shrink:0;padding:.25rem .5rem .55rem;background:linear-gradient(0deg,rgba(0,0,0,.95),rgba(0,0,0,.8) 50%,rgba(0,0,0,.4));backdrop-filter:blur(4px);border-top:1px solid color-mix(in srgb,#fff 10%,transparent)}@media (min-width:640px){.game-card-foot{padding:.5rem}}.game-card-name{margin:0;width:100%;font-size:.75rem;font-weight:700;line-height:1.25;text-align:center;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .3s}@media (min-width:640px){.game-card-name{font-size:.875rem}}.game-card:hover .game-card-name{color:var(--cl-accent);transform:scale(1.05)}.game-card-line{width:1.5rem;height:2px;margin:.25rem auto 0;border-radius:999px;background:linear-gradient(to right,transparent,var(--cl-accent),transparent);opacity:0;transform:scaleX(0);transition:all .5s}@media (min-width:640px){.game-card-line{width:2.5rem}}.game-card:hover .game-card-line{opacity:1;transform:scaleX(1)}.game-card-border-glow{position:absolute;inset:0;border-radius:.5rem;border:2px solid transparent;transition:border-color .5s;pointer-events:none}.game-card:hover .game-card-border-glow{border-color:color-mix(in srgb,var(--cl-accent) 60%,transparent)}.game-card-shine{position:absolute;inset:0;border-radius:.5rem;background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 15%,transparent),transparent);transform:translateX(-100%);transition:transform 1s;pointer-events:none}.game-card:hover .game-card-shine{transform:translateX(100%)}.game-card-corner-glow{position:absolute;top:0;right:0;width:2rem;height:2rem;border-bottom-left-radius:9999px;background:linear-gradient(to bottom right,transparent,transparent);transition:all .5s;pointer-events:none}.game-card:hover .game-card-corner-glow{background:linear-gradient(to bottom right,color-mix(in srgb,var(--cl-accent) 20%,transparent),transparent)}.cl-no-results{padding:3rem 1.5rem;text-align:center;color:var(--cl-muted)}.cl-no-results--visible{grid-column:1/-1;max-width:28rem;margin:0 auto}.cl-no-results-icon{width:4rem;height:4rem;margin:0 auto 1rem;color:var(--cl-muted)}.cl-no-results h3{margin:0 0 .5rem;font-size:1.125rem;font-weight:600;color:var(--cl-text)}.cl-no-results p{margin:0;font-size:.9375rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.page-enter{animation:fadeIn .5s ease-out}@keyframes cl-pulse{0%,to{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--cl-accent) 70%,transparent)}50%{transform:scale(1.1);box-shadow:0 0 0 10px transparent}}@media (max-width:640px){.category-list{gap:.5rem}.cl-sort-menu--mobile{z-index:9999}}