@media (max-width:768px){.controls-wrapper{position:relative;z-index:50;margin:15px 15px}#mobile-filter-trigger{display:flex!important;align-items:center;justify-content:center;width:100%;padding:14px;background:#252525;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#fff;font-weight:700;font-size:14px;box-shadow:0 4px 6px rgba(0,0,0,.2);cursor:pointer;transition:background .2s;gap:8px}#mobile-filter-trigger:active{background:#333;transform:scale(.98)}.controls{position:fixed;bottom:0;left:0;width:100%;height:auto;max-height:85vh;background:#1a1a1a;border-top:1px solid #333;border-top-left-radius:20px;border-top-right-radius:20px;padding:20px 20px 40px 20px;z-index:9999;transform:translateY(110%);transition:transform .3s cubic-bezier(.16, 1, .3, 1);box-shadow:0 -10px 50px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:15px;overflow-y:auto}.controls.active{transform:translateY(0)}.controls .select{margin-right:0;width:100%}.controls select{width:100%;height:50px;background:#000;border:1px solid #333;border-radius:8px;color:#fff;padding-left:10px;font-size:16px}.filter-header-mobile{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}.filter-header-mobile h3{margin:0;font-size:18px;color:#fff}.btn-close{background:rgba(255,255,255,.1);border:none;color:#fff;width:30px;height:30px;border-radius:50%;font-size:16px;display:flex;align-items:center;justify-content:center}.filter-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);z-index:9998;opacity:0;visibility:hidden;transition:opacity .3s;backdrop-filter:blur(4px)}.filter-overlay.active{opacity:1;visibility:visible}}.ladder-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:25px;padding:0 15px}.ladder-tab{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#888;padding:10px 20px;border-radius:20px;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s ease;display:flex;align-items:center;gap:6px}.ladder-tab.active{background:#f59e0b;color:#000;border-color:#f59e0b;box-shadow:0 0 15px rgba(245,158,11,.3)}.ladder-tab:hover:not(.active){background:rgba(255,255,255,.1);color:#fff}.text-gold{color:#f59e0b!important}.text-purple{color:#c084fc!important;text-shadow:0 0 10px rgba(192,132,252,.3)}.text-flame{color:#fb923c!important;text-shadow:0 0 10px rgba(251,146,60,.3)}@media (max-width:768px){.ladder-tabs{justify-content:space-between}.ladder-tab{padding:8px 12px;font-size:13px;flex:1;justify-content:center}.filter-footer-mobile{display:block}.desktop-only{display:none!important}}@media (min-width:769px){.filter-footer-mobile{display:none}.filter-header-mobile{display:none}.controls{display:flex;align-items:center;gap:15px;background:rgba(255,255,255,.03);padding:10px 20px;border-radius:8px;border:1px solid rgba(255,255,255,.05)}}.ladder-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:20px;padding:0 10px}.ladder-tab{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#888;padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:700;font-size:13px;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:6px;flex:1}.ladder-tab.active{background:#222;color:#fff;border-color:rgba(255,255,255,.2)}.ladder-tab[data-metric=power].active{box-shadow:0 4px 12px rgba(245,158,11,.2);border-bottom:2px solid #f59e0b;color:#f59e0b}.ladder-tab[data-metric=xp].active{box-shadow:0 4px 12px rgba(192,132,252,.2);border-bottom:2px solid #c084fc;color:#c084fc}.ladder-tab[data-metric=streak].active{box-shadow:0 4px 12px rgba(251,146,60,.2);border-bottom:2px solid #fb923c;color:#fb923c}#mobile-filter-trigger{display:none}@media (max-width:768px){#mobile-filter-trigger{display:flex!important;position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:1000;background:rgba(25,25,25,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);color:#fff;padding:14px 24px;border-radius:30px;font-weight:700;font-size:14px;box-shadow:0 8px 32px rgba(0,0,0,.5);gap:8px;transition:transform .2s;width:auto;min-width:160px}#mobile-filter-trigger:active{transform:translateX(-50%) scale(.95)}.controls{position:fixed;bottom:0;left:0;width:100%;background:#121212;border-top:1px solid #333;border-top-left-radius:24px;border-top-right-radius:24px;padding:24px;z-index:9999;transform:translateY(110%);transition:transform .35s cubic-bezier(.33, 1, .68, 1);box-shadow:0 -10px 60px rgba(0,0,0,.8);display:flex;flex-direction:column;max-height:85vh}.controls.active{transform:translateY(0)}.filter-header-mobile{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.filter-header-mobile h3{margin:0;font-size:20px;color:#fff;font-weight:800}.btn-close{background:#252525;border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:14px}.filter-body-scroll{overflow-y:auto;padding-bottom:20px}.select{margin-bottom:16px;width:100%}.select label{display:block;color:#888;font-size:12px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-weight:600}.controls select{width:100%;height:52px;background-color:#1e1e1e;border:1px solid #333;border-radius:12px;color:#fff;padding:0 16px;font-size:16px;font-weight:500;outline:0;appearance:none;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:right 16px top 50%;background-size:10px auto;transition:border-color .2s}.controls select:focus{border-color:#f59e0b}.filter-footer-mobile{margin-top:auto}#apply-filters-btn{width:100%;padding:16px;background:linear-gradient(135deg,#f59e0b,#d97706);border:none;border-radius:12px;color:#000;font-weight:800;font-size:16px;box-shadow:0 4px 15px rgba(245,158,11,.3)}.filter-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);backdrop-filter:blur(4px);z-index:9998;opacity:0;visibility:hidden;transition:all .3s}.filter-overlay.active{opacity:1;visibility:visible}.desktop-only{display:none!important}}@media (min-width:769px){.filter-footer-mobile,.filter-header-mobile{display:none}.controls{display:flex;gap:15px;align-items:center;background:rgba(255,255,255,.03);padding:12px 20px;border-radius:12px}}