.filters-section{padding:2rem 5%;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);position:-webkit-sticky;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.filters-container{max-width:1400px;margin:0 auto}.filters-row{gap:1.5rem;justify-content:space-between;margin-bottom:1.5rem}.filter-group,.filters-row{display:flex;flex-wrap:wrap;align-items:center}.filter-group{gap:1rem}.filter-label{font-weight:600;color:var(--text-secondary);font-size:.875rem;text-transform:uppercase;letter-spacing:.5px}.filter-buttons{display:flex;gap:.75rem;flex-wrap:wrap}.filter-btn{padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:20px;color:var(--text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-block}.filter-btn:hover{background:rgba(124,58,237,.1);border-color:var(--primary-purple);color:var(--text-primary)}.filter-btn.active{background:var(--primary-purple);border-color:var(--primary-purple);color:white}.search-box{position:relative;min-width:300px}.search-input{width:100%;padding:.75rem 1rem .75rem 2.5rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:25px;color:var(--text-primary);font-size:.875rem;outline:none;transition:all .2s ease}.search-input:focus{border-color:var(--primary-purple);background:rgba(124,58,237,.05)}.search-input::placeholder{color:var(--text-muted)}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%)}.results-info,.search-icon{color:var(--text-muted);font-size:.875rem}.results-info{display:flex;justify-content:space-between;align-items:center}.sort-dropdown{padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:.875rem;cursor:pointer;outline:none}.games-section{padding:3rem 5%}.games-container{max-width:1400px;margin:0 auto}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-gap:2rem;gap:2rem}.game-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:15px;overflow:hidden;transition:all .3s ease;cursor:pointer;position:relative}.game-card:hover{border-color:var(--primary-purple);transform:translateY(-5px);box-shadow:0 15px 40px rgba(124,58,237,.2)}.game-header{position:relative;height:200px;background:linear-gradient(135deg,var(--primary-purple),var(--primary-cyan));display:flex;align-items:center;justify-content:center;overflow:hidden}.game-icon{font-size:4rem;color:white;z-index:2;position:relative}.game-difficulty{position:absolute;top:1rem;right:1rem;padding:.25rem .75rem;background:rgba(0,0,0,.7);color:white;border-radius:12px;font-size:.75rem;font-weight:600;z-index:2}.difficulty-easy{background-color:var(--success)!important}.difficulty-medium{background-color:var(--warning)!important}.difficulty-hard{background-color:var(--error)!important}.game-content{padding:1.5rem}.game-section-header{font-size:1.5rem;font-weight:600;margin-top:1rem;margin-bottom:1rem;color:var(--text-primary);text-align:center}.game-title-header{font-size:1.25rem;font-weight:700;margin-bottom:.5rem;color:var(--text-primary)}.game-description{color:var(--text-secondary);font-size:.875rem;line-height:1.6;margin-bottom:1rem}.game-meta{gap:1rem;margin:.75rem 0;flex-wrap:wrap}.game-tags{display:flex;flex-wrap:wrap;gap:.5rem;flex:1 1}.game-tag{padding:.25rem .75rem;background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:1rem;font-size:.75rem;font-weight:500;transition:all .2s ease}.game-tag:hover{background:var(--primary-purple);color:var(--text-primary);border-color:var(--primary-purple)}.game-rating{gap:.5rem;white-space:nowrap}.game-rating,.rating-stars{display:flex;align-items:center}.rating-stars{gap:.25rem;color:var(--text-secondary);font-size:.875rem;font-weight:500}.rating-stars .star{color:#fbbf24;font-size:1rem}.rating-stars .star.filled{color:#f59e0b}.rating-stars .star.empty{color:var(--text-muted)}.rating-stars:before{content:"👍";margin-right:.25rem;font-size:.875rem}@media (max-width:640px){.game-meta{flex-direction:column;align-items:flex-start;gap:.75rem}.game-rating{align-self:flex-end}.game-tag{font-size:.7rem;padding:.2rem .6rem}}.game-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;font-size:.75rem;color:var(--text-muted)}.game-actions{display:flex;gap:.75rem}.category-filters{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:1.5rem}.category-item{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.5rem 1rem;border-radius:.5rem;background:var(--bg-card);border:1px solid var(--border-color);transition:all .2s ease}.category-item:hover{border-color:var(--border-accent);box-shadow:0 2px 8px rgba(124,58,237,.1)}.category-checkbox{width:1rem;height:1rem;border-radius:.25rem;border:2px solid var(--border-color);background:var(--bg-secondary);cursor:pointer;transition:all .2s ease}.category-checkbox:checked{background:var(--primary-purple);border-color:var(--primary-purple)}.category-checkbox:focus{outline:2px solid var(--primary-purple);outline-offset:2px}.category-label{color:var(--text-secondary);-webkit-user-select:none;-moz-user-select:none;user-select:none}.category-label,.clear-btn{font-size:.875rem;font-weight:500}.clear-btn{padding:.5rem 1rem;background:var(--error);color:var(--text-primary);border:none;border-radius:.375rem;cursor:pointer;transition:background .2s ease}.clear-btn:hover{background:#dc2626}.clear-btn:focus{outline:2px solid var(--error);outline-offset:2px}@media (max-width:640px){.category-filters{gap:.75rem}.category-item{padding:.375rem .75rem}.category-label{font-size:.8125rem}}.game-image{width:100%;max-width:200px;height:120px;object-fit:cover;border-radius:.5rem;border:1px solid var(--border-color);transition:transform .2s ease}.game-image:hover{transform:scale(1.02);border-color:var(--border-accent)}.game-image-aspect{width:100%;max-width:180px;aspect-ratio:16/9;object-fit:cover;border-radius:.5rem;border:1px solid var(--border-color)}.game-image-compact{width:100%;max-width:150px;height:90px;object-fit:cover;border-radius:.375rem;border:1px solid var(--border-color)}@media (max-width:640px){.game-image{max-width:160px;height:100px}}@media (max-width:768px){.filter-toggle{display:flex}.filters-content{display:none}.filters-content.expanded{display:block}.filters-section{position:relative}}.filter-toggle{display:none}@media (max-width:768px){.filter-toggle{display:flex}}.filter-toggle{width:100%;padding:1rem 1.5rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;color:var(--text-primary);font-size:1rem;font-weight:600;cursor:pointer;text-align:left;align-items:center;justify-content:space-between;transition:all .2s ease;margin-bottom:.25rem;box-shadow:0 1px 3px rgba(0,0,0,.1)}.filter-toggle:hover{background:rgba(124,58,237,.05);border-color:var(--primary-purple);transform:translateY(-1px)}.filter-toggle:active{transform:translateY(0)}.filter-toggle:focus{outline:2px solid var(--primary-purple);outline-offset:2px}.filter-toggle-icon{transition:transform .3s ease;font-size:1.1rem;color:var(--primary-purple)}.filter-toggle[aria-expanded=true] .filter-toggle-icon{transform:rotate(180deg)}.no-games-message{text-align:center;padding:3rem 2rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;margin:2rem auto;max-width:500px}.no-games-message p{color:var(--text-secondary);font-size:1.125rem;margin-bottom:1.5rem;font-weight:500}.no-games-message button{padding:.875rem 2rem;background:var(--primary-purple);color:white;border:none;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px rgba(124,58,237,.3);min-height:44px;min-width:44px}.no-games-message button:hover{background:#6d28d9;transform:translateY(-2px);box-shadow:0 6px 20px rgba(124,58,237,.4)}.no-games-message button:active{transform:translateY(0);box-shadow:0 2px 8px rgba(124,58,237,.3)}.no-games-message button:focus{outline:2px solid var(--primary-purple);outline-offset:2px}@media (max-width:768px){.no-games-message{margin:1.5rem 1rem;padding:2rem 1.5rem}.no-games-message p{font-size:1rem;margin-bottom:1.25rem}.no-games-message button{padding:1rem 1.5rem;font-size:.95rem;width:100%;max-width:280px}}@media (max-width:480px){.no-games-message{padding:1.5rem 1rem}.no-games-message button{padding:.875rem 1.25rem;font-size:.9rem}}.end-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000}.end-modal-content{background:var(--bg-card);border-radius:.75rem;padding:2rem;max-width:400px;width:90%;text-align:center}.end-title{color:var(--text-primary);font-size:1.5rem;font-weight:600;margin:0 0 1.5rem}.finish-container{max-width:600px;margin:2rem auto;border-radius:1rem;animation:slideUp .5s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.finish-container{max-width:900px;width:95%;margin:1rem auto;padding:2rem;text-align:center;background:var(--bg-card);border-radius:12px;border:1px solid var(--border-color)}.finish-message{font-size:1.5rem;font-weight:500;margin:0 0 2rem;line-height:1.3;color:#ffff}.finish-stats{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem;width:100%}.finish-stat-box{background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(8,145,178,.08));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(124,58,237,.2);padding:.875rem 1.5rem;border-radius:8px;display:flex;align-items:center;gap:1rem;transition:all .2s ease;width:100%}.finish-stat-box:hover{border-color:var(--primary-purple);background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(8,145,178,.12));transform:translateX(4px)}.finish-stat-icon{font-size:1.5rem;min-width:1.5rem}.finish-stat-text{color:var(--text-secondary);font-size:1rem;font-weight:500;flex:1 1;text-align:left}.finish-stat-text strong{color:var(--text-primary);font-size:1.1rem;font-weight:600}@media (max-width:768px){.finish-container{width:90%;padding:1.5rem;margin:.5rem auto}.finish-message{font-size:1.6rem}.finish-stat-box{padding:.75rem 1rem}}@media (max-width:480px){.finish-container{width:95%;padding:1rem}.finish-message{font-size:1.4rem}.finish-stats{gap:.5rem}.finish-stat-box{padding:.625rem .875rem}.finish-stat-icon{font-size:1.25rem}.finish-stat-text{font-size:.9rem}}.game-message{color:var(--text-primary);font-size:1.5rem;font-weight:500;margin:1.5rem 0;line-height:1.4;text-align:center;justify-content:center}.game-completion{background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(124,58,237,.1));border:1px solid var(--success);border-radius:12px;padding:2rem;margin:2rem 0;text-align:center}.game-completion .game-message{color:var(--success);font-size:1.5rem;font-weight:500;margin:1.5rem 0;line-height:1.4;text-align:center;justify-content:center}.game-button-fun{background:linear-gradient(135deg,var(--primary-cyan),var(--primary-purple));color:var(--text-primary);padding:1rem 2rem;font-size:1.1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;margin:.5rem;min-width:200px;justify-content:center}.game-button-fun:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 4px 15px rgba(8,145,178,.3)}.game-button-fun:focus{outline:2px solid var(--primary-cyan);outline-offset:2px}.wide-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.wide-modal-content{background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.05));border-radius:12px;width:100%;max-width:1200px;max-height:85vh;overflow-y:auto;padding:2rem;position:relative;border:1px solid rgba(255,255,255,.3);transition:background .2s,transform .2s,border-color .2s}.game-heading{color:var(--text-primary);font-size:1.5rem;font-weight:500;margin:0 0 2rem;text-align:center;padding-right:80px}.close-button{position:absolute;top:1.5rem;right:1.5rem;background:var(--error);color:var(--text-primary);border:none;border-radius:6px;padding:.5rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.close-button:hover{background:#dc2626;transform:scale(1.05)}.close-button:focus{outline:2px solid var(--error);outline-offset:2px}.summary-item{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem;margin-bottom:1.5rem}.summary-item:last-child{margin-bottom:0}.summary-question{color:var(--text-secondary);font-size:1rem;line-height:1.6;margin-bottom:1rem}.summary-question:last-child{margin-bottom:0}.summary-question strong{color:var(--text-primary);font-weight:600;display:block;margin-bottom:.5rem}.summary-question span{color:var(--text-secondary);display:block}@media (max-width:768px){.wide-modal-content{max-width:95%;padding:1.5rem;max-height:90vh}.game-heading{font-size:1.5rem;padding-right:70px}.close-button{top:1rem;right:1rem;padding:.4rem .8rem;font-size:.8rem}.summary-item{padding:1rem;margin-bottom:1rem}.summary-question{font-size:.95rem}}@media (max-width:480px){.wide-modal-overlay{padding:.5rem}.wide-modal-content{padding:1rem;border-radius:8px}.game-heading{font-size:1.3rem;margin-bottom:1.5rem;padding-right:60px}.close-button{padding:.3rem .6rem;font-size:.75rem}.summary-item{padding:.75rem}.summary-question{font-size:.9rem;line-height:1.5}}.wide-modal-content::-webkit-scrollbar{width:6px}.wide-modal-content::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:3px}.wide-modal-content::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.wide-modal-content::-webkit-scrollbar-thumb:hover{background:var(--border-accent)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.3);border-radius:16px;box-shadow:0 8px 32px rgba(240,147,251,.3);margin:20px 0;min-height:50px;position:relative;overflow:hidden}.empty-state:before{content:"🎮";font-size:48px;margin-bottom:16px;animation:bounce 2s infinite}.empty-state-text{color:white;font-size:18px;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.2);letter-spacing:.5px}@media (max-width:480px){.empty-state{padding:30px 15px;min-height:150px}.empty-state-text{font-size:16px}}.join-input{width:100%;padding:16px 20px;font-size:16px;border:2px solid transparent;border-radius:12px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 20px rgba(240,147,251,.2);transition:all .3s ease;font-weight:500;color:#4a5568;margin-bottom:16px}.join-input::placeholder{color:#a0aec0;font-weight:400}.join-input:focus{outline:none;border:2px solid #f093fb;background:white;box-shadow:0 8px 32px rgba(240,147,251,.4);transform:translateY(-2px)}.join-input:hover{box-shadow:0 6px 24px rgba(240,147,251,.3);transform:translateY(-1px)}@media (max-width:480px){.join-input{padding:14px 16px;font-size:15px}}.fun-btn-container{gap:.75rem;margin-top:1rem}.fun-btn,.fun-btn-container{display:flex;justify-content:center}.fun-btn{align-items:center;gap:.5rem;padding:.5rem 1rem;border:2px solid var(--border-color);border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s ease;flex:0 0 auto;min-width:auto}.fun-btn-first{background:var(--bg-card);color:var(--text-secondary);border-color:var(--primary-purple)}.fun-btn-first:hover{background:var(--primary-purple);color:var(--text-primary);border-color:var(--primary-purple-dark);transform:translateY(-2px);box-shadow:0 4px 12px rgba(124,58,237,.3)}.fun-btn-second{background:var(--bg-card);color:var(--text-secondary);border-color:var(--primary-cyan)}.fun-btn-second:hover{background:var(--primary-cyan);color:var(--text-primary);border-color:#0891b2;transform:translateY(-2px);box-shadow:0 4px 12px rgba(8,145,178,.3)}.fun-btn:active{transform:translateY(0)}.fun-btn:focus{outline:2px solid var(--border-accent);outline-offset:2px}.fun-icon{font-size:1rem}@media (max-width:640px){.fun-btn-container{flex-direction:column;align-items:center}.fun-btn{gap:.5rem;width:100%;max-width:250px}.fun-btn-first{padding:.625rem 1.25rem;font-size:.8125rem}}.game-generic-message{background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(8,145,178,.15));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(124,58,237,.3);border-radius:16px;padding:clamp(1rem,3vw,2rem);margin:1rem auto;max-width:800px;text-align:center;color:var(--text-primary);font-size:clamp(1.5rem,1.5vw,1.5rem);font-weight:500;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(124,58,237,.2);animation:glow 3s ease-in-out infinite alternate}.game-generic-message:before{content:"🎮 ";margin-right:.5rem;animation:bounce 2s infinite}@keyframes glow{0%{border-color:rgba(124,58,237,.3)}to{border-color:rgba(8,145,178,.5)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@media (prefers-reduced-motion:reduce){.game-generic-message,.game-generic-message:before{animation:none}}.generic-error-container{background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(220,38,38,.15));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(239,68,68,.4);border-radius:16px;padding:clamp(1.5rem,4vw,2.5rem);margin:2rem auto;max-width:500px;text-align:center;box-shadow:0 10px 40px rgba(239,68,68,.2);animation:errorPulse 2s ease-in-out infinite alternate}.generic-error-message{color:var(--text-primary);font-size:clamp(1.1rem,3vw,1.4rem);font-weight:600;margin:0 0 1.5rem;text-shadow:0 2px 4px rgba(0,0,0,.3);animation:shake .5s ease-in-out}@keyframes errorPulse{0%{border-color:rgba(239,68,68,.4);box-shadow:0 10px 40px rgba(239,68,68,.2)}to{border-color:rgba(239,68,68,.6);box-shadow:0 15px 50px rgba(239,68,68,.3)}}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@media (prefers-reduced-motion:reduce){.generic-error-container,.generic-error-message{animation:none}}