.browse-page{padding:var(--space-2) 0 var(--space-10) 0;scroll-behavior:smooth;min-height:100vh}.browse-page h1{font-size:var(--font-size-2xl);margin-bottom:var(--space-6);color:var(--color-primary-500)}.search-and-filters-bar{align-items:flex-start;gap:var(--space-6);margin-bottom:var(--space-6);padding:var(--space-5);background-color:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);display:flex}.search-column{align-items:center;gap:var(--space-3);flex:1;min-width:0;display:flex}.search-input-container{width:100%;max-width:500px;position:relative}.search-column .suggest-game-btn-inline{padding:var(--space-3) var(--space-5);background-color:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-all);white-space:nowrap;font-size:15px}.search-column .suggest-game-btn-inline:hover{border-color:var(--color-primary-500);color:var(--color-primary-500)}.filters-column{gap:var(--space-4);flex-direction:column;flex-shrink:0;display:flex}.search-input-container input{width:100%;padding:var(--space-3) var(--space-5);font-size:var(--font-size-base);background-color:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);color:var(--color-text-primary);transition:var(--transition-colors);padding-right:50px}.search-input-container input:focus{border-color:var(--color-primary-500);outline:none}.search-input-container input.searching{border-color:var(--color-primary-500)}.search-spinner{pointer-events:none;position:absolute;top:50%;right:15px;transform:translateY(-50%)}.search-spinner-icon{border:2px solid var(--color-border-default);border-top:2px solid var(--color-primary-500);border-radius:var(--radius-full);width:16px;height:16px;animation:1s linear infinite spin}.search-bar input{width:100%;max-width:500px;padding:var(--space-3) var(--space-5);font-size:var(--font-size-base);background-color:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);color:var(--color-text-primary);transition:var(--transition-colors)}.search-bar input:focus{border-color:var(--color-primary-500);outline:none}.games-grid{gap:var(--space-3);margin-bottom:var(--space-10);will-change:auto;grid-auto-rows:156.92px;display:grid;position:relative}.games-grid.has-year-dividers{grid-auto-rows:auto}.year-divider{align-items:center;gap:var(--space-4);padding:var(--space-1) 0;grid-column:1/-1;display:flex}.year-divider-label{font-size:var(--font-size-md);font-weight:var(--font-weight-bold);color:var(--color-text-primary);white-space:nowrap}.year-divider:after{content:"";background:var(--color-border-default);flex:1;height:1px}.game-card{background-color:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);transition:var(--transition-all);cursor:pointer;color:var(--color-text-primary);background-position:50%;background-repeat:no-repeat;background-size:cover;width:335.75px;height:156.92px;text-decoration:none;animation:.4s ease-out backwards fadeInUp;display:flex;position:relative;overflow:hidden}.game-card:first-child{animation-delay:0s}.game-card:nth-child(2){animation-delay:50ms}.game-card:nth-child(3){animation-delay:.1s}.game-card:nth-child(4){animation-delay:50ms}.game-card:nth-child(5){animation-delay:.1s}.game-card:nth-child(6){animation-delay:.15s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.game-card:hover{border-color:var(--color-primary-500);transform:translateY(-5px);box-shadow:0 10px 30px #09bec833}.game-placeholder{z-index:0;justify-content:center;align-items:center;width:100%;height:100%;font-size:64px;display:flex;position:absolute;top:0;left:0}.game-rating-permanent{z-index:5;align-items:center;gap:var(--space-2);animation:.3s ease-out fadeIn;display:flex;position:absolute;bottom:10px;left:10px}.game-rating-permanent .rating-badge{align-items:center;margin:0;display:inline-flex}@keyframes fadeInRating{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.loading{text-align:center;padding:var(--space-12);font-size:var(--font-size-lg);color:var(--color-text-secondary)}.no-results{text-align:center;padding:var(--space-12);color:var(--color-text-secondary)}.no-results .suggestion{font-size:var(--font-size-sm);margin-top:var(--space-3);color:var(--color-text-secondary);opacity:.8}.no-results .suggest-game-btn{margin-top:var(--space-5);padding:var(--space-3) var(--space-5);color:var(--color-text-primary);border-radius:var(--radius-lg);font-size:15px;font-weight:var(--font-weight-medium);cursor:pointer;transition:var(--transition-all);background:linear-gradient(135deg,#6366f1,#4f46e5);border:none}.no-results .suggest-game-btn:hover{background:linear-gradient(135deg,#7c7ff7,#6366f1);transform:translateY(-2px);box-shadow:0 4px 12px #6366f14d}.loading-more{padding:var(--space-8) var(--space-5);color:var(--color-text-secondary);flex-direction:column;justify-content:center;align-items:center;display:flex}.loading-more p{margin-top:var(--space-4);font-size:var(--font-size-base)}.end-message{text-align:center;padding:var(--space-6) var(--space-5);color:var(--color-text-secondary);opacity:.8;font-style:italic}.filters-group{align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.filter-label{font-size:15px;font-weight:var(--font-weight-semibold);color:var(--color-text-primary);white-space:nowrap}.filter-buttons{gap:var(--space-2);flex-wrap:wrap;display:flex}.filter-btn{padding:var(--space-2) var(--space-4);background-color:var(--color-bg-hover);border:2px solid var(--color-border-default);border-radius:var(--radius-lg);color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:var(--transition-all);white-space:nowrap;align-items:center;gap:var(--space-1);display:inline-flex}.filter-icon{vertical-align:middle;width:auto;height:18px;display:inline-block}.filter-btn:hover{border-color:var(--color-primary-500);background-color:var(--color-bg-surface);transform:translateY(-1px)}.filter-btn.active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:var(--color-bg-base);font-weight:var(--font-weight-semibold)}.filter-btn.filter-platinum.active{background:linear-gradient(135deg,#b4b4ff 0%,#8989ff 100%);border-color:#8989ff}.filter-btn.filter-gold.active{background:linear-gradient(135deg, var(--color-rating-gold) 0%, #ffb800 100%);border-color:#ffb800}.filter-btn.filter-silver.active{background:linear-gradient(135deg, #e0e0e0 0%, var(--color-rating-silver) 100%);border-color:var(--color-rating-silver)}.filter-btn.filter-bronze.active{background:linear-gradient(135deg, var(--color-rating-bronze) 0%, #b8732d 100%);color:var(--color-text-primary);border-color:#b8732d}.filter-btn.filter-broken.active{color:var(--color-text-primary);background:linear-gradient(135deg,#f44 0%,#c00 100%);border-color:#c00}.filter-btn.filter-release-date.active{color:var(--color-text-primary);background:linear-gradient(135deg,#7c3aed 0%,#5b21b6 100%);border-color:#5b21b6}.game-card-overlay{padding:var(--space-4) var(--space-3) var(--space-3);opacity:0;transition:opacity var(--transition-base);z-index:1;background:linear-gradient(#0000 0%,#000c 30%,#000000f2 100%);position:absolute;bottom:0;left:0;right:0}.game-card:hover .game-card-overlay{opacity:1}.add-to-collection-card-btn{color:var(--color-text-primary);cursor:pointer;opacity:0;transition:opacity var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);z-index:5;text-shadow:0 1px 3px #000c;background:0 0;border:none;padding:0;font-size:1.3rem;line-height:1;position:absolute;top:8px;right:8px}.game-card:hover .add-to-collection-card-btn{opacity:1}.add-to-collection-card-btn:hover{color:var(--color-primary-500);transform:scale(1.2)}.game-card-info{gap:var(--space-2);flex-direction:column;display:flex}.game-card-title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:#fff;line-height:var(--line-height-tight);text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;display:-webkit-box;overflow:hidden}.game-rating-container{align-items:center;gap:var(--space-2);display:flex}.rating-badge{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.5px;background:var(--color-bg-hover);cursor:default;line-height:1;display:inline-flex;position:relative;overflow:hidden}.rating-badge-fill{height:100%;width:var(--confidence,0%);transition:width var(--transition-base);border-radius:var(--radius-md);position:absolute;top:0;left:0}.rating-badge-content{z-index:1;align-items:center;gap:var(--space-1);color:#fff;text-shadow:0 1px 3px #000000e6;display:inline-flex;position:relative}.rating-icon{vertical-align:middle;width:auto;height:16px;display:inline-block}.rating-badge.rating-platinum .rating-badge-fill{background:linear-gradient(135deg,#b4b4ff 0%,#8989ff 100%)}.rating-badge.rating-gold .rating-badge-fill{background:linear-gradient(135deg, var(--color-rating-gold) 0%, #ffb800 100%)}.rating-badge.rating-silver .rating-badge-fill{background:linear-gradient(135deg, #e0e0e0 0%, var(--color-rating-silver) 100%)}.rating-badge.rating-bronze .rating-badge-fill{background:linear-gradient(135deg, var(--color-rating-bronze) 0%, #b8732d 100%)}.rating-badge.rating-broken .rating-badge-fill{background:linear-gradient(135deg,#f44 0%,#c00 100%)}.game-steamdeck-playability{z-index:4;animation:.3s ease-out fadeIn;position:absolute;bottom:10px;right:10px}.steamdeck-badge{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);font-size:11px;font-weight:var(--font-weight-semibold);letter-spacing:.3px;background:var(--color-border-hover);cursor:default;line-height:1;display:inline-flex;position:relative;overflow:hidden}.steamdeck-badge-fill{height:100%;width:var(--confidence,0%);transition:width var(--transition-base);border-radius:var(--radius-md);position:absolute;top:0;left:0}.steamdeck-badge-content{z-index:1;align-items:center;gap:var(--space-1);color:var(--color-text-primary);text-shadow:0 1px 2px #00000080;display:inline-flex;position:relative}.steamdeck-icon{align-items:center;font-size:14px;line-height:1;display:inline-flex}.steamdeck-icon .sd-icon{stroke:currentColor;fill:none;width:14px;height:14px}.filter-icon.sd-icon{stroke:currentColor;fill:none;width:18px;height:18px}.steamdeck-badge.steamdeck-verified .steamdeck-badge-fill{background:linear-gradient(135deg,#4ade80 0%,#22c55e 100%)}.steamdeck-badge.steamdeck-playable .steamdeck-badge-fill{background:linear-gradient(135deg,#60a5fa 0%,#3b82f6 100%)}.steamdeck-badge.steamdeck-unsupported .steamdeck-badge-fill{background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%)}.steamdeck-badge.steamdeck-unplayable .steamdeck-badge-fill{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%)}.game-reports-count{font-size:var(--font-size-xs);color:#ffffffe6;font-weight:var(--font-weight-medium)}.adult-badge{color:var(--color-text-primary);font-size:11px;font-weight:var(--font-weight-bold);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);z-index:5;pointer-events:none;box-shadow:var(--shadow-md);background:#dc2626f2;position:absolute;top:8px;right:8px}.game-card.blurred{background-image:none!important}.game-card.blurred:before{content:"";background-image:var(--bg-image);filter:blur(20px);z-index:0;border-radius:var(--radius-xl);background-position:50%;background-size:cover;position:absolute;inset:0}.game-card.blurred .game-card-overlay,.game-card.blurred .adult-badge,.game-card.blurred .game-rating-permanent,.game-card.blurred .game-steamdeck-playability{z-index:6}.game-card.blurred:hover:before{filter:blur(10px)}.age-confirmation-modal-overlay{z-index:var(--z-modal);background:#000c;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.age-confirmation-modal{background:var(--color-bg-surface);border:2px solid var(--color-border-default);border-radius:var(--radius-2xl);padding:var(--space-10);text-align:center;width:90%;max-width:500px;animation:.3s ease-out slideUp;box-shadow:0 10px 40px #00000080}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.age-confirmation-modal h2{font-size:var(--font-size-xl);color:var(--color-text-primary);margin-bottom:var(--space-4);font-weight:var(--font-weight-bold)}.age-confirmation-modal p{font-size:var(--font-size-base);color:var(--color-text-secondary);margin-bottom:var(--space-6);line-height:var(--line-height-relaxed)}.age-confirmation-buttons{gap:var(--space-3);justify-content:center;display:flex}.age-confirmation-buttons button{padding:var(--space-3) var(--space-6);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);border:2px solid var(--color-border-default);border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition-all)}.age-confirmation-buttons .confirm-button{background:var(--color-primary-500);color:var(--color-bg-base);border-color:var(--color-primary-500)}.age-confirmation-buttons .confirm-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #09bec866}.age-confirmation-buttons .cancel-button{color:var(--color-text-primary);border-color:var(--color-border-default);background:0 0}.age-confirmation-buttons .cancel-button:hover{background:var(--color-bg-hover);border-color:var(--color-primary-500)}@media (max-width:1200px){.search-and-filters-bar{align-items:stretch;gap:var(--space-5);flex-direction:column}.search-column{width:100%}.search-input-container{max-width:100%}.search-column .suggest-game-btn-inline{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm)}.filters-column{width:100%}.filters-group{justify-content:flex-start}}@media (max-width:768px){.game-placeholder{font-size:40px}.game-card-title{font-size:var(--font-size-sm)}.rating-badge{padding:3px var(--space-2);font-size:11px}.game-reports-count{font-size:11px}.filter-btn .filter-label{display:none}.filter-btn{padding:var(--space-2) 10px;gap:var(--space-1)}.filter-btn .filter-icon{height:20px}.filter-btn .sort-arrow{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold)}.filter-buttons{gap:var(--space-1);flex-wrap:nowrap;justify-content:center}.filters-group{gap:var(--space-2);justify-content:center}}@media (max-width:576px){.game-placeholder{font-size:32px}}@media (max-width:480px){.game-placeholder{font-size:28px}}[data-theme=light] .rating-badge-content{color:var(--color-text-primary);text-shadow:none}
