/* Phone layout: bottom tab bar + account sheet. Only applies at phone widths. */
.mnav,.msheet{display:none}
@media (max-width:760px){
 /* Phones scroll by touch: no visible scrollbars anywhere, vertical or horizontal. */
 *{scrollbar-width:none!important}
 *::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
 .mnav{position:fixed;inset-inline:0;bottom:0;z-index:2147480000;display:flex;justify-content:space-around;align-items:center;padding:8px 10px max(20px,calc(env(safe-area-inset-bottom,0px) + 4px));background:rgba(21,21,27,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid #25252e;box-sizing:border-box}
 .mnav a,.mnav button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:58px;min-height:44px;justify-content:center;margin:0;padding:0;border:0;background:transparent;color:#a3a3b0;font-family:inherit;font-size:11px!important;font-weight:500;line-height:1.2;text-decoration:none;cursor:pointer;filter:none}
 .mnav svg{width:24px;height:24px}
 .mnav .on{color:#b4ff63}
 .mnav .mnav-go{min-width:0;width:52px;height:52px;border-radius:26px;background:#b4ff63;color:#14180f;box-shadow:0 6px 20px rgba(180,255,99,.25)}
 .mnav .mnav-go svg{width:26px;height:26px}
 /* Make room for the bar and remove the navigation it replaces. */
 body{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))!important}
 .mobile-menu,.toplinks,.sidebar,.topactions .studio-link,.topactions .user-menu-wrap,.topactions .guest-language,.topactions a[href="#login"],.topactions a[href="#register"]{display:none!important}
 .topbar{gap:10px!important}
 .topbar .search{flex:1;min-width:0}
 .wc-banner{bottom:calc(86px + env(safe-area-inset-bottom,0px))!important}
 #toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}
 .msub{display:flex;gap:4px;margin:12px 16px 4px;padding:3px;border-radius:12px;background:#1c1c23}
 .msub a{flex:1;text-align:center;padding:9px 6px;border-radius:9px;color:#a3a3b0;font-size:14px;font-weight:600;text-decoration:none}
 .msub a.on{background:#2c2c36;color:#fff}
 /* Account page: fills the screen above the tab bar, like a full page */
 .msheet{position:fixed;inset:0 0 calc(76px + max(20px,calc(env(safe-area-inset-bottom,0px) + 4px)) - 20px) 0;z-index:2147479000;display:block}
 .msheet[hidden]{display:none}
 .msheet-backdrop,.msheet-grip,.msheet-close{display:none!important}
 .msheet-panel{position:absolute;inset:0;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 18px) 16px 24px;background:#101014;box-sizing:border-box}
 .msheet-title{margin:0 4px 14px;font-size:28px;font-weight:700;color:#fff}
 html.msheet-open,html.msheet-open body{overflow:hidden}
 .msheet-menu{position:static!important;display:block!important;opacity:1!important;visibility:visible!important;transform:none!important;width:auto!important;max-height:none!important;margin:0!important;padding:4px 0 0!important;background:transparent!important;border:0!important;box-shadow:none!important;pointer-events:auto!important}
 .msheet-menu .user-dropdown-item{min-height:50px;border-radius:12px}
 .msheet-guest{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:18px 6px 6px;text-align:center}
 .msheet-guest .btn{width:100%;margin:0;min-height:48px}
 .msheet-guest p{margin:0 0 6px;color:#a9a9b5;font-size:14px;line-height:1.8}
 .msheet-logo{width:56px;height:56px;border-radius:16px;background:#b4ff63;color:#14180f;display:grid;place-items:center;font:700 28px Arial,sans-serif;margin:0 auto 6px}
 .msheet-link{color:#c9c9d4;font-size:14px;padding:10px;text-decoration:none}
}

/* Phone: one-line filter pills that scroll sideways (explore, following, ...) */
@media (max-width:760px){
 .chips{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto!important;overflow-y:hidden;margin-inline:-16px!important;padding:2px 16px 4px!important;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;mask-image:linear-gradient(to left,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);-webkit-mask-image:linear-gradient(to left,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)}
 .chips::-webkit-scrollbar{display:none}
 .chips>.chip{flex:none!important;display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;min-width:0!important;height:36px!important;min-height:36px!important;padding:0 16px!important;margin:0!important;border-radius:999px!important;white-space:nowrap!important;font-size:13.5px!important;font-weight:600!important;line-height:1!important;scroll-snap-align:start;background:#1c1c23!important;border:1px solid #2a2a33!important;color:#d4d4dd!important;box-shadow:none!important}
 .chips>.chip.active{background:#b4ff63!important;border-color:#b4ff63!important;color:#14180f!important;font-weight:800!important}

 /* Top bar: a rounded search field and a matching round bell. */
 .topbar #searchForm.search{height:42px!important;min-height:42px!important;padding:0 14px!important;gap:9px!important;border-radius:21px!important;background:#1a1a21!important;border:1px solid #2a2a33!important;box-shadow:none!important;display:flex!important;align-items:center;transition:border-color .15s ease,background .15s ease}
 .topbar #searchForm.search:focus-within{border-color:#b4ff63!important;background:#121217!important;box-shadow:0 0 0 3px rgba(180,255,99,.14)!important}
 .topbar #searchForm.search>svg{flex:none;width:19px!important;height:19px!important;color:#8e8e9c!important;position:static!important;margin:0!important;transform:none!important}
 .topbar #searchForm.search:focus-within>svg{color:#b4ff63!important}
 .topbar #topSearchInput{flex:1;min-width:0;height:100%!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;outline:none!important;font-size:16px!important;color:#fff!important}
 .topbar #topSearchInput::placeholder{color:#7d7d8a;font-size:14px}
 .topbar a.icon-button[href="#notifications"]{display:grid!important;place-items:center;flex:none;width:42px!important;height:42px!important;min-width:42px;padding:0!important;border-radius:21px!important;background:#1a1a21!important;border:1px solid #2a2a33!important;box-shadow:none!important;color:#e6e6ee!important}
 .topbar a.icon-button[href="#notifications"] svg{width:21px!important;height:21px!important}
 .topbar a.icon-button[href="#notifications"]:active{background:#24242c!important}
}